Add general purpose fullscreen function and provide map control to use it

6 files changed, 59 insertions, 5 deletions

diff --git a/resources/js/vendor.js b/resources/js/vendor.js
index 7322bf6034..3772b58a61 100644
--- a/resources/js/vendor.js
+++ b/resources/js/vendor.js
@@ -44,7 +44,7 @@ import {
 import {
   // For resources/views/icons/*
   faArrowDown, faArrowLeft, faArrowRight, faArrowUp, faArrowsAltV, faBan, faBars,
-  faCalendar, faCaretDown, faCaretUp, faCheck, faCodeBranch, faDownload, faExclamationTriangle, faGenderless,
+  faCalendar, faCaretDown, faCaretUp, faCheck, faCodeBranch, faDownload, faExclamationTriangle, faExpand, faGenderless,
   faGripHorizontal, faGripLines, faHistory, faInfoCircle, faLanguage, faLink, faList,
   faLock, faMagic, faMap, faMapMarkerAlt, faMars, faMedkit, faPaintBrush, faPause, faPencilAlt,
   faPlay, faPlus, faPuzzlePiece, faQuestionCircle, faRedo, faSearch, faSearchLocation, faSearchMinus, faSearchPlus, faShareAlt,
@@ -84,6 +84,9 @@ import 'leaflet-bing-layer';
 
 window.$ = window.jQuery = $;
 
+import fscreen from 'fscreen';
+window.fscreen = fscreen;
+
 library.add(
   // For resources/views/icons/*
   faBell, faCopy, faEnvelope, faFile, faFileAlt, faFileImage, faFolder, faKeyboard,
@@ -92,7 +95,7 @@ library.add(
 library.add(
   // For resources/views/icons/*
   faArrowDown, faArrowLeft, faArrowRight, faArrowUp, faArrowsAltV, faBan, faBars,
-  faCalendar, faCaretDown, faCaretUp, faCheck, faCodeBranch, faDownload, faExclamationTriangle, faGenderless,
+  faCalendar, faCaretDown, faCaretUp, faCheck, faCodeBranch, faDownload, faExclamationTriangle, faExpand, faGenderless,
   faGripHorizontal, faGripLines, faHistory, faInfoCircle, faLanguage, faLink, faList,
   faLock, faMagic, faMap, faMapMarkerAlt, faMars, faMedkit, faPaintBrush, faPause, faPencilAlt,
   faPlay, faPlus, faPuzzlePiece, faQuestionCircle, faRedo, faSearch, faSearchLocation, faSearchMinus, faSearchPlus, faShareAlt,
diff --git a/resources/js/webtrees.js b/resources/js/webtrees.js
index 42fd72b72f..bdd509cfe9 100644
--- a/resources/js/webtrees.js
+++ b/resources/js/webtrees.js
@@ -700,6 +700,28 @@
       },
     });
 
+    const fullScreenControl = L.Control.extend({
+      options: {
+        position: 'topleft',
+      },
+      onAdd: (map) => {
+        const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
+        const anchor = L.DomUtil.create('a', 'leaflet-control-fullscreen', container);
+
+        anchor.setAttribute('aria-label', config.i18n.fullScreen);
+        anchor.setAttribute('title', config.i18n.fullScreen);
+        anchor.setAttribute('aria-disabled', 'false');
+        anchor.setAttribute('role', 'button');
+        anchor.innerHTML = config.icons.fullscreen;
+
+        anchor.onclick = () => {
+          webtrees.fullScreen('wt-fullscreen-wrapper');
+        };
+
+        return container;
+      },
+    });
+
     let defaultLayer = null;
 
     for (let [, provider] of Object.entries(config.mapProviders)) {
@@ -726,6 +748,7 @@
       zoomControl: false,
     })
       .addControl(zoomControl)
+      .addControl(new fullScreenControl)
       .addControl(new resetControl())
       .addLayer(defaultLayer)
       .addControl(L.control.layers.tree(config.mapProviders, null, {
@@ -735,6 +758,33 @@
 
   };
 
+    /**
+   * General purpose fullscreen function
+   * @param {string} id of the element to be fullscreened
+   *
+   */
+     webtrees.fullScreen = function (id) {
+      const element = document.getElementById(id);
+      if (fscreen.fullscreenEnabled) {
+        if (!fscreen.fullscreenElement) {
+          element.requestFullscreen();
+        } else if (fscreen.exitFullscreen) {
+          fscreen.exitFullscreen();
+        }
+      } else {
+        console.log('Your browser cannot use fullscreen at this time');
+      }
+    }
+
+    /**
+     * Catch error generated when going to fullscreen
+     * @param {Event} event
+     */
+    fscreen.onfullscreenerror = (event) => {
+      console.error(event);
+      console.log('An error occurred changing into fullscreen');
+    }
+
   /**
    * Initialize a tom-select input
    * @param {Element} element
diff --git a/resources/views/icons/fullscreen.phtml b/resources/views/icons/fullscreen.phtml
new file mode 100644
index 0000000000..ac3cdefdf8
--- /dev/null
+++ b/resources/views/icons/fullscreen.phtml
@@ -0,0 +1 @@
+<span class="wt-icon-fullscreen"><i class="fas fa-expand fa-fw" aria-hidden="true"></i></span><?php
diff --git a/resources/views/modules/pedigree-map/chart.phtml b/resources/views/modules/pedigree-map/chart.phtml
index 9e853f5c66..0ef363c380 100644
--- a/resources/views/modules/pedigree-map/chart.phtml
+++ b/resources/views/modules/pedigree-map/chart.phtml
@@ -11,7 +11,7 @@ use Fisharebest\Webtrees\View;
  */
 ?>
 
-<div class="row my-4 gchart wt-pedigree-map-wrapper">
+<div id="wt-fullscreen-wrapper" class="row my-4 gchart wt-pedigree-map-wrapper">
     <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map wt-pedigree-map-map" dir="ltr"></div>
     <ul class="col-sm-3 wt-pedigree-map-sidebar wt-page-options-value list-unstyled px-1"></ul>
 </div>
diff --git a/resources/views/modules/place-hierarchy/map.phtml b/resources/views/modules/place-hierarchy/map.phtml
index 936fba47aa..bf380d37df 100644
--- a/resources/views/modules/place-hierarchy/map.phtml
+++ b/resources/views/modules/place-hierarchy/map.phtml
@@ -11,7 +11,7 @@ use Fisharebest\Webtrees\View;
 
 ?>
 
-<div class="row gchart wt-place-hierarchy-wrapper">
+<div id="wt-fullscreen-wrapper" class="row gchart wt-place-hierarchy-wrapper">
     <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map wt-place-hierarchy-map" dir="ltr"></div>
     <ul class="col-sm-3 wt-place-hierarchy-sidebar wt-page-options-value list-unstyled px-md-1"></ul>
 </div>
diff --git a/resources/views/modules/places/tab.phtml b/resources/views/modules/places/tab.phtml
index 5f3b788baa..1e4d02f3db 100644
--- a/resources/views/modules/places/tab.phtml
+++ b/resources/views/modules/places/tab.phtml
@@ -12,7 +12,7 @@ use Fisharebest\Webtrees\I18N;
 ?>
 
 <div class="py-4">
-    <div class="row gchart wt-places-tab-wrapper">
+    <div id="wt-fullscreen-wrapper" class="row gchart wt-places-tab-wrapper">
         <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map wt-places-tab-map" dir="ltr"></div>
         <ul class="col-sm-3 wt-places-tab-sidebar wt-page-options-value list-unstyled px-md-1"></ul>
     </div>