Embedded and specials

origo-map · Sep 10, 2023 · 96e43fe · 96e43fe
1 parent e315bc6
commit 96e43fe
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 68 deletions.
diff --git a/guide.json b/guide.json
@@ -11,6 +11,12 @@
     "description": "Zooma ut i kartan",
     "icon": "#ic_remove_24px"
   },
+  {
+    "target": "o-fullscreen",
+    "name": "fullscreen",
+    "description": "Öppnar kartan i helskärmsläge",
+    "icon": "#ic_fullscreen_24px"
+  },
   {
     "target": "o-home-in",
     "name": "home",
@@ -23,36 +29,42 @@
     "description": "Tar kartan till din position",
     "icon": "#ic_near_me_24px"
   },
+  {
+    "target": "o-bookmarks",
+    "name": "bookmarks",
+    "description": "Här finns direktlänkar till specifika platser i kartan",
+    "icon": "#ic_bookmark_24px"
+  },
   {
     "target": "o-measure",
     "name": "measure",
     "description": "Mät avtånd och ytor",
     "icon": "#ic_straighten_24px"
   },
-  {
-    "target": "o-bookmark-button",
-    "name": "bookmarks",
-    "description": "Här finns direktlänkar till specifika platser i kartan",
-    "icon": ""
-  },
   {
     "target": "o-external-url",
     "name": "externalurl",
     "description": "Öppnar fler knappar där du kan välja att öppna din kartposition i annan applikation",
     "icon": "#ic_baseline_link_24px"
   },
-  {
-    "target": "swiper-tool-button",
-    "name": "new control",
-    "description": "Jämför kartlager med svepare eller titthål",
-    "icon": "#mui-compare"
-  },
   {
     "target": "o-menu-button",
     "name": "editor",
     "description": "Växlar redigeringsläge",
     "icon": "#ic_edit_24px"
   },
+  {
+    "target": "ol-rotate",
+    "name": "rotate",
+    "description": "Rotera kartan med två fingrar på pekskärm, håll ned Shift+Alt på PC. Klicka på symbolen för att återgå. Syns endast vid roterat läge.",
+    "icon": "#origo-compass"
+  },
+  {
+    "target": "o-search-wrapper",
+    "name": "search",
+    "description": "Sök i kartan",
+    "icon": "#ic_search_24px"
+  },
   {
     "target": "o-mapmenu",
     "name": "mapmenu",
@@ -92,16 +104,30 @@
     ]
   },
   {
-    "target": "ol-attribution",
-    "name": "attribution",
-    "description": "Tillskrivningar för aktiva kartlager",
-    "icon": "#fa-copyright"
-  },
-  {
-    "target": "o-fullscreen",
-    "name": "fullscreen",
-    "description": "Öppnar kartan i helskärmsläge",
-    "icon": "#ic_fullscreen_24px"
+    "target": "bg-inverted",
+    "name": "draw",
+    "description": "",
+    "icon": "#fa-pencil",
+    "group": [
+      {
+        "target": "undefined",
+        "name": "new",
+        "description": "Rita en punkt",
+        "icon": "#ic_place_24px"
+      },
+      {
+        "target": "undefined",
+        "name": "new",
+        "description": "Rita en linje",
+        "icon": "#ic_timeline_24px"
+      },
+      {
+        "target": "undefined",
+        "name": "new",
+        "description": "Rita ett område",
+        "icon": "#o_polygon_24px"
+      }
+    ]
   },
   {
     "target": "o-legend",
@@ -115,40 +141,28 @@
     "description": "Klicka på denna om du vill ha positionen från kartans centrum och kan definiera egna koordinater direkt i koordinatdescriptionen. Byt system genom att klicka på koordinatsystemet",
     "icon": "#ic_gps_not_fixed_24px"
   },
-  {
-    "target": "ol-rotate",
-    "name": "rotate",
-    "description": "Rotera kartan med två fingrar på pekskärm, håll ned Shift+Alt på PC. Klicka på symbolen för att återgå",
-    "icon": "#origo-compass"
-  },
-  {
-    "target": "o-search",
-    "name": "search",
-    "description": "Sök i kartan",
-    "icon": "#ic_search_24px"
-  },
   {
     "target": "o-scale",
     "name": "scale",
     "description": "Visar kartans nuvarande skala",
     "icon": ""
   },
   {
-    "target": "ol-scale-line",
-    "name": "scaleline",
-    "description": "Visar en skalstock som förmedlar ett ungefärligt världsligt avstånd i kartan",
-    "icon": "img/png/origo_skalstock.JPG"
+    "target": "o-scalepicker",
+    "name": "scalepicker",
+    "description": "Visar kartans nuvarande skala. Klicka för att välja skala manuellt",
+    "icon": ""
+  },
+  {
+    "target": "ol-attribution",
+    "name": "attribution",
+    "description": "Tillskrivningar för aktiva kartlager",
+    "icon": "#fa-copyright"
   },
   {
     "target": "undefined",
     "name": "draganddrop",
     "description": "Du har möjlighet att dra in kartlager från din dator till kartan. Möjliga format är: GPX, GeoJSON, IGC, KML och TopoJSON",
     "icon": "#drag-and-drop"
-  },
-  {
-    "target": "o-scalepicker",
-    "name": "scalepicker",
-    "description": "Visar kartans nuvarande skala. Klicka för att välja skala manuellt",
-    "icon": ""
   }
 ]
diff --git a/scss/_guide.scss b/scss/_guide.scss
@@ -4,19 +4,37 @@
 
 .o-guide span {
     max-width: 30px;
-    min-width:60px;
+    min-width: 60px;
 }
 
 .o-guide-target {
-    animation: target-animate 1s ease infinite alternate;
+    animation: o-guide-target-animate 1s ease infinite alternate;
+    z-index: 1201;
 }
 
-@keyframes target-animate {
+.o-guide-target.ol-rotate {
+    animation: o-guide-target-ol-rotate-animate 1s ease infinite alternate;
+    z-index: 1201;
+}
+
+@keyframes o-guide-target-animate {
+    0% {
+        scale: 1;
+    }
+
+    100% {
+        scale: 1.15;
+    }
+}
+
+@keyframes o-guide-target-ol-rotate-animate {
     0% {
-        transform: scale(1);
+        opacity: 0;
+        visibility: visible;
     }
 
     100% {
-        transform: scale(1.1);
+        opacity: 1;
+        visibility: visible;
     }
 }
diff --git a/src/controls/bookmarks.js b/src/controls/bookmarks.js
@@ -96,7 +96,7 @@ const Bookmarks = function Bookmarks(options = {}) {
 
       bookmarksButton = Button({
         icon: bookmarksIcon,
-        cls: `control icon-smaller medium round light${bookmarksButtonCls}`,
+        cls: `o-bookmarks-btn control icon-smaller medium round light${bookmarksButtonCls}`,
         tooltipText: title,
         tooltipPlacement: 'east',
         click() {
@@ -153,7 +153,7 @@ const Bookmarks = function Bookmarks(options = {}) {
       });
 
       bookmarks = El({
-        cls: `absolute flex column control bg-white text-small overflow-hidden z-index-top no-select grab${bookmarksElCls}`,
+        cls: `o-bookmarks absolute flex column control bg-white text-small overflow-hidden z-index-top no-select grab${bookmarksElCls}`,
         style: 'top: 1rem; left: 4rem;',
         collapseX: true,
         components: [headerComponent, contentComponent]

diff --git a/src/controls/guide.js b/src/controls/guide.js
@@ -1,12 +1,14 @@
 import { Component, Modal, Button, Icon } from '../ui';
 import stripJSONComments from '../utils/stripjsoncomments';
+import isEmbedded from '../utils/isembedded';
 
 const Guide = function Guide(options = {}) {
   const contentItems = [];
   const {
     title = 'Guide',
     cls,
-    style
+    style,
+    url
   } = options;
 
   let viewer;
@@ -29,12 +31,13 @@ const Guide = function Guide(options = {}) {
     confirmText
   } = options;
 
+  // Fetches the controls defined in json configuration and origos default controls
   const getActiveControls = async () => {
     const configUrl = `${window.location.href}${viewer.getMapName()}`;
     try {
       const response = await fetch(configUrl);
       if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+        throw new Error(`HTTP error! status: ${response.status}\nCould not GET origo configuration`);
       }
       const strippedOfComments = stripJSONComments(await response.text());
       const data = JSON.parse(strippedOfComments);
@@ -49,12 +52,13 @@ const Guide = function Guide(options = {}) {
     }
   };
 
+  // Fetches the configuration json for guide
   const getGuideConfig = async () => {
-    const configUrl = `${window.location.href}guide.json`;
+    const configUrl = url || `${window.location.href}guide.json`;
     try {
       const response = await fetch(configUrl);
       if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+        throw new Error(`HTTP error! status: ${response.status}\nPlease configure url to guide.json or place it in application root`);
       }
       const data = await response.json();
       return data;
@@ -65,20 +69,35 @@ const Guide = function Guide(options = {}) {
   };
 
   const createContent = async () => {
+    let targetValue;
     let groupItems = [];
-    const userDefinedControl = { name: 'new control' };
     const controlsToRender = [];
     const activeControls = await getActiveControls();
-    activeControls.push(userDefinedControl);
     const guideConfigControls = await getGuideConfig();
+    // Finds active control by name
+    const findControl = (name) => {
+      const foundControl = activeControls.find((activeControl) => activeControl.name === name);
+      return foundControl;
+    };
+    // Creates a dummy to use for undefined controls
+    const userDefinedControl = { name: 'new' };
+    activeControls.push(userDefinedControl);
     // Make sure only active controls render in guide
     activeControls.forEach(activeControl => {
-      const filterGuideConfigControls = guideConfigControls.filter((el) => el.name === activeControl.name || el.name === '');
+      let activeC = activeControl;
+      const ifOptions = activeC.options;
+      // If map is embedded and controls hideWhenEmbedded is true they are exclude from guide
+      if (ifOptions && ifOptions.hideWhenEmbedded && isEmbedded(viewer.getTarget())) {
+        activeC = {};
+      }
+      const filterGuideConfigControls = guideConfigControls.filter((el) => el.name === activeC.name || el.name === '');
       controlsToRender.push(...filterGuideConfigControls);
     });
     // Sort controls by guide config order
     controlsToRender.sort((a, b) => guideConfigControls.indexOf(a) - guideConfigControls.indexOf(b));
+    // Creates nested group if configured
     controlsToRender.forEach(controlToRender => {
+      groupItems = [];
       if ('group' in controlToRender) {
         controlToRender.group.forEach(groupItem => {
           const groupItemIcon = Icon({
@@ -90,7 +109,22 @@ const Guide = function Guide(options = {}) {
       } else if (!('group' in controlToRender)) {
         groupItems = [];
       }
-      const targetValue = controlToRender.target;
+      // Sets the guides target control
+      targetValue = controlToRender.target;
+
+      // Specials, targets for different controls dynamic states
+      if (controlToRender.name === 'legend' && 'expanded' in findControl('legend').options && !findControl('legend').options.expanded) {
+        targetValue = 'o-legend-btn';
+      }
+      if (controlToRender.name === 'bookmarks' && !findControl('bookmarks').options.isActive) {
+        targetValue = 'o-bookmarks-btn';
+      }
+      if (!isEmbedded(viewer.getTarget())) {
+        const indx = controlsToRender.findIndex(v => v.name === 'fullscreen');
+        controlsToRender.splice(indx, indx >= 0 ? 1 : 0);
+      }
+
+      // Creates the content of slides for modal
       const descriptionValue = controlToRender.description;
       const iconValue = controlToRender.icon;
       const controlIcons = Icon({
@@ -101,25 +135,24 @@ const Guide = function Guide(options = {}) {
     });
   };
 
+  // Adds previous and next buttons
   const moveButtons = () => {
     const nextButtonHtml = nextButton.render();
     const prevButtonHtml = prevButton.render();
     content += nextButtonHtml;
     content += prevButtonHtml;
     return content;
   };
-
+  // Adds the hide button
   const addHideButton = () => {
     const hideButtonHtml = hideButton.render();
     content += hideButtonHtml;
     return content;
   };
-
   const clearLocalStorage = () => {
     localStorage.removeItem(visibilityKey);
     localStorage.removeItem(contentKey);
   };
-
   const setLocalStorage = () => {
     const newContent = localStorage.getItem(contentKey) !== content;
     if (localStorage.getItem(visibilityKey) !== 'false' || content) {
@@ -130,10 +163,12 @@ const Guide = function Guide(options = {}) {
     }
   };
 
+  // Uppdates the sliders item to show and toggles the animation for target control
   const updateDisplayedItem = (prevElSelector) => {
     const currentElClass = items.at(currentIndex).id ? `.${items.at(currentIndex).id}` : false;
     const currentEl = document.querySelectorAll(currentElClass)[0];
     const prevEl = document.querySelectorAll(prevElSelector)[0];
+
     items.forEach((item, index) => {
       const itm = item;
       if (index === currentIndex) {
@@ -149,7 +184,7 @@ const Guide = function Guide(options = {}) {
       currentEl.classList.add('o-guide-target');
     }
   };
-
+  // Creates the guide modal with its buttons and content
   const createModal = async (modalContent) => {
     content = modalContent;
     await createContent();
@@ -183,9 +218,6 @@ const Guide = function Guide(options = {}) {
     list = document.getElementById('o-guide-slides-container');
     items = Array.from(list.children);
     updateDisplayedItem();
-    const currentIndexElId = items[0].id;
-    const currentEl = document.querySelectorAll(`.${currentIndexElId}`)[0];
-    currentEl.classList.add('o-guide-target');
   };
 
   return Component({
@@ -244,7 +276,7 @@ const Guide = function Guide(options = {}) {
     onAdd(evt) {
       component = this;
       viewer = evt.target;
-      target = viewer.getId();
+      target = document.querySelectorAll('.o-main')[0].id;
       contentKey = `guideContent;${window.location.pathname};${viewer.getMapName().split('.')[0]}`;
       visibilityKey = `guideVisibility;${window.location.pathname};${viewer.getMapName().split('.')[0]}`;
       createModal(content);