Ionic 2 loading spinner user dismissal - javascript

So I have a loading spinner currently working well in my Ionic 2 app. I can even dismiss it after a certain time and display a custom spinner popup. However, what I would like to implement is for the ability of the second popup spinner to be dismissed by the user - This would be useful for when the app takes a long time or hangs on loading certain things.
I have tried adding a (click) event to the popup but keep getting a "sanitising HTML stripped some content" warning and the popup remains unresponsive.
Is there a way I can get a loading popup to be dismissed on request?

I use this to remove any overlays present on the screen.
let activePortal = ionicApp._loadingPortal.getActive() ||
this.ionicApp._modalPortal.getActive() ||
this.ionicApp._toastPortal.getActive() ||
this.ionicApp._overlayPortal.getActive();
if (activePortal) {
activePortal.dismiss();
}
I generally use it with a back button listener so the user can remove the overlays on back press in android.

Related

Why my button is not clickable when I dismissed the modal dialog in Ionic app?

I am trying to retrieve the values from an Ionic modal. Anytime I exit the modal and go back to the previous page which is the main page, the button on that page no longer remain clickable.
How do I prevent this from happening?
PS: I have used modals for both alert and data retrieval from pop-ups.
I have tried using following approach:
myModal.onDidDismiss((data)=>{
this.token=data.token;
this.newpin = data.pin;
}};
return await myModal.present();
What I am expecting is I want my modal to work as expected without breaking the buttons on my previous page. Please advise.

How can I detect that the browser back button has been pressed in a single page app?

On a certain page in my app, I have a popup guide that walks the user through several steps. When the user clicks the popup next button it advances, sometimes going to a new page (but not always). My problem is that when the user clicks the browser back button, the popup does not close and causes issues if the user tries to advance again. What i'd like to do is just close the popup if the user hits the browser back button. I'd assumed this would be an easy problem, but I can't figure out a solution.
Since this is a SPA, 'onbeforeunload' and 'onunload' don't fire. The way the app is setup, 'onpopstate' also doesn't fire. 'hashchange' fires, but it also fires sometimes when the user clicks the next button on the popup, and I don't see a way to differentiate between that hashchange and hashchange when the user clicks back.
Is there some other event I can check for? I just want to run a function to close my popup (and do cleanup) when the user clicks the back button.
The following assumes you do not use the history API:
Often times I have seen use of # (the anchor tag) in the URL. This will allow for navigation throughout a single page without refreshing the page. As the user progresses in the workflow. For example,
window.location.href = "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page" + "#test"
will not refresh the page. When the back button is pressed, the following statement will evaluate to be true:
(window.location.href == "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page")

Layered elements firing 2 events with one touch - Angular

I'm using angular for a mobile web project. I have a basic share button, when clicked a share modal pops up. The share modal's Close button lays on top of (higher z-index) the actual share button. The share modal is generated from external HTML so I cannot use an ng-click directive. As a work around I use the following:
document.querySelector('#shareContent .shareClose').addEventListener('touchend', function( e ){
e.stopPropagation();
$scope.$apply(function(){
$scope.showShareOverlay = false;
})
console.log("closing the share", $scope.showShareOverlay)
})
My issue is that when I touchend the .shareClose button, the modal closes for a brief moment before showing again. Somehow the touch event is being transferred to the below share button to launch the modal again. Is there anyway to prevent the event from bleeding through to the share button?
I had a similar issue with the Android stock browser. Whatever was underneath the close button for my modal would also get clicked shortly after tapping the close button.
Using the fastclick library on the app stopped this behaviour from happening, presumably due to the specific way it handles click events.

GWT - how to prevent user from accessing other parts of application when popup is showing

I am rendering a html page that contains a button.
I have bind a method to browser window that opens a gwt popup when the button is invoked.
My problem is, when i scroll the page, the popup stays fixed and the page scrolls. I want the popup to be scrolled along with the html page.
Also, the user should not be allowed to access other parts of app when the popup is open.
Can somebody help me
Assuming you are using the PopupPanel class, it is as easy as calling the right constructor:
PopupPanel(boolean autoHide, boolean modal)
autoHide - true if the popup should be automatically hidden when the user clicks outside of it or the history token changes.
modal - true if keyboard or mouse events that do not target the PopupPanel or its children should be ignored
So if you set the modal parameter, you cannot click outside of the popup, and also the scroll event should not happen at all (that is somewhat right, as scrolling a popup with a fixed positioning doesn't make much sense... Oh well, for a non advertising purpose at least).

How can I make my Live Feed list update only on the active tab or update it when the tab becomes active again?

I have a Live Feed jQuery box which updates in every 10 seconds, and puts the sites latest comments on top. This is working fine: jQuery makes an Ajax request, calls a PHP, which returns new items or none.
This box is like a sidebar, it is on every page on my site. My problem is that if a user opens many pages on the site, every tab he opened will do this auto-refresh until he closes that tab. So with a few dozen users each opening many pages this becomes a problem, even if the Live Feed is well optimized, and the SQL query behind it is fast (0.0005 seconds per query). Also if the user leaves the browser open with a couple of opened tabs, and start browsing somewhere else, or watch a movie they'll update forever, or until he closes them.
So what is a nice solution for this? Can I make my feed update only if its tab/window is visible/active? Is there an event which will fire if it was inactive and now active again?
Try adding onFocus event on the window object to trigger your updates and add onBlur to stop updating your live feeds.
Since you are using jquery you can do this
$(window).('focus',function(){
//do updates
})
$(window).('blur',function(){
//stop updates
})

Categories

Resources