Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-05-01 23:37:44 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-05-01 23:37:44 -0700
commit6b32bde0bc85ed029a0645e712e26e1a70888bb6 (patch)
treeac32bf0627ead3c2984437acfa6c55cca09349b9
parentcb76c9c68a185f840aa03fd0a38260bba6f21302 (diff)
Use an observer to create new object element when data attribute is changed
Diffstat
-rw-r--r--public/style.css4
-rw-r--r--src/index.js85
2 files changed, 31 insertions, 58 deletions
diff --git a/public/style.css b/public/style.css
index c229889..a973630 100644
--- a/public/style.css
+++ b/public/style.css
@@ -375,6 +375,10 @@ img.logo {
border: 1px solid black;
}
+.map-placeholder {
+ position: absolute;
+}
+
@media (width >= 1800px) {
#record-sheet {
flex-direction: row;
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;
}