ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use an observer to create new object element when data attribute is changed

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:29 -07:00
parent 0cf32e65f7
commit e3d642c994
2 changed files with 31 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/style.css
View File

@ -375,6 +375,10 @@ img.logo {
border: 1px solid black; border: 1px solid black;
} }
.map-placeholder {
position: absolute;
}
@media (width >= 1800px) { @media (width >= 1800px) {
#record-sheet { #record-sheet {
flex-direction: row; flex-direction: row;

85
src/index.js
View File

@ -89,18 +89,6 @@ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click'
gameboard.endMove(); 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'); contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis(); toggleContentVis();
@ -111,60 +99,41 @@ mapSelectDialog
.updateValueOnSelection() .updateValueOnSelection()
.changeMapOnConfirm(); .changeMapOnConfirm();
// const xhr = new XMLHttpRequest(); const object = document.querySelector('object');
// 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;
function load() {
const svg = this.contentDocument.querySelector('svg'), const svg = this.contentDocument.querySelector('svg'),
startLocs = svg.querySelector('.start-locations'); startLocs = svg.querySelector('.start-locations');
this.style.opacity = 1;
mapPlaceholder.style.opacity = 0;
panzoom.start(svg); panzoom.start(svg);
gameboard.start(svg); gameboard.start(svg);
recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select); 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) { objectDataObserver.observe(object, { attributeFilter: ['data'] });
console.log('object data changed');
const fileName = `${localStorage.getItem('map') || 'map1'}.svg`;
if (object.getAttribute('data') !== fileName) {
object.data = fileName; object.data = fileName;
} }