global click handlers for popup

dist/assets/a-doc-editor2.css

@@ -26,14 +26,31 @@
 
 .toolbar .item {
     position: relative;
-    background: green;
-    border: 1px solid yelow;
+    background: #408640;
+    border: 1px solid gray;
     border-radius: 3px;
     padding-top: 2px;
     padding-bottom: 2px;
     padding-left: 4px;
     padding-right: 4px;
     margin: 4px;
+    cursor: pointer;
+}
+.popover{
+    position: absolute;
+    padding: 20px;
+    background-color: gray;
+    border: 1px solid purple;
+    opacity: 0;
+    pointer-events: none;
+}
+.popover.show{
+    opacity: 1;
+    pointer-events: auto;
+    z-index: 10;
+}
+.toolbar .item:hover {
+    background: #5fad5f;
 }
 
 .page-list {

dist/assets/a-doc-editor2.js

@@ -57,8 +57,11 @@ var ADocEditor = function (customConfig) {
         htmlStr = /*html*/`
 <div class="header">
     <div class="toolbar">
-        <select class="item" adc="font-select">
-        </select>
+        <select class="item" adc="font-select"></select>
+        <div class="item" adc="list-handler" adc-target="list-popover">
+            <span>L</span>
+            <div class="popover" adc="list-popover" adc-type="popover"></div>
+        </div>
     </div>
 </div>
 <div class="page-list"></div>
@@ -569,6 +572,22 @@ var ADocEditor = function (customConfig) {
 
     function addGlobalEvents(e) {
         shadow.querySelector('.page-list').addEventListener('wheel', onMouseWheelHandler)
+        shadow.addEventListener('mousedown', globalMouseDownHandler)
+    }
+    function globalMouseDownHandler(e){
+        var elem = e.target
+        var targetId = elem.getAttribute('adc-target')
+        if (elem.getAttribute('adc-type')=='popover') return
+        while(!targetId && elem){
+            elem = elem.parentNode
+            if (elem?.getAttribute?.('adc-type')=='popover') return
+            targetId = elem?.getAttribute?.('adc-target')
+        }
+        let allPopovers = shadow.querySelectorAll('[adc-type="popover"]')
+        allPopovers.forEach( item=> {
+            if ( item.getAttribute('adc')==targetId ) item.classList.toggle('show')
+            else item.classList.remove('show')
+        } )
     }
 
     var returnObj = {