One problem that I have is that when I navigate to a page containing a form on android the keyboard pops up automatically. I found a solution for it but it only works on Android:
import { View } from "tns-core-modules/ui/core/view";
export class AutoFocusView extends View {
createNativeView() {
if (typeof android !== "undefined") {
const linearLayout = new android.widget.LinearLayout(this._context);
linearLayout.setFocusableInTouchMode(true);
linearLayout.setFocusable(true);
return linearLayout;
}
return super.createNativeView();
}
onLoaded() {
super.onLoaded();
this.requestFocus();
}
requestFocus() {
const nativeViewProtected = this.nativeViewProtected;
nativeViewProtected.requestFocus();
}
}
I use this component. but it only works on android so I need to comment it from my code everytime I want to build for IOS. I was wondering if there was an easier way.
You could do like this:
import {isAndroid, isIOS} from '#nativescript/core';
then in your computed:
isandroid() {
return isAndroid;
}
then use this flag in any method you need:
if(isAndroid) {
this.requestFocus();
}
You also can use this isAndroid flag in your template if need be with v-if.
Just call requestFocus() only if platform is Android.
onLoaded() {
super.onLoaded();
if (typeof android !== "undefined") {
this.requestFocus();
}
}
You may also write it as a plugin within project, separate code for iOS and Android in platform specific file.
Related
i have a problem in my app. (i'm using Ionic v1)
I want to hide the back button if the platform is Android, but if is iOS i want to show it.
I have the following code:
.config(function($ionicConfigProvider, $urlRouterProvider) {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/login');
if (ionic.Platform.isAndroid()) {
$ionicConfigProvider.tabs.style("tabs-icon-top tabs-striped");
$ionicConfigProvider.tabs.position("top");
$ionicConfigProvider.navBar.alignTitle("center");
}
else if (ionic.Platform.isIOS()) {
$ionicConfigProvider.backButton.text('').icon('ion-arrow-left-c');
$ionicConfigProvider.tabs.style("tabs-icon-top tabs-striped");
$ionicConfigProvider.tabs.position("top");
$ionicConfigProvider.navBar.alignTitle("center");
}
});
Thank you!
Put your code inside $ionicPlatform.ready method:
$ionicPlatform.ready(function(){
if (ionic.Platform.isAndroid()) {
$ionicConfigProvider.tabs.style("tabs-icon-top tabs-striped");
$ionicConfigProvider.tabs.position("top");
$ionicConfigProvider.navBar.alignTitle("center");
}
else if (ionic.Platform.isIOS()) {
$ionicConfigProvider.backButton.text('').icon('ion-arrow-left-c');
$ionicConfigProvider.tabs.style("tabs-icon-top tabs-striped");
$ionicConfigProvider.tabs.position("top");
$ionicConfigProvider.navBar.alignTitle("center");
}
});
I am developing an Android app using Cordova and Ionic framework. I am playing a YouTube video with InAppBrowser using the code below:
window.open('https://www.youtube.com/embed/rAiw2SXPS-4', '_self');
But when I press the home button on the device while playing the video, the video is not paused. Due to this issue, my app is rejected after submitting to Google Play with the reason below:
Your submission has been rejected for enabling background playing of YouTube videos in violation of the YouTube API Terms of Service. If this submission was an update to an existing app, the version published prior to this update is still available in Google Play. Please modify your app and resubmit. Additional details have been sent to your account owner's email address.
I searched for a solution but have no luck. Can anybody help?
I was also struggling to find complete solution to pause(not stop) ongoing video(s) when device locks, but with no success. Eventually I found solution myself by combining several parts together.
Here is the directive that accomplishes YouTube player pause on device lock:
import { Directive, ElementRef, OnInit } from '#angular/core'
import { Platform } from 'ionic-angular'
import * as _ from 'lodash-es'
/* tslint:disable */
(function (apiInit) {
let _registerYouTubeAPIIfNotAlready = function () {
if (!window[ 'onYouTubeIframeAPIReady' ]) {
window[ 'onYouTubeIframeAPIReady' ] = function () {
apiInit.youTubeApiRegistered = true
if ((typeof apiInit.callback !== "undefined") && _.isFunction(apiInit.callback)) {
apiInit.callback()
}
}
} else {
console.error("trying to register YouTube API when it's already registered")
}
}
apiInit.setupYouTubeApiOrDefault = function (callback) {
if ((typeof callback === "undefined") || !_.isFunction(callback)) {
_registerYouTubeAPIIfNotAlready()
return
}
if(apiInit.youTubeApiRegistered){
callback()
return;
}
apiInit.callback = callback
_registerYouTubeAPIIfNotAlready()
}
}(window[ 'youTubeApiInit' ] = window[ 'youTubeApiInit' ] || {}))
#Directive({
selector: "[preventYoutubePlayOnBackground]",
})
export class PreventYouTubePlayOnBackgroundDirective implements OnInit {
public static youTubeIframeAPI = 'https://www.youtube.com/iframe_api'
public static injectYouTubeIframeApi(): void {
let youTubeCheckQuery = "script[src*='" + PreventYouTubePlayOnBackgroundDirective.youTubeIframeAPI + "']"
if (!document.querySelector(youTubeCheckQuery)) {
// from YouTube API documentation
let tag = document.createElement('script')
tag.src = PreventYouTubePlayOnBackgroundDirective.youTubeIframeAPI
let firstScriptTag = document.getElementsByTagName('script')[ 0 ]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
}
}
public iframeId: string
private youTubeIframeElm: any
constructor(
public elm: ElementRef,
private platform: Platform,) {
this.youTubeIframeElm = elm.nativeElement
this.iframeId = this.youTubeIframeElm.getAttribute('id')
}
ngOnInit(): void {
this.platform.ready().then(() => {
PreventYouTubePlayOnBackgroundDirective.injectYouTubeIframeApi()
window[ 'youTubeApiInit' ].setupYouTubeApiOrDefault(() => {
this.setYouTubeApi()
this.platform.pause.subscribe(() => {
let player = new window[ 'YT' ].Player(this.iframeId) // TODO: add youtube API node module
player.a.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*')
})
})
})
}
private setYouTubeApi(): void {
let url = new URL(this.youTubeIframeElm.src)
if (!url.searchParams.get("enablejsapi")) { // enabling youTube js api to be able to create player
let prefix = (this.youTubeIframeElm.src.indexOf("?") === -1) ? "?" : "&"
this.youTubeIframeElm.src += prefix + "enablejsapi=true"
}
}
}
HTML for embedded YouTube player will be:
<iframe id="onboarding-video"
width="400"
height="300"
[src]="videoUrl"
frameborder="0"
allowfullscreen
preventYoutubePlayOnBackground
iframe-id="onboarding-video">
</iframe>
Note: above code is for ionic 2+, however for ionic 1 you can use:
(function() {
// same kind of logic here as written in above constructor body
$ionicPlatform.on('pause', function(event) {
// pausing player here
});
}())
Also you will need to create Angular 1 style directive instead of TypeScript one written above.
With $ionicPlatform you can use "on" method:
$ionicPlatform.on('pause', function(event) {
// pause video here
});
It is based on Cordova pause event:
document.addEventListener("pause", onPause, false);
function onPause() {
// Handle the pause event
}
See ionic documentation here and cordova documentation here.
You need to set shouldPauseOnSuspend=yes within the options when calling the open method for the inappbrowser. See the documentation here: https://github.com/apache/cordova-plugin-inappbrowser.
Something like this will work:
window.open('http://google.com','_blank', 'shouldPauseOnSuspend=yes');
Does anyone have a working example of using proprietary properties like "ontouchend", and "gestureend" in TypeScript?
I've tried using something like this below:
//Create an alert.
function TouchedScreen(username: string): void {
alert(username + " has touched the screen.");
}
//Touch anywhere on screen for an alert on iOS/Android
window.ontouchend = () => {
TouchedScreen("[username]");
};
I'm assuming this is due to ontouchend being a proprietary property, using addEventListener compiles correctly but I wan't to use it with a property, how can I do this in TypeScript?
Just tell typescript that these properties exist on Window:
interface Window{
ontouchend: Function;
}
//Touch anywhere on screen for an alert on iOS/Android
window.ontouchend = () => { // compiles fine
};
If you want the same event on all HTMLElements just tell TypeScript about that too:
interface HTMLElement {
ontouchend: Function;
}
var a: HTMLAnchorElement;
a.ontouchend = () => { // compiles fine
};
I'm working on making an Android app using Phonegap and AngularJS. I'm attempting to create a button to be used as both a "cancel" and a "back" button, that will essentially just hit the browser's 'back' button.
Here's some sample HTML for the cancel button:
cancel
And here is the controller for that page, with the goBack() button:
function NewOccasionCtrl($scope, $window) {
$scope.$window = $window;
$scope.goBack = function() {
$window.history.back();
};
}
This throws no errors, but also doesn't work... the emulator remains on the same page. Without the $scope.$window = $window it throws an error. I was hoping to achieve a functional 'back' button without having to create/use a directive, because as far as I understand those then implement templating and things I don't need/want.
Is there a way to do this? Thanks
I went with using a Directive to make the back functionality reusable. Here is my final code:
HTML:
<a href back-button>back</a>
Javascript:
app.directive('backButton', function(){
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', goBack);
function goBack() {
history.back();
scope.$apply();
}
}
}
});
I had an issue like this using phonegap and angular, $window.history.back() would not work. So I created a workaround.
$scope.urlHistory = [];
$scope.$on('$routeChangeSuccess', function () {
if ($location.$$absUrl.split('#')[1] !== $scope.urlHistory[$scope.urlHistory.length - 1]) {
$scope.urlHistory.push($location.$$absUrl.split('#')[1]);
}
});
$scope.goBack = function () {
$scope.urlHistory.pop();
$location.path($scope.urlHistory[$scope.urlHistory.length - 1]);
};
Hope this help someone else.
I'm building a mobile AIR app (Android & IOS) with Adobe Flash Builder 4.6 and I'm having this annoying problem.
Because I want to 'catch' the back-key on Android devices I added the following code to my main class:
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
private function keyDown(k:KeyboardEvent):void {
if(k.keyCode == Keyboard.BACK) {
backClicked(); // function handling the back-action, not important
k.preventDefault();
}
Now somewhere else - nested in some classes - I've got a textfield:
TF = new TextField();
TF.type = TextFieldType.INPUT;
But when I set focus on the textfield the soft keyboard does appear, but I can't type a single character. When I disable the keylistener: no problem.
Seems like the listener is overriding my input field. Is there any workaround on this?
I have also implemented the back button functionality for my mobile apps , but i used to register keydown event only when my particular view is activated and removed the registered when view get deactivated.
in <s:view ....... viewActivate ="enableHardwareKeyListeners(event)" viewDeactivate="destroyHardwareKeyListeners(event)">
// add listener only for android device
if (Check for android device) {
NativeApplication.nativeApplication.addEventListener(KeyboardEvent.KEY_DOWN, handleHardwareKeysDown, false, 0);
NativeApplication.nativeApplication.addEventListener(KeyboardEvent.KEY_UP, handleHardwareKeysUp, false, 0);
this.setFocus();
}
private function destroyHardwareKeyListeners(event:ViewNavigatorEvent):void
{
if (NativeApplication.nativeApplication.hasEventListener(KeyboardEvent.KEY_DOWN))
NativeApplication.nativeApplication.removeEventListener(KeyboardEvent.KEY_DOWN, handleHardwareKeysDown);
if (NativeApplication.nativeApplication.hasEventListener(KeyboardEvent.KEY_UP))
NativeApplication.nativeApplication.removeEventListener(KeyboardEvent.KEY_UP, handleHardwareKeysUp);
}
private function handleHardwareKeysDown(e:KeyboardEvent):void
{
if (e.keyCode == Keyboard.BACK) {
e.preventDefault();
// your code
} else {
}
}
private function handleHardwareKeysUp(e:KeyboardEvent):void
{
if (e.keyCode == Keyboard.BACK)
e.preventDefault();
}
May this can help you.