JS fixes: recursion in themes, keys for frame walking, JSON XHR and details-summary in IE11
This commit is contained in:
parent
fd66084388
commit
e18b10297b
3 changed files with 29 additions and 9 deletions
|
@ -23,6 +23,20 @@ Math.sign = Math.sign || function(x) {
|
||||||
if (!x) return x; // 0 and NaN
|
if (!x) return x; // 0 and NaN
|
||||||
return x > 0 ? 1 : -1;
|
return x > 0 ? 1 : -1;
|
||||||
};
|
};
|
||||||
|
if (!window.hasOwnProperty('HTMLDetailsElement') && !window.hasOwnProperty('mockHTMLDetailsElement')) {
|
||||||
|
window.mockHTMLDetailsElement = true;
|
||||||
|
const style = 'details:not([open]) > :not(summary) {display: none}';
|
||||||
|
document.head.appendChild(document.createElement('style')).textContent = style;
|
||||||
|
|
||||||
|
addEventListener('click', function (e) {
|
||||||
|
if (e.target.nodeName !== 'SUMMARY') return;
|
||||||
|
const details = e.target.parentElement;
|
||||||
|
if (details.hasAttribute('open'))
|
||||||
|
details.removeAttribute('open');
|
||||||
|
else
|
||||||
|
details.setAttribute('open', '');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Monstrous global variable for handy code
|
// Monstrous global variable for handy code
|
||||||
window.helpers = window.helpers || {
|
window.helpers = window.helpers || {
|
||||||
|
@ -65,8 +79,13 @@ window.helpers = window.helpers || {
|
||||||
// better than onreadystatechange because of 404 codes https://stackoverflow.com/a/36182963
|
// better than onreadystatechange because of 404 codes https://stackoverflow.com/a/36182963
|
||||||
xhr.onloadend = function () {
|
xhr.onloadend = function () {
|
||||||
if (xhr.status === 200) {
|
if (xhr.status === 200) {
|
||||||
if (callbacks.on200)
|
if (callbacks.on200) {
|
||||||
|
// fix for IE11. It doesn't convert response to JSON
|
||||||
|
if (xhr.responseType === '' && typeof(xhr.response) === 'string')
|
||||||
|
callbacks.on200(JSON.parse(xhr.response));
|
||||||
|
else
|
||||||
callbacks.on200(xhr.response);
|
callbacks.on200(xhr.response);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// handled by onerror
|
// handled by onerror
|
||||||
if (xhr.status === 0) return;
|
if (xhr.status === 0) return;
|
||||||
|
|
|
@ -623,8 +623,8 @@ addEventListener('keydown', function (e) {
|
||||||
// TODO: More precise step. Now FPS is taken equal to 29.97
|
// TODO: More precise step. Now FPS is taken equal to 29.97
|
||||||
// Common FPS: https://forum.videohelp.com/threads/81868#post323588
|
// Common FPS: https://forum.videohelp.com/threads/81868#post323588
|
||||||
// Possible solution is new HTMLVideoElement.requestVideoFrameCallback() https://wicg.github.io/video-rvfc/
|
// Possible solution is new HTMLVideoElement.requestVideoFrameCallback() https://wicg.github.io/video-rvfc/
|
||||||
case '.': action = function () { pause(); skip_seconds(-1/29.97); }; break;
|
case ',': action = function () { pause(); skip_seconds(-1/29.97); }; break;
|
||||||
case ',': action = function () { pause(); skip_seconds( 1/29.97); }; break;
|
case '.': action = function () { pause(); skip_seconds( 1/29.97); }; break;
|
||||||
|
|
||||||
case '>': action = increase_playback_rate.bind(this, 1); break;
|
case '>': action = increase_playback_rate.bind(this, 1); break;
|
||||||
case '<': action = increase_playback_rate.bind(this, -1); break;
|
case '<': action = increase_playback_rate.bind(this, -1); break;
|
||||||
|
|
|
@ -10,7 +10,9 @@ const THEME_SYSTEM = '';
|
||||||
// TODO: theme state controlled by system
|
// TODO: theme state controlled by system
|
||||||
toggle_theme.addEventListener('click', function () {
|
toggle_theme.addEventListener('click', function () {
|
||||||
const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
|
const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
|
||||||
setTheme(isDarkTheme ? THEME_LIGHT : THEME_DARK);
|
const newTheme = isDarkTheme ? THEME_LIGHT : THEME_DARK;
|
||||||
|
setTheme(newTheme);
|
||||||
|
helpers.storage.set(STORAGE_KEY_THEME, newTheme);
|
||||||
helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
|
helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -26,9 +28,6 @@ systemDarkTheme.addListener(function () {
|
||||||
|
|
||||||
/** @param {THEME_DARK|THEME_LIGHT|THEME_SYSTEM} theme */
|
/** @param {THEME_DARK|THEME_LIGHT|THEME_SYSTEM} theme */
|
||||||
function setTheme(theme) {
|
function setTheme(theme) {
|
||||||
if (theme !== THEME_SYSTEM)
|
|
||||||
helpers.storage.set(STORAGE_KEY_THEME, theme);
|
|
||||||
|
|
||||||
if (theme === THEME_DARK || (theme === THEME_SYSTEM && systemDarkTheme.matches)) {
|
if (theme === THEME_DARK || (theme === THEME_SYSTEM && systemDarkTheme.matches)) {
|
||||||
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
|
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
|
||||||
document.body.classList.remove('no-theme');
|
document.body.classList.remove('no-theme');
|
||||||
|
@ -44,11 +43,13 @@ function setTheme(theme) {
|
||||||
|
|
||||||
// Handles theme change event caused by other tab
|
// Handles theme change event caused by other tab
|
||||||
addEventListener('storage', function (e) {
|
addEventListener('storage', function (e) {
|
||||||
if (e.key === STORAGE_KEY_THEME) setTheme(e.newValue);
|
if (e.key === STORAGE_KEY_THEME)
|
||||||
|
setTheme(helpers.storage.get(STORAGE_KEY_THEME));
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set theme from preferences on page load
|
// Set theme from preferences on page load
|
||||||
addEventListener('DOMContentLoaded', function () {
|
addEventListener('DOMContentLoaded', function () {
|
||||||
const prefTheme = document.getElementById('dark_mode_pref').textContent;
|
const prefTheme = document.getElementById('dark_mode_pref').textContent;
|
||||||
setTheme(prefTheme);
|
setTheme(prefTheme);
|
||||||
|
helpers.storage.set(STORAGE_KEY_THEME, prefTheme);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue