@nys-cui/cui-section 0.1.2

package/README.md

@@ -0,0 +1 @@
+Prototype project being pushed to node and npm for testing

package/cui.jsonc

@@ -0,0 +1,6 @@
+{
+    "name": "section",
+    "mode": "component",
+    "src": "src",
+    "entry": "section.js"
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@nys-cui/cui-section",
+    "description": "A generic section component used with Core UI 2",
+    "author": {
+        "name": "New York State Department of Tax and Finance"
+    },
+    "main": "./dist/js/section.js",
+    "type": "module",
+    "version": "0.1.2",
+    "scripts": {
+        "clean": "rm -rf ./dist",
+        "build": "npm run clean && cui --dep",
+        "postinstall": "node -e \"console.log('Post-Installing cui-section: %s', Date())\" && npm run build"
+    }
+}

package/src/section.js

@@ -0,0 +1,211 @@
+import SECTION_STYLES from './section.scss';
+
+export default class CUI_SECTION extends HTMLElement {
+
+    constructor() {
+
+        super();
+
+        this.attachShadow({mode: 'open'});
+
+        this.state = {
+            sTitle: null
+        };
+
+        this.dSection = this;
+
+        // Key Shadow DOM Fields
+        this.sdSection = null;
+        this.sdSectionTitle = null;
+        this.sdSectionCollapseControl = null;
+        this.sdContentsContainer = null;
+
+        this.bLock = false;
+    }
+
+    get style() {
+        return `<style>${SECTION_STYLES}</style>`
+    }
+
+    get template() {
+
+        let sTemplate = `<section><header>
+            <h2 id="section-title"></h2>`;
+
+        if (!this.state.bHideControls) {
+
+            sTemplate += `
+                <div class="header-controls">
+                    <button type="button" id="collapse-control">
+                        <cui-icon src="caret-down"></cui-icon>
+                    </button>
+                </div>`;
+        }
+
+        sTemplate += `</header><div class="container" id="container">
+                <slot name="section-text"></slot>
+                <slot name="section-contents"></slot>
+                <slot name="section-footer"></slot>
+            </div></section>`;
+
+        return sTemplate;
+    }
+
+    expand(dContainer) {
+
+        function transitionEnd() {
+
+            // remove "height" from the dContainer's inline styles, so it can return to its initial value
+            dContainer.style.height = "";
+
+            // mark the section as "currently not collapsed"
+            dContainer.setAttribute('data-collapsed', 'false');
+
+            // remove this event listener so it only gets triggered once
+            dContainer.removeEventListener('transitionend', transitionEnd, this);
+
+        }
+
+        this.bLock = true;
+
+        var sectionHeight = dContainer.scrollHeight;
+
+        // have the dContainer transition to the height of its inner content
+        dContainer.style.height = sectionHeight + 'px';
+  
+        // when the next css transition finishes (which should be the one we just triggered)
+        dContainer.addEventListener('transitionend', transitionEnd, true);
+      
+
+    }
+
+    collapse(dContainer) {
+
+        function transitionEnd(e) {
+
+            // mark the section as "currently collapsed"
+            dContainer.setAttribute('data-collapsed', 'true');
+
+            dContainer.style.height = "";
+
+            dContainer.removeEventListener('transitionend', transitionEnd, true);
+        }
+
+        // get the height of the dContainer's inner content, regardless of its actual size
+        var sectionHeight = dContainer.scrollHeight;
+        
+        // temporarily disable all css transitions
+        var dContainerTransition = dContainer.style.transition;
+        dContainer.style.transition = '';
+        
+        // on the next frame (as soon as the previous style change has taken effect),
+        // explicitly set the dContainer's height to its current pixel height, so we 
+        // aren't transitioning out of 'auto'
+        requestAnimationFrame(function() {
+            dContainer.style.height = sectionHeight + 'px';
+            dContainer.style.transition = dContainerTransition;
+            
+            
+            // on the next frame (as soon as the previous style change has taken effect),
+            // have the dContainer transition to height: 0
+            requestAnimationFrame(function() {
+
+                dContainer.style.height = 0 + 'px';
+
+                dContainer.addEventListener('transitionend', transitionEnd, true);
+
+            });
+
+        });
+        
+
+    }
+
+    connectedCallback() {
+
+        this.state = {
+            sTitle: this.getAttribute('sectiontitle') || "SECTION TITLE",
+            bHideControls: (this.getAttribute("hideControls") === "true") ? true : false,
+            bCollapsed: (this.getAttribute('collapsed') === "true") ? true : false,
+            asStyles: (this.getAttribute('styles')) ? this.getAttribute('styles').split(',') : null
+        }
+
+        this.render();
+    }
+
+    render() {
+
+        this.shadowRoot.innerHTML = `${this.style}${this.template}`;
+
+        this.sdSection = this.shadowRoot.querySelector(`:host > section`);
+        this.sdSectionTitle = this.shadowRoot.querySelector(`#section-title`);
+        this.sdContentsContainer = this.shadowRoot.querySelector(`#container`);
+
+        this.sdSectionTitle.appendChild(document.createTextNode(this.state.sTitle));
+
+       if (!this.state.bHideControls) {
+
+            this.sdSectionCollapseControl = this.shadowRoot.querySelector(`#collapse-control`);
+
+            // Bind the expand and collapse controls
+            if (this.sdSectionCollapseControl) {
+
+                // Configure the the inital collapse state
+                if (this.state.bCollapsed) {
+
+                    this.sdSectionCollapseControl.classList.add('collapsed');
+                    this.sdContentsContainer.setAttribute('data-collapsed', "true");
+                }
+
+                this.sdSectionCollapseControl.addEventListener('click', () => {
+        
+                    if (!this.bLock) {
+        
+                        if (this.sdContentsContainer.getAttribute('data-collapsed') === "true") {
+        
+                            this.sdSectionCollapseControl.classList.remove('collapsed');
+            
+                            this.expand(this.sdContentsContainer);
+                        }
+                        else {
+        
+                            this.sdSectionCollapseControl.classList.add('collapsed');
+            
+                            this.collapse(this.sdContentsContainer);
+                        }
+        
+                        this.bLock = false;
+                    }
+        
+                });
+            }
+
+        }
+
+        if (this.state.asStyles) {
+
+            for (let sStyle of this.state.asStyles) {
+
+                switch(sStyle.toLowerCase()) {
+
+                    case "subsection":
+
+                        this.sdSection.classList.add('sub-section');
+                        break;
+
+                }
+
+            }
+
+        }
+
+        setTimeout(() => {
+            let dSubSections = [...this.querySelectorAll('cui-section')];
+            dSubSections.forEach((dSubSection) => {
+                dSubSection.setAttribute('subsection', true);
+            })
+        })
+
+    }
+
+}

package/src/section.scss

@@ -0,0 +1,106 @@
+:host {
+    display: block;
+    margin-bottom: 20px;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    section {
+        background: var(--section-background-color);
+        border-radius: 5px;
+        box-shadow: var(--section-box-shadow-color) var(--section-box-shadow-x) var(--section-box-shadow-y) var(--section-box-shadow-blur);
+
+        header {
+            border-bottom: solid 1px var(--section-header-border-color);
+            display: flex;
+            margin: 0.75em 0.75em 20px;
+
+            h2, h3, h4, h5, h6 {
+                color: var(--section-header-text-color);
+                font-family: var(--section-header-fonts);
+                font-size: 20px;
+                margin: 10px 0 3px;
+                flex: 1;
+            }
+
+            .header-controls {
+                flex: 0 1 0;
+                margin: 10px 0 3px;
+
+                button {
+                    background: transparent;
+                    border: 0;
+                    border-radius: 32px;
+                    cursor: pointer;
+                    height: 32px;
+                    margin-left: 0.5em;
+                    margin-top: -7px;
+                    transform: rotate(180deg);
+                    width: 32px;
+
+                    cui-icon {
+                        
+                        svg {
+                            fill: var(--section-header-icon-color);
+                            height: 16px;
+                            position: relative;
+                            top: 2px;
+                            width: 16px;
+                        }
+                    }
+
+                    &:hover {
+                        background-color: var(--section-header-button-hover-color);
+                    }
+
+                    &.collapsed {
+                        transform: rotate(0);
+                    }
+                }
+            }
+
+        }
+
+        .container {
+            //margin: 0 0.75em 20px;
+            //margin: 0 0.75em;
+            transition: height 0.5s ease;
+            overflow: hidden;
+
+            &[data-collapsed="true"] {
+                height: 0;
+            }
+
+            
+        }
+    }
+
+}
+
+:host([subsection]) {
+    section {
+        border: 1px solid var(--section-header-border-color);
+        box-shadow: none;
+
+        header {
+            margin: 0 0 20px;
+
+            h2, h3, h4, h5, h6 {
+                font-size: 18px;
+                margin: 10px 0 3px 0.75em;
+            }
+            
+            .header-controls {
+                margin: 10px 0.75em 3px 0;
+            }
+        }
+    }
+}
+
+:host([subsection]):first-child {
+    section {
+        margin-top: 20px;
+    }
+}
+