Support for map-link[rel=stylesheet] and map-style in map-extent (#945)

* Support for map-link[rel=stylesheet] and map-style in map-extent

Closes #944

Add sloMo to ArrowKeyNaveContextMenu.test.js

* De-flake popupTabNavigation, hopefully for good

---------

Co-authored-by: prushfor <prushfor@L-BSC-A146390.nrn.nrcan.gc.ca>

Author: prushforth

src/map-extent.js

@@ -262,6 +262,11 @@ export class MapExtent extends HTMLElement {
     // this._layerControlHTML is the fieldset for the extent in the LayerControl
     this._layerControlHTML = this._createLayerControlExtentHTML();
     this._calculateBounds();
+    // instead of children using parents' whenReady which can be cyclic,
+    // when this element is ready, run stuff that is only available after
+    // initialization
+    this._runMutationObserver(this.children);
+    // make sure same thing happens when children are added
     this._bindMutationObserver();
   }
   /*
@@ -290,6 +295,16 @@ export class MapExtent extends HTMLElement {
         this._validateDisabled();
       });
     };
+    const _addStylesheetLink = (mapLink) => {
+      this.whenReady().then(() => {
+        this._extentLayer.appendStyleLink(mapLink);
+      });
+    };
+    const _addStyleElement = (mapStyle) => {
+      this.whenReady().then(() => {
+        this._extentLayer.appendStyleElement(mapStyle);
+      });
+    };
     for (let i = 0; i < elementsGroup.length; ++i) {
       let element = elementsGroup[i];
       switch (element.nodeName) {
@@ -303,7 +318,14 @@ export class MapExtent extends HTMLElement {
           }
           break;
         case 'MAP-LINK':
-        // might need this in future, among others
+          if (element.link && !element.link.isConnected)
+            _addStylesheetLink(element);
+          break;
+        case 'MAP-STYLE':
+          if (element.styleElement && !element.styleElement.isConnected) {
+            _addStyleElement(element);
+          }
+          break;
         default:
           break;
       }

src/map-link.js

@@ -316,6 +316,8 @@ export class MapLink extends HTMLElement {
       this._stylesheetHost._layer.appendStyleLink(this);
     } else if (this._stylesheetHost._templatedLayer) {
       this._stylesheetHost._templatedLayer.appendStyleLink(this);
+    } else if (this._stylesheetHost._extentLayer) {
+      this._stylesheetHost._extentLayer.appendStyleLink(this);
     }
 
     function copyAttributes(source, target) {

src/map-style.js

@@ -27,11 +27,12 @@ export class MapStyle extends HTMLElement {
     this.styleElement.mapStyle = this;
     this.styleElement.textContent = this.textContent;
     copyAttributes(this, this.styleElement);
-
     if (this._stylesheetHost._layer) {
       this._stylesheetHost._layer.appendStyleElement(this);
     } else if (this._stylesheetHost._templatedLayer) {
       this._stylesheetHost._templatedLayer.appendStyleElement(this);
+    } else if (this._stylesheetHost._extentLayer) {
+      this._stylesheetHost._extentLayer.appendStyleElement(this);
     }
 
     function copyAttributes(source, target) {

src/mapml/layers/ExtentLayer.js

@@ -75,6 +75,31 @@ export var ExtentLayer = L.LayerGroup.extend({
     this._extentEl._opacity = opacity;
     if (this._extentEl._opacitySlider)
       this._extentEl._opacitySlider.value = opacity;
+  },
+  appendStyleLink: function (mapLink) {
+    if (!mapLink.link) return;
+    let positionAndNode = this._getStylePositionAndNode();
+    positionAndNode.node.insertAdjacentElement(
+      positionAndNode.position,
+      mapLink.link
+    );
+  },
+  _getStylePositionAndNode: function () {
+    return this._container.lastChild &&
+      (this._container.lastChild.nodeName.toUpperCase() === 'SVG' ||
+        this._container.lastChild.classList.contains('mapml-vector-container'))
+      ? { position: 'beforebegin', node: this._container.lastChild }
+      : this._container.lastChild
+      ? { position: 'afterend', node: this._container.lastChild }
+      : { position: 'afterbegin', node: this._container };
+  },
+  appendStyleElement: function (mapStyle) {
+    if (!mapStyle.styleElement) return;
+    let positionAndNode = this._getStylePositionAndNode();
+    positionAndNode.node.insertAdjacentElement(
+      positionAndNode.position,
+      mapStyle.styleElement
+    );
   }
 });
 export var extentLayer = function (options) {

src/mapml/layers/TemplatedTileLayer.js

@@ -196,14 +196,15 @@ export var TemplatedTileLayer = L.TileLayer.extend({
         if (href) {
           if (!container.querySelector("link[href='" + href + "']")) {
             var linkElm = document.createElement('link');
+            copyAttributes(stylesheets[i], linkElm);
             linkElm.setAttribute('href', href);
-            linkElm.setAttribute('rel', 'stylesheet');
             ss.push(linkElm);
           }
         }
       } else {
         // <map-style>
         var styleElm = document.createElement('style');
+        copyAttributes(stylesheets[i], styleElm);
         styleElm.textContent = stylesheets[i].textContent;
         ss.push(styleElm);
       }
@@ -215,6 +216,12 @@ export var TemplatedTileLayer = L.TileLayer.extend({
     for (var s = ss.length - 1; s >= 0; s--) {
       container.insertAdjacentElement('afterbegin', ss[s]);
     }
+    function copyAttributes(source, target) {
+      return Array.from(source.attributes).forEach((attribute) => {
+        if (attribute.nodeName !== 'href')
+          target.setAttribute(attribute.nodeName, attribute.nodeValue);
+      });
+    }
   },
 
   _createFeatures: function (markup, coords, tile) {

test/e2e/core/ArrowKeyNavContextMenu.test.js

@@ -4,7 +4,7 @@ test.describe('Using arrow keys to navigate context menu', () => {
   let page;
   let context;
   test.beforeAll(async function () {
-    context = await chromium.launchPersistentContext('');
+    context = await chromium.launchPersistentContext('', { slowMo: 250 });
     page =
       context.pages().find((page) => page.url() === 'about:blank') ||
       (await context.newPage());

test/e2e/core/popupTabNavigation.html

@@ -9,9 +9,9 @@
 </head>
 
 <body>
-  <mapml-viewer style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040"
+  <mapml-viewer data-testid="viewer" style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040"
     lon="-75.2202344" controls>
-    <layer- id="query" label="Fire" checked>
+    <layer- data-testid="query" id="query" label="Fire" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" value="18" min="0" max="18" ></map-input>
         <map-input name="txmin" type="location" units="tilematrix" position="top-left" axis="easting" min="-2.003750834E7"
@@ -46,10 +46,10 @@
       <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
       <map-meta name="cs" content="gcrs"></map-meta>
       <map-meta name="extent" content="zoom=0,top-left-column=0,top-left-row=0,bottom-right-column=5,bottom-right-row=5"></map-meta>
-      <map-feature zoom="2" class="refDiff">
+      <map-feature data-testid="big-square" zoom="2" class="refDiff">
         <map-properties>
           <h1>Test</h1>
-          <a href="www.example.com">test</a>
+          <a data-testid="anchor" href="www.example.com">test</a>
         </map-properties>
         <map-geometry cs="tilematrix">
           <map-polygon>
@@ -69,7 +69,7 @@ <h1>Test</h1>
         </map-geometry>
       </map-feature>
 
-      <map-feature zoom="2" class="refDiff">
+      <map-feature data-testid="small-trapezoid" zoom="2" class="refDiff">
         <map-properties>
           <h1>Test</h1>
         </map-properties>
@@ -80,7 +80,7 @@ <h1>Test</h1>
         </map-geometry>
       </map-feature>
     </layer->
-    <layer- id="vector" label="vector states" src="data/us_pop_density.mapml"></layer->
+    <layer- data-testid="vector" id="vector" label="vector states" src="data/us_pop_density.mapml"></layer->
   </mapml-viewer>
 </body>