Skip to content

Commit 9730264

Browse files
Jacky0299AliyanH
Jacky0299
and
AliyanH
authored
static attribute added to mapml-viewer (#753)
* static attribute added to mapml-viewer * tests added and simplified code * sync changes with web-map * last changes * Aliyan suggested changes * minor code styling change --------- Co-authored-by: AliyanH <[email protected]>
1 parent d7edeed commit 9730264

File tree

6 files changed

+368
-9
lines changed

6 files changed

+368
-9
lines changed

‎src/mapml-viewer.js‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { MapCaption } from './map-caption.js';
55

66
export class MapViewer extends HTMLElement {
77
static get observedAttributes() {
8-
return ['lat', 'lon', 'zoom', 'projection', 'width', 'height', 'controls'];
8+
return ['lat', 'lon', 'zoom', 'projection', 'width', 'height', 'controls', 'static'];
99
}
1010
// see comments below regarding attributeChangedCallback vs. getter/setter
1111
// usage. Effectively, the user of the element must use the property, not
@@ -108,6 +108,16 @@ export class MapViewer extends HTMLElement {
108108
}
109109
return (formattedExtent);
110110
}
111+
get static() {
112+
return this.hasAttribute('static');
113+
}
114+
set static(value) {
115+
const isStatic = Boolean(value);
116+
if (isStatic)
117+
this.setAttribute('static', '');
118+
else
119+
this.removeAttribute('static');
120+
}
111121

112122
constructor() {
113123
// Always call super first in constructor
@@ -234,6 +244,10 @@ export class MapViewer extends HTMLElement {
234244
this.dispatchEvent(new CustomEvent('createmap'));
235245
}
236246

247+
if (this._map && this.hasAttribute('static')) {
248+
this._toggleStatic();
249+
}
250+
237251
/*
238252
1. only deletes aria-label when the last (only remaining) map caption is removed
239253
2. only deletes aria-label if the aria-label was defined by the map caption element itself
@@ -347,10 +361,35 @@ export class MapViewer extends HTMLElement {
347361
}
348362
break;
349363
case 'width':
350-
if (oldValue !== newValue) {
351-
this._changeWidth(newValue);
364+
if (oldValue !== newValue) {
365+
this._changeWidth(newValue);
366+
}
367+
break;
368+
case 'static':
369+
this._toggleStatic();
370+
break;
371+
}
372+
}
373+
_toggleStatic(){
374+
const isStatic = this.hasAttribute('static');
375+
if (this._map) {
376+
if (isStatic) {
377+
this._map.dragging.disable();
378+
this._map.touchZoom.disable();
379+
this._map.doubleClickZoom.disable();
380+
this._map.scrollWheelZoom.disable();
381+
this._map.boxZoom.disable();
382+
this._map.keyboard.disable();
383+
this._zoomControl.disable();
384+
} else {
385+
this._map.dragging.enable();
386+
this._map.touchZoom.enable();
387+
this._map.doubleClickZoom.enable();
388+
this._map.scrollWheelZoom.enable();
389+
this._map.boxZoom.enable();
390+
this._map.keyboard.enable();
391+
this._zoomControl.enable();
352392
}
353-
break;
354393
}
355394
}
356395
_dropHandler(event) {

‎src/web-map.js‎

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { MapCaption } from './map-caption.js';
66

77
export class WebMap extends HTMLMapElement {
88
static get observedAttributes() {
9-
return ['lat', 'lon', 'zoom', 'projection', 'width', 'height', 'controls'];
9+
return ['lat', 'lon', 'zoom', 'projection', 'width', 'height', 'controls', 'static'];
1010
}
1111
// see comments below regarding attributeChangedCallback vs. getter/setter
1212
// usage. Effectively, the user of the element must use the property, not
@@ -112,6 +112,16 @@ export class WebMap extends HTMLMapElement {
112112
}
113113
return (formattedExtent);
114114
}
115+
get static() {
116+
return this.hasAttribute('static');
117+
}
118+
set static(value) {
119+
const isStatic = Boolean(value);
120+
if (isStatic)
121+
this.setAttribute('static', '');
122+
else
123+
this.removeAttribute('static');
124+
}
115125

116126
constructor() {
117127
// Always call super first in constructor
@@ -274,6 +284,10 @@ export class WebMap extends HTMLMapElement {
274284
if(!custom){
275285
this.dispatchEvent(new CustomEvent('createmap'));
276286
}
287+
288+
if (this._map && this.hasAttribute('static')) {
289+
this._toggleStatic();
290+
}
277291

278292
/*
279293
1. only deletes aria-label when the last (only remaining) map caption is removed
@@ -387,12 +401,37 @@ export class WebMap extends HTMLMapElement {
387401
}
388402
break;
389403
case 'width':
390-
if (oldValue !== newValue) {
391-
this._changeWidth(newValue);
392-
}
404+
if (oldValue !== newValue) {
405+
this._changeWidth(newValue);
406+
}
407+
break;
408+
case 'static':
409+
this._toggleStatic();
393410
break;
394411
}
395412
}
413+
_toggleStatic(){
414+
const isStatic = this.hasAttribute('static');
415+
if (this._map) {
416+
if (isStatic) {
417+
this._map.dragging.disable();
418+
this._map.touchZoom.disable();
419+
this._map.doubleClickZoom.disable();
420+
this._map.scrollWheelZoom.disable();
421+
this._map.boxZoom.disable();
422+
this._map.keyboard.disable();
423+
this._zoomControl.disable();
424+
} else {
425+
this._map.dragging.enable();
426+
this._map.touchZoom.enable();
427+
this._map.doubleClickZoom.enable();
428+
this._map.scrollWheelZoom.enable();
429+
this._map.boxZoom.enable();
430+
this._map.keyboard.enable();
431+
this._zoomControl.enable();
432+
}
433+
}
434+
}
396435
_dropHandler(event) {
397436
event.preventDefault();
398437
let text = event.dataTransfer.getData("text");
@@ -880,4 +919,4 @@ export class WebMap extends HTMLMapElement {
880919
window.customElements.define('web-map', WebMap, { extends: 'map' });
881920
window.customElements.define('layer-', MapLayer);
882921
window.customElements.define('map-area', MapArea, {extends: 'area'});
883-
window.customElements.define('map-caption',MapCaption);
922+
window.customElements.define('map-caption',MapCaption);

‎test/e2e/mapml-viewer/staticAttribute.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title>index-map.html</title>
7+
<script type="module" src="./mapml-viewer.js"></script>
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
}
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
/* Specifying the `:defined` selector is recommended to style the map
19+
element, such that styles don't apply when fallback content is in use
20+
(e.g. when scripting is disabled or when custom/built-in elements isn't
21+
supported in the browser). */
22+
mapml-viewer:defined {
23+
/* Responsive map. */
24+
max-width: 100%;
25+
26+
/* Full viewport. */
27+
width:100%;
28+
height:100%;
29+
/* Remove default (native-like) border. */
30+
border: none;
31+
32+
vertical-align: middle;
33+
}
34+
35+
/* Pre-style to avoid FOUC of inline layer- and fallback content. */
36+
mapml-viewer:not(:defined) > * {
37+
display: none;
38+
}
39+
40+
/* Pre-style to avoid Layout Shift. */
41+
mapml-viewer:not(:defined) {
42+
display: inline-block;
43+
contain: size;
44+
contain-intrinsic-size: 304px 154px;
45+
}
46+
47+
/* Ensure inline layer content is hidden if custom/built-in elements isn't
48+
supported, or if javascript is disabled. This needs to be defined separately
49+
from the above, because the `:not(:defined)` selector invalidates the entire
50+
declaration in browsers that do not support it. */
51+
layer- {
52+
display: none;
53+
}
54+
</style>
55+
<noscript>
56+
<style>
57+
/* Ensure fallback content (children of the map element) is displayed if
58+
custom/built-in elements is supported but javascript is disabled. */
59+
mapml-viewer:not(:defined) > :not(layer-) {
60+
display: initial;
61+
}
62+
63+
/* "Reset" the properties used to pre-style (to avoid Layout Shift) if
64+
custom/built-in elements is supported but javascript is disabled. */
65+
mapml-viewer:not(:defined) {
66+
display: initial;
67+
contain: initial;
68+
contain-intrinsic-size: initial;
69+
}
70+
</style>
71+
</noscript>
72+
</head>
73+
<body>
74+
<mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
75+
<layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
76+
</mapml-viewer>
77+
</body>
78+
</html>

‎test/e2e/mapml-viewer/staticAttribute.test.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { test, expect, chromium } from '@playwright/test';
2+
3+
test.describe("Adding Static Attribute to mapml-viewer", () => {
4+
let page;
5+
let context;
6+
test.beforeAll(async function() {
7+
context = await chromium.launchPersistentContext('');
8+
page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage();
9+
await page.goto("staticAttribute.html");
10+
});
11+
test.afterAll(async function () {
12+
await context.close();
13+
});
14+
15+
test("Setting New Static Attribute to mapml-viewer", async () => {
16+
//setting static attribute in the mapml-viewer tag
17+
await page.$eval("body > mapml-viewer", (viewer) => viewer.static = true);
18+
let attribute = await page.$eval("body > mapml-viewer", (viewer) => viewer.hasAttribute("static"));
19+
expect(attribute).toEqual(true);
20+
//panning, zooming, etc. disabled
21+
let drag = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.dragging._enabled);
22+
let touchZoom = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.touchZoom._enabled);
23+
let doubleClickZoom = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.doubleClickZoom._enabled);
24+
let scrollWheelZoom = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.scrollWheelZoom._enabled);
25+
let boxZoom = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.boxZoom._enabled);
26+
let keyboard = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.keyboard._enabled);
27+
let zoomControl = await page.$eval("body > mapml-viewer", (viewer) => viewer._zoomControl._disabled);
28+
expect(drag).toEqual(false);
29+
expect(touchZoom).toEqual(false);
30+
expect(doubleClickZoom).toEqual(false);
31+
expect(scrollWheelZoom).toEqual(false);
32+
expect(boxZoom).toEqual(false);
33+
expect(keyboard).toEqual(false);
34+
expect(zoomControl).toEqual(true);
35+
36+
});
37+
38+
test("Removing Static Attribute", async () => {
39+
//removing static attribute in the mapml-viewer tag
40+
await page.$eval("body > mapml-viewer", (viewer) => viewer.static = false);
41+
let attribute = await page.$eval("body > mapml-viewer", (viewer) => viewer.hasAttribute("static"));
42+
expect(attribute).toEqual(false);
43+
//panning, zooming, etc. enabled
44+
let drag = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.dragging._enabled);
45+
let touchZoom = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.touchZoom._enabled);
46+
let doubleClickZoom = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.doubleClickZoom._enabled);
47+
let scrollWheelZoom = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.scrollWheelZoom._enabled);
48+
let boxZoom = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.boxZoom._enabled);
49+
let keyboard = await page.$eval("body > mapml-viewer", (viewer) => viewer._map.keyboard._enabled);
50+
let zoomControl = await page.$eval("body > mapml-viewer", (viewer) => viewer._zoomControl._disabled);
51+
expect(drag).toEqual(true);
52+
expect(touchZoom).toEqual(true);
53+
expect(doubleClickZoom).toEqual(true);
54+
expect(scrollWheelZoom).toEqual(true);
55+
expect(boxZoom).toEqual(true);
56+
expect(keyboard).toEqual(true);
57+
expect(zoomControl).toEqual(false);
58+
});
59+
});
60+
61+
62+
63+

‎test/e2e/web-map/mapStatic.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
7+
<script type="module" src="web-map.js"></script>
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
}
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
/* Specifying the `:defined` selector is recommended to style the map
19+
element, such that styles don't apply when fallback content is in use
20+
(e.g. when scripting is disabled or when custom/built-in elements isn't
21+
supported in the browser). */
22+
map[is="web-map"]:defined {
23+
/* Responsive map. */
24+
max-width: 100%;
25+
26+
/* Full viewport. */
27+
width:100%;
28+
height:100%;
29+
/* Remove default (native-like) border. */
30+
border: none;
31+
}
32+
33+
/* Pre-style to avoid Layout Shift. */
34+
map[is="web-map"]:not(:defined) {
35+
display: inline-block;
36+
contain: size;
37+
contain-intrinsic-size: 304px 154px;
38+
}
39+
40+
/* Pre-style to avoid FOUC of inline layer- and fallback content. */
41+
map[is="web-map"]:not(:defined) + img[usemap],
42+
map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) {
43+
display: none;
44+
}
45+
46+
/* Ensure inline layer content is hidden if custom/built-in elements isn't
47+
supported, or if javascript is disabled. This needs to be defined separately
48+
from the above, because the `:not(:defined)` selector invalidates the entire
49+
declaration in browsers that do not support it. */
50+
layer- {
51+
display: none;
52+
}
53+
</style>
54+
<noscript>
55+
<style>
56+
/* Ensure client-side image map fallbacks are displayed if custom/built-in
57+
elements is supported but javascript is disabled. */
58+
map[is="web-map"]:not(:defined) + img[usemap] {
59+
display: initial;
60+
}
61+
62+
/* "Reset" the properties used to pre-style (to avoid Layout Shift) if
63+
custom/built-in elements is supported but javascript is disabled. */
64+
map[is="web-map"]:not(:defined) {
65+
display: initial;
66+
contain: initial;
67+
contain-intrinsic-size: initial;
68+
}
69+
</style>
70+
</noscript>
71+
</head>
72+
<body>
73+
<map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
74+
<layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
75+
</map>
76+
</body>
77+
</html>

0 commit comments

Comments
 (0)