From 560b85a793885d23ab710d21ec7e4f7e4fce3a0c Mon Sep 17 00:00:00 2001
From: Markus Polleryd <m.polleryd@gmail.com>
Date: Thu, 31 Mar 2022 08:42:57 +0200
Subject: [PATCH] Origo master feature more option button - ui component
 (#1496)

* New button for reaching layer info

* Layer info menu

* Only show remove layer option when layer can be removed

* Add focus to icon-smallest

* Move close button into legend component

* Add box shadow

* Popup menu created on demand in layer.js

* Toggle popup menu on more info button click

* align layer check buttons

* Change popupmenu to ui component

* Smaller padding right on legend layer rows

Co-authored-by: Markus Polleryd <markus.polleryd@decerno.se>
---
 src/controls/legend/group.js   |  4 ++--
 src/controls/legend/overlay.js |  7 +++---
 src/{ => ui}/popupmenu.js      | 42 +++++++++++++++-------------------
 3 files changed, 24 insertions(+), 29 deletions(-)
 rename src/{ => ui}/popupmenu.js (60%)

diff --git a/src/controls/legend/group.js b/src/controls/legend/group.js
index 4f508d070..f0d68a83f 100644
--- a/src/controls/legend/group.js
+++ b/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>`;
diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
index 44259c416..f14ad5666 100644
--- a/src/controls/legend/overlay.js
+++ b/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` });
diff --git a/src/popupmenu.js b/src/ui/popupmenu.js
similarity index 60%
rename from src/popupmenu.js
rename to src/ui/popupmenu.js
index 1d1bf0d6e..3b989fa97 100644
--- a/src/popupmenu.js
+++ b/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>`;
+    }
+  });
 }