Skip to content

Commit

Permalink
full screen context menu item added and fixed some context menu relat…
Browse files Browse the repository at this point in the history 
…ed tests (#765)

* full screen context menu item added and fixedtests

* weird test: Checking Context Menu Fullscreen

* ready for review

* Fix fullscreen test and remove scrolling

* minor changes

* ready to merge

* bug fix (esc button), Peter suggested functions

* forward reload back fullscreen button changes

* minor changes

* Linting

* Change "View fullscreen" to "View Fullscreen"

* minor linting

* Aliyan suggested styling changes

* time out added between each time back is pressed

* disabling reload button

* bugs fix and new context menu functions

* sync changes with web map

* peter suggested changes

* Tweak to mapml-viewer, web-map

---------

Co-authored-by: AliyanH <aliyanulhaq@gmail.com>
Co-authored-by: Peter Rushforth <peter.rushforth@gmail.com>
Co-authored-by: prushfor <prushfor@L-BSC-A146390.nrn.nrcan.gc.ca>
  • Loading branch information
@Jacky0299 @AliyanH @prushforth
4 people committed Mar 1, 2023
1 parent dfa715e commit d89e27b
Show file tree
Hide file tree
Showing 11 changed files with 269 additions and 75 deletions.
68 changes: 51 additions & 17 deletions src/mapml-viewer.js
View file
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.toggleContextMenuItem("Controls", "disabled");
}

}
Expand Down Expand Up @@ -550,6 +550,32 @@ 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');
}
});
this.addEventListener('keydown', function(event) {
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();
}
}
});
}
_toggleControls() {
if (this._map) {
Expand Down Expand Up @@ -621,16 +647,17 @@ 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.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._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.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();
}
}

/**
* Allow user to move back in history
*/
Expand All @@ -639,13 +666,14 @@ 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.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._items[0].el.el.disabled = true; // back contextmenu item
this._map.contextMenu._items[2].el.el.disabled = true; // reload contextmenu item
this._map.contextMenu.toggleContextMenuItem("Back", "disabled"); // back contextmenu item
this._map.contextMenu.toggleContextMenuItem("Reload", "disabled"); // reload contextmenu item
this._reloadButton?.disable();
}

if(prev.zoom !== curr.zoom){
Expand All @@ -672,13 +700,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.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._items[1].el.el.disabled = true; // forward contextmenu item
this._map.contextMenu.toggleContextMenuItem("Forward", "disabled"); // forward contextmenu item
}

if(next.zoom !== curr.zoom){
Expand Down Expand Up @@ -710,9 +739,10 @@ 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.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;
Expand All @@ -733,6 +763,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
4 changes: 2 additions & 2 deletions src/mapml/control/FullscreenButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
},

Expand Down
69 changes: 53 additions & 16 deletions src/mapml/handlers/ContextMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,21 @@ export var ContextMenu = L.Handler.extend({
//setting the items in the context menu and their callback functions
this._items = [
{
text: M.options.locale.cmBack + " (<kbd>B</kbd>)",
text: M.options.locale.cmBack + " (<kbd>Alt+Left Arrow</kbd>)",
callback:this._goBack
},
{
text: M.options.locale.cmForward + " (<kbd>F</kbd>)",
text: M.options.locale.cmForward + " (<kbd>Alt+Right Arrow</kbd>)",
callback:this._goForward
},
{
text: M.options.locale.cmReload + " (<kbd>R</kbd>)",
text: M.options.locale.cmReload + " (<kbd>Ctrl+R</kbd>)",
callback:this._reload
},
{
text: M.options.locale.btnFullScreen + " (<kbd>F</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 @@ -615,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()
Expand All @@ -629,19 +635,16 @@ 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);
break;
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 84: //T KEY
this._toggleControls(e);
break;
Expand Down Expand Up @@ -697,5 +700,39 @@ export var ContextMenu = L.Handler.extend({
_onItemMouseOut: function (e) {
L.DomUtil.removeClass(e.target || e.srcElement, 'over');
this._hideCoordMenu(e);
},

toggleContextMenuItem: function (options,state) {
options = options.toUpperCase();
if (state === "disabled") {
if (options === "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 === "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) {
if (options === 'view') {
this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnFullScreen + " (<kbd>F</kbd>)";
}
else if (options === 'exit') {
this._map.contextMenu._items[3].el.el.innerHTML = M.options.locale.btnExitFullScreen + " (<kbd>F</kbd>)";
}
}
});
3 changes: 2 additions & 1 deletion src/mapml/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export var Options = {
lcOpacity: "Opacity",
btnZoomIn: "Zoom in",
btnZoomOut: "Zoom out",
btnFullScreen: "View fullscreen",
btnFullScreen: "View Fullscreen",
btnExitFullScreen: "Exit Fullscreen",
amZoom: "zoom level",
amColumn: "column",
amRow: "row",
Expand Down
Loading

0 comments on commit d89e27b

Please sign in to comment.