I have been stucked in this for a while. It is confirm that this.progressBarValue is changed to true. But the progress bar is not displaying. Can someone help me with this thanks in advance.
some-component.html
<div class="progressBar">
<mat-progress-bar class="fileProgress" mode="indeterminate" *ngIf="progressBarValue">
</mat-progress-bar>
</div>
some-component.ts
confirmConversion() {
this.progressBarValue = true;
console.log(this.progressBarValue)
var filepath = this.filePath;
var fileextension = this.settingsExtension;
new Promise((resolve, reject) => {
window.ConvertMedia(filepath, fileextension, resolve, reject);
}).then((message) => {
console.log(message);
});}
It is working(Progress bar is displayed) if I don't call that Cordova API. I also tried this using some methods given below but it didn't worked.
this.zone.run(() => this.progressBarValue = true)
console.log(this.progressBarValue)
this.changeDetector.detectChanges() & this.changeDetector.markForCheck()
Note: ProgressBar is displayed if I update this.progressBar = true inside
.then((message) => {console.log(message);});
I would try to add *ngIf to container - div like that:
<div class="progressBar" *ngIf="progressBarValue">
<mat-progress-bar class="fileProgress" mode="indeterminate">
</mat-progress-bar>
</div>
If default value for progressBarValue is false mat-progress-bar could not load properly.
Write if it helps or still nothing ;)
Also you can add to your html code
eg. :
<span> {{progressBarValue}} </span>
to keep track of value and be sure if it's even changing
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!
I have made an app in android webview and I want that something can be copied. So when you press a button you will have something copied to your clipboard.
I have tried "clipboard.js" works browers but not on android. So I used this javascript:
var copyXBT = function () {
var theTheCopyXBTAdr = $('#theToCopyXBT');
theTheCopyXBTAdr.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
};
But when you pressed the input type text will get a blue color,.. and blue border(android webview yellow) and on android your keyboard will pop up.
I use this css styling to "hide" it. Because I can't say display none. If I do that I won't work.
#theToCopyETH{
color: white;
border: 0px solid white;
}
::selection{
background: white;
color: white;
}
This is a piece of my HTML:
<button class="btn btn-coinchecker" id="copyETH">Copy ETH address</button><button class="btn btn-coinchecker" data-toggle="modal" data-target="#showETHQR">Click me to get the QR-code</button>
<input type="text" id="theToCopyETH" value="*********************">
See fiddle for example (please open in Google Chrome)
So my question is how to prevent the pop-up of the keyboard and get rid of the yellow-border in android (google chrome on desktop is that blue)
Thanks in advance for helping me!
I found the answer.
What do I need to do to hide my keyboard is this js:
enter var hidekeyboard = function (e) {
e.attr('readonly', 'readonly'); // Force keyboard to hide on input field.
e.attr('disabled', 'true'); // Force keyboard to hide on textarea field.
setTimeout(function() {
e.blur(); //actually close the keyboard
// Remove readonly attribute after keyboard is hidden.
e.removeAttr('readonly');
e.removeAttr('disabled');
}, 100)
};
I need to add that after my selection has happend otherwise I won't work.
My copyETH looks like this then:
var copyETH = function () {
var theTheCopyETHAdr = $('#theToCopyETH');
theTheCopyETHAdr.removeClass('toggleDisplay');
theTheCopyETHAdr.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
hidekeyboard(theTheCopyETHAdr);
theTheCopyETHAdr.addClass('toggleDisplay');
};
So you can see I do also a removeClass and addClass. Because If I only use the hidekeyboard you can see the selection but with his css class it's gone + no-one can change the input field.
Here to see the solved fiddle
This should be enough to hide the input and prevent any activity when it's clicked/tapped, but not break your JS:
#theToCopyETH {
visibility: hidden;
pointer-events: none;
}
I want to hide the top options bar in google drive. How can I achieve that? I am using cordova inAppBrowser to open this link.
https://drive.google.com/file/d/0B_nipvep1WpPd2JXeDdJcUlNYXM/view
I want to use embedded=true but I don't know how it would work. Please see the image below.
May be this will help you
You have to wait until your inAppBrowser page loading finishes.
//Set css in your inAppstyle.css
.drive-viewer-toolstrip{
display: none !important;
opacity: 0 !important;
}
You must add an event listener:
var inApp = window.open('https://drive.google.com/file/d/0B_nipvep1WpPd2JXeDdJcUlNYXM/view', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
Use this path for your android projects file:///android_asset/{your folder}
INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout
Your JS
text += '' + data.docs[i].doc_title + '';
Updated JS
text += '' + data.docs[i].doc_title + '';
//Create new function
function openthislink(ln)
{
var inApp = window.open(ln, '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
}
I'm using Phonegap Build to develop an application for iOS and Android.
I'd like to determine the locale (e.g. 'en-US') for the device, though I'd settle for the current language setting, or even the app store my app was installed from (it's been a long day).
Following the instructions here for the Globalization plugin I think I have everything right, but nothing seems to work on either the iPhone 6 or Samsung Galaxy Nexus I'm using for testing.
The relevant part of my config.xml looks like this:
<gap:plugin name="org.apache.cordova.globalization" />
My function for getting locale from the plugin looks like this:
var getPhoneGapLocaleName = function() {
var loc = 'unknown';
if (navigator.globalization !== undefined) {
navigator.globalization.getLocaleName(
function (locale) {
if (locale !== undefined) {
loc = locale.value;
}
},
function () {
// nothing
}
);
}
return loc;
};
Note: on both devices navigator.globalization.getLocaleName is present and appears correct, evaluating to a function resembling what I'd expect based on the documentation.
The problem here was that the variable 'loc' was declared outside the scope of the success or failure callbacks, which of course happen after a few brief moments.
I fixed this by changing the function thus:
var refreshPhoneGapLocaleName = function() {
if (navigator.globalization !== undefined) {
navigator.globalization.getLocaleName(
function (locale) {
if (locale !== undefined) {
localStorage['pg.locale'] = locale.value;
}
},
function () {
// nothing
}
);
}
};
Now calling it in onDeviceReady in order to refresh the values when the app starts.
A few moments later (not immediately) the following function can be used to retrieve the locale value:
var getLocale = function() {
return localStorage['pg.locale']();
};
The greatest thing about StackOverflow is how often it helps one to resolve one's own silly mistakes. :)
Although previous answers are returning the desired result, and giving an option to retrieve the current phonegap locale name, they did not explain the topic starter why his function did not work, and how to adjust his function to work in the way he intended (i.e. not using localStorage and not showing the locale in the console but giving the answer in real-time as a result)
I am posting this answer since I was looking for a quick function to get the device locale, and this post was my first result. While the opening post gave me everything I needed, I would like to answer this question for future visitors with the same purpose I had. Sorry for posting to a topic this old, but I hope I can help others with my answer.
The reason the function of topic starter does not work is the following: the plugin returns the locale in an asynchronous way. Therefore, the loc =locale.value line is only executed after the function's return statement. To fix this, we can write a wrapper function to simplify the plugins output as follows. Keep in mind that we need to use this function asynchronously, since the plugin result is also asynchronous.
The function:
var getPhoneGapLocaleName = function ( callback ) {
var unknownLocation = 'unknown'; //Default value
if ( navigator.globalization !== undefined ) {
navigator.globalization.getLocaleName(
function ( locale ) {
if ( locale !== undefined ) {
callback( locale.value );
} else {
callback( unknownLocation );
}
},
function () {
callback( unknownLocation );
}
);
} else {
callback( unknownLocation );
}
};
Use the function like this:
getPhoneGapLocaleName( function( loc ){ console.log( 'The locale was set as follows: ' + loc ); } );
Try this code
When the browser is set to the en_US locale, this should display a popup dialog with the text language: English:
navigator.globalization.getPreferredLanguage(
function (language) {alert('language: ' + language.value + '\n');},
function () {alert('Error getting language\n');}
);
Full Example
<!DOCTYPE HTML>
<html>
<head>
<title>getPreferredLanguage Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function checkLanguage() {
navigator.globalization.getPreferredLanguage(
function (language) {alert('language: ' + language.value + '\n');},
function () {alert('Error getting language\n');}
);
}
</script>
</head>
<body>
<button onclick="checkLanguage()">Click for language</button>
</body>
</html>
I am trying to show loading spinner while loading checkboxes using below code in jquery mobile 1.3.2 on Android native app, but it is not working, can any one help me what the issue is and how to make it work
Here is my code:
function onChangeCarrera(idCarrera,idEvento){
$.mobile.loading('show', {
text: 'Cargando Corredores',
textVisible: true,
theme: 'a',
html: ""});
cargaCorredores(idCarrera,idEvento);
resetMontoTotal();
$.mobile.loading('hide');
}
function cargaCorredores(idCarrera,idEvento){
var dom = jsel(json);
var carrera = dom.select('//Eventos/*[#id='+idEvento+']/carreras/*[#nroCarrera='+idCarrera+']');
//Muestra Label
$("#lblCorredores").text("Selección de corredores");
var html;
for (var x=1; x<=TipoApuesta.patas; x++){
html='<fieldset id="carrera"+x+"_fieldset" data-type="horizontal" data-role="controlgroup"><legend>'+eval("TipoApuesta.p"+x+"Nombre")+'</legend>';
$.each(carrera.corredores, function(i, corredor) {
html+='<input type="checkbox" onclick="resetMontoTotal();" value="'+corredor.nroCorredor+'" name="checkbox_'+idCarrera+'_'+idEvento+'_'+corredor.nroCorredor+'" id="checkbox_'+idCarrera+'_'+idEvento+'_'+corredor.nroCorredor+'" class="corredores'+x+'" /><label for="checkbox_'+idCarrera+'_'+idEvento+'_'+corredor.nroCorredor+'">'+corredor.nroCorredor+'</label>';
});
$("#carreras"+x).html(html+'</fieldset');
$("#carreras"+x).trigger("create");
}
if (TipoApuesta.patas<4){
for (var j=4; j>TipoApuesta.patas; j--){
$("#carreras"+j).html('');
$("#carreras"+j).trigger("create");
}
}
}
I'm using a json preloaded with the page to make a checkboxes.
Many thanks!
I read somewhere about needing to use interval variables. I had the same issue and this resolved it, although it's a little "hacky" to me.
var interval = setInterval(function () {
$.mobile.loading('show', {
text: 'Resuming...',
textVisible: true,
theme: 'a',
html: ""
});
clearInterval(interval);
}, 1);
I had to use a different variable name for interval on each of my app's pages.