1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

switch paperDialogHashHandler from hashchange to pushstate

This commit is contained in:
Luke Pulverenti 2015-12-08 15:42:08 -05:00
parent 35a8a1611a
commit 00b18fdc5f
3 changed files with 80 additions and 42 deletions

View file

@ -2,18 +2,21 @@
function paperDialogHashHandler(dlg, hash, resolve, lockDocumentScroll) { function paperDialogHashHandler(dlg, hash, resolve, lockDocumentScroll) {
var self = this;
self.originalUrl = window.location.href;
var activeElement = document.activeElement;
function onHashChange(e) { function onHashChange(e) {
var data = e.detail.state || {}; var isBack = self.originalUrl == window.location.href;
var isActive = data.hash == '#' + hash;
if (data.direction == 'back') { if (isBack || !dlg.opened) {
if (dlg) { window.removeEventListener('popstate', onHashChange);
if (!isActive) { }
dlg.close();
dlg = null; if (isBack) {
} self.closedByBack = true;
} dlg.close();
} }
} }
@ -23,14 +26,29 @@
Dashboard.onPopupClose(); Dashboard.onPopupClose();
} }
dlg = null; window.removeEventListener('popstate', onHashChange);
if (enableHashChange()) {
window.removeEventListener('navigate', onHashChange);
if (window.location.hash == '#' + hash) { if (!self.closedByBack) {
var state = history.state || {};
if (state.dialogId == hash) {
history.back(); history.back();
} }
} }
activeElement.focus();
if (dlg.getAttribute('data-removeonclose') == 'true') {
dlg.parentNode.removeChild(dlg);
}
//resolve();
// if we just called history.back(), then use a timeout to allow the history events to fire first
setTimeout(function () {
resolve({
element: dlg,
closedByBack: self.closedByBack
});
}, 1);
} }
dlg.addEventListener('iron-overlay-closed', onDialogClosed); dlg.addEventListener('iron-overlay-closed', onDialogClosed);
@ -40,23 +58,15 @@
Dashboard.onPopupOpen(); Dashboard.onPopupOpen();
} }
if (enableHashChange()) { var state = {
dialogId: hash,
navigate: false
};
history.pushState(state, "Dialog", hash);
window.location.hash = hash; jQuery.onStatePushed(state);
window.addEventListener('navigate', onHashChange); window.addEventListener('popstate', onHashChange);
}
}
function enableHashChange() {
// It's not firing popstate in response to hashbang changes
if (browserInfo.msie) {
return false;
}
if (browserInfo.edge) {
return false;
}
return true;
} }
function open(dlg) { function open(dlg) {

View file

@ -457,6 +457,7 @@ var Dashboard = {
// This is just an attempt to prevent the fade-in animation from running repeating and causing flickering // This is just an attempt to prevent the fade-in animation from running repeating and causing flickering
elem.active = true; elem.active = true;
elem.classList.remove('hide');
} else { } else {
@ -479,6 +480,7 @@ var Dashboard = {
if (elem) { if (elem) {
elem.active = false; elem.active = false;
elem.classList.add('hide');
} }
}, },

View file

@ -85,23 +85,41 @@
})(jQuery, this); })(jQuery, this);
window.addEventListener('popstate', function (event) { var previousState = {};
// This is just a temporary api until jquery mobile is eventually deprecated and we have an actual routing library
jQuery.onStatePushed = function(state) {
previousState = state;
};
function ignorePopState(event) {
var state = event.state || {}; var state = event.state || {};
setTimeout(function () { if (previousState.navigate === false) {
// Ignore
previousState = state;
return true;
}
if (event.historyState) { previousState = state;
$.extend(state, event.historyState); return false;
}
function fireNavigateFromPopstateEvent(event) {
var state = event.state || {};
if (event.historyState) {
$.extend(state, event.historyState);
}
window.dispatchEvent(new CustomEvent("navigate", {
detail: {
state: state,
originalEvent: event
} }
}));
window.dispatchEvent(new CustomEvent("navigate", { }
detail: {
state: state,
originalEvent: event
}
}));
}, 0);
});
jQuery.mobile.widgets = {}; jQuery.mobile.widgets = {};
@ -785,8 +803,16 @@
// TODO grab the original event here and use it for the synthetic event in the // TODO grab the original event here and use it for the synthetic event in the
// second half of the navigate execution that will follow this binding // second half of the navigate execution that will follow this binding
popstate: function (event) { popstate: function (event) {
var hash, state;
if (ignorePopState(event)) {
return;
}
setTimeout(function () {
fireNavigateFromPopstateEvent(event);
}, 0);
var hash, state;
// If this is the popstate triggered by the actual alteration of the hash // If this is the popstate triggered by the actual alteration of the hash
// prevent it completely. History is tracked manually // prevent it completely. History is tracked manually
if (this.preventHashAssignPopState) { if (this.preventHashAssignPopState) {