feat(collapse): Collapse | 008 - Added collapse support for advance options

Author: poly-glot

public/index.html

@@ -82,28 +82,36 @@ <h2 class="sr-only" id="viewHeadingInput">Input Image</h2>
                                         </button>
                                     </div>
                                 </div>
+
+                                <div class="settings__advance">
+                                    <a href="#" role="button" aria-expanded="false" aria-controls="advance-options" data-label-collapse="Show Advance Options" data-label-expanded="Hide Advance Options">
+                                        <span data-collapse-text="true">Show Advance Options</span>
+                                    </a>
+                                </div>
                             </div>
                         </div>
-                        <div class="settings__item">
+                        <div class="collapse" id="advance-options">
+                            <div class="settings__item">
                             <label for="internalResolution">Internal Resolution</label>
                             <select id="internalResolution">
                                 <option value="low">Low</option>
                                 <option value="medium" selected="selected">Medium</option>
                                 <option value="high">High</option>
                                 <option value="full">Full</option>
                             </select>
-                        </div>
-                        <div class="settings__item">
-                            <label for="segmentationThreshold">Segmentation Threshold</label>
-                            <input type="range" id="segmentationThreshold" min="0.1" max="0.9" step="0.1" value="0.7">
-                        </div>
-                        <div class="settings__item">
-                            <label for="backgroundColour">Output Background Colour</label>
-                            <input type="color" id="backgroundColour" value="#ffffff">
-                        </div>
-                        <div class="settings__item">
-                            <div class="settings__button">
-                                <button type="submit">Submit</button>
+                            </div>
+                            <div class="settings__item">
+                                <label for="segmentationThreshold">Segmentation Threshold</label>
+                                <input type="range" id="segmentationThreshold" min="0.1" max="0.9" step="0.1" value="0.7">
+                            </div>
+                            <div class="settings__item">
+                                <label for="backgroundColour">Output Background Colour</label>
+                                <input type="color" id="backgroundColour" value="#ffffff">
+                            </div>
+                            <div class="settings__item">
+                                <div class="settings__button">
+                                    <button type="submit">Submit</button>
+                                </div>
                             </div>
                         </div>
                     </div>

src/component/collapse/events.js

@@ -0,0 +1,26 @@
+/* istanbul ignore file */
+
+document.addEventListener('click', (evt) => {
+  if (evt.target.closest('[aria-expanded]')) {
+    const source = evt.target.closest('[aria-expanded]')
+    const textElem = source.querySelector('[data-collapse-text]')
+    const state = source.getAttribute('aria-expanded')
+    const target = document.getElementById(source.getAttribute('aria-controls'))
+
+    if (!(target instanceof HTMLElement)) {
+      return
+    }
+
+    // Toggle State
+    source.setAttribute('aria-expanded', state === 'false' ? 'true' : 'false')
+    textElem.innerHTML = source.getAttribute(state === 'false' ? 'data-label-expanded' : 'data-label-collapse')
+
+    if (state === 'false') {
+      target.style.height = `${target.scrollHeight}px`
+      return
+    }
+
+    // Close it
+    target.style.height = 0
+  }
+})

src/component/collapse/index.css

@@ -0,0 +1,5 @@
+.collapse {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.15s ease-in-out;
+}

src/component/collapse/index.js

@@ -0,0 +1,2 @@
+import './index.css'
+import './events'

src/index.js

@@ -11,6 +11,7 @@ import './component/input-source'
 import './component/settings'
 import './component/output'
 import './component/suggestions'
+import './component/collapse'
 
 async function main () {
   AlertService.init()