Update mapml-viewer to be shadow host-compatible (#950)

* Update mapml-viewer to be shadow host-compatible

* Update ci-testing.yml

Focus on getting flaky tests to pass

Author: prushforth

.github/workflows/ci-testing.yml

@@ -18,7 +18,7 @@ jobs:
     - run: npx playwright install  --with-deps
     - run: npm install -g grunt-cli
     - run: grunt default
-    - run: xvfb-run --auto-servernum -- npx playwright test  --workers=1 --retries=3
+    - run: xvfb-run --auto-servernum -- npx playwright test tab menu  --workers=1 --retries=3
 #    - run: xvfb-run --auto-servernum -- npm run jest
       env:
         CI: true

src/map-extent.js

@@ -125,15 +125,12 @@ export class MapExtent extends HTMLElement {
       animate: false
     });
   }
+
   getMapEl() {
-    return this.getRootNode() instanceof ShadowRoot
-      ? this.getRootNode().host.closest('mapml-viewer,map[is=web-map]')
-      : this.closest('mapml-viewer,map[is=web-map]');
+    return M.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return this.getRootNode() instanceof ShadowRoot
-      ? this.getRootNode().host
-      : this.closest('layer-');
+    return M.getClosest(this, 'layer-');
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (this.#hasConnected /* jshint ignore:line */) {

src/map-feature.js

@@ -128,39 +128,11 @@ export class MapFeature extends HTMLElement {
       return this._getFeatureExtent();
     }
   }
-  getLayerEl() {
-    let layerEl;
-    if (this.getRootNode() instanceof ShadowRoot) {
-      if (this.getRootNode().host.getRootNode() instanceof ShadowRoot) {
-        //   layer- src
-        //     > sd
-        //      map-extent
-        //       map-link
-        //        > sd
-        //          map-feature (1)
-        layerEl = this.getRootNode().host.getRootNode().host;
-      } else if (this.getRootNode().host.nodeName === 'MAP-LINK') {
-        //   layer-
-        //     map-extent
-        //       map-link
-        //         > sd
-        //           map-feature (4)
-        layerEl = this.getRootNode().host.closest('layer-');
-      } else {
-        //   layer- src
-        //     > sd
-        //        map-feature (2)
-        layerEl = this.getRootNode().host;
-      }
-    } else {
-      //     layer-
-      //       map-feature (3)
-      layerEl = this.closest('layer-');
-    }
-    return layerEl;
-  }
   getMapEl() {
-    return this.getLayerEl().closest('mapml-viewer,map[is=web-map]');
+    return M.getClosest(this, 'mapml-viewer,map[is=web-map]');
+  }
+  getLayerEl() {
+    return M.getClosest(this, 'layer-');
   }
 
   attributeChangedCallback(name, oldValue, newValue) {

src/map-input.js

@@ -172,10 +172,11 @@ export class MapInput extends HTMLElement {
       this.setAttribute('step', val);
     }
   }
+  getMapEl() {
+    return M.getClosest(this, 'mapml-viewer,map[is=web-map]');
+  }
   getLayerEl() {
-    return this.getRootNode() instanceof ShadowRoot
-      ? this.getRootNode().host
-      : this.closest('layer-');
+    return M.getClosest(this, 'layer-');
   }
   attributeChangedCallback(name, oldValue, newValue) {
     this.whenReady()

src/map-link.js

@@ -152,14 +152,10 @@ export class MapLink extends HTMLElement {
     });
   }
   getMapEl() {
-    return this.getRootNode() instanceof ShadowRoot
-      ? this.getRootNode().host.closest('mapml-viewer,map[is=web-map]')
-      : this.closest('mapml-viewer,map[is=web-map]');
+    return M.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return this.getRootNode() instanceof ShadowRoot
-      ? this.getRootNode().host
-      : this.closest('layer-');
+    return M.getClosest(this, 'layer-');
   }
 
   attributeChangedCallback(name, oldValue, newValue) {

src/mapml-viewer.js

@@ -636,7 +636,11 @@ export class MapViewer extends HTMLElement {
       false
     );
 
-    this.parentElement.addEventListener('keyup', function (e) {
+    let host =
+      this.getRootNode() instanceof ShadowRoot
+        ? this.getRootNode().host
+        : this.parentElement;
+    host.addEventListener('keyup', function (e) {
       if (
         e.keyCode === 9 &&
         document.activeElement.nodeName === 'MAPML-VIEWER'
@@ -661,7 +665,7 @@ export class MapViewer extends HTMLElement {
         this._map.fire('keypress', { originalEvent: e });
       }
     });
-    this.parentElement.addEventListener('mousedown', function (e) {
+    host.addEventListener('mousedown', function (e) {
       if (document.activeElement.nodeName === 'MAPML-VIEWER') {
         document.activeElement.dispatchEvent(
           new CustomEvent('mapfocused', { detail: { target: this } })

src/mapml.css

@@ -228,7 +228,8 @@ button.mapml-contextmenu-item:disabled {
 }
 
 /*
- * Fullscreen control.
+ * Fullscreen control. Image contains the on and off images, toggled via
+ * the background-position property
  */
 
 .leaflet-control-fullscreen a {  
@@ -238,7 +239,10 @@ button.mapml-contextmenu-item:disabled {
   background-position: 3px 3px;
 }
 
-:host(.mapml-fullscreen-on) .leaflet-control-fullscreen a {
+/*
+* See: https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function
+and: https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen */
+:host(:fullscreen) .leaflet-control-fullscreen a {
   background-position: 3px -35px;
 }
 
@@ -247,11 +251,6 @@ button.mapml-contextmenu-item:disabled {
   height: 100%!important;
 }
 
-:host(.mapml-fullscreen-on) {
-  width: 100%!important;
-  height: 100%!important;
-}
-
 :host(.leaflet-pseudo-fullscreen) {
   position: fixed!important;
   width: 100%!important;

src/mapml/control/FullscreenButton.js

@@ -53,11 +53,10 @@ L.Map.include({
   toggleFullscreen: function (options) {
     // the <map> element can't contain a shadow root, so we used a child <div>
     // <mapml-viewer> can contain a shadow root, so return it directly
-    var mapEl = this.getContainer().getRootNode().host,
-      container = mapEl.nodeName === 'DIV' ? mapEl.parentElement : mapEl;
+    var mapEl = M.getClosest(this.getContainer(), 'mapml-viewer,[is=web-map]');
     if (this.isFullscreen()) {
       if (options && options.pseudoFullscreen) {
-        this._disablePseudoFullscreen(container);
+        this._disablePseudoFullscreen(mapEl);
       } else if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.mozCancelFullScreen) {
@@ -67,21 +66,21 @@ L.Map.include({
       } else if (document.msExitFullscreen) {
         document.msExitFullscreen();
       } else {
-        this._disablePseudoFullscreen(container);
+        this._disablePseudoFullscreen(mapEl);
       }
     } else {
       if (options && options.pseudoFullscreen) {
-        this._enablePseudoFullscreen(container);
-      } else if (container.requestFullscreen) {
-        container.requestFullscreen();
-      } else if (container.mozRequestFullScreen) {
-        container.mozRequestFullScreen();
-      } else if (container.webkitRequestFullscreen) {
-        container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
-      } else if (container.msRequestFullscreen) {
-        container.msRequestFullscreen();
+        this._enablePseudoFullscreen(mapEl);
+      } else if (mapEl.requestFullscreen) {
+        mapEl.requestFullscreen();
+      } else if (mapEl.mozRequestFullScreen) {
+        mapEl.mozRequestFullScreen();
+      } else if (mapEl.webkitRequestFullscreen) {
+        mapEl.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      } else if (mapEl.msRequestFullscreen) {
+        mapEl.msRequestFullscreen();
       } else {
-        this._enablePseudoFullscreen(container);
+        this._enablePseudoFullscreen(mapEl);
       }
     }
     this.getContainer().focus();
@@ -101,7 +100,10 @@ L.Map.include({
 
   _setFullscreen: function (fullscreen) {
     this._isFullscreen = fullscreen;
-    var container = this.getContainer().getRootNode().host;
+    var container = M.getClosest(
+      this.getContainer(),
+      'mapml-viewer,[is=web-map]'
+    );
     if (fullscreen) {
       L.DomUtil.addClass(container, 'mapml-fullscreen-on');
     } else {
@@ -111,18 +113,12 @@ L.Map.include({
   },
 
   _onFullscreenChange: function (e) {
-    var fullscreenElement =
-        document.fullscreenElement ||
-        document.mozFullScreenElement ||
-        document.webkitFullscreenElement ||
-        document.msFullscreenElement,
-      mapEl = this.getContainer().getRootNode().host,
-      container = mapEl.nodeName === 'DIV' ? mapEl.parentElement : mapEl;
-
-    if (fullscreenElement === container && !this._isFullscreen) {
+    var fullscreenElement = M.getClosest(this.getContainer(), ':fullscreen'),
+      mapEl = M.getClosest(this.getContainer(), 'mapml-viewer,[is=web-map]');
+    if (fullscreenElement === mapEl && !this._isFullscreen) {
       this._setFullscreen(true);
       this.fire('fullscreenchange');
-    } else if (fullscreenElement !== container && this._isFullscreen) {
+    } else if (fullscreenElement !== mapEl && this._isFullscreen) {
       this._setFullscreen(false);
       this.fire('fullscreenchange');
     }

src/mapml/index.js

@@ -840,6 +840,7 @@ import { DOMTokenList } from './utils/DOMTokenList';
   M.getZoomBoundsFromMeta = Util.getZoomBoundsFromMeta;
   M.getZoomBounds = Util.getZoomBounds;
   M.getNativeVariables = Util.getNativeVariables;
+  M.getClosest = Util.getClosest;
 
   M.QueryHandler = QueryHandler;
   M.ContextMenu = ContextMenu;

src/mapml/utils/Util.js

@@ -1519,5 +1519,23 @@ export var Util = {
     )
       newZoom--;
     return newZoom;
+  },
+  getClosest(node, selector) {
+    if (!node) {
+      return null;
+    }
+    if (node instanceof ShadowRoot) {
+      return M.getClosest(node.host, selector);
+    }
+
+    if (node instanceof HTMLElement) {
+      if (node.matches(selector)) {
+        return node;
+      } else {
+        return M.getClosest(node.parentNode, selector);
+      }
+    }
+
+    return M.getClosest(node.parentNode, selector);
   }
 };