search

Paldom / SpinnerDialog

PhoneGap waiting dialog plugin with spinner for Android, iOS and Windows Phone 8.
MIT License
68 stars 70 forks source link

Orientation change while spinner is showing is bugged on iOS #7

Open cgraybosch opened 10 years ago

cgraybosch commented 10 years ago

When the spinner is showing and you change orientation on iOS the spinner stays in the same spot as if the phone was still in portrait mode.

bau720123 commented 10 years ago

I have the same issue just like @cgraybosch said... but we can use this plugin to Temporary's solve it (Locking the orientation) https://build.phonegap.com/plugins/1065

Paldom commented 10 years ago

Hi, which version do you use? It should be solved in the latest, if not I'll take a look.

bau720123 commented 10 years ago

hi @Paldom I am using PGB 3.6.3 and your latest plugin 1.2.0 https://build.phonegap.com/plugins/1252

bau720123 commented 9 years ago

hi @Paldom well...just want to ask is there anything update or ?...

cgraybosch commented 9 years ago

Yeah it's still not working. @bau720123 is the spinner off center for you whenever the device is in landscape mode? Originally I said it was when you changed orientation while the loading spinner was visible but now the phone just has to be in landscape mode and it will be off center

cgraybosch commented 9 years ago

I just took a look at the code and it looks like part of the issue for me was the change of this line: _overlay = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];

to this line: _overlay = [[UIView alloc] initWithFrame:self.rectForView];

For some reason rectForView is not getting the right height and width when the device is in landscape mode. It always puts the spinner with portrait dimensions. Changing this line back to the original at least lets the spinner be correct when it is first shown in landscape.

However...The dimensions of the spinner overlay still do not change when you start the spinner in portrait and rotate the device to landscape. The spinner overlay stays in portrait mode and the spinner is off center.

bau720123 commented 9 years ago

hi @cgraybosch got it and thanks for your detail reply

cgraybosch commented 9 years ago

Just to post more findings. I was checking out the results in the Xcode simulators.

In the iOS 8.1 simulators using this line let the loading spinner show correctly in landscape mode _overlay = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];

This line does not work correctly in the iOS 7 sims though. It shows the same problem with the spinner always showing as portrait.

In the iOS 7 sims using this line let the loading spinner show correctly _overlay = [[UIView alloc] initWithFrame:self.rectForView];

That line does not work correct in the iOS 8.1 sims.

cgraybosch commented 9 years ago

Ok I think I'm starting to figure out what is going on. Let's look at how the plugin is currently coded...We have this

-(CGRect)rectForView { if (UIInterfaceOrientationIsLandscape([UIApplication sharedApplication].statusBarOrientation)) { return CGRectMake( 0.0f, 0.0f, [[UIScreen mainScreen]bounds].size.height, [UIScreen mainScreen].bounds.size.width); } return CGRectMake( 0.0f, 0.0f, [[UIScreen mainScreen]bounds].size.width, [UIScreen mainScreen].bounds.size.height); }

and then we have a call to it here: _overlay = [[UIView alloc] initWithFrame:self.rectForView];

What is happening is that in rectForView when it detects landscape it is not getting the correct size.height and size.width in iOS 8. On my iOS 8 device and iOS 8 simulators if you reverse the height and width in rectForView it correctly shows the loading spinner when in landscape. This seems to be that when an iOS8 device is rotated the height and width rotate as well.

In IOS7 the height and width IS NOT dependent on the orientation. So using rectForView works correctly on iOS7. So what needs to happen is that in rectForView we will need to detect if the device is iOS8 and if so then don't do anything different.

cgraybosch commented 9 years ago

Ok so here you go.

Change rectForView from this: -(CGRect)rectForView { if (UIInterfaceOrientationIsLandscape([UIApplication sharedApplication].statusBarOrientation)) { return CGRectMake( 0.0f, 0.0f, [[UIScreen mainScreen]bounds].size.height, [UIScreen mainScreen].bounds.size.width); } return CGRectMake( 0.0f, 0.0f, [[UIScreen mainScreen]bounds].size.width, [UIScreen mainScreen].bounds.size.height); }

To this: -(CGRect)rectForView { if ((NSFoundationVersionNumber <= NSFoundationVersionNumber_iOS_7_1) && UIInterfaceOrientationIsLandscape([UIApplication sharedApplication].statusBarOrientation)) { return CGRectMake( 0.0f, 0.0f, [[UIScreen mainScreen]bounds].size.height, [UIScreen mainScreen].bounds.size.width); } return CGRectMake( 0.0f, 0.0f, [[UIScreen mainScreen]bounds].size.width, [UIScreen mainScreen].bounds.size.height); }

All I did was add another condition to the if statement to check to see if the device is iOS 7.1 or below. Doing this allows everything to work properly in iOS7 and iOS8 since now height and width is orientation dependent.

Paldom commented 9 years ago

Sorry for late answer, I've been busy recently. Thanks @cgraybosch for the solution, I've put iOS version check into plugin, so now it should work on iOS 8 also. I'm still working on an observer for handling orientation change while spinner is displayed. I also welcome pull reqests :)

bau720123 commented 9 years ago

hi @Paldom hope one day there have a new version in PGB too https://build.phonegap.com/plugins/1252

Paldom commented 9 years ago

Hi @bau720123, There's an error recently, PGB doesn't enable me to publish new version, even with paid license. I'm waiting to their response to solve that. So I also hope to have a PGB version update soon :)

bau720123 commented 9 years ago

hi @Paldom thanks for your reply according to this http://phonegap.com/blog/2014/12/09/phonegap-build-new-features/ PGB support "plugins.cordova.io" for now

maybe this is an another way to let you publish new version more quickly

Paldom commented 9 years ago

Hi @bau720123, thanks, good to now that, I've uploaded the latest release (1.3) there: http://plugins.cordova.io/#/package/hu.dpal.phonegap.plugins.spinnerdialog

bau720123 commented 9 years ago

hi @Paldom thanks for your reply now I use your 1.3 version by "plugins.cordova.io" but still not work...(in landscape mode have some problem，I mean the loading pix have a wrong position) (portrait mode is work done)

ipad mini 8.1.2

Paldom commented 9 years ago

Hi @bau720123, could you please give a screenshot or more details? Handling orientation change is still an issue, but fixed landscape should be fine. To hack this issue also, you can try:

window.addEventListener('orientationchange', function() {
    window.plugins.spinnerDialog.hide();
    window.plugins.spinnerDialog.show();    
});

(works on iPhone 6, iOS 8.1)

bau720123 commented 9 years ago

hi @Paldom thanks for your reply again OK，let us Regardless "orientation change" first

my code just like that

window.plugins.spinnerDialog.show('title', 'content', true);
setTimeout(function() { window.plugins.spinnerDialog.hide(); }, 10000);

when in simple "portrait" mode (it mean start at portrait)，everything seem perfect http://www.littlebau.com/20141215/01.png but... when in simple "landscape" mode (it mean start at landscape)，the "loading position" seem confusion and the mask layer seem not cover to the full webview http://www.littlebau.com/20141215/02.png

PS，another author's plugin have the same problem https://build.phonegap.com/plugins/1261

I am in iPad mini 8.1.2 and iPhone 6 Plus 8.1.2

Paldom commented 9 years ago

Hi @bau720123 , I've tried landscape mode with the following devices: iPhone 5 (8.1.2), iPad Mini 2 (8.1.2) and iPad Mini (7.0.3) but there were no layer problems, webview was completely covered :( Although I used local build.

bau720123 commented 9 years ago

hi @Paldom maybe the problem occurs in PGB ? any idea or reason will cause the problem ?

Paldom commented 9 years ago

Hi @bau720123, I'm having troubles with config.xml for new apps at PGB. Could you try to add this plugin to a new PGB app, please? Thanks!

bau720123 commented 9 years ago

hi @Paldom I don't know what your true meaning this plugin is already in... https://build.phonegap.com/plugins/1252 http://plugins.cordova.io/#/package/hu.dpal.phonegap.plugins.spinnerdialog

so... you want me to add this plugin to a new PGB app ?

Paldom commented 9 years ago

Hi @bau720123, sorry I wasn't really precise. I found that if I define the latest version of this plugin (with <gap:plugin name="hu.dpal.phonegap.plugins.spinnerdialog" source="plugins.cordova.io" />) in a PGB app that have been already created, and if the app doesn't have the latest PGB version (3.6.3) and folder structure, it won't recognize config.xml. Therefore plugin won't be the latest (PGB will use the version from the latest valid configuration). If I create a new PGB app with latest PhoneGap version and folder structure, this plugins works fine for me in PGB also.

bau720123 commented 9 years ago

hi @Paldom could you give me your PG's config.xml because I use PGB 3.6.3 with "plugins.cordova.io" 1.3.0 for now

but it will still occur this problem http://www.littlebau.com/20141215/02.png

this is my config.xml setting

<gap:platform name="ios" />
<gap:platform name="android" />
<gap:platform name="winphone" />

<preference name="phonegap-version" value="3.6.3" />

//all use latest core plugin
<gap:plugin name="org.apache.cordova.battery-status" version="0.2.12" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.camera" version="0.3.4" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.console" version="0.2.12" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.contacts" version="0.2.15" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.device" version="0.2.13" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.device-motion" version="0.2.11" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.device-orientation" version="0.3.10" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.dialogs" version="0.2.11" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.file" version="1.3.2" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.file-transfer" version="0.4.8" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.geolocation" version="0.3.11" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.globalization" version="0.3.3" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.5.4" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.media" version="0.2.15" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.media-capture" version="0.3.5" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.14" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.splashscreen" version="0.3.5" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.statusbar" version="0.1.9" source="plugins.cordova.io" />
<gap:plugin name="org.apache.cordova.vibration" version="0.3.12" source="plugins.cordova.io" />

//your plugin in plugins.cordova.io
<gap:plugin name="hu.dpal.phonegap.plugins.spinnerdialog" version="1.3.0" source="plugins.cordova.io" />

could you give me some suggestion ?

bau720123 commented 9 years ago

hi @Paldom could you try in PGB mode but not just local build because of in PGB mode really have this problem http://www.littlebau.com/20141215/02.png and I found that in PGB mode no mater portrait or landscape mode at the moment，it will always display in the "protrait" mode

if you really work in PGB please give me your config.xml thanks

Paldom commented 9 years ago

Hi @bau720123, this is a config.xml file from a working example app (created with phonegap 4.1.2-0.22.10, built remotely):

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.test" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>ExampleApp</name>
    <description>
        Hello World sample application that responds to the deviceready event.
    </description>
    <author email="support@phonegap.com" href="http://phonegap.com">
        PhoneGap Team
    </author>
    <content src="index.html" />
    <preference name="permissions" value="none" />
    <preference name="phonegap-version" value="3.5.0" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="7" />
    <preference name="android-installLocation" value="auto" />
    <gap:plugin name="org.apache.cordova.battery-status" />
    <gap:plugin name="org.apache.cordova.camera" />
    <gap:plugin name="org.apache.cordova.media-capture" />
    <gap:plugin name="org.apache.cordova.console" />
    <gap:plugin name="org.apache.cordova.contacts" />
    <gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="org.apache.cordova.device-motion" />
    <gap:plugin name="org.apache.cordova.device-orientation" />
    <gap:plugin name="org.apache.cordova.dialogs" />
    <gap:plugin name="org.apache.cordova.file" />
    <gap:plugin name="org.apache.cordova.file-transfer" />
    <gap:plugin name="org.apache.cordova.geolocation" />
    <gap:plugin name="org.apache.cordova.globalization" />
    <gap:plugin name="org.apache.cordova.inappbrowser" />
    <gap:plugin name="org.apache.cordova.media" />
    <gap:plugin name="org.apache.cordova.network-information" />
    <gap:plugin name="org.apache.cordova.splashscreen" />
    <gap:plugin name="org.apache.cordova.vibration" />

    <gap:plugin name="hu.dpal.phonegap.plugins.spinnerdialog" source="plugins.cordova.io" />

    <icon src="icon.png" />
    <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
    <icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
    <icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
    <icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
    <icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" />
    <icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" />
    <icon gap:platform="ios" height="57" src="www/res/icon/ios/icon-57.png" width="57" />
    <icon gap:platform="ios" height="72" src="www/res/icon/ios/icon-72.png" width="72" />
    <icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" />
    <icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" />
    <icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" />
    <icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" />
    <icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" />
    <gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />
    <gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" />
    <access origin="*" />
</widget>
bau720123 commented 9 years ago

hi @Paldom you say that you created with phonegap 4.1.2-0.22.10 but your config.xml's phonegap-version is 3.5.0，so...

whatever，I use your fully config.xml with my PGB and rebuild (build.phonegap.com) but still have this problem http://www.littlebau.com/20141215/02.png

are you really build in PGB ?

Paldom commented 9 years ago

Hi @bau720123, 4.1.2-0.22.10 is the local PhoneGap CLI's version, which I used to create new project. I used this config.xml in PhoneGap Build, and it works correctly.

bau720123 commented 9 years ago

hi @Paldom still not work in ipad mini 8.1.2 and iphone 6 plus 8.1.2，this is the sample project that use your config.xml http://www.littlebau.com/20141215/02.png www.littlebau.com/thetest.zip you can use the zip to test...(please starting in landscape，and click the "test" link to test)

Paldom commented 9 years ago

Hi @bau720123, there should be something messy around PGB, with this thetest.zip it doesn't work for me, neither. I'll submit to PGB then, there are no other solutions I think.

bau720123 commented 9 years ago

hi @Paldom thanks for your reply again I am a little confuse so you mean is you will submit a new version to PGB ??

what a problem why my ios device in landscape mode that still use a portrait mode display is it a PGB problem ? if yes，how to explain or point about this to PGB team ? http://www.littlebau.com/20141215/02.png

Paldom commented 9 years ago

hi @bau720123, sorry for being away. I hope new version will be approved soon. The problem is that PGB doesn't use the latest version of the plugin if it has previous versions on PGB but the latest version's source is on plugins.cordova.io.

bau720123 commented 9 years ago

hi @Paldom so you mean is... although I install this plugin already from plugins.cordova.io but because that I build from PGB (build.phonegap.com) so...still have some problem about I met http://www.littlebau.com/20141215/02.png

if I build by "local build" maybe no problem，right ?

Paldom commented 9 years ago

hi @bau720123, right, local build should definitely solve that.

bau720123 commented 9 years ago

hi @Paldom so...could you told me what the problem with PGB ? (any reason ?) maybe we can suggest the PGB team to solve it ? because of it seem not your plugin problem anymore ~ (because of we have already use your latest plugin from plugins.cordova.io)

tomgorton commented 9 years ago

Hi @Paldom, Thank you for providing us with your plugin. I have been using the spinner dialog for android and iOS and have had a lot of success. The plugin has been very useful and very easy to implement.

We have tested with spinner dialog 1.3.1 on iOS 8.1.3 built with PGB 3.6.3 adding the plugin using plugins.cordova.io. I am seeing the issue with the dialog being displayed in portrait whilst the device orientation is landscape.

I have looked into the source code and would like to know if the (CGRect) rectForView function is what is causing the issue. Can you test whether the the fix you have put in for iOS 7 will work for iOS 8.1.3?

-(CGRect)rectForView {
    if ((NSFoundationVersionNumber <= 1047.25 /* 7.1 */) && UIInterfaceOrientationIsLandscape([UIApplication sharedApplication].statusBarOrientation)) {
        return CGRectMake( 0.0f, 0.0f, [[UIScreen mainScreen]bounds].size.height, [UIScreen mainScreen].bounds.size.width);
    }
    return CGRectMake( 0.0f, 0.0f, [[UIScreen mainScreen]bounds].size.width, [UIScreen mainScreen].bounds.size.height);
}
bau720123 commented 9 years ago

hi @Paldom and @tomgorton what I mean is as same as @tomgorton for now it only show "portrait mode" http://www.littlebau.com/20141215/02.png

bau720123 commented 9 years ago

hi @Paldom any update or ? ...

bau720123 commented 9 years ago

hi @Paldom anything update ?

bau720123 commented 9 years ago

hi @Paldom @tomgorton @cgraybosch this plugin (forked by @Paldom ) https://build.phonegap.com/plugins/2694

solved my problem Temporary (when only in portrait or landscape mode，it will appear normal)

but the "Orientation change while spinner is showing" still not solved yet see it's "rectForView" block https://github.com/javierClavei/SpinnerDialog/blob/f6f475c1ab0a455e0118041eb5be6ca42cc99cbb/src/ios/CDVSpinnerDialog.m

differ from yours https://github.com/Paldom/SpinnerDialog/blob/master/src/ios/CDVSpinnerDialog.m

Heshyo commented 9 years ago

@bau720123 Thanks I'm now using https://build.phonegap.com/plugins/2694 and it does work when the app is in landscape mode (my app is fixed landscape on iPad and portrait on iPhone).

bau720123 commented 9 years ago

OK @Heshyo

bau720123 commented 8 years ago

hi @Paldom for now I am using Cordova-iOS 4.1.0 + iOS 9.2.1 + your version 1.3.1 from npm but still occur the problem only portrait mode => good to work only landscape mode => good to work when portrait become landscape or landscape become portrait => the spinner Dialog will deformed

Tyler-V commented 7 years ago

I can second @bau720123's statement, appears that the spinner dialogue is not updating its background and positioning on screen orientation change.