highlight edited style on history back in FF

This commit is contained in:
tophf 2018-08-02 21:10:43 +03:00
parent 5da1e0fb9b
commit d8914c38a7

View File

@ -73,7 +73,7 @@ function initGlobalEvents() {
installed.addEventListener('mouseover', handleEvent.lazyAddEntryTitle); installed.addEventListener('mouseover', handleEvent.lazyAddEntryTitle);
installed.addEventListener('mouseout', handleEvent.lazyAddEntryTitle); installed.addEventListener('mouseout', handleEvent.lazyAddEntryTitle);
document.addEventListener('visibilitychange', rememberScrollPosition); document.addEventListener('visibilitychange', onVisibilityChange);
$$('[data-toggle-on-click]').forEach(el => { $$('[data-toggle-on-click]').forEach(el => {
// dataset on SVG doesn't work in Chrome 49-??, works in 57+ // dataset on SVG doesn't work in Chrome 49-??, works in 57+
@ -115,7 +115,6 @@ function initGlobalEvents() {
`)); `));
} }
function showStyles(styles = [], matchUrlIds) { function showStyles(styles = [], matchUrlIds) {
const sorted = sorter.sort({ const sorted = sorter.sort({
styles: styles.map(style => ({ styles: styles.map(style => ({
@ -164,14 +163,7 @@ function showStyles(styles = [], matchUrlIds) {
if ('scrollY' in (history.state || {}) && !sessionStorage.justEditedStyleId) { if ('scrollY' in (history.state || {}) && !sessionStorage.justEditedStyleId) {
setTimeout(window.scrollTo, 0, 0, history.state.scrollY); setTimeout(window.scrollTo, 0, 0, history.state.scrollY);
} }
if (sessionStorage.justEditedStyleId) { highlightEditedStyle();
const entry = $(ENTRY_ID_PREFIX + sessionStorage.justEditedStyleId);
delete sessionStorage.justEditedStyleId;
if (entry) {
animateElement(entry);
requestAnimationFrame(() => scrollElementIntoView(entry));
}
}
} }
} }
@ -416,7 +408,7 @@ Object.assign(handleEvent, {
}); });
} }
} else { } else {
rememberScrollPosition(); onVisibilityChange();
getActiveTab().then(tab => { getActiveTab().then(tab => {
sessionStorageHash('manageStylesHistory').set(tab.id, url); sessionStorageHash('manageStylesHistory').set(tab.id, url);
location.href = url; location.href = url;
@ -687,8 +679,28 @@ function switchUI({styleOnly} = {}) {
} }
function rememberScrollPosition() { function onVisibilityChange() {
history.replaceState({scrollY: window.scrollY}, document.title); switch (document.visibilityState) {
// page restored without reloading via history navigation (currently only in FF)
case 'visible':
highlightEditedStyle();
break;
// going away
case 'hidden':
history.replaceState({scrollY: window.scrollY}, document.title);
break;
}
}
function highlightEditedStyle() {
if (!sessionStorage.justEditedStyleId) return;
const entry = $(ENTRY_ID_PREFIX + sessionStorage.justEditedStyleId);
delete sessionStorage.justEditedStyleId;
if (entry) {
animateElement(entry);
requestAnimationFrame(() => scrollElementIntoView(entry));
}
} }