From d21452d933509247a000a981a9b5aab01de90b99 Mon Sep 17 00:00:00 2001 From: Peter Rushforth Date: Mon, 23 Sep 2024 15:29:21 -0400 Subject: [PATCH] Bundle web-map into mapml-viewer. Remove web-map build target. Refactor all web-map test html files to depend on mapml-viewer.js only Prettier format change to geojson2mapml.test.js --- Gruntfile.js | 7 +- index.html | 114 ++++++++++++++---- src/mapml-viewer.js | 11 +- src/web-map.js | 21 ---- test/e2e/api/domApi-web-map.html | 2 +- test/e2e/core/axisInferring.html | 2 +- test/e2e/core/drag.html | 2 +- test/e2e/core/dragDropMap.html | 2 +- test/e2e/core/featureLinks.html | 2 +- test/e2e/core/fullscreenControlWebMap.html | 2 +- test/e2e/core/linkTypes.html | 2 +- test/e2e/core/mapElement.html | 2 +- test/e2e/core/mapFeature.html | 2 +- test/e2e/core/mismatchedLayerWithMap.test.js | 2 +- test/e2e/core/missingMetaParameters.html | 2 +- test/e2e/core/projectionChange.html | 2 +- test/e2e/core/styleParsing.html | 2 +- test/e2e/core/zoomChangeProjection.html | 2 +- .../map-extent/map-extent-api-web-map.html | 2 +- test/e2e/elements/map/map-in-shadow-root.html | 2 +- .../elements/map/map-in-shadow-root.test.js | 2 + test/e2e/geojson/geojson2mapml.test.js | 15 ++- test/e2e/layers/featureLayer.html | 2 +- test/e2e/layers/staticTileLayer.html | 2 +- .../step/templatedFeaturesLayerStep.html | 2 +- test/e2e/layers/templatedFeatures.html | 2 +- test/e2e/layers/templatedImageLayer.html | 2 +- test/e2e/layers/templatedTileLayer.html | 2 +- test/e2e/web-map/map.html | 2 +- test/e2e/web-map/mapCaption.html | 2 +- test/e2e/web-map/mapControls.html | 2 +- test/e2e/web-map/mapCssNoDomination.html | 2 +- .../web-map/mapHeightAndWidthAttributes.html | 2 +- test/e2e/web-map/mapNoWidthAndHeight.html | 2 +- test/e2e/web-map/mapStatic.html | 2 +- test/e2e/web-map/mapWindowSizeChange.html | 2 +- test/e2e/web-map/web-map.html | 2 +- web-map-index.html | 29 ++++- 38 files changed, 172 insertions(+), 89 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 4c40f6bf1..cc282a581 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -23,8 +23,7 @@ module.exports = function(grunt) { }, dist: { files: { - 'dist/mapml-viewer.js': ['<%= rollup.main.dest %>'], - 'dist/web-map.js': ['<%= rollup.webmap.dest %>'] + 'dist/mapml-viewer.js': ['<%= rollup.main.dest %>'] } } }, @@ -200,10 +199,6 @@ module.exports = function(grunt) { main: { dest: 'dist/mapmlviewer.js', src: 'src/mapml/index.js' // Only one source file is permitted - }, - webmap: { - dest: 'dist/webmap.js', - src: 'src/mapml/index-web-map.js' // Only one source file is permitted } }, prettier: { diff --git a/index.html b/index.html index 96ea53c63..1b253e79e 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@ /* Full viewport. */ width: 100%; - height: 100%; + height: 50%; /* Remove default (native-like) border. */ border: none; @@ -45,13 +45,44 @@ contain-intrinsic-size: 304px 154px; } - /* Ensure inline layer content is hidden if custom/built-in elements isn't - supported, or if javascript is disabled. This needs to be defined separately - from the above, because the `:not(:defined)` selector invalidates the entire - declaration in browsers that do not support it. */ - layer- { - display: none; - } + /* Specifying the `:defined` selector is recommended to style the map + element, such that styles don't apply when fallback content is in use + (e.g. when scripting is disabled or when custom/built-in elements isn't + supported in the browser). */ + map[is="web-map"]:defined { + /* Responsive map. */ + max-width: 100%; + + /* Full viewport. */ + width: 100%; + height: 50%; + + /* Remove default (native-like) border. */ + border: none; + + vertical-align: middle; + } + + /* Pre-style to avoid Layout Shift. */ + map[is="web-map"]:not(:defined) { + display: inline-block; + contain: size; + contain-intrinsic-size: 304px 154px; + } + + /* Pre-style to avoid FOUC of inline layer- and fallback content. */ + map[is="web-map"]:not(:defined) + img[usemap], + map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) { + display: none; + } + + /* Ensure inline layer content is hidden if custom/built-in elements isn't + supported, or if javascript is disabled. This needs to be defined separately + from the above, because the `:not(:defined)` selector invalidates the entire + declaration in browsers that do not support it. */ + layer- { + display: none; + } @@ -84,20 +128,46 @@ - - - - All cuisines - African - Asian - Cajun - Indian - Italian - Mexican - - - - + + + + All cuisines + African + Asian + Cajun + Indian + Italian + Mexican + + + + + + + + + + + + + + + + + + + All cuisines + African + Asian + Cajun + Indian + Italian + Mexican + + + + + diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 0bf56e4d2..2486d8b16 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -9,6 +9,8 @@ import { MapInput } from './map-input.js'; import { MapSelect } from './map-select.js'; import { MapLink } from './map-link.js'; import { MapStyle } from './map-style.js'; +import { WebMap } from './web-map'; +import { MapArea } from './map-area.js'; import { layerControl } from './mapml/control/LayerControl'; import { AttributionButton } from './mapml/control/AttributionButton'; @@ -1440,8 +1442,15 @@ export class MapViewer extends HTMLElement { return geojsonLayer; } } -// need to provide options { extends: ... } for custom built-in elements window.customElements.define('mapml-viewer', MapViewer); +try { + window.customElements.define('web-map', WebMap, { extends: 'map' }); + window.customElements.define('map-area', MapArea, { extends: 'area' }); +} catch (error) { + console.log( + 'Exception occurred while defining custom built-in elements:\n' + error + ); +} window.customElements.define('layer-', MapLayer); window.customElements.define('map-caption', MapCaption); window.customElements.define('map-feature', MapFeature); diff --git a/src/web-map.js b/src/web-map.js index c134cc6d1..e24109fa1 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -1,16 +1,6 @@ import { Util } from './mapml/utils/Util'; import { DOMTokenList } from './mapml/utils/DOMTokenList'; -import { MapLayer } from './layer.js'; -import { MapArea } from './map-area.js'; -import { MapCaption } from './map-caption.js'; -import { MapFeature } from './map-feature.js'; -import { MapExtent } from './map-extent.js'; -import { MapInput } from './map-input.js'; -import { MapSelect } from './map-select.js'; -import { MapLink } from './map-link.js'; -import { MapStyle } from './map-style.js'; - import { layerControl } from './mapml/control/LayerControl'; import { AttributionButton } from './mapml/control/AttributionButton'; import { reloadButton } from './mapml/control/ReloadButton'; @@ -1517,14 +1507,3 @@ export class WebMap extends HTMLMapElement { } } } -// need to provide options { extends: ... } for custom built-in elements -window.customElements.define('web-map', WebMap, { extends: 'map' }); -window.customElements.define('layer-', MapLayer); -window.customElements.define('map-area', MapArea, { extends: 'area' }); -window.customElements.define('map-caption', MapCaption); -window.customElements.define('map-feature', MapFeature); -window.customElements.define('map-extent', MapExtent); -window.customElements.define('map-input', MapInput); -window.customElements.define('map-select', MapSelect); -window.customElements.define('map-link', MapLink); -window.customElements.define('map-style', MapStyle); diff --git a/test/e2e/api/domApi-web-map.html b/test/e2e/api/domApi-web-map.html index 524d48db5..55a7e89ae 100644 --- a/test/e2e/api/domApi-web-map.html +++ b/test/e2e/api/domApi-web-map.html @@ -3,7 +3,7 @@ DOM API Test page - + diff --git a/test/e2e/core/axisInferring.html b/test/e2e/core/axisInferring.html index ef19b925b..da6c793d6 100644 --- a/test/e2e/core/axisInferring.html +++ b/test/e2e/core/axisInferring.html @@ -5,7 +5,7 @@ Inferring Axes - + diff --git a/test/e2e/core/missingMetaParameters.html b/test/e2e/core/missingMetaParameters.html index 89bf1bead..d35e72ac4 100644 --- a/test/e2e/core/missingMetaParameters.html +++ b/test/e2e/core/missingMetaParameters.html @@ -5,7 +5,7 @@ Missing Meta Parameters Test - + diff --git a/test/e2e/elements/map-extent/map-extent-api-web-map.html b/test/e2e/elements/map-extent/map-extent-api-web-map.html index cb6b8c026..758eb16d7 100644 --- a/test/e2e/elements/map-extent/map-extent-api-web-map.html +++ b/test/e2e/elements/map-extent/map-extent-api-web-map.html @@ -4,7 +4,7 @@ Basic Map - +