Add support for all methods for DomTokenList

Maps4HTML · Mar 9, 2023 · f360179 · f360179
1 parent 3e686f5
commit f360179
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 52 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -25,6 +25,7 @@ module.exports = function(grunt) {
           'dist/mapml.js':        ['<%= rollup.main.dest %>'],
           'dist/web-map.js':      ['src/web-map.js'],
           'dist/mapml-viewer.js': ['src/mapml-viewer.js'],
+          'dist/controlsListDomTokenList.js': ['src/controlsListDomTokenList.js'],
           'dist/map-caption.js':  ['src/map-caption.js'],
           'dist/map-area.js':     ['src/map-area.js'],
           'dist/layer.js':        ['src/layer.js'],

diff --git a/src/controlsListDomTokenList.js b/src/controlsListDomTokenList.js
@@ -0,0 +1,95 @@
+export default class DOMTokenList {
+	#mapEl; // create mapEl as a private property
+	#valueSet;
+	constructor (initialValue, mapEl) {
+		// create donor/host div to extract DomTokenList from
+		const hostingElement = document.createElement('div');
+		this.controlsList = hostingElement.classList;
+
+		// to check if value is being set, protects from infinite recursion
+		// from attributeChangedCallback of mapml-viewer and web-map
+		this.#valueSet = false;
+		this.controlsList.value = initialValue ?? '';
+		this.#mapEl = mapEl;
+	}
+
+	get valueSet () {
+		return this.#valueSet;
+	}
+
+	get length () {
+		return this.controlsList.length;
+	}
+
+	get value () {
+		return this.controlsList.value;
+	}
+	set value (val) {
+		this.controlsList.value = val.toLowerCase();
+		this.#valueSet = true;
+		this.#mapEl.setAttribute("controlslist", this.controlsList.value);
+		this.#valueSet = false;
+	}
+
+	item (index) {
+		return this.controlsList.item(index);
+	}
+
+	contains(token) {
+		return this.controlsList.contains(token);
+	}
+
+	// Modified default behavior
+	add (token) {
+		this.controlsList.add(token);
+		this.#mapEl.setAttribute("controlslist", this.controlsList.value);
+	}
+
+	// Modified default behavior
+	remove (token) {
+		this.controlsList.remove(token);
+		this.#mapEl.setAttribute("controlslist", this.controlsList.value);
+	}
+
+	// Modified default behavior
+	replace (oldToken, newToken) {
+		this.controlsList.replace(oldToken, newToken);
+		this.#mapEl.setAttribute("controlslist", this.controlsList.value);
+	}
+
+	// Modified default behavior
+	supports (token) {
+		let supported = ["nolayer", "nofullscreen", "noreload", "nozoom"];
+		if (supported.includes(token)) {
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	// Modified default behavior
+	//https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle
+	toggle (token, force) {
+		this.controlsList.toggle(token, force);
+		this.#mapEl.setAttribute("controlslist", this.controlsList.value);
+	}
+
+	entries () {
+		return this.controlsList.entries();
+	}
+
+	//https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/forEach
+	forEach (callback, thisArg) {
+		this.controlsList.forEach(callback, thisArg);
+	}
+
+	//https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/keys
+	keys () {
+		return this.controlsList.keys();
+	}
+
+	//https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/values
+	values () {
+		return this.controlsList.values();
+	}
+}
diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
@@ -1,5 +1,6 @@
 import './leaflet.js';  // bundled with proj4, proj4leaflet, modularized
 import './mapml.js';   
+import DOMTokenList from './controlsListDomTokenList.js';
 import { MapLayer } from './layer.js';
 import { MapCaption } from './map-caption.js';
 
@@ -23,13 +24,6 @@ export class MapViewer extends HTMLElement {
       this.removeAttribute('controls');
     }
   }
-  get controlslist() {
-    return this._controlslist;
-  }
-  set controlslist(val) {
-    this._controlslist.value = val.toLowerCase();
-    this.setAttribute("controlslist", val);
-  }
   get width() {
     return (window.getComputedStyle(this).width).replace('px','');
   }
@@ -125,9 +119,7 @@ export class MapViewer extends HTMLElement {
   connectedCallback() {
     if (this.isConnected) {
 
-      // TODO - add DOMTokenList as a class
-      // Add a DOMTokenList for controlslist
-      this._controlslist = this._controlslistDOMTokenList(this.getAttribute("controlslist"));
+      this.controlsList = new DOMTokenList(this.getAttribute("controlslist"), this);
 
       let tmpl = document.createElement('template');
       tmpl.innerHTML = `<link rel="stylesheet" href="${new URL("mapml.css", import.meta.url).href}">`; // jshint ignore:line
@@ -303,8 +295,10 @@ export class MapViewer extends HTMLElement {
   }     */
     switch(name) {
       case 'controlslist':
-        if (this._controlslist) {
-          this._controlslist.value = newValue;
+        if (this.controlsList) {
+          if (this.controlsList.valueSet === false) {
+            this.controlsList.value = newValue;
+          }
           this._setControls();
         }
       break;
@@ -366,7 +360,7 @@ export class MapViewer extends HTMLElement {
         this._setControlsVisibility("reload",false);
         this._setControlsVisibility("zoom",false);
 
-        this._controlslist.forEach((value, key, listObj) => {
+        this.controlsList.forEach((value) => {
           switch(value.toLowerCase()) {
             case 'nofullscreen':
               this._setControlsVisibility("fullscreen",true);
@@ -461,19 +455,6 @@ export class MapViewer extends HTMLElement {
       }
     }
   }
-
-  // creating a DOMTokenList for controlslist, as shown here:
-  // https://marchbox.com/articles/2023-01/using-domtokenlist/
-  // TODO - implement this as a Class
-  _controlslistDOMTokenList(initialValue) {
-    if (initialValue) {
-      initialValue = initialValue.toLowerCase();
-    }
-    const hostingElement = document.createElement('div');
-    const controlslist = hostingElement.classList;
-    controlslist.value = initialValue ?? '';
-    return controlslist;
-  }
 
   _dropHandler(event) {
     event.preventDefault();

diff --git a/src/web-map.js b/src/web-map.js
@@ -1,5 +1,6 @@
 import './leaflet.js';  // a lightly modified version of Leaflet for use as browser module
 import './mapml.js';       // refactored URI usage, replaced with URL standard
+import DOMTokenList from './controlsListDomTokenList.js';
 import { MapLayer } from './layer.js';
 import { MapArea } from './map-area.js';
 import { MapCaption } from './map-caption.js';
@@ -24,13 +25,6 @@ export class WebMap extends HTMLMapElement {
       this.removeAttribute('controls');
     }
   }
-  get controlslist() {
-    return this._controlslist;
-  }
-  set controlslist(val) {
-    this._controlslist.value = val.toLowerCase();
-    this.setAttribute("controlslist", val);
-  }
   get width() {
     return (window.getComputedStyle(this).width).replace('px','');
   }
@@ -130,9 +124,7 @@ export class WebMap extends HTMLMapElement {
   connectedCallback() {
     if (this.isConnected) {
 
-      // TODO - add DOMTokenList as a class
-      // Add a DOMTokenList for controlslist
-      this._controlslist = this._controlslistDOMTokenList(this.getAttribute("controlslist"));
+      this.controlsList = new DOMTokenList(this.getAttribute("controlslist"), this);
 
       let tmpl = document.createElement('template');
       tmpl.innerHTML = `<link rel="stylesheet" href="${new URL("mapml.css", import.meta.url).href}">`; // jshint ignore:line
@@ -343,8 +335,10 @@ export class WebMap extends HTMLMapElement {
   }     */
     switch(name) {
       case 'controlslist':
-        if (this._controlslist) {
-          this._controlslist.value = newValue;
+        if (this.controlsList) {
+          if (this.controlsList.valueSet === false) {
+            this.controlsList.value = newValue;
+          }
           this._setControls();
         }
       break;
@@ -406,7 +400,7 @@ export class WebMap extends HTMLMapElement {
         this._setControlsVisibility("reload",false);
         this._setControlsVisibility("zoom",false);
 
-        this._controlslist.forEach((value, key, listObj) => {
+        this.controlsList.forEach((value) => {
           switch(value.toLowerCase()) {
             case 'nofullscreen':
               this._setControlsVisibility("fullscreen",true);
@@ -504,19 +498,6 @@ export class WebMap extends HTMLMapElement {
     }
   }
 
-  // creating a DOMTokenList for controlslist, as shown here:
-  // https://marchbox.com/articles/2023-01/using-domtokenlist/
-  // TODO - implement this as a Class
-  _controlslistDOMTokenList(initialValue) {
-    if (initialValue) {
-      initialValue = initialValue.toLowerCase();
-    }
-    const hostingElement = document.createElement('div');
-    const controlslist = hostingElement.classList;
-    controlslist.value = initialValue ?? '';
-    return controlslist;
-  }
-
   _dropHandler(event) {
     event.preventDefault();
     let text = event.dataTransfer.getData("text");