@nys-cui/cui-section 0.2.19 → 0.2.20

package/package.json

@@ -6,7 +6,7 @@
     },
     "main": "./dist/js/section.js",
     "type": "module",
-    "version": "0.2.19",
+    "version": "0.2.20",
     "scripts": {
         "clean": "rm -rf ./dist",
         "build": "npm run clean && cui --dep",

package/src/section.js

@@ -35,6 +35,12 @@ export default class CUI_SECTION extends HTMLElement {
             "label": "sTitle",
             "instructions": "oInstructions"
         }
+
+        this.bSectionMenuDisplayed = false;
+        this.dSectionMenu = null;
+        this.bMobile = false;
+        this.dSectionMenuDialog = null;
+        this.fGlobalBodyClick = this.globalBodyClick.bind(this);
     }
 
     get style() {
@@ -74,6 +80,7 @@ export default class CUI_SECTION extends HTMLElement {
         }
 
         sTemplate += `</header><div class="container" id="container" part="container">
+                <slot name="section-menu"></slot>
                 <slot name="section-text"></slot>
                 <slot name="section-messages"></slot>
                 <slot name="section-contents"></slot>
@@ -212,6 +219,12 @@ export default class CUI_SECTION extends HTMLElement {
             oInstructions: this.state.oInstructions || null
         }
 
+        let match = window.matchMedia || window.msMatchMedia;
+        if(match) {
+            let mq = match("(pointer:coarse)");
+            this.bMobile = mq.matches;
+        }
+
         this.sIconBasePath = this.getAttribute('iconbase') || null;
 
         let dMessageList = this.querySelector(`[slot="section-messages"]`);
@@ -230,9 +243,11 @@ export default class CUI_SECTION extends HTMLElement {
         this.sdSectionTitle = this.shadowRoot.querySelector(`#section-title`);
         this.sdContentsContainer = this.shadowRoot.querySelector(`#container`);
 
-        this.sdSectionTitle.appendChild(document.createTextNode(this.state.sTitle));
+        if(!this.state.bHideHeader) {
+            this.sdSectionTitle.appendChild(document.createTextNode(this.state.sTitle));
+        }
 
-        if (!this.state.bHideControls) {
+        if (!this.state.bHideControls && !this.state.bHideHeader) {
 
             this.sdSectionCollapseControl = this.shadowRoot.querySelector(`#collapse-control`);
 
@@ -304,6 +319,136 @@ export default class CUI_SECTION extends HTMLElement {
             this.appendChild(dSectionInstructions);
         }
 
+        let dSectionMenuSlot = this.querySelector('[slot="section-menu"]');
+        if(dSectionMenuSlot && dSectionMenuSlot.hasChildNodes()) {
+            this.generateSectionMenuButton(dSectionMenuSlot);
+        }
+    }
+
+    generateSectionMenuButton(dSectionMenuSlot) {
+        let dMenuItems = dSectionMenuSlot.querySelectorAll('cui-item');
+
+        if(dMenuItems) {
+            let dHeaderControls = this.shadowRoot.querySelector('.header-controls');
+            let dCollapseControl = dHeaderControls.querySelector('#collapse-control');
+
+            let dMenuButton = document.createElement('button');
+            dMenuButton.classList.add('section-menu-btn');
+            dMenuButton.setAttribute('part', 'section-menu-btn');
+            dMenuButton.setAttribute('id', 'section-menu-btn');
+            dMenuButton.addEventListener('click', this.sectionMenuClick.bind(this, dMenuItems));
+
+            let dMenuIcon = document.createElement('cui-icon');
+            dMenuIcon.setAttribute('src', 'ellipsis-vertical');
+            dMenuIcon.setAttribute('part', 'section-menu-icon');
+            
+            dMenuButton.appendChild(dMenuIcon);
+            dCollapseControl.before(dMenuButton);
+        }
+    }
+
+    sectionMenuClick(dMenuItems, evt) {
+        evt.stopImmediatePropagation();
+        let dActiveBody = this.closest('body, dialog, modal');
+        if(this.bSectionMenuDisplayed) {
+            this.hideSectionMenu();
+            dActiveBody.removeEventListener('click', this.fGlobalBodyClick, false);
+            dActiveBody.removeEventListener('screenUnloadComplete', this.fGlobalBodyClick, false);
+        }
+        else {
+            this.displaySectionMenu(dMenuItems, dActiveBody);
+            dActiveBody.addEventListener('click', this.fGlobalBodyClick, false);
+            dActiveBody.addEventListener('screenUnloadComplete', this.fGlobalBodyClick, false);
+        }
+    }
+
+    displaySectionMenu(dMenuItems) {
+        if(this.dSectionMenu) {
+            if(this.bMobile) {
+                this.dSectionMenuDialog.showModal();
+            }
+            else {
+                this.shadowRoot.appendChild(this.dSectionMenu);
+            }
+        }
+        else {
+            let dMenu = document.createElement('div');
+            dMenu.classList.add('section-menu-popover');
+            dMenu.setAttribute('part', 'section-menu-popover');
+            let bFirstMenuItem = true;
+            for(let dMenuItem of dMenuItems) {
+                let dMenuOption = document.createElement('button');
+                dMenuOption.innerHTML = dMenuItem.getAttribute('text');
+                if(bFirstMenuItem) {
+                    dMenuOption.classList.add('section-menu-item');
+                    dMenuOption.setAttribute('part', 'section-menu-item');
+                    bFirstMenuItem = false;
+                }
+                else {
+                    dMenuOption.classList.add(['section-menu-item', 'not-first']);
+                    dMenuOption.setAttribute('part', 'section-menu-item not-first');
+                }
+                dMenuOption.addEventListener('click', this.emitActionEvent.bind(this, dMenuItem.getAttribute('action')));
+                dMenu.appendChild(dMenuOption);
+            }
+            this.dSectionMenu = dMenu;
+            if(this.bMobile) {
+                let dMenuDialog = document.createElement('dialog');
+                dMenuDialog.setAttribute('id', 'section-menu-dialog');
+                dMenuDialog.classList.add('section-menu-dialog');
+                dMenuDialog.setAttribute('part', 'section-menu-dialog');
+                dMenuDialog.setAttribute('closedby', 'any');
+
+                dMenu.classList.add('dialog');
+                dMenu.setAttribute('part', dMenu.getAttribute('part') + ' dialog');
+
+                dMenuDialog.appendChild(dMenu);
+                this.shadowRoot.appendChild(dMenuDialog);
+                dMenuDialog.showModal();
+                this.dSectionMenuDialog = dMenuDialog;
+            }
+            else {
+                this.shadowRoot.appendChild(dMenu);
+            }
+        }
+        this.bSectionMenuDisplayed = true;
+    }
+
+    emitActionEvent(sAction) {
+        const E_CONTROL_EVENT = new CustomEvent("eventAction", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                target: this,
+                name: sAction
+            }
+        });
+
+        this.dispatchEvent(E_CONTROL_EVENT);
+        this.hideSectionMenu();
+    }
+
+    hideSectionMenu() {
+        if(this.bSectionMenuDisplayed === false) {
+            return;
+        }
+
+        if(this.bMobile) {
+            this.dSectionMenuDialog.close();
+        }
+        else {
+            this.shadowRoot.removeChild(this.dSectionMenu);
+        }
+        
+        this.bSectionMenuDisplayed = false;
+    }
+
+    globalBodyClick(evt) {
+        if(this.bSectionMenuDisplayed && !this.dSectionMenu.contains(evt.target)) {
+            this.hideSectionMenu();
+            evt.currentTarget.removeEventListener('click', this.fGlobalBodyClick, false);
+            evt.currentTarget.removeEventListener('screenUnloadComplete', this.fGlobalBodyClick, false);
+        }
     }
 
     get messages() {

package/src/section.scss

@@ -33,16 +33,16 @@
             }
 
             .header-controls {
-                flex: 0 1 0;
+                flex: 0 1 auto;
                 margin: 10px 0 3px;
 
-                button {
+                button#collapse-control,
+                button#section-menu-btn {
                     background: transparent;
                     border: 0;
                     border-radius: 32px;
                     cursor: pointer;
                     height: 32px;
-                    margin-left: 0.5em;
                     margin-top: -7px;
                     transform: rotate(180deg);
                     width: 32px;
@@ -66,6 +66,14 @@
                         transform: rotate(0);
                     }
                 }
+
+                button#collapse-control {
+                    margin-left: 0.5em;
+                }
+
+                button#section-menu-btn {
+                    anchor-name: --section-menu;
+                }
             }
 
             &.headless {
@@ -96,6 +104,19 @@
         }
     }
 
+    .section-menu-popover {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        &:not(.dialog) {
+            position: fixed;
+            position-anchor: --section-menu;
+            top: anchor(bottom);
+            right: anchor(right);
+        }
+    }
+
 }
 
 :host([subsection]) {