I'm trying to implement font scaling in Steroids+Angular1.3.15 (AppGyver) hybrid app. I decided to use $localStorage to store current font size. It all works great on android devices but not on iOS.. Actually in iOS it works for the newly opened WebViews but not the ones that are already displayed.
Links for font scaling:
<a class="font-size font-small" data-remote="true" ng-class="{current: fontSize == 'rem-base-small'}" ng-click="setFontSize('rem-base-small')">A</a>
<a class="font-size font-medium" data-remote="true" ng-class="{current: fontSize == 'rem-base-medium'}" ng-click="setFontSize('rem-base-medium')">A</a>
<a class="font-size font-large" data-remote="true" ng-class="{current: fontSize == 'rem-base-large'}" ng-click="setFontSize('rem-base-large')">A</a>
and in my controller:
$scope.fontSize = $localStorage.fontSize || 'rem-base-medium'
$scope.setFontSize = function(size) {
$localStorage.fontSize = size
$scope.fontSize = size
}
I use myfontsize directive on <html> tag to update UI. My directive looks like so:
var sharedStuff = angular.module('sharedStuff', ['ngStorage'])
sharedStuff.directive('myfontsize', function($localStorage) {
function link(scope, element, attrs) {
var format,
timeoutId;
function updateClass() {
element.removeClass('rem-base-large')
element.removeClass('rem-base-medium')
element.removeClass('rem-base-small')
$localStorage.fontSize = $localStorage.fontSize || "rem-base-medium"
element.addClass($localStorage.fontSize)
}
scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateClass();
});
element.on('$destroy', function() {
clearInterval(timeoutId);
});
// start the UI update process; save the timeoutId for canceling
timeoutId = setInterval(function() {
updateClass(); // update DOM
}, 1000);
}
return {
link: link
};
})
If somebody could shed some light on why it works on android but it doesn't on iOS, I would be much obliged. Alternatively if you have better solution to achieve my goal and don't mind sharing, please do :)
Related
I have an IONIC 5 + capacitor + Angular 9 APP which does load an array of images from the server. It does load the image one by one. Each image component calls a document service which returns the Blob downloaded from the server:
this.documentService.download(fileDocumentDownloadRequest)
.subscribe((r: Blob) => {
if (r) {
const reader = new FileReader();
reader.onloadend = () => {
this.loading = false;
this.imageSrc = reader.result;
};
reader.readAsDataURL(r);
} else {
this.loading = false;
}
},
async e => {
console.log('Error loading image', e);
},
() => {
this.loading = false;
});
All works fine however if I have 2 images (the HTML displays the images in a 2-col grid display) it does not work as in the images get downloaded however they don't get rendered.
If I have multiple images, let's say 8, they get rendered except the last one. I played around in the UI and as soon as I click somewhere the last image gets rendered. What I did then was adding the changeDetectorRef.detectChanges() call inside the onloadend event. That works but I'm sure that's not the way of doing it.
The HTML I have for this:
<div class="w-100 h-125px"
(click)="imageSelected = !imageSelected; showImageActions()"
[ngClass]="{'border-yellow': imageSelected}">
<div class="position-absolute w-100 h-100 background-light-gray"></div>
<ion-img *ngIf="!loading && imageSrc"
[src]="imageSrc"
class="position-relative z-index-plus-1 w-100 h-100 object-fit-cover">
</ion-img>
<ng-container *ngIf="loading">
<div class="position-absolute content-centered-middle">
<ion-spinner></ion-spinner>
</div>
</ng-container>
</div>
I have tried both the onload event as well as the onloadend event. With both I get the exact same result.
By the way, I could not use the standard new FileReader() constructor to get the file reader to work on the Android device. Reading various posts I found a solution that worked:
private getFileReader(): FileReader {
const fileReader = new FileReader();
const zoneOriginalInstance = (fileReader as any)['__zone_symbol__originalInstance'];
return zoneOriginalInstance || fileReader;
}
So my question is whether this is an actual bug on IONIC or the file reader events should be handled differently - I'm fairly new in mobile development and would like to understand why this is happening.
Many thanks!
If a user visits my websites example, from Safari Mobile how could I place there a blank page that says "Add To Homescreen."? Once added it would show different content.
You'll want to check two things. First, is it running on an iOS device? Second, is window.navigator.standalone == true?
window.navigator.standalone is primarily used by Webkit browsers to indicate the app is in fullscreen (or standalone) mode. Plenty of devices (like phones running Android), support this property, but don't have the option to 'Add to Homescreen' like iOS devices do, so you need to check both.
Demo:
Javascript:
function isIOS() {
var userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
};
function isStandalone() {
return ( isIOS() && window.navigator.standalone );
};
window.onload = function () {
if( isStandalone() || !isIOS() ) { //either ios+standalone or not ios
//start app
} else {
//display add to homescreen page
};
};
Check window.navigator.standalone.
Slight slight different code, based on #ThinkingStiff solution, and this other question on this Post, to support IOS7 detection to provide CSS interface to add more padding-top in case of transparent app title.
isIOS7 = function() {
return navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
};
isStandaloneAndIOS7 = function() {
return isIOS7() && window.navigator.standalone;
};
if (isStandaloneAndIOS7()) {
body = document.getElementsByTagName("body")[0];
body.className = body.className + " standalone";
}
My app has a static header. Meaning it remains the same in all views.
The problem is that when I use the <ion-nav-bar> directive the header is animated every time the view changes.
On IOS it's not that bad because the entire is sliding in, but on Android it looks like it flickers.
How can I disable the animation entirely?
I already tried using $ionicConfigProvider.navBar.transition('none'); in the app.config section, but it actually made it worse (also flickers on IOS).
I created a simple codepen (the default transition appears to that of IOS, but if you open the developer console on chrome and change to an android device you can see the flickering).
if you really no idea to how solve this.
you can modify the transition function
First, in app.config section
$ionicConfigProvider.navBar.transition('android');
then, modify ionic transition function
$ionicConfigProvider.transitions.navBar.android = function(enteringHeaderBar, leavingHeaderBar, direction, shouldAnimate) {
function setStyles(ctrl, opacity) {
if (!ctrl) return;
var css = {};
// ionic original
// css.opacity = opacity === 1 ? '' : opacity;
// modify
if (opacity === 1) {
css.opacity = '';
css.display = '';
} else {
css.opacity = opacity;
css.display = 'none'; // let leavingHeaderBar immediately disappear
}
ctrl.setCss('buttons-left', css);
ctrl.setCss('buttons-right', css);
ctrl.setCss('back-button', css);
ctrl.setCss('back-text', css);
ctrl.setCss('title', css);
}
return {
run: function(step) {
setStyles(enteringHeaderBar.controller(), step);
setStyles(leavingHeaderBar && leavingHeaderBar.controller(), 1 - step);
},
shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};
};
If you are using Ionic 2 or higher, use the following CSS only:
.toolbar{
.title, button{
opacity: 1!important;
transform: none!important;
}
}
This is weird. I tried to pick up an image to preview it in a div using the HTML5 FileReader.readAsDataURL() function and a inline-image. This works fine on most browsers incl. iPhone's Safari.
But if I'm using the standard Android browser on a Samsung Nexus AND pick a photo which is stored on the phone I alwas get a width of 10810px and a height of 4286px regardless of which size the source image has, when I use a picture directly by taking a new photo it works. I get the correct sizes. :# I tried naturalWitdh, width, using jQUery and native javascript. All with same results
$('#file-input').change(function () {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = this.files ? this.files : this.currentTarget.files;
if (files && files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#picture')
.attr('src', e.target.result).attr('style', '')
.load(function () {
console.log('w:' + $(this).width());
});
};
reader.readAsDataURL(files[0]);
}
} else {
alert('an error message');
}
});
Have you tried hooking chrome up to your computer's chrome to see if the image and or divs are doing anything funky?
I had the same problem and found a solution for android (browser) 4.0 and up.
I found that it works correctly if you use the createObjectURL function to do something like the following:
function getImgSize(input) {
if (input.files && input.files[0]) {
var apiURL = (window.createObjectURL && window)
|| (window.URL && URL.revokeObjectURL && URL)
|| (window.webkitURL && webkitURL);
var url = apiURL.createObjectURL(input.files[0]);
$('#testImg').attr('src', url);
}
}
$('#testImg').on('load',function(){
alert($(this).width()+'*'+$(this).height());
});
$("input").change(function(){
getImgSize(this);
});
See http://jsfiddle.net/bravoman/qm2C5/5/ for a full example and use http://jsfiddle.net/bravoman/qm2C5/5/embedded/result/ to test it on your device/emulator.
I've created one App using Phonegap and HTML5 (jqueryMobile). I've put rotate3D for one div,
it is working fine in google chrome and Safari, but it is not working in Android 2.3+
Any suggestion?
I think It is a bug of android browser. I make a function to test if rotate3d is supported and it says Yes:
function styleSupport( prop )
{
var vendorProp;
var supportedProp;
// capitalize first character of the prop to test vendor prefix
var capProp = prop.charAt(0).toUpperCase() + prop.slice(1);
var prefixes = [ "Moz", "Webkit", "O", "ms" ];
var div = document.createElement( "div" );
if ( prop in div.style )
{
//browser supports standard CSS property name
supportedProp = prop;
}
else
{
//otherwise test support for vendor-prefixed property names
for ( var i = 0; i < prefixes.length; i++ )
{
vendorProp = prefixes[i] + capProp;
if ( vendorProp in div.style )
{
supportedProp = vendorProp;
break;
}
}
}
// avoid memory leak in IE
div = null;
return supportedProp;
}
alert(styleSupport('perspective'));
alert(styleSupport('transform'));
As you can see her, CSS transforms3D are not supported by Android 2.3 :
http://caniuse.com/#feat=transforms3d
try to upgrade to Android 4 (it works for me)