feature: import layer button

Fixes #1678
Adds a button in the legend for import of layer as file. Future improvement can be to put this along with the layer manager plugin in a context menu. Defaults to false.
    {
      "name": "draganddrop",
      "options": {
        "showLegendButton": true
      }
    },

src/controls/draganddrop.js

@@ -7,18 +7,73 @@ 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);
+      },
+      style: {
+        'align-self': 'center'
+      },
+      icon: '#o_add_24px',
+      iconStyle: {
+        fill: '#fff'
+      }
+    });
+
+    const openBtn = Button({
+      cls: 'round compact danger icon-small margin-x-smaller',
+      click() {
+        document.getElementById(fileInput.getId()).click();
+      },
+      title: 'Importera fil',
+      style: {
+        'align-self': 'center'
+      },
+      icon: '#o_add_24px',
+      iconStyle: {
+        fill: '#fff'
+      }
+    });
+
+    legendButton = El({
+      components: [fileInput, openBtn]
+    });
+  }
   return Component({
     name: 'draganddrop',
     onAdd(evt) {
       viewer = evt.target;
       map = viewer.getMap();
+      const legend = viewer.getControlByName('legend');
+      if (options.showLegendButton) { legend.addButtonToTools(legendButton); }
       const groupName = options.groupName || 'egna-lager';
       const groupTitle = options.groupTitle || 'Egna lager';
       const featureStyles = options.featureStyles || {

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';

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}">
+      `;
+    }
+  });
+}