feature: import layer button (#1685)

* feature: import layer button Fixes #1678 Adds a button in the legend for import of layer as file. Defaults to false. { "name": "draganddrop", "options": { "showLegendButton": true } }, * Fix for readding layers * Changed icon * Added popup menu for add layer * Update legend.js * Some css * Added some styling
origo-map · Feb 22, 2023 · e3e5290 · e3e5290
1 parent a7ce1ce
commit e3e5290
Show file tree

Hide file tree

Showing 8 changed files with 201 additions and 33 deletions.
diff --git a/css/svg/material-icons.svg b/css/svg/material-icons.svg
diff --git a/scss/externs/_awesomplete.base.scss b/scss/externs/_awesomplete.base.scss
@@ -15,14 +15,6 @@
   width: 100%;
 }
 
-.awesomplete.black {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  position: fixed;
-  min-width: 100%;
-}
-
 .awesomplete > input {
   display: block;
 }
@@ -48,7 +40,7 @@
   list-style: none;
   margin: 0;
   min-width: 180px;
-  max-width: 220px;
+  max-width: 100%;
   overflow-wrap: break-word;
   padding: 0;
   position: absolute;

diff --git a/scss/ui/_popup-menu.scss b/scss/ui/_popup-menu.scss
@@ -25,3 +25,11 @@ $popup-border-color: $grey-light;
   margin-top: -30px;
   width: max-content;
 }
+
+.popup-menu.button-popup {
+  position: absolute;
+  text-align: left;
+  width: max-content;
+  bottom: 5px;
+  left: 0;
+}
diff --git a/src/controls/draganddrop.js b/src/controls/draganddrop.js
@@ -7,18 +7,67 @@ import TopoJSONFormat from 'ol/format/TopoJSON';
 import VectorSource from 'ol/source/Vector';
 import VectorLayer from 'ol/layer/Vector';
 import Style from '../style';
-import { Component } from '../ui';
+import { Component, InputFile, Button, Element as El } from '../ui';
 
 const DragAndDrop = function DragAndDrop(options = {}) {
   let dragAndDrop;
   let viewer;
   let map;
+  let legendButton;
+
+  if (options.showLegendButton) {
+    const fileInput = InputFile({
+      labelCls: 'hidden',
+      inputCls: 'hidden',
+      change(e) {
+        const filesToDrop = e.target.files;
+
+        function fakeIt(file) {
+          this.dropEffect = 'copy';
+          this.effectAllowed = 'all';
+          this.items = [];
+          this.types = [];
+          this.getData = function getData() {
+            return file;
+          };
+          this.files = file;
+        }
+
+        const fakeEvent = new DragEvent('drop');
+        Object.defineProperty(fakeEvent, 'dataTransfer', {
+          value: new fakeIt(filesToDrop)
+        });
+        viewer.getMap().getViewport().dispatchEvent(fakeEvent);
+      }
+    });
+
+    const openBtn = Button({
+      cls: 'text-medium padding-0',
+      click() {
+        const inputEl = document.getElementById(fileInput.getId());
+        inputEl.value = null;
+        inputEl.click();
+      },
+      text: 'Lägg till från fil',
+      ariaLabel: 'Lägg till från fil'
+    });
+
+    legendButton = El({
+      components: [fileInput, openBtn]
+    });
+
+    legendButton.on('click', () => {
+      openBtn.dispatch('click');
+    });
+  }
 
   return Component({
     name: 'draganddrop',
     onAdd(evt) {
       viewer = evt.target;
       map = viewer.getMap();
+      const legend = viewer.getControlByName('legend');
+      if (options.showLegendButton) { legend.addButtonToTools(legendButton, 'addLayerButton'); }
       const groupName = options.groupName || 'egna-lager';
       const groupTitle = options.groupTitle || 'Egna lager';
       const featureStyles = options.featureStyles || {

diff --git a/src/controls/legend.js b/src/controls/legend.js
@@ -6,6 +6,7 @@ import imageSource from './legend/imagesource';
 import Overlays from './legend/overlays';
 import VisibleOverlays from './legend/visibleOverlays';
 import LayerProperties from './legend/overlayproperties';
+import PopupMenu from '../ui/popupmenu';
 
 const Legend = function Legend(options = {}) {
   const {
@@ -52,13 +53,17 @@ const Legend = function Legend(options = {}) {
   const backgroundLayerButtons = [];
   let toggleGroup;
   let layerSwitcherEl;
+  let addLayerButton;
   let closeButton;
   let layerButton;
   let layerButtonEl;
   let isExpanded;
   let toolsCmp;
-  const cls = `${clsSettings} control bottom-right box overflow-hidden flex row o-legend`.trim();
-  const style = dom.createStyle(Object.assign({}, { width: 'auto' }, styleSettings));
+  const cls = `${clsSettings} control bottom-right box flex row o-legend`.trim();
+  const style = dom.createStyle(Object.assign({}, { width: 'auto', overflow: 'unset' }, styleSettings));
+
+  const popupMenuItems = [];
+  let popupMenu;
 
   const setTabIndex = function setTabIndex() {
     let idx = -1;
@@ -255,9 +260,83 @@ const Legend = function Legend(options = {}) {
     }
   });
 
+  const addPopupMenuItems = function addPopupMenuItems(button, cmp) {
+    if (addLayerButton.getState() === 'hidden') {
+      cmp.addButtonToTools(addLayerButton);
+      addLayerButton.setState('initial');
+    }
+    popupMenuItems.push(button);
+  };
+
+  const popupMenuList = Component({
+    render() {
+      this.addComponents(popupMenuItems);
+      let html = `<ul id="${this.getId()}">`;
+      popupMenuItems.forEach((item) => {
+        html += `<li class="padding-x-small">${item.render()}</li>`;
+      });
+      html += '</ul>';
+      return html;
+    }
+  });
+
+  const createPopupMenu = function createPopupMenu() {
+    const relDiv = document.createElement('div');
+    const absDiv = document.createElement('div');
+    relDiv.classList.add('relative');
+    relDiv.style.display = 'contents';
+    absDiv.classList.add('absolute');
+    const addLayerButtonEl = document.getElementById(addLayerButton.getId());
+    const onUnfocus = (e) => {
+      if (!addLayerButtonEl.contains(e.target)) {
+        popupMenu.setVisibility(false);
+      }
+    };
+    popupMenu = PopupMenu({ onUnfocus, cls: 'button-popup' });
+    addLayerButtonEl.insertAdjacentElement('beforebegin', relDiv);
+    relDiv.appendChild(absDiv);
+    absDiv.appendChild(dom.html(popupMenu.render()));
+    relDiv.addEventListener('click', () => { popupMenu.setVisibility(false); });
+    popupMenu.setContent(popupMenuList.render());
+    popupMenuList.dispatch('render');
+    if (popupMenuItems.length > 1) {
+      popupMenu.setVisibility(true);
+    } else {
+      popupMenu.setVisibility(false);
+      popupMenuItems[0].dispatch('click');
+    }
+  };
+
+  const togglePopupMenu = function togglePopupMenu() {
+    if (!popupMenu) {
+      createPopupMenu();
+    } else if (popupMenuItems.length > 1) {
+      popupMenu.toggleVisibility();
+    } else {
+      popupMenu.setVisibility(false);
+      popupMenuItems[0].dispatch('click');
+    }
+  };
+
+  addLayerButton = Button({
+    cls: 'round compact primary icon-small margin-x-smaller o-tooltip',
+    click() {
+      togglePopupMenu();
+    },
+    style: {
+      'align-self': 'center'
+    },
+    icon: '#o_add_24px',
+    ariaLabel: 'Lägg till lager',
+    title: 'Lägg till lager',
+    tabIndex: -1,
+    validStates: ['initial', 'hidden'],
+    state: 'hidden'
+  });
+
   const layerSearchInput = Input({
     cls: 'o-search-layer-field placeholder-text-smaller smaller',
-    style: { height: '1.5rem', margin: 0, width: '180px' },
+    style: { height: '1.5rem', margin: 0, width: '100%' },
     placeholderText: searchLayersPlaceholderText,
     value: ''
   });
@@ -429,6 +508,7 @@ const Legend = function Legend(options = {}) {
       });
 
       input.parentNode.classList.add('black');
+      input.parentNode.classList.add('grow');
       input.addEventListener('keyup', (e) => {
         const keyCode = e.keyCode;
         if (input.value.length >= searchLayersMinLength) {
@@ -472,25 +552,29 @@ const Legend = function Legend(options = {}) {
     getuseGroupIndication() { return useGroupIndication; },
     getOverlaysCollapse() { return overlaysCmp.overlaysCollapse; },
     setVisibleLayersViewActive,
-    addButtonToTools(button) {
-      const toolsEl = document.getElementById(toolsCmp.getId());
-      toolsEl.classList.remove('hidden');
-      if (toolsCmp.getComponents().length > 0) {
-        toolsEl.style.justifyContent = 'space-between';
-        toolsEl.insertBefore(dom.html(divider.render()), toolsEl.firstChild);
-        toolsEl.insertBefore(dom.html(button.render()), toolsEl.firstChild);
+    addButtonToTools(button, buttonGroup) {
+      if (buttonGroup === 'addLayerButton') {
+        addPopupMenuItems(button, this);
       } else {
-        const node = document.createElement('div');
-        if (typeof button.getValue === 'function') {
-          node.classList.add('grow');
-          toolsEl.appendChild(node);
-          node.appendChild(dom.html(button.render()));
+        const toolsEl = document.getElementById(toolsCmp.getId());
+        toolsEl.classList.remove('hidden');
+        if (toolsCmp.getComponents().length > 0) {
+          toolsEl.style.justifyContent = 'space-between';
+          toolsEl.insertBefore(dom.html(divider.render()), toolsEl.firstChild);
+          toolsEl.insertBefore(dom.html(button.render()), toolsEl.firstChild);
         } else {
-          toolsEl.appendChild(dom.html(button.render()));
+          const node = document.createElement('div');
+          if (typeof button.getValue === 'function') {
+            node.classList.add('grow');
+            toolsEl.appendChild(node);
+            node.appendChild(dom.html(button.render()));
+          } else {
+            toolsEl.appendChild(dom.html(button.render()));
+          }
         }
+        toolsCmp.addComponent(button);
+        button.onRender();
       }
-      toolsCmp.addComponent(button);
-      button.onRender();
     },
     onInit() {
       this.on('render', this.onRender);
@@ -511,7 +595,6 @@ const Legend = function Legend(options = {}) {
         components: backgroundLayerButtons,
         cls: 'spacing-horizontal-small'
       });
-
       this.render();
       this.dispatch('render');
       viewer.getMap().on('click', onMapClick);
@@ -527,7 +610,7 @@ const Legend = function Legend(options = {}) {
       if (turnOnLayersControl) layerControlCmps.push(turnOnLayersButton);
       if (turnOffLayersControl) layerControlCmps.push(turnOffLayersButton);
       const layerControl = El({
-        cls: 'grow flex justify-end align-center no-shrink',
+        cls: 'flex justify-end align-center no-shrink',
         components: layerControlCmps
       });
       mainContainerEl = document.getElementById(mainContainerCmp.getId());
@@ -609,15 +692,16 @@ const Legend = function Legend(options = {}) {
         style: {
           'background-color': '#fff',
           height: '50px',
-          'border-top': '1px solid #dbdbdb'
+          'border-top': '1px solid #dbdbdb',
+          'border-radius': '0.5rem'
         },
         components: baselayerCmps
       });
 
       const mainContainerComponents = [overlaysCmp, visibleOverlaysCmp, toolsCmp, baselayersCmp];
 
       mainContainerCmp = El({
-        cls: 'flex column overflow-hidden relative',
+        cls: 'flex column relative width-100',
         components: mainContainerComponents,
         style: {
           'max-height': `${maxHeight}px`

diff --git a/src/ui.js b/src/ui.js
@@ -14,8 +14,10 @@ export { default as Icon } from './ui/icon';
 export { default as Element } from './ui/element';
 export { default as Input } from './ui/input';
 export { default as InputRange } from './ui/input-range';
+export { default as InputFile } from './ui/input-file';
 export { default as Textarea } from './ui/textarea';
 export { default as Modal } from './ui/modal';
+export { default as PopupMenu } from './ui/popupmenu';
 export { default as Slidenav } from './ui/slidenav';
 export { default as ToggleGroup } from './ui/togglegroup';
 export { default as Component } from './ui/component';

diff --git a/src/ui/input-file.js b/src/ui/input-file.js
@@ -0,0 +1,33 @@
+import Component from './component';
+
+export default function Input(options = {}) {
+  const {
+    labelCls = '',
+    inputCls = '',
+    label = '',
+    change
+  } = options;
+
+  return Component({
+    onInit() {
+      if (change) {
+        this.on('change', change.bind(this));
+        this.on('clear', () => {
+          this.un('change', change.bind(this));
+        });
+      }
+    },
+    onRender() {
+      const el = document.getElementById(this.getId());
+      el.addEventListener('change', this.onChange.bind(this));
+    },
+    onChange(evt) {
+      this.dispatch('change', evt);
+    },
+    render() {
+      return `
+    <label for="${this.getId()}" class="${labelCls}">${label}</label><input id="${this.getId()}" type="file" class="${inputCls}">
+      `;
+    }
+  });
+}
diff --git a/src/ui/popupmenu.js b/src/ui/popupmenu.js
@@ -51,7 +51,6 @@ export default function popup(options = {}) {
         const popupMenuEl = document.getElementById(id);
         if (popupMenuEl && !popupMenuEl.contains(e.target)) {
           onUnfocus(e);
-          e.preventDefault();
         }
       });
     },