open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[compact layout] show sections TOC on first click

Browse Source
This commit is contained in:
tophf 2021-01-09 13:21:06 +03:00
parent ac7b33d7e0
commit fe176c9b62
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
edit/edit.js
View File

@ -31,6 +31,9 @@ baseInit.ready.then(async () => {
// enabling after init to prevent flash of validation failure on an empty name // enabling after init to prevent flash of validation failure on an empty name
$('#name').required = !editor.isUsercss; $('#name').required = !editor.isUsercss;
$('#save-button').onclick = editor.save; $('#save-button').onclick = editor.save;
// editor.toc.expanded pref isn't saved in compact-layout so prefs.subscribe won't work
$('#sections-list').on('click', () => $('.compact-layout') && setTimeout(editor.updateToc),
{once: true});
$('#toc').onclick = e => $('#toc').onclick = e =>
editor.jumpToEditor([...$('#toc').children].indexOf(e.target)); editor.jumpToEditor([...$('#toc').children].indexOf(e.target));
$('#keyMap-help').onclick = () => $('#keyMap-help').onclick = () =>
@ -114,8 +117,6 @@ window.on('beforeunload', e => {
(() => { (() => {
const toc = []; const toc = [];
let tocElem;
const {dirty} = editor; const {dirty} = editor;
let {style} = editor; let {style} = editor;
let wasDirty = false; let wasDirty = false;
@ -174,16 +175,19 @@ window.on('beforeunload', e => {
}, },
updateToc(added = editor.sections) { updateToc(added = editor.sections) {
if (!prefs.get('editor.toc.expanded')) return; if (!toc.el) {
if (!tocElem) tocElem = $('#toc'); toc.el = $('#toc');
toc.elDetails = toc.el.closest('details');
}
if (!toc.elDetails.open) return;
const {sections} = editor; const {sections} = editor;
const first = sections.indexOf(added[0]); const first = sections.indexOf(added[0]);
const elFirst = tocElem.children[first]; const elFirst = toc.el.children[first];
if (first >= 0 && (!added.focus || !elFirst)) { if (first >= 0 && (!added.focus || !elFirst)) {
for (let el = elFirst, i = first; i < sections.length; i++) { for (let el = elFirst, i = first; i < sections.length; i++) {
const entry = sections[i].tocEntry; const entry = sections[i].tocEntry;
if (!deepEqual(entry, toc[i])) { if (!deepEqual(entry, toc[i])) {
if (!el) el = tocElem.appendChild($create('li', {tabIndex: 0})); if (!el) el = toc.el.appendChild($create('li', {tabIndex: 0}));
el.tabIndex = entry.removed ? -1 : 0; el.tabIndex = entry.removed ? -1 : 0;
toc[i] = Object.assign({}, entry); toc[i] = Object.assign({}, entry);
const s = el.textContent = clipString(entry.label) || ( const s = el.textContent = clipString(entry.label) || (
@ -196,13 +200,13 @@ window.on('beforeunload', e => {
} }
} }
while (toc.length > sections.length) { while (toc.length > sections.length) {
tocElem.lastElementChild.remove(); toc.el.lastElementChild.remove();
toc.length--; toc.length--;
} }
if (added.focus) { if (added.focus) {
const cls = 'current'; const cls = 'current';
const old = $('.' + cls, tocElem); const old = $('.' + cls, toc.el);
const el = elFirst || tocElem.children[first]; const el = elFirst || toc.el.children[first];
if (old && old !== el) old.classList.remove(cls); if (old && old !== el) old.classList.remove(cls);
el.classList.add(cls); el.classList.add(cls);
} }