I am using cordova plugin to handle orientation. I want to change to a different view if orientation changes. So I try to define a variable in $scope and do related changes on UI. here is my code
window.addEventListener("orientationchange", function() {
$scope.orientation = screen.orientation;
});
this code snippet I referred from cordova plugin orientation homepage. but the UI doesn't have any change when orientation changes. I even got $scope.orientation undefined(I tested by ng-show)
How did this happen? Thanks for any help.
Use $apply().
angular.element($window).on("orientationchange", function() {
$scope.orientation = screen.orientation;
$scope.$apply();
});
This lets the AngularJS framework know a change has occurred.
Related
How does requestFullscreen in Dart works? I want enable Fullscreen-mode on mobile devices.
I wrote following Code. But it changes nothing.
querySelector(".btn").onTouchEnd.listen((l) {
var body = document.body;
body.requestFullscreen();
});
But it didn't worked.I'm becomming on click always same error document.body.requestFullscreen is not a function
Seems to be something like https://api.dartlang.org/stable/1.24.3/dart-html/VideoElement/enterFullscreen.html, so you need to call it on your video element.
Edit: Oh, yes, there's also https://api.dartlang.org/stable/1.24.3/dart-html/Element/requestFullscreen.html -- that might be the one you want.
Edit2: Apparently, this has already been asked and answered, and needs a workaround: How to request fullscreen in compiled dart
I added the plugin to my app like so: cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
Here's my code in my controller:
$scope.OtherShare = function(){
window.plugins.socialsharing.share('myTitle',null,null,'sometingIShareHEre');
}
My code works well on my android device. But in iOS it only works after I exit the app then goes back to it. I tried adding $ionicPlatform.ready before/after button click but it didn't changed a thing? What am I missing?
This is strange, I am guessing this would be a device.ready issue. Try wrapping up your code in the device ready callback like
$scope.OtherShare = function(){
document.addEventListener("deviceready", function(){
window.plugins.socialsharing.share('myTitle',null,null,'sometingIShareHEre');
}, false);
}
In Ionic
$scope.OtherShare = function(){
ionic.Platform.ready(function(){
window.plugins.socialsharing.share('myTitle',null,null,'sometingIShareHEre');
});
}
Hope it helps
I need to catch sound volume button press inside my react-native application. Couldn't find anything in docs.
You can use react-native-system-setting package with addVolumeListener listener. Something like this
componentDidMount() {
// listen the volume changing
this.volumeListener = SystemSetting.addVolumeListener(data => {
// your action here
});
}
You could create a native module as per FuzzyTree's comment however if you want something that's ready out of the box you could use https://github.com/IFours/react-native-volume-slider and make it hidden. The onValueChange callback is called upon the iOS device volume controls being changed.
Another idea could be to look into the aforementioned module and just take out what you need to form a new module and publish it for the benefit of everyone.
I am developing app using cordova 5.4.1, Also I am using latest InAppBrowser plugin. Below are the steps to reproduce the issue.
Open the URL in InAppBrowser
Change the app orientation from portrait to landscape
Press done button of InAppBrowser and check the app in landscape mode only, you will get some blank portion
I am using iOS 9.2.1
Please let me know if some one has faced same issue and got fixed.
Thank you in advance.
I know it's a bit late but I wanted to share how I fixed this in case you or anyone else is having this issue.
As noted in the issue mentioned in jcesarmobile's comment, it appears that cordova-plugin-statusbar & cordova-plugin-inappbrowser don't play nice together. The ticket status says resolved, although I'm still having this problem. To fix it you can either delete the plugin, or, if you need the plugin then you can add an event listener to hide then show it again on exit:
openUrl(url) {
let ref = cordova.InAppBrowser.open(url, '_blank', options);
ref.addEventListener('exit', () => {
StatusBar.hide();
StatusBar.show();
})
}
StatusBar.hide() is what fixes the issue.
EDIT: As noted by René in the comments of this similar issue, a blank column exists in iPad with the fix noted above. In order to completely fix the issue in both iPhone and iPad without having to remove the plugin, wrap the StatusBar.show() call inside a setTimeout of a second:
openUrl(url) {
let ref = cordova.InAppBrowser.open(url, '_blank', options);
ref.addEventListener('exit', () => {
StatusBar.hide();
setTimeout( () => {
StatusBar.show();
}, 1000)
})
}
I have started developing html applications for mutliple platforms. I recently heard about Cordova 2.0(PhoneGap) and ever since I have been curious to know how the bridge works.
After lot of code walking, i saw that the Exec.js is the code where call from JS -> Native happens
execXhr = execXhr || new XMLHttpRequest();
// Changeing this to a GET will make the XHR reach the URIProtocol on 4.2.
// For some reason it still doesn't work though...
execXhr.open('HEAD', "file:///!gap_exec", true);
execXhr.setRequestHeader('vc', cordova.iOSVCAddr);
if (shouldBundleCommandJson()) {
execXhr.setRequestHeader('cmds', nativecomm());
}
execXhr.send(null);
} else {
execIframe = execIframe || createExecIframe();
execIframe.src = "gap://ready";
But want to understand how that works, what is the concept here, what does file:///!gap_exec or gap://ready do? and how does the call propgate to the lower layers (native code layers)
thanks a bunch in advance.
The trick is easy:
There is a webview. This displays your app. The webview will handle all navigation events.
If the browser navigates to:
file:///!gap_exec
or
gap://
the webview will cancel the navigation. Everything behind these strings is re-used as an identifier, to get the concrete plugin/plugin-method and parameter:
pseudo-url example:
gap://echoplugin/echothistext?Hello World
This will cause phonegap to look for an echoplugin and call the echothistext method to send the text "Hello World" to the (native) plugin.
update
The way back from native to javascript is (or may be) loading a javascript: url into the webview.
The concrete implementation is a little bit more complex, because the javascript has to send a callback-id to native code. There could be more than one native call are running at the same time. But in fact this is no magic at all. Just a number to get the correct JSON to the right javascript-callback.
There are different ways to communicate between the platform and javascript. For Android there are three or four different bridges.
I am trying to figure this out in more detail, too. Basically there are 2 Methods on the iOS side that can help ...
- webView:shouldStartLoadWithRequest:navigationType: and
- stringByEvaluatingJavaScriptFromString:script
From the sources it seems cordova sends a "READY" message using webView:shouldStartLoadWithRequest:... and then picks up results with the second message, but I am not sure.
Cordova Sources iOSExec
There is much to learn there.