diff --git a/guide.json b/guide.json index 6499792b5..5fa266b57 100644 --- 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,18 +141,6 @@ "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", @@ -134,21 +148,21 @@ "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 index c6771c898..bd07e7fe5 100644 --- 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 index b2e0cfcb3..a7c1663aa 100644 --- 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 index f384bfea4..68a172456 100644 --- 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,6 +135,7 @@ const Guide = function Guide(options = {}) { }); }; + // Adds previous and next buttons const moveButtons = () => { const nextButtonHtml = nextButton.render(); const prevButtonHtml = prevButton.render(); @@ -108,18 +143,16 @@ const Guide = function Guide(options = {}) { 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); diff --git a/src/controls/legend.js b/src/controls/legend.js index cb8e68f55..8bf0ea175 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -728,7 +728,7 @@ const Legend = function Legend(options = {}) { icon: '#ic_layers_24px', tooltipText: 'Lager', tooltipPlacement: 'west', - cls: `control icon-small medium round absolute light bottom-right${layerButtonCls}`, + cls: `o-legend-btn control icon-small medium round absolute light bottom-right${layerButtonCls}`, click() { if (!isExpanded) { overlaysCmp.dispatch('expand');