From 900e5e31c413e019516b9a0d35fb2029bc816018 Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Tue, 21 Feb 2023 10:56:52 -0500 Subject: [PATCH 01/19] full screen context menu item added and fixedtests --- src/mapml-viewer.js | 6 ++++- src/mapml/control/FullscreenButton.js | 4 ++++ src/mapml/handlers/ContextMenu.js | 20 +++++++++++++---- src/web-map.js | 6 ++++- test/e2e/core/mapContextMenu.test.js | 20 ++++++++++------- test/e2e/mapml-viewer/mapml-viewer.test.js | 4 ++-- .../mapml-viewer/mapml-viewerControls.test.js | 2 +- .../mapml-viewer/viewerContextMenu.test.js | 22 +++++++++++-------- test/e2e/web-map/mapControls.test.js | 2 +- 9 files changed, 59 insertions(+), 27 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 88a63e428..0129e85ad 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -332,7 +332,7 @@ export class MapViewer extends HTMLElement { } } } else if (!this.controls && this._map) { - this._map.contextMenu._items[4].el.el.setAttribute("disabled", ""); + this._map.contextMenu._items[8].el.el.setAttribute("disabled", ""); } } @@ -730,6 +730,10 @@ export class MapViewer extends HTMLElement { } } + _toggleFullScreen(){ + this._map.toggleFullscreen(); + } + viewSource(){ let blob = new Blob([this._source],{type:"text/plain"}), url = URL.createObjectURL(blob); diff --git a/src/mapml/control/FullscreenButton.js b/src/mapml/control/FullscreenButton.js index 313e70516..bf270afa3 100644 --- a/src/mapml/control/FullscreenButton.js +++ b/src/mapml/control/FullscreenButton.js @@ -48,6 +48,8 @@ export var FullscreenButton = L.Control.extend({ // can contain a shadow root, so return it directly var mapEl = this.getContainer().getRootNode().host, container = mapEl.nodeName === "DIV" ? mapEl.parentElement : mapEl; + let scrollPosition = window.pageYOffset; + console.log(scrollPosition); if (this.isFullscreen()) { if (options && options.pseudoFullscreen) { this._disablePseudoFullscreen(container); @@ -62,6 +64,8 @@ export var FullscreenButton = L.Control.extend({ } else { this._disablePseudoFullscreen(container); } + console.log("hi"+scrollPosition); + window.scrollTo(0, scrollPosition); } else { if (options && options.pseudoFullscreen) { this._enablePseudoFullscreen(container); diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 28fddb3f9..b40533dac 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -28,6 +28,10 @@ export var ContextMenu = L.Handler.extend({ text: M.options.locale.cmReload + " (R)", callback:this._reload }, + { + text: M.options.locale.btnFullScreen + " (E)", + callback:this._toggleFullScreen + }, { spacer:"-" }, @@ -91,7 +95,7 @@ export var ContextMenu = L.Handler.extend({ this._container = L.DomUtil.create("div", "mapml-contextmenu", map._container); this._container.setAttribute('hidden', ''); - for (let i = 0; i < 5; i++) { + for (let i = 0; i < 6; i++) { this._items[i].el = this._createItem(this._container, this._items[i]); } @@ -101,15 +105,15 @@ export var ContextMenu = L.Handler.extend({ this._clickEvent = null; - for(let i =0;i { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Copy (C)"); + expect(name).toEqual("View fullscreen (E)"); }); test("Context menu tab goes to next item", async () => { @@ -68,7 +68,7 @@ test.describe("Playwright Map Context Menu Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Paste (P)"); + expect(name).toEqual("Copy (C)"); }); test("Submenu opens on C with focus on first item", async () => { @@ -173,7 +173,7 @@ test.describe("Playwright Map Context Menu Tests", () => { ); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(7)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -191,7 +191,7 @@ test.describe("Playwright Map Context Menu Tests", () => { ); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(7)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -219,9 +219,9 @@ test.describe("Playwright Map Context Menu Tests", () => { expect(valueBefore).toEqual("0.5"); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); await page.click("body > map", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); const valueAfter = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input", @@ -236,6 +236,7 @@ test.describe("Playwright Map Context Menu Tests", () => { await page.reload(); await page.click("body > map"); await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Enter"); @@ -271,6 +272,7 @@ test.describe("Playwright Map Context Menu Tests", () => { ); await page.click("body > map"); await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); @@ -297,6 +299,7 @@ test.describe("Playwright Map Context Menu Tests", () => { await page.keyboard.press("Shift+F10"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); @@ -333,6 +336,7 @@ test.describe("Playwright Map Context Menu Tests", () => { await page.keyboard.press("Shift+F10"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); @@ -446,10 +450,10 @@ test.describe("Playwright Map Context Menu Tests", () => { expect(contextMenuSize.x <= mapSize.x && contextMenuSize.y <= mapSize.y).toBeTruthy(); // move the mouse from "copy" to another button in the main contextmenu - await page.hover("div > div.mapml-contextmenu > button:nth-of-type(4)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); const submenu = await page.locator('div > div#mapml-copy-submenu').first(); expect(await submenu.isVisible()).toBeTruthy(); - await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(6)"); expect(await submenu.isHidden()).toBeTruthy(); }); diff --git a/test/e2e/mapml-viewer/mapml-viewer.test.js b/test/e2e/mapml-viewer/mapml-viewer.test.js index baa2fd316..af6f1f1a9 100644 --- a/test/e2e/mapml-viewer/mapml-viewer.test.js +++ b/test/e2e/mapml-viewer/mapml-viewer.test.js @@ -90,9 +90,9 @@ test.describe("Playwright mapml-viewer Element Tests", () => { }); test("Toggle controls, controls aren't re-enabled", async () => { await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); let children = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-left", (div) => div.children), found = false; diff --git a/test/e2e/mapml-viewer/mapml-viewerControls.test.js b/test/e2e/mapml-viewer/mapml-viewerControls.test.js index ea4b28d88..493fab45c 100644 --- a/test/e2e/mapml-viewer/mapml-viewerControls.test.js +++ b/test/e2e/mapml-viewer/mapml-viewerControls.test.js @@ -17,7 +17,7 @@ test.describe("Playwright mapml-viewer Element Controls Test", () => { test("Toggle controls context menu disabled when map created with no controls", async () => { const disabled = await page.$eval( "body > #nocontrols", - (map) => map._map.contextMenu._items[4].el.el.hasAttribute("disabled") + (map) => map._map.contextMenu._items[8].el.el.hasAttribute("disabled") ); expect(disabled).toEqual(true); }); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 320600f91..21c566f71 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -50,7 +50,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Copy (C)"); + expect(name).toEqual("View fullscreen (E)"); }); test("Context menu tab goes to next item", async () => { @@ -61,7 +61,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Paste (P)"); + expect(name).toEqual("Copy (C)"); }); @@ -73,7 +73,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("Copy (C)"); + expect(name).toEqual("View fullscreen (E)"); }); test("Submenu opens on C with focus on first item", async () => { @@ -178,7 +178,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(7)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -196,7 +196,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-of-type(6)"); + await page.click("div > div.mapml-contextmenu > button:nth-of-type(7)"); const controlsOff = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-left", @@ -225,9 +225,9 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { expect(valueBefore).toEqual("0.5"); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); await page.click("body > mapml-viewer", { button: "right" }); - await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); + await page.click("div > div.mapml-contextmenu > button:nth-child(6)"); const valueAfter = await page.$eval( "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input", @@ -242,6 +242,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { await page.reload(); await page.click("body > mapml-viewer"); await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Enter"); @@ -277,6 +278,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); await page.click("body > mapml-viewer"); await page.keyboard.press("Shift+F10"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); @@ -303,6 +305,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { await page.keyboard.press("Shift+F10"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); @@ -339,6 +342,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { await page.keyboard.press("Shift+F10"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); + await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); @@ -420,10 +424,10 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { expect(contextMenuSize.x <= mapSize.x && contextMenuSize.y <= mapSize.y).toBeTruthy(); // move the mouse from "copy" to another button in the main contextmenu - await page.hover("div > div.mapml-contextmenu > button:nth-of-type(4)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); const submenu = await page.locator('div > div#mapml-copy-submenu').first(); expect(await submenu.isVisible()).toBeTruthy(); - await page.hover("div > div.mapml-contextmenu > button:nth-of-type(5)"); + await page.hover("div > div.mapml-contextmenu > button:nth-of-type(6)"); expect(await submenu.isHidden()).toBeTruthy(); }); diff --git a/test/e2e/web-map/mapControls.test.js b/test/e2e/web-map/mapControls.test.js index 17c753122..238ebc158 100644 --- a/test/e2e/web-map/mapControls.test.js +++ b/test/e2e/web-map/mapControls.test.js @@ -17,7 +17,7 @@ test.describe("Playwright web-map Element Controls Test", () => { test("Toggle controls context menu disabled when map created with no controls", async () => { const disabled = await page.$eval( "body > map", - (map) => map._map.contextMenu._items[4].el.el.hasAttribute("disabled") + (map) => map._map.contextMenu._items[8].el.el.hasAttribute("disabled") ); expect(disabled).toEqual(true); }); From fed058306666102552debb1ea2e31e67e8467560 Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Tue, 21 Feb 2023 16:37:06 -0500 Subject: [PATCH 02/19] weird test: Checking Context Menu Fullscreen --- .../mapml-viewer/viewerContextMenu.test.js | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 21c566f71..1cc811e24 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -479,5 +479,46 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { ); expect(layerCheck).toEqual(false); }); + + test("Checking Context Menu Items Names In Order", async () => { + await page.reload(); + let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); + expect(back).toEqual('Back (B)'); + let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); + expect(forward).toEqual('Forward (F)'); + let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); + expect(reload).toEqual('Reload (R)'); + let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); + expect(fullScreen).toEqual('View fullscreen (E)'); + let copy = await page.$eval("div > div.mapml-contextmenu > button:nth-child(6)",(btn) => btn.textContent); + expect(copy).toEqual('Copy (C)'); + let paste = await page.$eval("div > div.mapml-contextmenu > button:nth-child(8)",(btn) => btn.textContent); + expect(paste).toEqual('Paste (P)'); + let controls = await page.$eval("div > div.mapml-contextmenu > button:nth-child(10)",(btn) => btn.textContent); + expect(controls).toEqual('Toggle Controls (T)'); + let debug = await page.$eval("div > div.mapml-contextmenu > button:nth-child(11)",(btn) => btn.textContent); + expect(debug).toEqual('Toggle Debug Mode (D)'); + let source = await page.$eval("div > div.mapml-contextmenu > button:nth-child(12)",(btn) => btn.textContent); + expect(source).toEqual('View Map Source (V)'); + let copySubMenu1 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(1)",(btn) => btn.textContent); + expect(copySubMenu1).toEqual('Map'); + let copySubMenu2 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(2)",(btn) => btn.textContent); + expect(copySubMenu2).toEqual('Extent'); + let copySubMenu3 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(3)",(btn) => btn.textContent); + expect(copySubMenu3).toEqual('Location'); + }); + + test.only("Checking Context Menu Fullscreen Button", async () => { + + await page.click("body > mapml-viewer"); + + await page.keyboard.press("Shift+F10"); + + await page.keyboard.press("E"); + + let fullScreen = await page.$eval("body > mapml-viewer",(viewer) => viewer._map.isFullscreen()); + + expect(fullScreen).toEqual(true); + }); }); From 11c5ed83e806f30ea8094d9d2ab1a9d99a88db53 Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Wed, 22 Feb 2023 09:24:12 -0500 Subject: [PATCH 03/19] ready for review --- src/mapml/control/FullscreenButton.js | 2 -- test/e2e/core/mapContextMenu.test.js | 41 +++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/src/mapml/control/FullscreenButton.js b/src/mapml/control/FullscreenButton.js index bf270afa3..c12d71ab3 100644 --- a/src/mapml/control/FullscreenButton.js +++ b/src/mapml/control/FullscreenButton.js @@ -49,7 +49,6 @@ export var FullscreenButton = L.Control.extend({ var mapEl = this.getContainer().getRootNode().host, container = mapEl.nodeName === "DIV" ? mapEl.parentElement : mapEl; let scrollPosition = window.pageYOffset; - console.log(scrollPosition); if (this.isFullscreen()) { if (options && options.pseudoFullscreen) { this._disablePseudoFullscreen(container); @@ -64,7 +63,6 @@ export var FullscreenButton = L.Control.extend({ } else { this._disablePseudoFullscreen(container); } - console.log("hi"+scrollPosition); window.scrollTo(0, scrollPosition); } else { if (options && options.pseudoFullscreen) { diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index d81ad347a..ce393e7e1 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -538,4 +538,45 @@ test.describe("Playwright Map Context Menu Tests", () => { ); expect(layerCheck).toEqual(false); }); + + test("Checking Context Menu Items Names In Order", async () => { + await page.reload(); + let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); + expect(back).toEqual('Back (B)'); + let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); + expect(forward).toEqual('Forward (F)'); + let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); + expect(reload).toEqual('Reload (R)'); + let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); + expect(fullScreen).toEqual('View fullscreen (E)'); + let copy = await page.$eval("div > div.mapml-contextmenu > button:nth-child(6)",(btn) => btn.textContent); + expect(copy).toEqual('Copy (C)'); + let paste = await page.$eval("div > div.mapml-contextmenu > button:nth-child(8)",(btn) => btn.textContent); + expect(paste).toEqual('Paste (P)'); + let controls = await page.$eval("div > div.mapml-contextmenu > button:nth-child(10)",(btn) => btn.textContent); + expect(controls).toEqual('Toggle Controls (T)'); + let debug = await page.$eval("div > div.mapml-contextmenu > button:nth-child(11)",(btn) => btn.textContent); + expect(debug).toEqual('Toggle Debug Mode (D)'); + let source = await page.$eval("div > div.mapml-contextmenu > button:nth-child(12)",(btn) => btn.textContent); + expect(source).toEqual('View Map Source (V)'); + let copySubMenu1 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(1)",(btn) => btn.textContent); + expect(copySubMenu1).toEqual('Map'); + let copySubMenu2 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(2)",(btn) => btn.textContent); + expect(copySubMenu2).toEqual('Extent'); + let copySubMenu3 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(3)",(btn) => btn.textContent); + expect(copySubMenu3).toEqual('Location'); + }); + + test.only("Checking Context Menu Fullscreen Button", async () => { + + await page.click("body > map"); + + await page.keyboard.press("Shift+F10"); + + await page.keyboard.press("E"); + + let fullScreen = await page.$eval("body > map",(map) => map._map.isFullscreen()); + + expect(fullScreen).toEqual(true); + }); }); From 6cbd8823ebec9c149ff22e26c70aae43a7b8ace4 Mon Sep 17 00:00:00 2001 From: AliyanH Date: Wed, 22 Feb 2023 10:40:27 -0500 Subject: [PATCH 04/19] Fix fullscreen test and remove scrolling --- src/mapml/control/FullscreenButton.js | 2 -- test/e2e/core/fullscreenControl.test.js | 16 ++++++++++++++++ test/e2e/core/mapContextMenu.test.js | 14 -------------- test/e2e/mapml-viewer/viewerContextMenu.test.js | 14 -------------- 4 files changed, 16 insertions(+), 30 deletions(-) diff --git a/src/mapml/control/FullscreenButton.js b/src/mapml/control/FullscreenButton.js index c12d71ab3..313e70516 100644 --- a/src/mapml/control/FullscreenButton.js +++ b/src/mapml/control/FullscreenButton.js @@ -48,7 +48,6 @@ export var FullscreenButton = L.Control.extend({ // can contain a shadow root, so return it directly var mapEl = this.getContainer().getRootNode().host, container = mapEl.nodeName === "DIV" ? mapEl.parentElement : mapEl; - let scrollPosition = window.pageYOffset; if (this.isFullscreen()) { if (options && options.pseudoFullscreen) { this._disablePseudoFullscreen(container); @@ -63,7 +62,6 @@ export var FullscreenButton = L.Control.extend({ } else { this._disablePseudoFullscreen(container); } - window.scrollTo(0, scrollPosition); } else { if (options && options.pseudoFullscreen) { this._enablePseudoFullscreen(container); diff --git a/test/e2e/core/fullscreenControl.test.js b/test/e2e/core/fullscreenControl.test.js index 393613c27..db08a1496 100644 --- a/test/e2e/core/fullscreenControl.test.js +++ b/test/e2e/core/fullscreenControl.test.js @@ -44,6 +44,14 @@ test.describe("Playwright mapml-viewer fullscreen tests", () => { fullscreenElement = await page.evaluate( `document.fullscreenElement.id`); expect(fullscreenElement).toEqual("map2"); }); + + test("Context Menu Fullscreen Button makes the mapml-viewer element fullscreen", async () => { + await page.click("body > #map1"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("E"); + let fullscreenElement = await page.evaluate(`document.fullscreenElement.id`); + expect(fullscreenElement).toEqual("map1"); + }); }); test.describe("Playwright mapml-viewer fullscreen tests", () => { @@ -85,4 +93,12 @@ test.describe("Playwright mapml-viewer fullscreen tests", () => { fullscreenElement = await page.evaluate( `document.fullscreenElement.id`); expect(fullscreenElement).toEqual("map2"); }); + + test("Context Menu Fullscreen Button makes the map element fullscreen", async () => { + await page.click("body > #map1"); + await page.keyboard.press("Shift+F10"); + await page.keyboard.press("E"); + let fullscreenElement = await page.evaluate(`document.fullscreenElement.id`); + expect(fullscreenElement).toEqual("map1"); + }); }); \ No newline at end of file diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index ce393e7e1..326e11286 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -540,7 +540,6 @@ test.describe("Playwright Map Context Menu Tests", () => { }); test("Checking Context Menu Items Names In Order", async () => { - await page.reload(); let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); expect(back).toEqual('Back (B)'); let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); @@ -566,17 +565,4 @@ test.describe("Playwright Map Context Menu Tests", () => { let copySubMenu3 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(3)",(btn) => btn.textContent); expect(copySubMenu3).toEqual('Location'); }); - - test.only("Checking Context Menu Fullscreen Button", async () => { - - await page.click("body > map"); - - await page.keyboard.press("Shift+F10"); - - await page.keyboard.press("E"); - - let fullScreen = await page.$eval("body > map",(map) => map._map.isFullscreen()); - - expect(fullScreen).toEqual(true); - }); }); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 1cc811e24..b5ae5e9df 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -481,7 +481,6 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { }); test("Checking Context Menu Items Names In Order", async () => { - await page.reload(); let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); expect(back).toEqual('Back (B)'); let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); @@ -507,18 +506,5 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { let copySubMenu3 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(3)",(btn) => btn.textContent); expect(copySubMenu3).toEqual('Location'); }); - - test.only("Checking Context Menu Fullscreen Button", async () => { - - await page.click("body > mapml-viewer"); - - await page.keyboard.press("Shift+F10"); - - await page.keyboard.press("E"); - - let fullScreen = await page.$eval("body > mapml-viewer",(viewer) => viewer._map.isFullscreen()); - - expect(fullScreen).toEqual(true); - }); }); From 91a48cba8f1a713e8d2bb4bc3d4a84fc2557be2b Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Wed, 22 Feb 2023 14:42:59 -0500 Subject: [PATCH 05/19] minor changes --- src/mapml-viewer.js | 5 +++++ src/mapml/options.js | 1 + test/e2e/core/mapContextMenu.test.js | 5 +++++ test/e2e/mapml-viewer/viewerContextMenu.test.js | 5 +++++ 4 files changed, 16 insertions(+) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 4a5a3cb1a..29974ba6f 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -734,6 +734,11 @@ export class MapViewer extends HTMLElement { } _toggleFullScreen(){ + if (this._map.isFullscreen()) { + this.shadowRoot.querySelector('div.mapml-contextmenu>button:nth-child(4)').textContent = M.options.locale.btnFullScreen + " (E)"; + }else{ + this.shadowRoot.querySelector('div.mapml-contextmenu>button:nth-child(4)').textContent = M.options.locale.btnExitFullScreen + " (E)"; + } this._map.toggleFullscreen(); } diff --git a/src/mapml/options.js b/src/mapml/options.js index 1d66db4ee..a3be7feda 100644 --- a/src/mapml/options.js +++ b/src/mapml/options.js @@ -21,6 +21,7 @@ export var Options = { btnZoomIn: "Zoom in", btnZoomOut: "Zoom out", btnFullScreen: "View fullscreen", + btnExitFullScreen: "Exit fullscreen", amZoom: "zoom level", amColumn: "column", amRow: "row", diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index 326e11286..c80d70238 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -558,6 +558,11 @@ test.describe("Playwright Map Context Menu Tests", () => { expect(debug).toEqual('Toggle Debug Mode (D)'); let source = await page.$eval("div > div.mapml-contextmenu > button:nth-child(12)",(btn) => btn.textContent); expect(source).toEqual('View Map Source (V)'); + try { + await page.$eval("div > div.mapml-contextmenu > button:nth-child(13)", (btn) => btn.textContent); + } catch (error) { + expect(error).toHaveProperty('message', 'page.$eval: Error: failed to find element matching selector "div > div.mapml-contextmenu > button:nth-child(13)"'); + } let copySubMenu1 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(1)",(btn) => btn.textContent); expect(copySubMenu1).toEqual('Map'); let copySubMenu2 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(2)",(btn) => btn.textContent); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index b5ae5e9df..8de9c0c45 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -499,6 +499,11 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { expect(debug).toEqual('Toggle Debug Mode (D)'); let source = await page.$eval("div > div.mapml-contextmenu > button:nth-child(12)",(btn) => btn.textContent); expect(source).toEqual('View Map Source (V)'); + try { + await page.$eval("div > div.mapml-contextmenu > button:nth-child(13)", (btn) => btn.textContent); + } catch (error) { + expect(error).toHaveProperty('message', 'page.$eval: Error: failed to find element matching selector "div > div.mapml-contextmenu > button:nth-child(13)"'); + } let copySubMenu1 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(1)",(btn) => btn.textContent); expect(copySubMenu1).toEqual('Map'); let copySubMenu2 = await page.$eval("div > div.mapml-contextmenu > div.mapml-contextmenu.mapml-submenu >button:nth-child(2)",(btn) => btn.textContent); From fc898c88a84a5e6bb84cf61eba24312fc59f517b Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Wed, 22 Feb 2023 16:02:37 -0500 Subject: [PATCH 06/19] ready to merge --- src/mapml-viewer.js | 5 ----- src/mapml/control/FullscreenButton.js | 2 ++ 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 29974ba6f..4a5a3cb1a 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -734,11 +734,6 @@ export class MapViewer extends HTMLElement { } _toggleFullScreen(){ - if (this._map.isFullscreen()) { - this.shadowRoot.querySelector('div.mapml-contextmenu>button:nth-child(4)').textContent = M.options.locale.btnFullScreen + " (E)"; - }else{ - this.shadowRoot.querySelector('div.mapml-contextmenu>button:nth-child(4)').textContent = M.options.locale.btnExitFullScreen + " (E)"; - } this._map.toggleFullscreen(); } diff --git a/src/mapml/control/FullscreenButton.js b/src/mapml/control/FullscreenButton.js index 313e70516..3fefc1d80 100644 --- a/src/mapml/control/FullscreenButton.js +++ b/src/mapml/control/FullscreenButton.js @@ -62,6 +62,7 @@ export var FullscreenButton = L.Control.extend({ } else { this._disablePseudoFullscreen(container); } + mapEl._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnFullScreen + " (E)"; } else { if (options && options.pseudoFullscreen) { this._enablePseudoFullscreen(container); @@ -76,6 +77,7 @@ export var FullscreenButton = L.Control.extend({ } else { this._enablePseudoFullscreen(container); } + mapEl._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnExitFullScreen + " (E)"; } }, From 46d00bc27449eb5b8c745099fead351db873eb4b Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Fri, 24 Feb 2023 19:46:32 -0500 Subject: [PATCH 07/19] bug fix (esc button), Peter suggested functions --- src/mapml-viewer.js | 10 +++++++++- src/mapml/control/FullscreenButton.js | 2 -- src/mapml/handlers/ContextMenu.js | 11 +++++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 4a5a3cb1a..808706590 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -332,7 +332,7 @@ export class MapViewer extends HTMLElement { } } } else if (!this.controls && this._map) { - this._map.contextMenu._items[8].el.el.setAttribute("disabled", ""); + this._map.contextMenu._disableToggleControls(); } } @@ -550,6 +550,14 @@ export class MapViewer extends HTMLElement { this.dispatchEvent(new CustomEvent('zoomend', {detail: {target: this}})); }, this); + this.addEventListener('fullscreenchange', function(event) { + if (document.fullscreenElement === null) { + // full-screen mode has been exited + this._map.contextMenu._setViewFullScreenInnerHTML('view'); + }else{ + this._map.contextMenu._setViewFullScreenInnerHTML('exit'); + } + }); } _toggleControls() { if (this._map) { diff --git a/src/mapml/control/FullscreenButton.js b/src/mapml/control/FullscreenButton.js index 3fefc1d80..313e70516 100644 --- a/src/mapml/control/FullscreenButton.js +++ b/src/mapml/control/FullscreenButton.js @@ -62,7 +62,6 @@ export var FullscreenButton = L.Control.extend({ } else { this._disablePseudoFullscreen(container); } - mapEl._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnFullScreen + " (E)"; } else { if (options && options.pseudoFullscreen) { this._enablePseudoFullscreen(container); @@ -77,7 +76,6 @@ export var FullscreenButton = L.Control.extend({ } else { this._enablePseudoFullscreen(container); } - mapEl._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnExitFullScreen + " (E)"; } }, diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index b40533dac..3a2997685 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -709,5 +709,16 @@ export var ContextMenu = L.Handler.extend({ _onItemMouseOut: function (e) { L.DomUtil.removeClass(e.target || e.srcElement, 'over'); this._hideCoordMenu(e); + }, + _disableToggleControls: function () { + this._items[8].el.el.setAttribute("disabled", ""); + }, + _setViewFullScreenInnerHTML: function(options){ + if (options === 'view'){ + this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnFullScreen + " (E)"; + } + else if(options === 'exit'){ + this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnExitFullScreen + " (E)"; + } } }); From 5cb8a9b2c83110f3f315a723a8bc5aee61ec2531 Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Mon, 27 Feb 2023 09:57:05 -0500 Subject: [PATCH 08/19] forward reload back fullscreen button changes --- src/mapml-viewer.js | 24 +++++++++++-- src/mapml/handlers/ContextMenu.js | 36 +++++++++---------- src/web-map.js | 28 ++++++++++++++- test/e2e/core/fullscreenControl.test.js | 4 +-- test/e2e/core/mapContextMenu.test.js | 10 +++--- .../mapml-viewer/viewerContextMenu.test.js | 12 +++---- 6 files changed, 79 insertions(+), 35 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 808706590..0f78c979e 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -332,7 +332,7 @@ export class MapViewer extends HTMLElement { } } } else if (!this.controls && this._map) { - this._map.contextMenu._disableToggleControls(); + this._map.contextMenu.disableToggleControls(); } } @@ -553,9 +553,27 @@ export class MapViewer extends HTMLElement { this.addEventListener('fullscreenchange', function(event) { if (document.fullscreenElement === null) { // full-screen mode has been exited - this._map.contextMenu._setViewFullScreenInnerHTML('view'); + this._map.contextMenu.setViewFullScreenInnerHTML('view'); }else{ - this._map.contextMenu._setViewFullScreenInnerHTML('exit'); + this._map.contextMenu.setViewFullScreenInnerHTML('exit'); + } + }); + this.addEventListener('keydown', function(event) { + // Check if Ctrl+R is pressed and map is focused + if (event.ctrlKey && event.keyCode === 82 && document.activeElement.nodeName === "MAPML-VIEWER") { + // Prevent default browser behavior + event.preventDefault(); + this.reload(); + } + if (event.altKey && event.keyCode === 39 && document.activeElement.nodeName === "MAPML-VIEWER") { + // Prevent default browser behavior + event.preventDefault(); + this.forward(); + } + if (event.altKey && event.keyCode === 37 && document.activeElement.nodeName === "MAPML-VIEWER") { + // Prevent default browser behavior + event.preventDefault(); + this.back(); } }); } diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 3a2997685..fd138a250 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -17,19 +17,19 @@ export var ContextMenu = L.Handler.extend({ //setting the items in the context menu and their callback functions this._items = [ { - text: M.options.locale.cmBack + " (B)", + text: M.options.locale.cmBack + " (Alt+←)", callback:this._goBack }, { - text: M.options.locale.cmForward + " (F)", + text: M.options.locale.cmForward + " (Alt+→)", callback:this._goForward }, { - text: M.options.locale.cmReload + " (R)", + text: M.options.locale.cmReload + " (Ctrl+R)", callback:this._reload }, { - text: M.options.locale.btnFullScreen + " (E)", + text: M.options.locale.btnFullScreen + " (F)", callback:this._toggleFullScreen }, { @@ -624,9 +624,9 @@ export var ContextMenu = L.Handler.extend({ if(this._map._container.parentNode.activeElement.parentNode.classList.contains("mapml-contextmenu")) this._map._container.parentNode.activeElement.click(); break; - case 66: //B KEY - this._goBack(e); - break; + // case 66: //B KEY + // this._goBack(e); + // break; case 67: //C KEY this._copyCoords({ latlng:this._map.getCenter() @@ -638,22 +638,22 @@ export var ContextMenu = L.Handler.extend({ case 77: //M KEY this._copyMapML(e); break; - case 70: //F KEY - this._goForward(e); - break; + // case 70: //F KEY + // this._goForward(e); + // break; case 76: //L KEY if(this._layerClicked.className.includes('mapml-layer-item')) this._copyLayer(e); break; - case 69: //E KEY + case 70: //F KEY this._toggleFullScreen(e); break; case 80: //P KEY this._paste(e); break; - case 82: //R KEY - this._reload(e); - break; + // case 82: //R KEY + // this._reload(e); + // break; case 84: //T KEY this._toggleControls(e); break; @@ -710,15 +710,15 @@ export var ContextMenu = L.Handler.extend({ L.DomUtil.removeClass(e.target || e.srcElement, 'over'); this._hideCoordMenu(e); }, - _disableToggleControls: function () { + disableToggleControls: function () { this._items[8].el.el.setAttribute("disabled", ""); }, - _setViewFullScreenInnerHTML: function(options){ + setViewFullScreenInnerHTML: function(options){ if (options === 'view'){ - this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnFullScreen + " (E)"; + this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnFullScreen + " (F)"; } else if(options === 'exit'){ - this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnExitFullScreen + " (E)"; + this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnExitFullScreen + " (F)"; } } }); diff --git a/src/web-map.js b/src/web-map.js index 43e31d238..35c234c2a 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -373,7 +373,7 @@ export class WebMap extends HTMLMapElement { } } }else if (!this.controls && this._map) { - this._map.contextMenu._items[8].el.el.setAttribute("disabled", ""); + this._map.contextMenu.disableToggleControls(); } } attributeChangedCallback(name, oldValue, newValue) { @@ -590,6 +590,32 @@ export class WebMap extends HTMLMapElement { this.dispatchEvent(new CustomEvent('zoomend', {detail: {target: this}})); }, this); + this.addEventListener('fullscreenchange', function(event) { + if (document.fullscreenElement === null) { + // full-screen mode has been exited + this._map.contextMenu.setViewFullScreenInnerHTML('view'); + }else{ + this._map.contextMenu.setViewFullScreenInnerHTML('exit'); + } + }); + this.addEventListener('keydown', function(event) { + // Check if Ctrl+R is pressed and map is focused + if (event.ctrlKey && event.keyCode === 82 && document.activeElement.nodeName === "DIV") { + // Prevent default browser behavior + event.preventDefault(); + this.reload(); + } + if (event.altKey && event.keyCode === 39 && document.activeElement.nodeName === "DIV") { + // Prevent default browser behavior + event.preventDefault(); + this.forward(); + } + if (event.altKey && event.keyCode === 37 && document.activeElement.nodeName === "DIV") { + // Prevent default browser behavior + event.preventDefault(); + this.back(); + } + }); } _toggleControls() { if (this._map) { diff --git a/test/e2e/core/fullscreenControl.test.js b/test/e2e/core/fullscreenControl.test.js index db08a1496..7eef88ebd 100644 --- a/test/e2e/core/fullscreenControl.test.js +++ b/test/e2e/core/fullscreenControl.test.js @@ -48,7 +48,7 @@ test.describe("Playwright mapml-viewer fullscreen tests", () => { test("Context Menu Fullscreen Button makes the mapml-viewer element fullscreen", async () => { await page.click("body > #map1"); await page.keyboard.press("Shift+F10"); - await page.keyboard.press("E"); + await page.keyboard.press("F"); let fullscreenElement = await page.evaluate(`document.fullscreenElement.id`); expect(fullscreenElement).toEqual("map1"); }); @@ -97,7 +97,7 @@ test.describe("Playwright mapml-viewer fullscreen tests", () => { test("Context Menu Fullscreen Button makes the map element fullscreen", async () => { await page.click("body > #map1"); await page.keyboard.press("Shift+F10"); - await page.keyboard.press("E"); + await page.keyboard.press("F"); let fullscreenElement = await page.evaluate(`document.fullscreenElement.id`); expect(fullscreenElement).toEqual("map1"); }); diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index c80d70238..074aa6a03 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -57,7 +57,7 @@ test.describe("Playwright Map Context Menu Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("View fullscreen (E)"); + expect(name).toEqual("View fullscreen (F)"); }); test("Context menu tab goes to next item", async () => { @@ -541,13 +541,13 @@ test.describe("Playwright Map Context Menu Tests", () => { test("Checking Context Menu Items Names In Order", async () => { let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); - expect(back).toEqual('Back (B)'); + expect(back).toEqual('Back (Alt+\u2190)'); let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); - expect(forward).toEqual('Forward (F)'); + expect(forward).toEqual('Forward (Alt+\u2192)'); let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); - expect(reload).toEqual('Reload (R)'); + expect(reload).toEqual('Reload (Ctrl+R)'); let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); - expect(fullScreen).toEqual('View fullscreen (E)'); + expect(fullScreen).toEqual('View fullscreen (F)'); let copy = await page.$eval("div > div.mapml-contextmenu > button:nth-child(6)",(btn) => btn.textContent); expect(copy).toEqual('Copy (C)'); let paste = await page.$eval("div > div.mapml-contextmenu > button:nth-child(8)",(btn) => btn.textContent); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 8de9c0c45..3c0af7501 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -50,7 +50,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("View fullscreen (E)"); + expect(name).toEqual("View fullscreen (F)"); }); test("Context menu tab goes to next item", async () => { @@ -73,7 +73,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("View fullscreen (E)"); + expect(name).toEqual("View fullscreen (F)"); }); test("Submenu opens on C with focus on first item", async () => { @@ -482,13 +482,13 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { test("Checking Context Menu Items Names In Order", async () => { let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); - expect(back).toEqual('Back (B)'); + expect(back).toEqual('Back (Alt+\u2190)'); let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); - expect(forward).toEqual('Forward (F)'); + expect(forward).toEqual('Forward (Alt+\u2192)'); let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); - expect(reload).toEqual('Reload (R)'); + expect(reload).toEqual('Reload (Ctrl+R)'); let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); - expect(fullScreen).toEqual('View fullscreen (E)'); + expect(fullScreen).toEqual('View fullscreen (F)'); let copy = await page.$eval("div > div.mapml-contextmenu > button:nth-child(6)",(btn) => btn.textContent); expect(copy).toEqual('Copy (C)'); let paste = await page.$eval("div > div.mapml-contextmenu > button:nth-child(8)",(btn) => btn.textContent); From d9edb5897f03f7654d2fb364f55862474040f1d5 Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Mon, 27 Feb 2023 14:14:31 -0500 Subject: [PATCH 09/19] minor changes --- src/mapml/handlers/ContextMenu.js | 9 --------- src/web-map.js | 6 +++--- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index fd138a250..4863325f0 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -624,9 +624,6 @@ export var ContextMenu = L.Handler.extend({ if(this._map._container.parentNode.activeElement.parentNode.classList.contains("mapml-contextmenu")) this._map._container.parentNode.activeElement.click(); break; - // case 66: //B KEY - // this._goBack(e); - // break; case 67: //C KEY this._copyCoords({ latlng:this._map.getCenter() @@ -638,9 +635,6 @@ export var ContextMenu = L.Handler.extend({ case 77: //M KEY this._copyMapML(e); break; - // case 70: //F KEY - // this._goForward(e); - // break; case 76: //L KEY if(this._layerClicked.className.includes('mapml-layer-item')) this._copyLayer(e); @@ -651,9 +645,6 @@ export var ContextMenu = L.Handler.extend({ case 80: //P KEY this._paste(e); break; - // case 82: //R KEY - // this._reload(e); - // break; case 84: //T KEY this._toggleControls(e); break; diff --git a/src/web-map.js b/src/web-map.js index 35c234c2a..dc96cd458 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -600,17 +600,17 @@ export class WebMap extends HTMLMapElement { }); this.addEventListener('keydown', function(event) { // Check if Ctrl+R is pressed and map is focused - if (event.ctrlKey && event.keyCode === 82 && document.activeElement.nodeName === "DIV") { + if (event.ctrlKey && event.keyCode === 82 && document.activeElement.className === "mapml-web-map") { // Prevent default browser behavior event.preventDefault(); this.reload(); } - if (event.altKey && event.keyCode === 39 && document.activeElement.nodeName === "DIV") { + if (event.altKey && event.keyCode === 39 && document.activeElement.className === "mapml-web-map") { // Prevent default browser behavior event.preventDefault(); this.forward(); } - if (event.altKey && event.keyCode === 37 && document.activeElement.nodeName === "DIV") { + if (event.altKey && event.keyCode === 37 && document.activeElement.className === "mapml-web-map") { // Prevent default browser behavior event.preventDefault(); this.back(); From 945533a57479594aea71c574abaf35139dc7fef4 Mon Sep 17 00:00:00 2001 From: Peter Rushforth Date: Mon, 27 Feb 2023 15:04:16 -0500 Subject: [PATCH 10/19] Linting --- src/mapml-viewer.js | 6 +++--- test/e2e/core/fullscreenControl.test.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 0f78c979e..7bce9548d 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -554,7 +554,7 @@ export class MapViewer extends HTMLElement { if (document.fullscreenElement === null) { // full-screen mode has been exited this._map.contextMenu.setViewFullScreenInnerHTML('view'); - }else{ + } else { this._map.contextMenu.setViewFullScreenInnerHTML('exit'); } }); @@ -566,12 +566,12 @@ export class MapViewer extends HTMLElement { this.reload(); } if (event.altKey && event.keyCode === 39 && document.activeElement.nodeName === "MAPML-VIEWER") { - // Prevent default browser behavior + // Prevent default browser behavior for Alt+Right-Arrow, if any event.preventDefault(); this.forward(); } if (event.altKey && event.keyCode === 37 && document.activeElement.nodeName === "MAPML-VIEWER") { - // Prevent default browser behavior + // Prevent default browser behavior for Alt+Left-Arrow (Back in browser history) event.preventDefault(); this.back(); } diff --git a/test/e2e/core/fullscreenControl.test.js b/test/e2e/core/fullscreenControl.test.js index 7eef88ebd..167bfb3e1 100644 --- a/test/e2e/core/fullscreenControl.test.js +++ b/test/e2e/core/fullscreenControl.test.js @@ -101,4 +101,4 @@ test.describe("Playwright mapml-viewer fullscreen tests", () => { let fullscreenElement = await page.evaluate(`document.fullscreenElement.id`); expect(fullscreenElement).toEqual("map1"); }); -}); \ No newline at end of file +}); From 9826d93a53aa4f49401dd29bea495739630c9193 Mon Sep 17 00:00:00 2001 From: Peter Rushforth Date: Mon, 27 Feb 2023 15:59:12 -0500 Subject: [PATCH 11/19] Change "View fullscreen" to "View Fullscreen" --- src/mapml/control/FullscreenButton.js | 4 ++-- src/mapml/options.js | 4 ++-- test/e2e/core/mapContextMenu.test.js | 4 ++-- test/e2e/mapml-viewer/viewerContextMenu.test.js | 6 +++--- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/mapml/control/FullscreenButton.js b/src/mapml/control/FullscreenButton.js index 313e70516..d19ca1242 100644 --- a/src/mapml/control/FullscreenButton.js +++ b/src/mapml/control/FullscreenButton.js @@ -2,8 +2,8 @@ export var FullscreenButton = L.Control.extend({ options: { position: 'topleft', title: { - 'false': 'View fullscreen', - 'true': 'Exit fullscreen' + 'false': 'View Fullscreen', + 'true': 'Exit Fullscreen' } }, diff --git a/src/mapml/options.js b/src/mapml/options.js index a3be7feda..85b40cc55 100644 --- a/src/mapml/options.js +++ b/src/mapml/options.js @@ -20,8 +20,8 @@ export var Options = { lcOpacity: "Opacity", btnZoomIn: "Zoom in", btnZoomOut: "Zoom out", - btnFullScreen: "View fullscreen", - btnExitFullScreen: "Exit fullscreen", + btnFullScreen: "View Fullscreen", + btnExitFullScreen: "Exit Fullscreen", amZoom: "zoom level", amColumn: "column", amRow: "row", diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index 074aa6a03..4735a991d 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -57,7 +57,7 @@ test.describe("Playwright Map Context Menu Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("View fullscreen (F)"); + expect(name).toEqual("View Fullscreen (F)"); }); test("Context menu tab goes to next item", async () => { @@ -547,7 +547,7 @@ test.describe("Playwright Map Context Menu Tests", () => { let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); expect(reload).toEqual('Reload (Ctrl+R)'); let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); - expect(fullScreen).toEqual('View fullscreen (F)'); + expect(fullScreen).toEqual('View Fullscreen (F)'); let copy = await page.$eval("div > div.mapml-contextmenu > button:nth-child(6)",(btn) => btn.textContent); expect(copy).toEqual('Copy (C)'); let paste = await page.$eval("div > div.mapml-contextmenu > button:nth-child(8)",(btn) => btn.textContent); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 3c0af7501..0f08dc4b0 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -50,7 +50,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("View fullscreen (F)"); + expect(name).toEqual("View Fullscreen (F)"); }); test("Context menu tab goes to next item", async () => { @@ -73,7 +73,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle); let name = await nameHandle.jsonValue(); await nameHandle.dispose(); - expect(name).toEqual("View fullscreen (F)"); + expect(name).toEqual("View Fullscreen (F)"); }); test("Submenu opens on C with focus on first item", async () => { @@ -488,7 +488,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); expect(reload).toEqual('Reload (Ctrl+R)'); let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); - expect(fullScreen).toEqual('View fullscreen (F)'); + expect(fullScreen).toEqual('View Fullscreen (F)'); let copy = await page.$eval("div > div.mapml-contextmenu > button:nth-child(6)",(btn) => btn.textContent); expect(copy).toEqual('Copy (C)'); let paste = await page.$eval("div > div.mapml-contextmenu > button:nth-child(8)",(btn) => btn.textContent); From e2997c567ae5ff4afa83cf9aa1785824d101fc13 Mon Sep 17 00:00:00 2001 From: AliyanH Date: Mon, 27 Feb 2023 16:48:37 -0500 Subject: [PATCH 12/19] minor linting --- src/mapml/handlers/ContextMenu.js | 8 +++++--- src/web-map.js | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 4863325f0..824022454 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -701,14 +701,16 @@ export var ContextMenu = L.Handler.extend({ L.DomUtil.removeClass(e.target || e.srcElement, 'over'); this._hideCoordMenu(e); }, + disableToggleControls: function () { this._items[8].el.el.setAttribute("disabled", ""); }, - setViewFullScreenInnerHTML: function(options){ - if (options === 'view'){ + + setViewFullScreenInnerHTML: function (options) { + if (options === 'view') { this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnFullScreen + " (F)"; } - else if(options === 'exit'){ + else if (options === 'exit') { this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnExitFullScreen + " (F)"; } } diff --git a/src/web-map.js b/src/web-map.js index dc96cd458..9bbc55171 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -594,11 +594,11 @@ export class WebMap extends HTMLMapElement { if (document.fullscreenElement === null) { // full-screen mode has been exited this._map.contextMenu.setViewFullScreenInnerHTML('view'); - }else{ + } else { this._map.contextMenu.setViewFullScreenInnerHTML('exit'); } }); - this.addEventListener('keydown', function(event) { + this.addEventListener('keydown', function (event) { // Check if Ctrl+R is pressed and map is focused if (event.ctrlKey && event.keyCode === 82 && document.activeElement.className === "mapml-web-map") { // Prevent default browser behavior From 5d4c25aa4c0c95120531de413f31878be4aea20c Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Mon, 27 Feb 2023 17:40:41 -0500 Subject: [PATCH 13/19] Aliyan suggested styling changes --- src/mapml-viewer.js | 30 +++++++++++++++--------------- src/web-map.js | 32 ++++++++++++++++---------------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 0f78c979e..927ba37fb 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -559,21 +559,21 @@ export class MapViewer extends HTMLElement { } }); this.addEventListener('keydown', function(event) { - // Check if Ctrl+R is pressed and map is focused - if (event.ctrlKey && event.keyCode === 82 && document.activeElement.nodeName === "MAPML-VIEWER") { - // Prevent default browser behavior - event.preventDefault(); - this.reload(); - } - if (event.altKey && event.keyCode === 39 && document.activeElement.nodeName === "MAPML-VIEWER") { - // Prevent default browser behavior - event.preventDefault(); - this.forward(); - } - if (event.altKey && event.keyCode === 37 && document.activeElement.nodeName === "MAPML-VIEWER") { - // Prevent default browser behavior - event.preventDefault(); - this.back(); + if(document.activeElement.nodeName === "MAPML-VIEWER"){ + // Check if Ctrl+R is pressed and map is focused + if (event.ctrlKey && event.keyCode === 82) { + // Prevent default browser behavior + event.preventDefault(); + this.reload(); + }else if (event.altKey && event.keyCode === 39) { + // Prevent default browser behavior + event.preventDefault(); + this.forward(); + }else if (event.altKey && event.keyCode === 37) { + // Prevent default browser behavior + event.preventDefault(); + this.back(); + } } }); } diff --git a/src/web-map.js b/src/web-map.js index dc96cd458..3c0e7b452 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -599,23 +599,23 @@ export class WebMap extends HTMLMapElement { } }); this.addEventListener('keydown', function(event) { - // Check if Ctrl+R is pressed and map is focused - if (event.ctrlKey && event.keyCode === 82 && document.activeElement.className === "mapml-web-map") { - // Prevent default browser behavior - event.preventDefault(); - this.reload(); - } - if (event.altKey && event.keyCode === 39 && document.activeElement.className === "mapml-web-map") { - // Prevent default browser behavior - event.preventDefault(); - this.forward(); - } - if (event.altKey && event.keyCode === 37 && document.activeElement.className === "mapml-web-map") { - // Prevent default browser behavior - event.preventDefault(); - this.back(); + if(document.activeElement.className === "mapml-web-map"){ + // Check if Ctrl+R is pressed and map is focused + if (event.ctrlKey && event.keyCode === 82) { + // Prevent default browser behavior + event.preventDefault(); + this.reload(); + }else if (event.altKey && event.keyCode === 39) { + // Prevent default browser behavior + event.preventDefault(); + this.forward(); + }else if (event.altKey && event.keyCode === 37) { + // Prevent default browser behavior + event.preventDefault(); + this.back(); + } } - }); + }); } _toggleControls() { if (this._map) { From 5f8ccbeaed191565a7c377a71ea5db16bba809ab Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Tue, 28 Feb 2023 09:37:12 -0500 Subject: [PATCH 14/19] time out added between each time back is pressed --- src/mapml-viewer.js | 49 ++++++++++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 4db17b943..5e68db976 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -661,32 +661,39 @@ export class MapViewer extends HTMLElement { * Allow user to move back in history */ back(){ - let history = this._history; - let curr = history[this._historyIndex]; + if (!this._backButtonDisabled) { + let history = this._history; + let curr = history[this._historyIndex]; + + if(this._historyIndex > 0){ + this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item + this._historyIndex--; + let prev = history[this._historyIndex]; + // Disable back, reload contextmenu item when at the end of history + if (this._historyIndex === 0) { + this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item + this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + } - if(this._historyIndex > 0){ - this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item - this._historyIndex--; - let prev = history[this._historyIndex]; - // Disable back, reload contextmenu item when at the end of history - if (this._historyIndex === 0) { - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item - } + if(prev.zoom !== curr.zoom){ + this._traversalCall = 2; // allows the next 2 moveends to be ignored from history - if(prev.zoom !== curr.zoom){ - this._traversalCall = 2; // allows the next 2 moveends to be ignored from history + let currScale = this._map.options.crs.scale(curr.zoom); // gets the scale of the current zoom level + let prevScale = this._map.options.crs.scale(prev.zoom); // gets the scale of the previous zoom level - let currScale = this._map.options.crs.scale(curr.zoom); // gets the scale of the current zoom level - let prevScale = this._map.options.crs.scale(prev.zoom); // gets the scale of the previous zoom level + let scale = currScale / prevScale; // used to convert the previous pixel location to be in terms of the current zoom level - let scale = currScale / prevScale; // used to convert the previous pixel location to be in terms of the current zoom level + this._map.panBy([((prev.x * scale) - curr.x), ((prev.y * scale) - curr.y)], {animate: false}); + this._map.setZoom(prev.zoom); + } else { + this._traversalCall = 1; + this._map.panBy([(prev.x - curr.x), (prev.y - curr.y)]); + } - this._map.panBy([((prev.x * scale) - curr.x), ((prev.y * scale) - curr.y)], {animate: false}); - this._map.setZoom(prev.zoom); - } else { - this._traversalCall = 1; - this._map.panBy([(prev.x - curr.x), (prev.y - curr.y)]); + this._backButtonDisabled = true; // disable back button + setTimeout(() => { + this._backButtonDisabled = false; // re-enable back button after 500ms + }, 500); } } } From e59d71a8b0fd224ae53fbe2733b4a8efd45e2434 Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Tue, 28 Feb 2023 13:45:53 -0500 Subject: [PATCH 15/19] disabling reload button --- src/mapml-viewer.js | 50 ++++++++++++++++++++------------------------- src/web-map.js | 1 + 2 files changed, 23 insertions(+), 28 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 5e68db976..6d975ae08 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -661,39 +661,33 @@ export class MapViewer extends HTMLElement { * Allow user to move back in history */ back(){ - if (!this._backButtonDisabled) { - let history = this._history; - let curr = history[this._historyIndex]; - - if(this._historyIndex > 0){ - this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item - this._historyIndex--; - let prev = history[this._historyIndex]; - // Disable back, reload contextmenu item when at the end of history - if (this._historyIndex === 0) { - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item - } + let history = this._history; + let curr = history[this._historyIndex]; - if(prev.zoom !== curr.zoom){ - this._traversalCall = 2; // allows the next 2 moveends to be ignored from history + if(this._historyIndex > 0){ + this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item + this._historyIndex--; + let prev = history[this._historyIndex]; + // Disable back, reload contextmenu item when at the end of history + if (this._historyIndex === 0) { + this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item + this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._reloadButton.disable(); + } - let currScale = this._map.options.crs.scale(curr.zoom); // gets the scale of the current zoom level - let prevScale = this._map.options.crs.scale(prev.zoom); // gets the scale of the previous zoom level + if(prev.zoom !== curr.zoom){ + this._traversalCall = 2; // allows the next 2 moveends to be ignored from history - let scale = currScale / prevScale; // used to convert the previous pixel location to be in terms of the current zoom level + let currScale = this._map.options.crs.scale(curr.zoom); // gets the scale of the current zoom level + let prevScale = this._map.options.crs.scale(prev.zoom); // gets the scale of the previous zoom level - this._map.panBy([((prev.x * scale) - curr.x), ((prev.y * scale) - curr.y)], {animate: false}); - this._map.setZoom(prev.zoom); - } else { - this._traversalCall = 1; - this._map.panBy([(prev.x - curr.x), (prev.y - curr.y)]); - } + let scale = currScale / prevScale; // used to convert the previous pixel location to be in terms of the current zoom level - this._backButtonDisabled = true; // disable back button - setTimeout(() => { - this._backButtonDisabled = false; // re-enable back button after 500ms - }, 500); + this._map.panBy([((prev.x * scale) - curr.x), ((prev.y * scale) - curr.y)], {animate: false}); + this._map.setZoom(prev.zoom); + } else { + this._traversalCall = 1; + this._map.panBy([(prev.x - curr.x), (prev.y - curr.y)]); } } } diff --git a/src/web-map.js b/src/web-map.js index 510aad23b..b18fa987c 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -712,6 +712,7 @@ export class WebMap extends HTMLMapElement { if (this._historyIndex === 0) { this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._reloadButton.disable(); } if(prev.zoom !== curr.zoom){ From 8734d1ec4c82c1e995c37a2c8742697ba0bc2955 Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Tue, 28 Feb 2023 17:30:08 -0500 Subject: [PATCH 16/19] bugs fix and new context menu functions --- src/mapml-viewer.js | 46 ++++++++++++------- src/mapml/handlers/ContextMenu.js | 28 +++++++++-- test/e2e/core/mapContextMenu.test.js | 4 +- .../mapml-viewer/viewerContextMenu.test.js | 4 +- 4 files changed, 57 insertions(+), 25 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 6d975ae08..37a6bf30f 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -332,7 +332,7 @@ export class MapViewer extends HTMLElement { } } } else if (!this.controls && this._map) { - this._map.contextMenu.disableToggleControls(); + this._map.contextMenu.toggleContextMenuItems("Toggle Controls", "disabled"); } } @@ -529,6 +529,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this._addToHistory(); + this._reloadButtonState(); this.dispatchEvent(new CustomEvent('moveend', {detail: {target: this}})); }, this); @@ -647,16 +648,26 @@ export class MapViewer extends HTMLElement { } if (this._historyIndex === 0) { // when at initial state of map, disable back, forward, and reload items - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item } else { - this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "enabled"); // reload contextmenu item + } + } + _reloadButtonState(){ + if(this.hasAttribute("controls")){ + if (this._historyIndex === 0) { + this._reloadButton.disable(); + } else { + this._reloadButton.enable(); + } + }else{ + return; } } - /** * Allow user to move back in history */ @@ -665,13 +676,13 @@ export class MapViewer extends HTMLElement { let curr = history[this._historyIndex]; if(this._historyIndex > 0){ - this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "enabled");// forward contextmenu item this._historyIndex--; let prev = history[this._historyIndex]; // Disable back, reload contextmenu item when at the end of history if (this._historyIndex === 0) { - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item this._reloadButton.disable(); } @@ -699,13 +710,14 @@ export class MapViewer extends HTMLElement { let history = this._history; let curr = history[this._historyIndex]; if(this._historyIndex < history.length - 1){ - this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "enabled"); // reload contextmenu item + this._reloadButton.enable(); this._historyIndex++; let next = history[this._historyIndex]; // disable forward contextmenu item, when at the end of forward history if (this._historyIndex + 1 === this._history.length) { - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "disabled"); // forward contextmenu item } if(next.zoom !== curr.zoom){ @@ -737,9 +749,9 @@ export class MapViewer extends HTMLElement { y:mapLocation.y, }; - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item this._history = [initialLocation]; this._historyIndex = 0; diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 824022454..f7c483eda 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -17,11 +17,11 @@ export var ContextMenu = L.Handler.extend({ //setting the items in the context menu and their callback functions this._items = [ { - text: M.options.locale.cmBack + " (Alt+←)", + text: M.options.locale.cmBack + " (Alt+Left Arrow)", callback:this._goBack }, { - text: M.options.locale.cmForward + " (Alt+→)", + text: M.options.locale.cmForward + " (Alt+Right Arrow)", callback:this._goForward }, { @@ -702,8 +702,28 @@ export var ContextMenu = L.Handler.extend({ this._hideCoordMenu(e); }, - disableToggleControls: function () { - this._items[8].el.el.setAttribute("disabled", ""); + toggleContextMenuItems: function (options,state) { + if (state === "disabled"){ + if (options === "Toggle Controls"){ + this._items[8].el.el.disabled = true; + }else if (options === "Back"){ + this._items[0].el.el.disabled = true; + }else if (options === "Forward"){ + this._items[1].el.el.disabled = true; + }else if (options === "Reload"){ + this._items[2].el.el.disabled = true; + } + }else if(state === "enabled"){ + if (options === "Toggle Controls"){ + this._items[8].el.el.disabled = false; + }else if (options === "Back"){ + this._items[0].el.el.disabled = false; + }else if (options === "Forward"){ + this._items[1].el.el.disabled = false; + }else if (options === "Reload"){ + this._items[2].el.el.disabled = false; + } + } }, setViewFullScreenInnerHTML: function (options) { diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index 4735a991d..c8d5cfa8c 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -541,9 +541,9 @@ test.describe("Playwright Map Context Menu Tests", () => { test("Checking Context Menu Items Names In Order", async () => { let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); - expect(back).toEqual('Back (Alt+\u2190)'); + expect(back).toEqual('Back (Alt+Left Arrow)'); let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); - expect(forward).toEqual('Forward (Alt+\u2192)'); + expect(forward).toEqual('Forward (Alt+Right Arrow)'); let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); expect(reload).toEqual('Reload (Ctrl+R)'); let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 0f08dc4b0..1b53dc4f0 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -482,9 +482,9 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => { test("Checking Context Menu Items Names In Order", async () => { let back = await page.$eval("div > div.mapml-contextmenu > button:nth-child(1)",(btn) => btn.textContent); - expect(back).toEqual('Back (Alt+\u2190)'); + expect(back).toEqual('Back (Alt+Left Arrow)'); let forward = await page.$eval("div > div.mapml-contextmenu > button:nth-child(2)",(btn) => btn.textContent); - expect(forward).toEqual('Forward (Alt+\u2192)'); + expect(forward).toEqual('Forward (Alt+Right Arrow)'); let reload = await page.$eval("div > div.mapml-contextmenu > button:nth-child(3)",(btn) => btn.textContent); expect(reload).toEqual('Reload (Ctrl+R)'); let fullScreen = await page.$eval("div > div.mapml-contextmenu > button:nth-child(4)",(btn) => btn.textContent); From febd74e64d1df6f24232ff6214dd54a427f37384 Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Tue, 28 Feb 2023 17:42:44 -0500 Subject: [PATCH 17/19] sync changes with web map --- src/web-map.js | 45 +++++++++++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/src/web-map.js b/src/web-map.js index b18fa987c..fbb315f1a 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -373,7 +373,7 @@ export class WebMap extends HTMLMapElement { } } }else if (!this.controls && this._map) { - this._map.contextMenu.disableToggleControls(); + this._map.contextMenu.toggleContextMenuItems("Toggle Controls", "disabled"); } } attributeChangedCallback(name, oldValue, newValue) { @@ -569,6 +569,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this._addToHistory(); + this._reloadButtonState(); this.dispatchEvent(new CustomEvent('moveend', {detail: {target: this}})); }, this); @@ -687,13 +688,24 @@ export class WebMap extends HTMLMapElement { } if (this._historyIndex === 0) { // when at initial state of map, disable back, forward, and reload items - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item } else { - this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "enabled"); // reload contextmenu item + } + } + _reloadButtonState(){ + if(this.hasAttribute("controls")){ + if (this._historyIndex === 0) { + this._reloadButton.disable(); + } else { + this._reloadButton.enable(); + } + }else{ + return; } } @@ -705,13 +717,13 @@ export class WebMap extends HTMLMapElement { let curr = history[this._historyIndex]; if(this._historyIndex > 0){ - this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "enabled");// forward contextmenu item this._historyIndex--; let prev = history[this._historyIndex]; // Disable back, reload contextmenu item when at the end of history if (this._historyIndex === 0) { - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item this._reloadButton.disable(); } @@ -739,13 +751,14 @@ export class WebMap extends HTMLMapElement { let history = this._history; let curr = history[this._historyIndex]; if(this._historyIndex < history.length - 1){ - this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item - this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "enabled"); // reload contextmenu item + this._reloadButton.enable(); this._historyIndex++; let next = history[this._historyIndex]; // disable forward contextmenu item, when at the end of forward history if (this._historyIndex + 1 === this._history.length) { - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "disabled"); // forward contextmenu item } if(next.zoom !== curr.zoom){ @@ -777,9 +790,9 @@ export class WebMap extends HTMLMapElement { y:mapLocation.y, }; - this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item - this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item - this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item + this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item this._history = [initialLocation]; this._historyIndex = 0; From 195984fc65c304158fa002f900de8f159cb6a9f7 Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Wed, 1 Mar 2023 11:50:31 -0500 Subject: [PATCH 18/19] peter suggested changes --- src/mapml-viewer.js | 41 +++++++++++++++---------------- src/mapml/handlers/ContextMenu.js | 23 ++++++++--------- src/web-map.js | 41 +++++++++++++++---------------- 3 files changed, 52 insertions(+), 53 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 37a6bf30f..bfd4f2fb8 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -332,7 +332,7 @@ export class MapViewer extends HTMLElement { } } } else if (!this.controls && this._map) { - this._map.contextMenu.toggleContextMenuItems("Toggle Controls", "disabled"); + this._map.contextMenu.toggleContextMenuItem("Controls", "disabled"); } } @@ -560,17 +560,17 @@ export class MapViewer extends HTMLElement { } }); this.addEventListener('keydown', function(event) { - if(document.activeElement.nodeName === "MAPML-VIEWER"){ + if (document.activeElement.nodeName === "MAPML-VIEWER") { // Check if Ctrl+R is pressed and map is focused if (event.ctrlKey && event.keyCode === 82) { // Prevent default browser behavior event.preventDefault(); this.reload(); - }else if (event.altKey && event.keyCode === 39) { + } else if (event.altKey && event.keyCode === 39) { // Prevent default browser behavior event.preventDefault(); this.forward(); - }else if (event.altKey && event.keyCode === 37) { + } else if (event.altKey && event.keyCode === 37) { // Prevent default browser behavior event.preventDefault(); this.back(); @@ -648,13 +648,13 @@ export class MapViewer extends HTMLElement { } if (this._historyIndex === 0) { // when at initial state of map, disable back, forward, and reload items - this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item } else { - this._map.contextMenu.toggleContextMenuItems("Back", "enabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "enabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item } } _reloadButtonState(){ @@ -664,8 +664,6 @@ export class MapViewer extends HTMLElement { } else { this._reloadButton.enable(); } - }else{ - return; } } /** @@ -676,13 +674,13 @@ export class MapViewer extends HTMLElement { let curr = history[this._historyIndex]; if(this._historyIndex > 0){ - this._map.contextMenu.toggleContextMenuItems("Forward", "enabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "enabled");// forward contextmenu item this._historyIndex--; let prev = history[this._historyIndex]; // Disable back, reload contextmenu item when at the end of history if (this._historyIndex === 0) { - this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item this._reloadButton.disable(); } @@ -710,14 +708,14 @@ export class MapViewer extends HTMLElement { let history = this._history; let curr = history[this._historyIndex]; if(this._historyIndex < history.length - 1){ - this._map.contextMenu.toggleContextMenuItems("Back", "enabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "enabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item this._reloadButton.enable(); this._historyIndex++; let next = history[this._historyIndex]; // disable forward contextmenu item, when at the end of forward history if (this._historyIndex + 1 === this._history.length) { - this._map.contextMenu.toggleContextMenuItems("Forward", "disabled"); // forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled"); // forward contextmenu item } if(next.zoom !== curr.zoom){ @@ -749,9 +747,10 @@ export class MapViewer extends HTMLElement { y:mapLocation.y, }; - this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton.disable(); this._history = [initialLocation]; this._historyIndex = 0; diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index f7c483eda..fe7cc0706 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -702,25 +702,26 @@ export var ContextMenu = L.Handler.extend({ this._hideCoordMenu(e); }, - toggleContextMenuItems: function (options,state) { - if (state === "disabled"){ - if (options === "Toggle Controls"){ + toggleContextMenuItem: function (options,state) { + options = options.toUpperCase(); + if (state === "disabled") { + if (options === "CONTROLS") { this._items[8].el.el.disabled = true; - }else if (options === "Back"){ + } else if (options === "BACK") { this._items[0].el.el.disabled = true; - }else if (options === "Forward"){ + } else if (options === "FORWARD") { this._items[1].el.el.disabled = true; - }else if (options === "Reload"){ + } else if (options === "RELOAD") { this._items[2].el.el.disabled = true; } - }else if(state === "enabled"){ - if (options === "Toggle Controls"){ + } else if(state === "enabled") { + if (options === "CONTROLS") { this._items[8].el.el.disabled = false; - }else if (options === "Back"){ + } else if (options === "BACK") { this._items[0].el.el.disabled = false; - }else if (options === "Forward"){ + } else if (options === "FORWARD") { this._items[1].el.el.disabled = false; - }else if (options === "Reload"){ + } else if (options === "RELOAD") { this._items[2].el.el.disabled = false; } } diff --git a/src/web-map.js b/src/web-map.js index fbb315f1a..aeb87ea0b 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -373,7 +373,7 @@ export class WebMap extends HTMLMapElement { } } }else if (!this.controls && this._map) { - this._map.contextMenu.toggleContextMenuItems("Toggle Controls", "disabled"); + this._map.contextMenu.toggleContextMenuItem("Controls", "disabled"); } } attributeChangedCallback(name, oldValue, newValue) { @@ -600,17 +600,17 @@ export class WebMap extends HTMLMapElement { } }); this.addEventListener('keydown', function(event) { - if(document.activeElement.className === "mapml-web-map"){ + if (document.activeElement.className === "mapml-web-map") { // Check if Ctrl+R is pressed and map is focused if (event.ctrlKey && event.keyCode === 82) { // Prevent default browser behavior event.preventDefault(); this.reload(); - }else if (event.altKey && event.keyCode === 39) { + } else if (event.altKey && event.keyCode === 39) { // Prevent default browser behavior event.preventDefault(); this.forward(); - }else if (event.altKey && event.keyCode === 37) { + } else if (event.altKey && event.keyCode === 37) { // Prevent default browser behavior event.preventDefault(); this.back(); @@ -688,13 +688,13 @@ export class WebMap extends HTMLMapElement { } if (this._historyIndex === 0) { // when at initial state of map, disable back, forward, and reload items - this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item } else { - this._map.contextMenu.toggleContextMenuItems("Back", "enabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "enabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item } } _reloadButtonState(){ @@ -704,8 +704,6 @@ export class WebMap extends HTMLMapElement { } else { this._reloadButton.enable(); } - }else{ - return; } } @@ -717,13 +715,13 @@ export class WebMap extends HTMLMapElement { let curr = history[this._historyIndex]; if(this._historyIndex > 0){ - this._map.contextMenu.toggleContextMenuItems("Forward", "enabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "enabled");// forward contextmenu item this._historyIndex--; let prev = history[this._historyIndex]; // Disable back, reload contextmenu item when at the end of history if (this._historyIndex === 0) { - this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item this._reloadButton.disable(); } @@ -751,14 +749,14 @@ export class WebMap extends HTMLMapElement { let history = this._history; let curr = history[this._historyIndex]; if(this._historyIndex < history.length - 1){ - this._map.contextMenu.toggleContextMenuItems("Back", "enabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "enabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item this._reloadButton.enable(); this._historyIndex++; let next = history[this._historyIndex]; // disable forward contextmenu item, when at the end of forward history if (this._historyIndex + 1 === this._history.length) { - this._map.contextMenu.toggleContextMenuItems("Forward", "disabled"); // forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled"); // forward contextmenu item } if(next.zoom !== curr.zoom){ @@ -790,9 +788,10 @@ export class WebMap extends HTMLMapElement { y:mapLocation.y, }; - this._map.contextMenu.toggleContextMenuItems("Back", "disabled"); // back contextmenu item - this._map.contextMenu.toggleContextMenuItems("Forward", "disabled");// forward contextmenu item - this._map.contextMenu.toggleContextMenuItems("Reload", "disabled"); // reload contextmenu item + this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item + this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item + this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton.disable(); this._history = [initialLocation]; this._historyIndex = 0; From 609b703b5034a2ada84c14b0339ea3bd7ef8e7a7 Mon Sep 17 00:00:00 2001 From: prushfor Date: Wed, 1 Mar 2023 13:40:55 -0500 Subject: [PATCH 19/19] Tweak to mapml-viewer, web-map --- src/mapml-viewer.js | 18 +++++------------- src/web-map.js | 19 +++++-------------- 2 files changed, 10 insertions(+), 27 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index bfd4f2fb8..6e6a1bf47 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -529,7 +529,6 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this._addToHistory(); - this._reloadButtonState(); this.dispatchEvent(new CustomEvent('moveend', {detail: {target: this}})); }, this); @@ -651,19 +650,12 @@ export class MapViewer extends HTMLElement { this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton?.disable(); } else { this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item - } - } - _reloadButtonState(){ - if(this.hasAttribute("controls")){ - if (this._historyIndex === 0) { - this._reloadButton.disable(); - } else { - this._reloadButton.enable(); - } + this._reloadButton?.enable(); } } /** @@ -681,7 +673,7 @@ export class MapViewer extends HTMLElement { if (this._historyIndex === 0) { this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item - this._reloadButton.disable(); + this._reloadButton?.disable(); } if(prev.zoom !== curr.zoom){ @@ -710,7 +702,7 @@ export class MapViewer extends HTMLElement { if(this._historyIndex < history.length - 1){ this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item - this._reloadButton.enable(); + this._reloadButton?.enable(); this._historyIndex++; let next = history[this._historyIndex]; // disable forward contextmenu item, when at the end of forward history @@ -750,7 +742,7 @@ export class MapViewer extends HTMLElement { this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item - this._reloadButton.disable(); + this._reloadButton?.disable(); this._history = [initialLocation]; this._historyIndex = 0; diff --git a/src/web-map.js b/src/web-map.js index aeb87ea0b..e53147aca 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -569,7 +569,6 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this._addToHistory(); - this._reloadButtonState(); this.dispatchEvent(new CustomEvent('moveend', {detail: {target: this}})); }, this); @@ -691,22 +690,14 @@ export class WebMap extends HTMLMapElement { this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item + this._reloadButton?.disable(); } else { this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item + this._reloadButton?.enable(); } } - _reloadButtonState(){ - if(this.hasAttribute("controls")){ - if (this._historyIndex === 0) { - this._reloadButton.disable(); - } else { - this._reloadButton.enable(); - } - } - } - /** * Allow user to move back in history */ @@ -722,7 +713,7 @@ export class WebMap extends HTMLMapElement { if (this._historyIndex === 0) { this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item - this._reloadButton.disable(); + this._reloadButton?.disable(); } if(prev.zoom !== curr.zoom){ @@ -751,7 +742,7 @@ export class WebMap extends HTMLMapElement { if(this._historyIndex < history.length - 1){ this._map.contextMenu.toggleContextMenuItem("Back", "enabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "enabled"); // reload contextmenu item - this._reloadButton.enable(); + this._reloadButton?.enable(); this._historyIndex++; let next = history[this._historyIndex]; // disable forward contextmenu item, when at the end of forward history @@ -791,7 +782,7 @@ export class WebMap extends HTMLMapElement { this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item this._map.contextMenu.toggleContextMenuItem("Forward", "disabled");// forward contextmenu item this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item - this._reloadButton.disable(); + this._reloadButton?.disable(); this._history = [initialLocation]; this._historyIndex = 0;