@nys-cui/cui-section 0.2.18 → 0.2.20

package/package.json

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

package/src/section.js

@@ -29,11 +29,18 @@ export default class CUI_SECTION extends HTMLElement {
         this.oPropsToStateNames = {
             "sectiontitle": "sTitle",
             "hideControls": "bHideControls",
+            "hideHeader": "bHideHeader",
             "collapsed": "bCollapsed",
             "styles": "asStyles",
             "label": "sTitle",
             "instructions": "oInstructions"
         }
+
+        this.bSectionMenuDisplayed = false;
+        this.dSectionMenu = null;
+        this.bMobile = false;
+        this.dSectionMenuDialog = null;
+        this.fGlobalBodyClick = this.globalBodyClick.bind(this);
     }
 
     get style() {
@@ -42,34 +49,38 @@ export default class CUI_SECTION extends HTMLElement {
 
     get template() {
 
-        let sTemplate = `<section part="root-section"><header part="section-header">
-            <div class='header-info' part='header-info'><h2 id="section-title" part="section-title"></h2><slot name='section-help-tag'></slot></div>`;
+        let sTemplate = `<section part="root-section"><header part="section-header ${this.state.bHideHeader ? `headless" class="headless"` : `"`}>`;
 
-        if (!this.state.bHideControls) {
+        if(!this.state.bHideHeader) {
+            sTemplate += `<div class='header-info' part='header-info'><h2 id="section-title" part="section-title"></h2><slot name='section-help-tag'></slot></div>`;
 
-            if (this.sIconBasePath) {
+            if (!this.state.bHideControls) {
 
-                sTemplate += `
-                    <div class="header-controls" part="header-controls">
-                        <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
-                            <cui-icon src="caret-down" basePath="${this.sIconBasePath}" part="collapse-control-icon"></cui-icon>
-                        </button>
-                    </div>`;
+                if (this.sIconBasePath) {
 
-            }
-            else {
+                    sTemplate += `
+                        <div class="header-controls" part="header-controls">
+                            <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
+                                <cui-icon src="caret-down" basePath="${this.sIconBasePath}" part="collapse-control-icon"></cui-icon>
+                            </button>
+                        </div>`;
 
-                sTemplate += `
-                    <div class="header-controls" part="header-controls">
-                        <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
-                            <cui-icon src="caret-down" part="collapse-control-icon"></cui-icon>
-                        </button>
-                    </div>`;
-            }
+                }
+                else {
+
+                    sTemplate += `
+                        <div class="header-controls" part="header-controls">
+                            <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
+                                <cui-icon src="caret-down" part="collapse-control-icon"></cui-icon>
+                            </button>
+                        </div>`;
+                }
 
+            }
         }
 
         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>
@@ -202,11 +213,18 @@ export default class CUI_SECTION extends HTMLElement {
         this.state = {
             sTitle: this.state.sTitle || this.getAttribute('sectiontitle') || "SECTION TITLE",
             bHideControls: this.state.bHideControls || this.hasAttribute("hideControls") ? true : false,
+            bHideHeader: this.state.bHideHeader || this.hasAttribute("hideHeader") ? true : false,
             bCollapsed: this.state.bCollapsed || (this.getAttribute('collapsed') === "true") ? true : false,
             asStyles: this.state.asStyles || (this.getAttribute('styles')) ? this.getAttribute('styles').split(',') : null,
             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"]`);
@@ -225,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`);
 
@@ -299,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,19 @@
                         transform: rotate(0);
                     }
                 }
+
+                button#collapse-control {
+                    margin-left: 0.5em;
+                }
+
+                button#section-menu-btn {
+                    anchor-name: --section-menu;
+                }
+            }
+
+            &.headless {
+                border-bottom: none;
+                margin: 0.75em 0.75em;
             }
 
         }
@@ -91,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]) {