@nys-cui/cui-section 0.2.1 → 0.2.3

package/package.json

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

package/src/section.js

@@ -73,6 +73,7 @@ export default class CUI_SECTION extends HTMLElement {
 
             // remove "height" from the dContainer's inline styles, so it can return to its initial value
             dContainer.style.height = "";
+            dContainer.style.overflow = null;
 
             // mark the section as "currently not collapsed"
             dContainer.setAttribute('data-collapsed', 'false');
@@ -91,6 +92,7 @@ export default class CUI_SECTION extends HTMLElement {
 
         // have the dContainer transition to the height of its inner content
         dContainer.style.height = sectionHeight + 'px';
+        dContainer.style.overflow = "hidden";
   
         // when the next css transition finishes (which should be the one we just triggered)
         dContainer.addEventListener('transitionend', transitionEnd, true);
@@ -101,13 +103,14 @@ export default class CUI_SECTION extends HTMLElement {
     collapse(dContainer) {
 
         function transitionEnd(e) {
+            
+            dContainer.style.height = "";
+            dContainer.style.overflow = null;
 
             // mark the section as "currently collapsed"
             dContainer.setAttribute('data-collapsed', 'true');
             dContainer.setAttribute('aria-expanded', 'false');
 
-            dContainer.style.height = "";
-
             dContainer.removeEventListener('transitionend', transitionEnd, true);
         }
 
@@ -126,7 +129,7 @@ export default class CUI_SECTION extends HTMLElement {
         requestAnimationFrame(function() {
             dContainer.style.height = sectionHeight + 'px';
             dContainer.style.transition = dContainerTransition;
-            
+            dContainer.style.overflow = "hidden";
             
             // on the next frame (as soon as the previous style change has taken effect),
             // have the dContainer transition to height: 0
@@ -143,21 +146,11 @@ export default class CUI_SECTION extends HTMLElement {
 
     }
 
-    animationstart() {
-
-        console.log("Animation started");
-    }
-
-    animationend() {
-
-        console.log("Animation ended");
-    }
-
     connectedCallback() {
 
         this.state = {
             sTitle: this.getAttribute('sectiontitle') || "SECTION TITLE",
-            bHideControls: (this.getAttribute("hideControls") === "true") ? true : false,
+            bHideControls: this.hasAttribute("hideControls") ? true : false,
             bCollapsed: (this.getAttribute('collapsed') === "true") ? true : false,
             asStyles: (this.getAttribute('styles')) ? this.getAttribute('styles').split(',') : null
         }
@@ -175,17 +168,9 @@ export default class CUI_SECTION extends HTMLElement {
         this.sdSectionTitle = this.shadowRoot.querySelector(`#section-title`);
         this.sdContentsContainer = this.shadowRoot.querySelector(`#container`);
 
-        if (this.bCollapsed) {
-            this.sdContentsContainer.setAttribute('aria-expanded', 'false');
-        }
-        else {
-            this.sdContentsContainer.setAttribute('aria-expanded', 'true');
-        }
-        
-
         this.sdSectionTitle.appendChild(document.createTextNode(this.state.sTitle));
 
-        if (!this.state.bHideControls) {
+       if (!this.state.bHideControls) {
 
             this.sdSectionCollapseControl = this.shadowRoot.querySelector(`#collapse-control`);
 
@@ -197,7 +182,6 @@ export default class CUI_SECTION extends HTMLElement {
 
                     this.sdSectionCollapseControl.classList.add('collapsed');
                     this.sdContentsContainer.setAttribute('data-collapsed', "true");
-                    this.sdContentsContainer.setAttribute('aria-expanded', "false");
                 }
 
                 this.sdSectionCollapseControl.addEventListener('click', () => {

package/src/section.scss

@@ -1,6 +1,7 @@
 :host {
     display: block;
     margin-bottom: 20px;
+    width: 100%;
 
     * {
         box-sizing: border-box;
@@ -63,17 +64,20 @@
         }
 
         .container {
+            box-sizing:content-box;
             //margin: 0 0.75em 20px;
             //margin: 0 0.75em;
-            transition: height 0.5s ease;
-            overflow: hidden;
+            transition: height 0.5s ease;            
 
             &[data-collapsed="true"] {
                 height: 0;
+                overflow: hidden;
             }
 
-            &[aria-expanded="false"] {
-                display: none;
+            // Prevent margin collapse of section contents when collapsing/expanding.
+            &::before, &::after{
+                content: ' ';
+                display: table;
             }
             
         }