Origo master feature more option button - ui component

src/controls/legend/group.js

@@ -96,10 +96,10 @@ const Group = function Group(options = {}, viewer) {
         });
       },
       render() {
-        return `<div class="flex row align-center padding-left padding-right text-smaller pointer collapse-header" style="width: 100%;">
+        return `<div class="flex row align-center padding-left text-smaller pointer collapse-header" style="width: 100%; padding-right: 1.875rem">
                 <div id="${this.getId()}" class="flex row align-center grow">
                    ${expandButton.render()}
-                    <span class="grow padding-x-small">${title}</span>
+                    <span class="grow padding-x-small" style="word-break: break-all;">${title}</span>
                 </div>
                 ${tickButton ? tickButton.render() : ''}
               </div>`;

src/controls/legend/overlay.js

@@ -1,6 +1,6 @@
 import { Component, Button, dom } from '../../ui';
 import { HeaderIcon } from '../../utils/legendmaker';
-import PopupMenu from '../../popupmenu';
+import PopupMenu from '../../ui/popupmenu';
 
 const OverlayLayer = function OverlayLayer(options) {
   let {
@@ -20,7 +20,7 @@ const OverlayLayer = function OverlayLayer(options) {
   const popupMenuItems = [];
   let layerList;
 
-  const cls = `${clsSettings} flex row align-center padding-left padding-right item`.trim();
+  const cls = `${clsSettings} flex row align-center padding-left padding-right-smaller item`.trim();
   const title = layer.get('title') || 'Titel saknas';
   const name = layer.get('name');
   const secure = layer.get('secure');
@@ -193,7 +193,8 @@ const OverlayLayer = function OverlayLayer(options) {
     const { top, left } = getElementOffset(moreInfoButtonEl, viewerEl);
     const right = viewerEl.offsetWidth - left - moreInfoButtonEl.offsetWidth;
     const targetRect = moreInfoButtonEl.getBoundingClientRect();
-    popupMenu = PopupMenu({ target: viewer.getId(), onUnfocus });
+    popupMenu = PopupMenu({ onUnfocus });
+    document.getElementById(viewer.getId()).appendChild(dom.html(popupMenu.render()));
     popupMenu.setContent(popupMenuList.render());
     popupMenuList.dispatch('render');
     popupMenu.setPosition({ right: `${right}px`, top: `${top + targetRect.height}px` });

src/popupmenu.js → src/ui/popupmenu.js

@@ -1,20 +1,13 @@
-import Cuid from 'cuid';
-import { dom } from './ui';
+import { Component } from '.';
 
 export default function popup(options = {}) {
   const {
-    target,
     onUnfocus = () => {}
   } = options;
 
-  const id = Cuid();
+  let id;
   let isVisible = true;
 
-  function render(targetId) {
-    const pop = `<div id="${id}" class="popup-menu z-index-ontop-high"></div>`;
-    document.getElementById(targetId).appendChild(dom.html(pop));
-  }
-
   function getEl() {
     return document.getElementById(id);
   }
@@ -45,23 +38,24 @@ export default function popup(options = {}) {
     if (content) getEl().innerHTML = content;
   }
 
-  function bindUIActions() {
-    window.addEventListener('click', (e) => {
-      const popupMenuEl = document.getElementById(id);
-      if (!popupMenuEl.contains(e.target)) {
-        onUnfocus(e);
-        e.preventDefault();
-      }
-    });
-  }
-
-  render(target);
-  bindUIActions();
-  return {
+  return Component({
+    onInit() {
+      id = this.getId();
+      window.addEventListener('click', (e) => {
+        const popupMenuEl = document.getElementById(id);
+        if (!popupMenuEl.contains(e.target)) {
+          onUnfocus(e);
+          e.preventDefault();
+        }
+      });
+    },
     getEl,
     setPosition,
     setVisibility,
     toggleVisibility,
-    setContent
-  };
+    setContent,
+    render() {
+      return `<div id="${this.getId()}" class="popup-menu z-index-ontop-high"></div>`;
+    }
+  });
 }