Skip to content

Commit 78b3ae1

Browse files
AliyanHAliyanH
authored
Disable Back, Forward, Reload when not possible (#739)
* Disable Back, Forward, Reload when not possible + update tests * Add disabled contextmenu items' test * Update history stack to overwrite forward history when history changed
1 parent 394732e commit 78b3ae1

File tree

6 files changed

+195
-55
lines changed

6 files changed

+195
-55
lines changed

‎src/mapml-viewer.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -537,6 +537,20 @@ export class MapViewer extends HTMLElement {
537537
};
538538
this._historyIndex++;
539539
this._history.splice(this._historyIndex, 0, location);
540+
// Remove future history and overwrite it when map pan/zoom while inside history
541+
if (this._historyIndex + 1 !== this._history.length) {
542+
this._history.length = this._historyIndex + 1;
543+
}
544+
if (this._historyIndex === 0) {
545+
// when at initial state of map, disable back, forward, and reload items
546+
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
547+
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
548+
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
549+
} else {
550+
this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item
551+
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
552+
this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item
553+
}
540554
}
541555

542556
/**
@@ -547,8 +561,14 @@ export class MapViewer extends HTMLElement {
547561
let curr = history[this._historyIndex];
548562

549563
if(this._historyIndex > 0){
564+
this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item
550565
this._historyIndex--;
551566
let prev = history[this._historyIndex];
567+
// Disable back, reload contextmenu item when at the end of history
568+
if (this._historyIndex === 0) {
569+
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
570+
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
571+
}
552572

553573
if(prev.zoom !== curr.zoom){
554574
this._traversalCall = 2; // allows the next 2 moveends to be ignored from history
@@ -574,8 +594,14 @@ export class MapViewer extends HTMLElement {
574594
let history = this._history;
575595
let curr = history[this._historyIndex];
576596
if(this._historyIndex < history.length - 1){
597+
this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item
598+
this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item
577599
this._historyIndex++;
578600
let next = history[this._historyIndex];
601+
// disable forward contextmenu item, when at the end of forward history
602+
if (this._historyIndex + 1 === this._history.length) {
603+
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
604+
}
579605

580606
if(next.zoom !== curr.zoom){
581607
this._traversalCall = 2; // allows the next 2 moveends to be ignored from history
@@ -606,6 +632,10 @@ export class MapViewer extends HTMLElement {
606632
y:mapLocation.y,
607633
};
608634

635+
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
636+
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
637+
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
638+
609639
this._history = [initialLocation];
610640
this._historyIndex = 0;
611641

‎src/mapml/handlers/ContextMenu.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -466,7 +466,7 @@ export var ContextMenu = L.Handler.extend({
466466
this._layerMenuTabs = 1;
467467
this._layerMenu.firstChild.focus();
468468
} else {
469-
this._container.firstChild.focus();
469+
this._container.querySelectorAll("button:not([disabled])")[0].focus();
470470
}
471471

472472
}

‎src/web-map.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -578,6 +578,20 @@ export class WebMap extends HTMLMapElement {
578578
};
579579
this._historyIndex++;
580580
this._history.splice(this._historyIndex, 0, location);
581+
// Remove future history and overwrite it when map pan/zoom while inside history
582+
if (this._historyIndex + 1 !== this._history.length) {
583+
this._history.length = this._historyIndex + 1;
584+
}
585+
if (this._historyIndex === 0) {
586+
// when at initial state of map, disable back, forward, and reload items
587+
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
588+
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
589+
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
590+
} else {
591+
this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item
592+
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
593+
this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item
594+
}
581595
}
582596

583597
/**
@@ -588,8 +602,14 @@ export class WebMap extends HTMLMapElement {
588602
let curr = history[this._historyIndex];
589603

590604
if(this._historyIndex > 0){
605+
this._map.contextMenu._items[1].el.el.disabled = false; // forward contextmenu item
591606
this._historyIndex--;
592607
let prev = history[this._historyIndex];
608+
// Disable back, reload contextmenu item when at the end of history
609+
if (this._historyIndex === 0) {
610+
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
611+
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
612+
}
593613

594614
if(prev.zoom !== curr.zoom){
595615
this._traversalCall = 2; // allows the next 2 moveends to be ignored from history
@@ -615,8 +635,14 @@ export class WebMap extends HTMLMapElement {
615635
let history = this._history;
616636
let curr = history[this._historyIndex];
617637
if(this._historyIndex < history.length - 1){
638+
this._map.contextMenu._items[0].el.el.disabled = false; // back contextmenu item
639+
this._map.contextMenu._items[2].el.el.disabled = false; // reload contextmenu item
618640
this._historyIndex++;
619641
let next = history[this._historyIndex];
642+
// disable forward contextmenu item, when at the end of forward history
643+
if (this._historyIndex + 1 === this._history.length) {
644+
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
645+
}
620646

621647
if(next.zoom !== curr.zoom){
622648
this._traversalCall = 2; // allows the next 2 moveends to be ignored from history
@@ -647,6 +673,10 @@ export class WebMap extends HTMLMapElement {
647673
y:mapLocation.y,
648674
};
649675

676+
this._map.contextMenu._items[0].el.el.disabled = true; // back contextmenu item
677+
this._map.contextMenu._items[1].el.el.disabled = true; // forward contextmenu item
678+
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
679+
650680
this._history = [initialLocation];
651681
this._historyIndex = 0;
652682

‎test/e2e/core/mapContextMenu.test.js‎

Lines changed: 66 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ test.describe("Playwright Map Context Menu Tests", () => {
4646
const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle);
4747
let name = await nameHandle.jsonValue();
4848
await nameHandle.dispose();
49-
expect(name).toEqual("Back (B)");
49+
expect(name).toEqual("Toggle Controls (T)");
5050
});
5151

5252
test("Context menu tab goes to next item", async () => {
@@ -57,7 +57,7 @@ test.describe("Playwright Map Context Menu Tests", () => {
5757
const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle);
5858
let name = await nameHandle.jsonValue();
5959
await nameHandle.dispose();
60-
expect(name).toEqual("Forward (F)");
60+
expect(name).toEqual("Copy Coordinates (C)");
6161
});
6262

6363
test("Submenu opens on C with focus on first item", async () => {
@@ -100,21 +100,24 @@ test.describe("Playwright Map Context Menu Tests", () => {
100100
expect(extent.topLeft.tilematrix[0]).toEqual(expectedFirstTileMatrix[0]);
101101
expect(extent.topLeft.tcrs[0]).toEqual(expectedFirstTCRS[0]);
102102
});
103-
test("Context menu, back item at intial location", async () => {
103+
test("Context menu, back and reload item at initial location disabled", async () => {
104104
await page.click("body > map", { button: "right" });
105-
await page.click("div > div.mapml-contextmenu > button:nth-child(1)");
106-
await page.waitForTimeout(1000);
107-
const extent = await page.$eval(
108-
"body > map",
109-
(map) => map.extent
105+
const backBtn = await page.$eval(
106+
"div > div.mapml-contextmenu > button:nth-child(1)",
107+
(btn) => btn.disabled
108+
);
109+
const fwdBtn = await page.$eval(
110+
"div > div.mapml-contextmenu > button:nth-child(2)",
111+
(btn) => btn.disabled
112+
);
113+
const reloadBtn = await page.$eval(
114+
"div > div.mapml-contextmenu > button:nth-child(3)",
115+
(btn) => btn.disabled
110116
);
111117

112-
expect(extent.projection).toEqual("CBMTILE");
113-
expect(extent.zoom).toEqual({ minZoom: 0, maxZoom: 25 });
114-
expect(extent.topLeft.pcrs).toEqual(expectedPCRS[0]);
115-
expect(extent.topLeft.gcrs).toEqual(expectedGCRS[0]);
116-
expect(extent.topLeft.tilematrix[0]).toEqual(expectedFirstTileMatrix[0]);
117-
expect(extent.topLeft.tcrs[0]).toEqual(expectedFirstTCRS[0]);
118+
expect(backBtn).toEqual(true);
119+
expect(fwdBtn).toEqual(false);
120+
expect(reloadBtn).toEqual(true);
118121
});
119122
test("Context menu, forward item", async () => {
120123
await page.click("body > map", { button: "right" });
@@ -131,20 +134,24 @@ test.describe("Playwright Map Context Menu Tests", () => {
131134
expect(extent.topLeft.tilematrix[0]).toEqual(expectedFirstTileMatrix[1]);
132135
expect(extent.topLeft.tcrs[0]).toEqual(expectedFirstTCRS[1]);
133136
});
134-
test("Context menu, forward item at most recent location", async () => {
137+
test("Context menu, forward item at most recent location disabled", async () => {
135138
await page.click("body > map", { button: "right" });
136-
await page.click("div > div.mapml-contextmenu > button:nth-child(2)");
137-
await page.waitForTimeout(1000);
138-
const extent = await page.$eval(
139-
"body > map",
140-
(map) => map.extent
139+
const backBtn = await page.$eval(
140+
"div > div.mapml-contextmenu > button:nth-child(1)",
141+
(btn) => btn.disabled
142+
);
143+
const fwdBtn = await page.$eval(
144+
"div > div.mapml-contextmenu > button:nth-child(2)",
145+
(btn) => btn.disabled
146+
);
147+
const reloadBtn = await page.$eval(
148+
"div > div.mapml-contextmenu > button:nth-child(3)",
149+
(btn) => btn.disabled
141150
);
142151

143-
expect(extent.zoom).toEqual({ minZoom: 0, maxZoom: 25 });
144-
expect(extent.topLeft.pcrs).toEqual(expectedPCRS[1]);
145-
expect(extent.topLeft.gcrs).toEqual(expectedGCRS[1]);
146-
expect(extent.topLeft.tilematrix[0]).toEqual(expectedFirstTileMatrix[1]);
147-
expect(extent.topLeft.tcrs[0]).toEqual(expectedFirstTCRS[1]);
152+
expect(backBtn).toEqual(false);
153+
expect(fwdBtn).toEqual(true);
154+
expect(reloadBtn).toEqual(false);
148155
});
149156

150157
test.describe("Context Menu, Toggle Controls ", () => {
@@ -218,7 +225,7 @@ test.describe("Playwright Map Context Menu Tests", () => {
218225
await page.click("body > map");
219226
await page.keyboard.press("Shift+F10");
220227

221-
for (let i = 0; i < 4; i++)
228+
for (let i = 0; i < 3; i++)
222229
await page.keyboard.press("Tab");
223230

224231
await page.keyboard.press("Enter");
@@ -338,4 +345,37 @@ test.describe("Playwright Map Context Menu Tests", () => {
338345
await page.hover("div > div.mapml-contextmenu > button:nth-child(5)");
339346
expect(await submenu.isHidden()).toBeTruthy();
340347
});
348+
349+
test("Context menu, All buttons enabled when fwd and back history present", async () => {
350+
await page.click("body > map");
351+
await page.$eval(
352+
"body > map",
353+
(map) => map.zoomTo(81, -63, 3)
354+
);
355+
await page.waitForTimeout(1000);
356+
await page.$eval(
357+
"body > map",
358+
(map) => map.zoomTo(81, -63, 5)
359+
);
360+
await page.waitForTimeout(1000);
361+
await page.click("body > map", { button: "right" });
362+
await page.click("div > div.mapml-contextmenu > button:nth-child(1)");
363+
await page.click("body > map", { button: "right" });
364+
const backBtn = await page.$eval(
365+
"div > div.mapml-contextmenu > button:nth-child(1)",
366+
(btn) => btn.disabled
367+
);
368+
const fwdBtn = await page.$eval(
369+
"div > div.mapml-contextmenu > button:nth-child(2)",
370+
(btn) => btn.disabled
371+
);
372+
const reloadBtn = await page.$eval(
373+
"div > div.mapml-contextmenu > button:nth-child(3)",
374+
(btn) => btn.disabled
375+
);
376+
377+
expect(backBtn).toEqual(false);
378+
expect(fwdBtn).toEqual(false);
379+
expect(reloadBtn).toEqual(false);
380+
});
341381
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ test.describe("Playwright mapml-viewer Element Tests", () => {
170170

171171
await page.click("body > mapml-viewer");
172172
await page.keyboard.press('Control+v');
173-
await page.waitForTimeout(500);
173+
await page.waitForTimeout(1000);
174174
const layerCount = await page.$eval(
175175
"body > mapml-viewer",
176176
(map) => map.layers.length

0 commit comments

Comments
 (0)