fix: settings panel closed by default, closes on click outside
This commit is contained in:
@@ -2383,7 +2383,8 @@ const chapterTmpl = `
|
|||||||
<div id="settings-panel"
|
<div id="settings-panel"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-label="Reader settings"
|
aria-label="Reader settings"
|
||||||
aria-modal="true">
|
aria-modal="true"
|
||||||
|
style="display:none">
|
||||||
|
|
||||||
<!-- Drag handle -->
|
<!-- Drag handle -->
|
||||||
<div class="sheet-handle" id="sheet-handle"></div>
|
<div class="sheet-handle" id="sheet-handle"></div>
|
||||||
@@ -2589,16 +2590,28 @@ const chapterTmpl = `
|
|||||||
|
|
||||||
function openSettings() {
|
function openSettings() {
|
||||||
closeChapterList();
|
closeChapterList();
|
||||||
settingsPanel.classList.add('sheet-open');
|
settingsPanel.style.display = 'block';
|
||||||
|
// rAF so display:block is painted before the transition fires
|
||||||
|
requestAnimationFrame(function () {
|
||||||
|
settingsPanel.classList.add('sheet-open');
|
||||||
|
});
|
||||||
settingsBackdrop.style.display = 'block';
|
settingsBackdrop.style.display = 'block';
|
||||||
}
|
}
|
||||||
function closeSettings() {
|
function closeSettings() {
|
||||||
settingsPanel.classList.remove('sheet-open');
|
settingsPanel.classList.remove('sheet-open');
|
||||||
settingsBackdrop.style.display = 'none';
|
settingsBackdrop.style.display = 'none';
|
||||||
|
// hide after slide-down transition; fallback for desktop (no transition)
|
||||||
|
var done = false;
|
||||||
|
function hide() { if (!done) { done = true; settingsPanel.style.display = 'none'; } }
|
||||||
|
settingsPanel.addEventListener('transitionend', function h() {
|
||||||
|
settingsPanel.removeEventListener('transitionend', h);
|
||||||
|
hide();
|
||||||
|
});
|
||||||
|
setTimeout(hide, 400); // fallback if transitionend never fires
|
||||||
}
|
}
|
||||||
window.closeSettings = closeSettings;
|
window.closeSettings = closeSettings;
|
||||||
window.toggleSettings = function () {
|
window.toggleSettings = function () {
|
||||||
if (settingsPanel.classList.contains('sheet-open')) closeSettings();
|
if (settingsPanel.style.display !== 'none') closeSettings();
|
||||||
else openSettings();
|
else openSettings();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -2657,7 +2670,7 @@ const chapterTmpl = `
|
|||||||
window.__ttsClickOutside = function (e) {
|
window.__ttsClickOutside = function (e) {
|
||||||
if (stale()) { document.removeEventListener('click', window.__ttsClickOutside); return; }
|
if (stale()) { document.removeEventListener('click', window.__ttsClickOutside); return; }
|
||||||
var sb = document.getElementById('settings-btn');
|
var sb = document.getElementById('settings-btn');
|
||||||
if (settingsPanel.classList.contains('sheet-open') &&
|
if (settingsPanel.style.display !== 'none' &&
|
||||||
!settingsPanel.contains(e.target) && e.target !== sb && !sb.contains(e.target) &&
|
!settingsPanel.contains(e.target) && e.target !== sb && !sb.contains(e.target) &&
|
||||||
e.target !== settingsBackdrop) {
|
e.target !== settingsBackdrop) {
|
||||||
closeSettings();
|
closeSettings();
|
||||||
|
|||||||
Reference in New Issue
Block a user