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

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.toggleContextMenuItem("Controls", "disabled");
     }
 
   }
@@ -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) {
@@ -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
    */
@@ -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){
@@ -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){
@@ -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;
@@ -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);

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'
             }
         },
 

src/mapml/handlers/ContextMenu.js

@@ -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:"-"
       },
@@ -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<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', '');
@@ -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();
@@ -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()
@@ -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;
@@ -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>)";
+    }
   }
 });

src/mapml/options.js

@@ -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",