From 0c1f8f6d11b8cf294eb6b29db9399044b5669d67 Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Sun, 19 Mar 2023 11:55:12 +0700 Subject: [PATCH] Keep current view state when editing or exiting edit --- web/_js/draw.js | 25 +++++++++++++++++++------ web/_js/infoblock.js | 8 ++------ web/_js/time.js | 22 ++++++++++++++++++++-- web/_js/view.js | 10 ++++++++++ 4 files changed, 51 insertions(+), 14 deletions(-) diff --git a/web/_js/draw.js b/web/_js/draw.js index ae6e8b72..f8b1b855 100644 --- a/web/_js/draw.js +++ b/web/_js/draw.js @@ -68,17 +68,23 @@ const periodClipboard = { "path": null } - ;[...document.querySelectorAll("#objectInfo textarea")].forEach(el => { - el.addEventListener("input", function () { - this.style.height = "auto" - this.style.height = (this.scrollHeight) + "px" - }) +const drawBackButton = document.createElement("a") +drawBackButton.className = "btn btn-outline-primary" +drawBackButton.id = "drawBackButton" +drawBackButton.textContent = "Exit Draw Mode" + +;[...document.querySelectorAll("#objectInfo textarea")].forEach(el => { + el.addEventListener("input", function () { + this.style.height = "auto" + this.style.height = (this.scrollHeight) + "px" }) +}) window.initDraw = initDraw function initDraw() { // Adds exit draw button and removes list button - showListButton.insertAdjacentHTML("afterend", 'Exit Draw Mode') + showListButton.insertAdjacentHTML("afterend", '') + showListButton.parentElement.appendChild(drawBackButton) showListButton.remove() // Opens draw menu @@ -694,6 +700,7 @@ function initDraw() { inputGroup.appendChild(inputButton) } + let entryId if (params.has('id')) { entryId = params.get('id') const entry = getEntry(entryId) @@ -775,6 +782,12 @@ function initDraw() { initPeriodGroups() }) + drawBackButton.href = "./" + formatHash(entryId, currentPeriod, currentPeriod, currentVariation) + + document.addEventListener('timeupdate', (event) => { + drawBackButton.href = "./" + formatHash(entryId, event.detail.period, event.detail.period, event.detail.variation) + }) + } function calculateCenter(path) { diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js index dfa7d222..7a05a788 100644 --- a/web/_js/infoblock.js +++ b/web/_js/infoblock.js @@ -46,11 +46,7 @@ function createInfoBlock(entry, isPreview) { const linkElement = document.createElement("a") linkElement.className = "text-decoration-none d-flex justify-content-between text-body" if (isPreview) linkElement.href = "#" - else { - const targetPeriod = formatPeriod(currentPeriod, currentPeriod, currentVariation) - linkElement.href = "#" + entry.id - if (targetPeriod && targetPeriod !== defaultPeriod) linkElement.href += "/" + targetPeriod - } + else linkElement.href = formatHash(entry.id) const linkNameElement = document.createElement("span") linkNameElement.className = "flex-grow-1 text-break" linkNameElement.textContent = entry.name @@ -184,7 +180,7 @@ function createInfoBlock(entry, isPreview) { const editElement = document.createElement("a") editElement.textContent = "Edit" editElement.className = "btn btn-sm btn-outline-primary" - editElement.href = "./?mode=draw&id=" + entry.id + editElement.href = "./?mode=draw&id=" + entry.id + formatHash(undefined) editElement.title = "Edit " + entry.name idElementContainer.appendChild(editElement) } diff --git a/web/_js/time.js b/web/_js/time.js index 55a9bb2a..6cd3d7f3 100644 --- a/web/_js/time.js +++ b/web/_js/time.js @@ -290,10 +290,12 @@ variantsEl.addEventListener("input", (event) => { updateTime(-1, event.target.value) }) -const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) => { +const dispatchTimeUpdateEvent = (period = currentPeriod, variation = currentVariation, atlas = atlas) => { const timeUpdateEvent = new CustomEvent('timeupdate', { detail: { period: period, + variation: variation, + periodString: formatPeriod(period, period, variation), atlas: atlas } }) @@ -421,7 +423,7 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria }) } - dispatchTimeUpdateEvent(newPeriod, atlas) + dispatchTimeUpdateEvent(newPeriod, newVariation, atlas) delete document.body.dataset.canvasLoading tooltip.dataset.forceVisible = "" clearTimeout(tooltipDelayHide) @@ -477,6 +479,10 @@ function parsePeriod(periodString) { } function formatPeriod(start, end, variation) { + start ??= currentPeriod + end ??= currentPeriod + variation ??= currentVariation + let periodString, variationString variationString = variationsConfig[variation].code if (start > end) [start, end] = [end, start] @@ -491,3 +497,15 @@ function formatPeriod(start, end, variation) { if (variationString) return variationString return periodString } + +function formatHash(id, start, end, variation) { + start ??= currentPeriod + end ??= currentPeriod + variation ??= currentVariation + + const result = [id] + const targetPeriod = formatPeriod(start, end, variation) + if (targetPeriod && targetPeriod !== defaultPeriod) result.push(targetPeriod) + if (!result.some(el => el || el === 0)) return '' + return '#' + result.join('/') +} diff --git a/web/_js/view.js b/web/_js/view.js index 27e53ba1..a19ce820 100644 --- a/web/_js/view.js +++ b/web/_js/view.js @@ -903,6 +903,12 @@ function initGlobal() { updateHovering(e) } }) + + document.addEventListener('timeupdate', (event) => { + let hashData = window.location.hash.substring(1).split('/') + const targetHash = formatHash(hashData[0], event.detail.period, event.detail.period, event.detail.variation) + if (location.hash !== targetHash) history.replaceState({}, "", targetHash) + }) } function initViewGlobal() { @@ -952,4 +958,8 @@ function initViewGlobal() { if (window.location.hash) { // both "/" and just "/#" will be an empty hash string highlightEntryFromUrl() } + + document.addEventListener('timeupdate', (event) => { + drawButton.href = "./?mode=draw" + formatHash(undefined, event.detail.period, event.detail.period, event.detail.variation) + }) }