Web Dev Solutions

Catalin Mititiuc

From c692bc90207c4b04771f953ce5924100a1889cae Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sun, 19 May 2024 21:32:42 -0700 Subject: Simplify loading scenarios --- src/index.js | 34 +++++++++++++++------------------- src/modules/map_select_dialog.js | 4 ++-- 2 files changed, 17 insertions(+), 21 deletions(-) diff --git a/src/index.js b/src/index.js index 9765c41..c71cc16 100644 --- a/src/index.js +++ b/src/index.js @@ -24,25 +24,22 @@ const mapPlaceholder = document.querySelector('.map-placeholder'), }); localStorage.setItem('content-visibility', this.checked); - }).bind(contentVisToggleEl), - - mapResourceObserver = new MutationObserver(function () { - const current = document.querySelector('object'); - const resource = current.getAttribute('data'); - const next = document.createElement('object'); - next.setAttribute('type', 'image/svg+xml'); - next.style.opacity = 0; - next.addEventListener('load', load); - mapPlaceholder.after(next); - mapPlaceholder.style.opacity = 1; - next.data = resource; - this.disconnect(); - current.remove(); - this.observe(next, { attributeFilter: ['data'] }); - }); + }).bind(contentVisToggleEl); let mapResourceEl = document.querySelector('object'); +function loadScenario(data) { + const current = document.querySelector('object'); + const next = document.createElement('object'); + next.setAttribute('type', 'image/svg+xml'); + next.style.opacity = 0; + next.addEventListener('load', load); + mapPlaceholder.after(next); + mapPlaceholder.style.opacity = 1; + next.data = data; + current.remove(); +} + function updateTurnCounter() { const turnCounter = document.getElementById('turn-count'); @@ -161,11 +158,10 @@ mapSelectDialog .selectCurrentOptionOnPageLoad() .showOnClick() .updateValueOnSelection() - .changeMapOnConfirm(); + .changeMapOnConfirm(loadScenario); mapResourceEl.addEventListener('load', load); mapResourceEl.data = map; -mapResourceObserver.observe(mapResourceEl, { attributeFilter: ['data'] }); mapResourceEl = null; document.querySelector('#download-save').addEventListener('click', e => { @@ -187,5 +183,5 @@ document.querySelector('#upload-save').addEventListener('click', () => { document.querySelector('input[type="file"]').addEventListener('change', e => { const [file] = fileInputEl.files; - document.querySelector('object').data = URL.createObjectURL(file); + loadScenario(URL.createObjectURL(file)) }); diff --git a/src/modules/map_select_dialog.js b/src/modules/map_select_dialog.js index fc8eecc..2a4622a 100644 --- a/src/modules/map_select_dialog.js +++ b/src/modules/map_select_dialog.js @@ -29,12 +29,12 @@ export function init() { return this; }, - changeMapOnConfirm() { + changeMapOnConfirm(loadFn) { confirmBtn.addEventListener('click', e => { e.preventDefault(); localStorage.removeItem('pan-zoom'); localStorage.setItem('map', selectEl.value); - document.querySelector('object').data = `assets/images/${selectEl.value}.svg`; + loadFn(`assets/images/${selectEl.value}.svg`); mapDialog.close(); }); } -- cgit v1.2.3