Minor refactor of CSS and JS, minor fixes

NigelOToole · May 25, 2023 · f1e8fbe · f1e8fbe
1 parent 5e81359
commit f1e8fbe
Show file tree

Hide file tree

Showing 14 changed files with 1,042 additions and 1,200 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -40,9 +40,9 @@ <h2>Toggle the state of a UI element to easily create components e.g. collapse,
 
         <h3>Collapse</h3>
 
-        <button id="demo-btn-single" class="toggle toggle-btn" data-toggle-target="#demo-panel-single" aria-expanded="false" aria-controls="demo-panel-aria">Open panel</button>
+        <button id="demo-btn-single" class="toggle toggle-btn" data-toggle-target="#demo-panel-single" aria-expanded="false">Open panel</button>
 
-        <div id="demo-panel-single" class="toggle-panel" aria-hidden="true" aria-labelledby="demo-btn-aria">
+        <div id="demo-panel-single" class="toggle-panel" aria-hidden="true">
           <div class="toggle-panel-content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
           </div>
@@ -78,13 +78,15 @@ <h3>Collapse</h3>
 
         <br>
 
+
         <details id="demo-details" class="toggle-panel">
           <summary class="toggle toggle-btn" data-toggle-target="#demo-details">Details element</summary>
           <div class="toggle-panel-content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
           </div>
         </details>
 
+
         <br>
 
         <button class="toggle toggle-btn" data-toggle-target="#demo-panel-partial">Partially open panel</button>

diff --git a/docs/scripts/main.js b/docs/scripts/main.js
@@ -24,7 +24,7 @@ const toggleDropdown = Toggle({ selector: '#demo-btn-dropdown', closeAuto: true,
 // Manually set state - used by the toggle panel only demo
 document.querySelector('#demo-btn-self').addEventListener('click', function(event) {
   event.preventDefault();
-  Toggle().toggleState(document.querySelector('#demo-panel-self'));
+  Toggle().toggleElement(document.querySelector('#demo-panel-self'));
 });
 
 

diff --git a/docs/scripts/tiny-ui-toggle-umd.js b/docs/scripts/tiny-ui-toggle-umd.js
@@ -89,7 +89,8 @@
         'aria-checked': state,
         'aria-expanded': state,
         'aria-selected': state,
-        'aria-pressed': state
+        'aria-pressed': state,
+        'tabindex': state ? 0 : -1
       };
       Object.keys(ariaAttributes).forEach(function (key) {
         return element.hasAttribute(key) && element.setAttribute(key, ariaAttributes[key]);
@@ -192,14 +193,33 @@
 
     var toggleStateBoth = function toggleStateBoth() {
       var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elementNode;
-      toggleState(element);
 
-      var _iterator = _createForOfIteratorHelper(element.toggle.target),
+      var _iterator = _createForOfIteratorHelper(element.toggle.group),
           _step;
 
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var target = _step.value;
+          var item = _step.value;
+
+          if (item !== element && item !== element.toggle.target[0]) {
+            setState(false, item);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      ;
+      toggleState(element);
+
+      var _iterator2 = _createForOfIteratorHelper(element.toggle.target),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var target = _step2.value;
           toggleState(target);
 
           var _iterator3 = _createForOfIteratorHelper(target.toggle.trigger),
@@ -221,25 +241,6 @@
 
           ;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-
-      ;
-
-      var _iterator2 = _createForOfIteratorHelper(element.toggle.group),
-          _step2;
-
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var item = _step2.value;
-
-          if (item !== element && item !== element.toggle.target[0]) {
-            setState(false, item);
-          }
-        }
       } catch (err) {
         _iterator2.e(err);
       } finally {

diff --git a/docs/scripts/tiny-ui-toggle.js b/docs/scripts/tiny-ui-toggle.js
@@ -63,7 +63,7 @@ const Toggle = function(options) {
 
 	// Methods
 	const toggleAria = function (element, state) {
-		const ariaAttributes = { 'aria-hidden': !state, 'aria-checked': state, 'aria-expanded': state, 'aria-selected': state, 'aria-pressed': state };
+		const ariaAttributes = { 'aria-hidden': !state, 'aria-checked': state, 'aria-expanded': state, 'aria-selected': state, 'aria-pressed': state, 'tabindex': state ? 0 : -1 };
 		Object.keys(ariaAttributes).forEach(key => element.hasAttribute(key) && element.setAttribute(key, ariaAttributes[key]));
 	};
 
@@ -169,7 +169,16 @@ const Toggle = function(options) {
 		setState(!element.toggle.active, element);
 	};
 
+
+
 	const toggleStateBoth = function (element = elementNode) {
+
+		for (const item of element.toggle.group) {
+			if(item !== element && item !== element.toggle.target[0]) {
+				setState(false, item);
+			}
+		};
+
 		toggleState(element);
 
 		for (const target of element.toggle.target) {
@@ -181,12 +190,7 @@ const Toggle = function(options) {
 				}
 			};
 		};
-
-		for (const item of element.toggle.group) {
-			if(item !== element && item !== element.toggle.target[0]) {
-				setState(false, item);
-			}
-		};
+
 	};
 
 

diff --git a/docs/styles/tiny-ui-toggle.css b/docs/styles/tiny-ui-toggle.css
@@ -4,22 +4,25 @@
 
 .toggle-panel {
   transition: all 0.5s ease-out;
-  height: 0;
   overflow: hidden;
 }
-.toggle-panel.is-active:not(.is-anim) {
-  height: auto;
-  overflow: visible;
+.toggle-panel:where(:not(details)) {
+  height: 0;
+}
+.toggle-panel:where(:not(.is-active):not(.is-anim):not(details)) {
+  display: none;
 }
-details.toggle-panel {
+.toggle-panel:where(.is-active:not(.is-anim)) {
   height: auto;
+  overflow: visible;
 }
-
 .toggle-panel--partial {
+  display: block;
   height: calc(2.5em + 0.75rem);
 }
 
 .toggle-panel--opacity {
+  display: block;
   opacity: 0;
   height: auto;
 }