From 6b32bde0bc85ed029a0645e712e26e1a70888bb6 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 1 May 2024 23:37:44 -0700
Subject: Use an observer to create new object element when data attribute is
changed
---
src/index.js | 85 +++++++++++++++++++-----------------------------------------
1 file changed, 27 insertions(+), 58 deletions(-)
(limited to 'src/index.js')
diff --git a/src/index.js b/src/index.js
index d4c74e9..bb42084 100644
--- a/src/index.js
+++ b/src/index.js
@@ -89,18 +89,6 @@ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click'
gameboard.endMove();
}));
-// object.addEventListener('load', function () {
-// mapPlaceholder.remove();
-// this.style.opacity = 1;
-
-// const svg = this.contentDocument.querySelector('svg'),
-// startLocs = svg.querySelector('.start-locations');
-
-// panzoom.start(svg);
-// gameboard.start(svg);
-// recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
-// });
-
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis();
@@ -111,60 +99,41 @@ mapSelectDialog
.updateValueOnSelection()
.changeMapOnConfirm();
-// const xhr = new XMLHttpRequest();
-
-// xhr.onload = () => {
-// console.log(xhr);
-// const oldObj = document.querySelector('object');
-// const object = document.createElement('object');
-// object.setAttribute('type', 'image/svg+xml');
-// object.style.opacity = 0;
-// mapPlaceholder.after(object);
-
-// object.addEventListener('load', function () {
-// oldObj.remove();
-// mapPlaceholder.remove();
-// this.style.opacity = 1;
-
-// const svg = this.contentDocument.querySelector('svg'),
-// startLocs = svg.querySelector('.start-locations');
-
-// panzoom.start(svg);
-// gameboard.start(svg);
-// recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
-// });
-
-// object.data = fileName;
-// };
-
-// xhr.open('GET', fileName);
-// xhr.responseType = 'document';
-// xhr.send();
-
-const fileName = `${localStorage.getItem('map') || 'map1'}.svg`;
-const oldObj = document.querySelector('object');
-
-console.log('old data', oldObj.getAttribute('data'), 'new data', fileName);
-
-const object = document.createElement('object');
-object.setAttribute('type', 'image/svg+xml');
-object.style.opacity = 0;
-mapPlaceholder.after(object);
-
-object.addEventListener('load', function () {
- oldObj.remove();
- mapPlaceholder.remove();
- this.style.opacity = 1;
+const object = document.querySelector('object');
+function load() {
const svg = this.contentDocument.querySelector('svg'),
startLocs = svg.querySelector('.start-locations');
+ this.style.opacity = 1;
+ mapPlaceholder.style.opacity = 0;
+
panzoom.start(svg);
gameboard.start(svg);
recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
+}
+
+object.addEventListener('load', load);
+
+const objectDataObserver = new MutationObserver(function () {
+ const currentObj = document.querySelector('object');
+ const currentData = currentObj.getAttribute('data');
+ const nextObj = document.createElement('object');
+ nextObj.setAttribute('type', 'image/svg+xml');
+ nextObj.style.opacity = 0;
+ nextObj.addEventListener('load', load);
+ mapPlaceholder.after(nextObj);
+ mapPlaceholder.style.opacity = 1;
+ nextObj.data = currentData;
+ this.disconnect();
+ currentObj.remove();
+ this.observe(nextObj, { attributeFilter: ['data'] });
});
-if (oldObj.getAttribute('data') !== fileName) {
- console.log('object data changed');
+objectDataObserver.observe(object, { attributeFilter: ['data'] });
+
+const fileName = `${localStorage.getItem('map') || 'map1'}.svg`;
+
+if (object.getAttribute('data') !== fileName) {
object.data = fileName;
}
--
cgit v1.2.3