SpinnerDialog Orientation change while spinner is showing is bugged on iOS

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.

Jun 27 '14 18:06 cgraybosch

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

Nov 10 '14 08:11 bau720123

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

Nov 11 '14 12:11 Paldom

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

Nov 11 '14 13:11 bau720123

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

Nov 19 '14 02:11 bau720123

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

Nov 24 '14 15:11 cgraybosch

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.

Nov 24 '14 15:11 cgraybosch

hi @cgraybosch got it and thanks for your detail reply

Nov 24 '14 15:11 bau720123

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.

Nov 24 '14 15:11 cgraybosch

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.

Nov 24 '14 16:11 cgraybosch

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.

Nov 24 '14 16:11 cgraybosch

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 :)

Dec 04 '14 21:12 Paldom

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

Dec 10 '14 16:12 bau720123

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 :)

Dec 13 '14 22:12 Paldom

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

Dec 13 '14 23:12 bau720123

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

Dec 14 '14 00:12 Paldom

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

Dec 14 '14 03:12 bau720123

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)

Dec 14 '14 16:12 Paldom

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

Dec 14 '14 23:12 bau720123

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.

Dec 15 '14 22:12 Paldom

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

Dec 16 '14 05:12 bau720123

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!

Dec 16 '14 16:12 Paldom

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 ?

Dec 16 '14 23:12 bau720123

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.

Dec 17 '14 00:12 Paldom

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 ?

Dec 17 '14 03:12 bau720123

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

Dec 21 '14 04:12 bau720123

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="[email protected]" 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>

Dec 21 '14 14:12 Paldom

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 ?

Dec 21 '14 16:12 bau720123

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.

Dec 21 '14 22:12 Paldom

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)

Dec 22 '14 04:12 bau720123

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.

Dec 23 '14 00:12 Paldom

SpinnerDialog SpinnerDialog copied to clipboard

Orientation change while spinner is showing is bugged on iOS

SpinnerDialog
SpinnerDialog copied to clipboard