Add media attribute to map-layer, map-link, map-style

Remove prefers-map-content hardcoded demo hack

Add implementation of _changeHandler that invokes _onAdd,
_onRemove.

Add media query matches to map-layer._validateDisabled

Re-organize _onRemove so that stuff isn't deleted until it's no longer
needed,
Make call to registerMediaQuery(mq) conditional on there being a mq,
make it the path through which a layer gets initialized only when that is
true, so as to not perform _onAdd twice.

Move detection of media query matches check out of core if (map) block
in map-layer._validateDisabled()

Remove vestige of old prefers-map-content demo implementation from both
map-link.js and layer.js

Make execution of map-extent's map-projectionchange handler conditional
on the there being a parentLayer._layer property value. This specifically
covers the case when this handler is invoked by the projection change
event happening, in which the parent layer may be disabled due to a
media condition and therefore there is no LayerGroup to add the extentLayer
to.

add map-layer media attribute as an observed attribute

Make map-link._registerMediaQuery async, wait on mapml-viewer to be
ready before trying to register a media query (which may depend on
mapml-viewer.extent).

Remove map-link media attribute from those attributes that are copied
onto the 'rendered' <link> element, because the link element actually
supports the media attribute, but not the media features we are
designing (hence it always forces the element to be disabled).

Update map-layer._registerMediaQuery so that when the observed media
attribute is removed or set to the empty string, the map-layer goes
through the initialization life cycle, as though it was newly connected to
the DOM (it may go from disabled to enabled due to the removal).

Clean up map-layer _registerMediaQuery

Add tests for <map-layer media="..."> attribute

Add tests for <map-link rel="stylesheet" media="..."> attributes

Add test for <map-link rel="features" media="..."> attribute cycling

Update linux image for map-link-media test

Initial implementation of map-style media attribute
Refactor enable/disableLink methods to _enable/_disableLink
Update / fix test title for map-link (should not be 'map-layer')

Add test for map-style media attribute.

Update implementation of map-link and map-style rendering to take
media attribute into account.

Move renderStyles to its own file, import it and export as member func

Co-authored-by: Yushan Mu <yushan.mu@nrcan-rncan.gc.ca>

Author: prushforth

src/layer.js

@@ -6,7 +6,7 @@ import { createLayerControlHTML } from './mapml/elementSupport/layers/createLaye
 
 export class BaseLayerElement extends HTMLElement {
   static get observedAttributes() {
-    return ['src', 'label', 'checked', 'hidden', 'opacity'];
+    return ['src', 'label', 'checked', 'hidden', 'opacity', 'media'];
   }
   /* jshint ignore:start */
   #hasConnected;
@@ -53,6 +53,13 @@ export class BaseLayerElement extends HTMLElement {
     }
   }
 
+  get media() {
+    return this.getAttribute('media');
+  }
+  set media(val) {
+    this.setAttribute('media', val);
+  }
+
   get opacity() {
     // use ?? since 0 is falsy, || would return rhs in that case
     return +(this._opacity ?? this.getAttribute('opacity'));
@@ -114,24 +121,73 @@ export class BaseLayerElement extends HTMLElement {
               this._onAdd();
             }
           }
+          break;
+        case 'media':
+          if (oldValue !== newValue) {
+            this._registerMediaQuery(newValue);
+          }
+          break;
       }
     }
   }
+  _registerMediaQuery(mq) {
+    if (!this._changeHandler) {
+      this._changeHandler = () => {
+        this._onRemove();
+        if (this._mql.matches) {
+          this._onAdd();
+        }
+        // set the disabled 'read-only' attribute indirectly, via _validateDisabled
+        this._validateDisabled();
+      };
+    }
+
+    if (mq) {
+      // a new media query is being established
+      let map = this.getMapEl();
+      if (!map) return;
 
+      // Remove listener from the old media query (if it exists)
+      if (this._mql) {
+        this._mql.removeEventListener('change', this._changeHandler);
+      }
+
+      this._mql = map.matchMedia(mq);
+      this._changeHandler();
+      this._mql.addEventListener('change', this._changeHandler);
+    } else if (this._mql) {
+      // the media attribute removed or query set to ''
+      this._mql.removeEventListener('change', this._changeHandler);
+      delete this._mql;
+      // effectively, no / empty media attribute matches, do what changeHandler does
+      this._onRemove();
+      this._onAdd();
+      this._validateDisabled();
+    }
+  }
+  getMapEl() {
+    return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
+  }
   constructor() {
     // Always call super first in constructor
     super();
     // this._opacity is used to record the current opacity value (with or without updates),
     // the initial value of this._opacity should be set as opacity attribute value, if exists, or the default value 1.0
     this._opacity = this.opacity || 1.0;
-    this._renderingMapContent = M.options.contentPreference;
     this.attachShadow({ mode: 'open' });
   }
   disconnectedCallback() {
     // if the map-layer node is removed from the dom, the layer should be
     // removed from the map and the layer control
     if (this.hasAttribute('data-moving')) return;
     this._onRemove();
+
+    if (this._mql) {
+      if (this._changeHandler) {
+        this._mql.removeEventListener('change', this._changeHandler);
+      }
+      delete this._mql;
+    }
   }
 
   _onRemove() {
@@ -141,13 +197,6 @@ export class BaseLayerElement extends HTMLElement {
     let l = this._layer,
       lc = this._layerControl,
       lchtml = this._layerControlHTML;
-    // remove properties of layer involved in whenReady() logic
-    delete this._layer;
-    delete this._layerControl;
-    delete this._layerControlHTML;
-    delete this._fetchError;
-    this.shadowRoot.innerHTML = '';
-    if (this.src) this.innerHTML = '';
 
     if (l) {
       l.off();
@@ -158,8 +207,16 @@ export class BaseLayerElement extends HTMLElement {
     }
 
     if (lc && !this.hidden) {
+      // lc.removeLayer depends on this._layerControlHTML, can't delete it until after
       lc.removeLayer(l);
     }
+    // remove properties of layer involved in whenReady() logic
+    delete this._layer;
+    delete this._layerControl;
+    delete this._layerControlHTML;
+    delete this._fetchError;
+    this.shadowRoot.innerHTML = '';
+    if (this.src) this.innerHTML = '';
   }
 
   connectedCallback() {
@@ -170,11 +227,17 @@ export class BaseLayerElement extends HTMLElement {
     this._createLayerControlHTML = createLayerControlHTML.bind(this);
     const doConnected = this._onAdd.bind(this);
     const doRemove = this._onRemove.bind(this);
+    const registerMediaQuery = this._registerMediaQuery.bind(this);
+    let mq = this.media;
     this.parentElement
       .whenReady()
       .then(() => {
         doRemove();
-        doConnected();
+        if (mq) {
+          registerMediaQuery(mq);
+        } else {
+          doConnected();
+        }
       })
       .catch((error) => {
         throw new Error('Map never became ready: ' + error);
@@ -189,20 +252,11 @@ export class BaseLayerElement extends HTMLElement {
           e.stopPropagation();
           // if user changes the style in layer control
           if (e.detail) {
-            this._renderingMapContent = e.detail._renderingMapContent;
             this.src = e.detail.src;
           }
         },
         { once: true }
       );
-      this.addEventListener(
-        'zoomchangesrc',
-        function (e) {
-          e.stopPropagation();
-          this.src = e.detail.href;
-        },
-        { once: true }
-      );
       let base = this.baseURI ? this.baseURI : document.baseURI;
       const headers = new Headers();
       headers.append('Accept', 'text/mapml');
@@ -240,7 +294,6 @@ export class BaseLayerElement extends HTMLElement {
           .then(() => {
             // may throw:
             this.selectAlternateOrChangeProjection();
-            this.checkForPreferredContent();
           })
           .then(() => {
             this._layer = mapMLLayer(new URL(this.src, base).href, this, {
@@ -278,7 +331,6 @@ export class BaseLayerElement extends HTMLElement {
           .then(() => {
             // may throw:
             this.selectAlternateOrChangeProjection();
-            this.checkForPreferredContent();
           })
           .then(() => {
             this._layer = mapMLLayer(null, this, {
@@ -317,13 +369,6 @@ export class BaseLayerElement extends HTMLElement {
           );
           this.parentElement.projection = e.cause.mapprojection;
         }
-      } else if (e.message === 'findmatchingpreferredcontent') {
-        if (e.cause.href) {
-          console.log(
-            'Changing layer to matching preferred content at: ' + e.cause.href
-          );
-          this.src = e.cause.href;
-        }
       } else if (e.message === 'Failed to fetch') {
         // cut short whenReady with the _fetchError property
         this._fetchError = true;
@@ -372,23 +417,6 @@ export class BaseLayerElement extends HTMLElement {
     }
   }
 
-  checkForPreferredContent() {
-    let mapml = this.src ? this.shadowRoot : this;
-    let availablePreferMapContents = mapml.querySelector(
-      `map-link[rel="style"][media="prefers-map-content=${this._renderingMapContent}"][href]`
-    );
-    if (availablePreferMapContents) {
-      // resolve href
-      let url = new URL(
-        availablePreferMapContents.getAttribute('href'),
-        availablePreferMapContents.getBase()
-      ).href;
-      throw new Error('findmatchingpreferredcontent', {
-        cause: { href: url }
-      });
-    }
-  }
-
   copyRemoteContentToShadowRoot(mapml) {
     let shadowRoot = this.shadowRoot;
     // get the map-meta[name=projection/cs/extent/zoom] from map-head of remote mapml, attach them to the shadowroot
@@ -454,12 +482,12 @@ export class BaseLayerElement extends HTMLElement {
     };
     const _addStylesheetLink = (mapLink) => {
       this.whenReady().then(() => {
-        this._layer.appendStyleLink(mapLink);
+        this._layer.renderStyles(mapLink);
       });
     };
     const _addStyleElement = (mapStyle) => {
       this.whenReady().then(() => {
-        this._layer.appendStyleElement(mapStyle);
+        this._layer.renderStyles(mapStyle);
       });
     };
     const _addExtentElement = (mapExtent) => {
@@ -610,8 +638,13 @@ export class BaseLayerElement extends HTMLElement {
     setTimeout(() => {
       let layer = this._layer,
         map = layer?._map;
+      // if there's a media query in play, check it early
+      if (this._mql && !this._mql.matches) {
+        this.setAttribute('disabled', '');
+        this.disabled = true;
+        return;
+      }
       if (map) {
-        this._validateLayerZoom({ zoom: map.getZoom() });
         // prerequisite: no inline and remote mapml elements exists at the same time
         const mapExtents = this.src
           ? this.shadowRoot.querySelectorAll('map-extent')
@@ -664,35 +697,6 @@ export class BaseLayerElement extends HTMLElement {
       }
     }, 0);
   }
-  _validateLayerZoom(e) {
-    // get the min and max zooms from all extents
-    let toZoom = e.zoom;
-    let min = this.extent.zoom.minZoom;
-    let max = this.extent.zoom.maxZoom;
-    let inLink = this.src
-        ? this.shadowRoot.querySelector('map-link[rel=zoomin]')
-        : this.querySelector('map-link[rel=zoomin]'),
-      outLink = this.src
-        ? this.shadowRoot.querySelector('map-link[rel=zoomout]')
-        : this.querySelector('map-link[rel=zoomout]');
-    let targetURL;
-    if (!(min <= toZoom && toZoom <= max)) {
-      if (inLink && toZoom > max) {
-        targetURL = inLink.href;
-      } else if (outLink && toZoom < min) {
-        targetURL = outLink.href;
-      }
-      if (targetURL) {
-        this.dispatchEvent(
-          new CustomEvent('zoomchangesrc', {
-            detail: {
-              href: targetURL
-            }
-          })
-        );
-      }
-    }
-  }
   // disable/italicize layer control elements based on the map-layer.disabled property
   toggleLayerControlDisabled() {
     let input = this._layerControlCheckbox,

src/map-extent.js

@@ -311,12 +311,12 @@ export class HTMLExtentElement extends HTMLElement {
     };
     const _addStylesheetLink = (mapLink) => {
       this.whenReady().then(() => {
-        this._extentLayer.appendStyleLink(mapLink);
+        this._extentLayer.renderStyles(mapLink);
       });
     };
     const _addStyleElement = (mapStyle) => {
       this.whenReady().then(() => {
-        this._extentLayer.appendStyleElement(mapStyle);
+        this._extentLayer.renderStyles(mapStyle);
       });
     };
     for (let i = 0; i < elementsGroup.length; ++i) {
@@ -431,7 +431,7 @@ export class HTMLExtentElement extends HTMLElement {
 
   _handleChange() {
     // add _extentLayer to map if map-extent is checked, otherwise remove it
-    if (this.checked && !this.disabled) {
+    if (this.checked && !this.disabled && this.parentLayer._layer) {
       // can be added to mapmllayer layerGroup no matter map-layer is checked or not
       this._extentLayer.addTo(this.parentLayer._layer);
       this._extentLayer.setZIndex(