Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

full screen context menu item added and fixed some context menu related tests #765

Merged
merged 21 commits into from
Mar 1, 2023
Merged

full screen context menu item added and fixed some context menu related tests #765

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
900e5e3
full screen context menu item added and fixedtests
Jacky0299 Feb 21, 2023
fed0583
weird test: Checking Context Menu Fullscreen
Jacky0299 Feb 21, 2023
11c5ed8
ready for review
Jacky0299 Feb 22, 2023
6cbd882
Fix fullscreen test and remove scrolling
AliyanH Feb 22, 2023
4bf1a8f
Merge branch 'Maps4HTML:main' into issue201
Jacky0299 Feb 22, 2023
91a48cb
minor changes
Jacky0299 Feb 22, 2023
fc898c8
ready to merge
Jacky0299 Feb 22, 2023
46d00bc
bug fix (esc button), Peter suggested functions
Jacky0299 Feb 25, 2023
5cb8a9b
forward reload back fullscreen button changes
Jacky0299 Feb 27, 2023
d9edb58
minor changes
Jacky0299 Feb 27, 2023
945533a
Linting
prushforth Feb 27, 2023
9826d93
Change "View fullscreen" to "View Fullscreen"
prushforth Feb 27, 2023
e2997c5
minor linting
AliyanH Feb 27, 2023
5d4c25a
Aliyan suggested styling changes
Jacky0299 Feb 27, 2023
a3a7a34
Merge branch 'issue201' of https://github.com/Jacky0299/Web-Map-Custo…
Jacky0299 Feb 27, 2023
5f8ccbe
time out added between each time back is pressed
Jacky0299 Feb 28, 2023
e59d71a
disabling reload button
Jacky0299 Feb 28, 2023
8734d1e
bugs fix and new context menu functions
Jacky0299 Feb 28, 2023
febd74e
sync changes with web map
Jacky0299 Feb 28, 2023
195984f
peter suggested changes
Jacky0299 Mar 1, 2023
609b703
Tweak to mapml-viewer, web-map
Mar 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/mapml-viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", "");
prushforth marked this conversation as resolved.
Show resolved Hide resolved
}

}
Expand Down Expand Up @@ -733,6 +733,10 @@ export class MapViewer extends HTMLElement {
}
}

_toggleFullScreen(){
this._map.toggleFullscreen();
}

viewSource(){
let blob = new Blob([this._source],{type:"text/plain"}),
url = URL.createObjectURL(blob);
Expand Down
2 changes: 2 additions & 0 deletions src/mapml/control/FullscreenButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 + " (<kbd>E</kbd>)";
prushforth marked this conversation as resolved.
Show resolved Hide resolved
} else {
if (options && options.pseudoFullscreen) {
this._enablePseudoFullscreen(container);
Expand All @@ -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 + " (<kbd>E</kbd>)";
prushforth marked this conversation as resolved.
Show resolved Hide resolved
}

},
Expand Down
20 changes: 16 additions & 4 deletions src/mapml/handlers/ContextMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ export var ContextMenu = L.Handler.extend({
text: M.options.locale.cmReload + " (<kbd>R</kbd>)",
callback:this._reload
},
{
text: M.options.locale.btnFullScreen + " (<kbd>E</kbd>)",
callback:this._toggleFullScreen
},
{
spacer:"-"
},
Expand Down Expand Up @@ -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]);
}

Expand All @@ -101,15 +105,15 @@ export var ContextMenu = L.Handler.extend({

this._clickEvent = null;

for(let i =0;i<this._items[4].submenu.length;i++){
this._createItem(this._coordMenu,this._items[4].submenu[i],i);
for(let i =0;i<this._items[5].submenu.length;i++){
this._createItem(this._coordMenu,this._items[5].submenu[i],i);
}

this._items[5].el = this._createItem(this._container, this._items[5]);
this._items[6].el = this._createItem(this._container, this._items[6]);
this._items[7].el = this._createItem(this._container, this._items[7]);
this._items[8].el = this._createItem(this._container, this._items[8]);
this._items[9].el = this._createItem(this._container, this._items[9]);
this._items[10].el = this._createItem(this._container, this._items[10]);

this._layerMenu = L.DomUtil.create("div", "mapml-contextmenu mapml-layer-menu", map._container);
this._layerMenu.setAttribute('hidden', '');
Expand Down Expand Up @@ -222,6 +226,11 @@ export var ContextMenu = L.Handler.extend({
mapEl.reload();
},

_toggleFullScreen: function(e){
let mapEl = e instanceof KeyboardEvent?this._map.options.mapEl:this.options.mapEl;
mapEl._toggleFullScreen();
},

_toggleControls: function(e){
let mapEl = e instanceof KeyboardEvent?this._map.options.mapEl:this.options.mapEl;
mapEl._toggleControls();
Expand Down Expand Up @@ -636,6 +645,9 @@ export var ContextMenu = L.Handler.extend({
if(this._layerClicked.className.includes('mapml-layer-item'))
this._copyLayer(e);
break;
case 69: //E KEY
this._toggleFullScreen(e);
break;
case 80: //P KEY
this._paste(e);
break;
Expand Down
1 change: 1 addition & 0 deletions src/mapml/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
6 changes: 5 additions & 1 deletion src/web-map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@ export class WebMap extends HTMLMapElement {
}
}
}else if (!this.controls && this._map) {
this._map.contextMenu._items[4].el.el.setAttribute("disabled", "");
this._map.contextMenu._items[8].el.el.setAttribute("disabled", "");
}
}
attributeChangedCallback(name, oldValue, newValue) {
Expand Down Expand Up @@ -773,6 +773,10 @@ export class WebMap extends HTMLMapElement {
}
}

_toggleFullScreen(){
this._map.toggleFullscreen();
}

viewSource(){
let blob = new Blob([this._source],{type:"text/plain"}),
url = URL.createObjectURL(blob);
Expand Down
16 changes: 16 additions & 0 deletions test/e2e/core/fullscreenControl.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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");
});
});
52 changes: 44 additions & 8 deletions test/e2e/core/mapContextMenu.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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("Copy (C)");
expect(name).toEqual("View fullscreen (E)");
});

test("Context menu tab goes to next item", async () => {
Expand All @@ -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 () => {
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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");

Expand Down Expand Up @@ -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");
Expand All @@ -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");
Expand Down Expand Up @@ -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");
Expand Down Expand Up @@ -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();
});

Expand Down Expand Up @@ -534,4 +538,36 @@ test.describe("Playwright Map Context Menu Tests", () => {
);
expect(layerCheck).toEqual(false);
});

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)');
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);
AliyanH marked this conversation as resolved.
Show resolved Hide resolved
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);
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');
});
});
4 changes: 2 additions & 2 deletions test/e2e/mapml-viewer/mapml-viewer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/mapml-viewer/mapml-viewerControls.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
Loading