update [q]

stopsopa · Dec 16, 2024 · 66e9126 · 66e9126
1 parent a8cb95d
commit 66e9126
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 49 deletions.
diff --git a/js/github.js b/js/github.js
@@ -1858,7 +1858,7 @@ body .github-profile:hover {
       }),
       loadJs("vanilla-tabs.js", "/noprettier/vanilla-tabs.js", function () {
         try {
-          return typeof window.vanilaTabs === "object";
+          return typeof window.vanillaTabs === "object";
         } catch (e) {
           return false;
         }
@@ -1933,10 +1933,10 @@ body .github-profile:hover {
       log.blue("executed", "window.doace() waiting for window.beforeAceEventPromise() NOT found");
     }
 
-    const unbind = vanilaTabs.bind();
-    vanilaTabs.active({
+    const unbind = vanillaTabs.bind();
+    vanillaTabs.active({
       onChange: async (e) => {
-        console.log("vanilaTabs.active(onChange)", e);
+        console.log("vanillaTabs.active(onChange)", e);
         await window.doace();
       },
     });

diff --git a/noprettier/vanilla-tabs.css b/noprettier/vanilla-tabs.css
@@ -1,23 +1,23 @@
 /**
  * @author Szymon Działowski
  * @ver 0.1 - 2015-10-21 - first jQuery based implementation
- * @ver 0.2 - 2024-12-12 - refactoring the idea to vanila js
+ * @ver 0.2 - 2024-12-12 - refactoring the idea to vanilla js
  * @homepage https://github.com/stopsopa/tabs
  * @demo http://stopsopa.github.io/submod/tabs/demo/demo.html
  *
  * Copyright (c) 2015 Szymon Działowski
  * Released under the MIT license
  * http://en.wikipedia.org/wiki/MIT_License
  */
-[data-vanila-tabs] {
+ [data-vanilla-tabs] {
   --background-color: white;
   --lines-color: #565656;
 }
-[data-vanila-tabs] > [data-buttons] {
+[data-vanilla-tabs] > [data-buttons] {
   /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
   font-size: 0;
 }
-[data-vanila-tabs] > [data-buttons] > * {
+[data-vanilla-tabs] > [data-buttons] > * {
   font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
   font-size: 15px;
   padding: 10px;
@@ -31,31 +31,31 @@
   margin-bottom: -1px;
   outline: 0;
 }
-[data-vanila-tabs] > [data-buttons] > .active,
-[data-vanila-tabs] > [data-buttons] > :hover {
+[data-vanilla-tabs] > [data-buttons] > .active,
+[data-vanilla-tabs] > [data-buttons] > :hover {
   border: 1px solid var(--lines-color);
   margin-right: -1px;
   background-color: var(--background-color);
 }
-[data-vanila-tabs] > [data-buttons] > .active {
+[data-vanilla-tabs] > [data-buttons] > .active {
   border-bottom: 1px solid var(--background-color);
   background-color: var(--background-color);
 }
-[data-vanila-tabs] > [data-tabs] > div {
+[data-vanilla-tabs] > [data-tabs] > div {
   border: 1px solid var(--lines-color);
   padding: 10px;
   display: none;
   background-color: var(--background-color);
   /*display: none;*/
 }
-[data-vanila-tabs] > [data-tabs] > div.active {
+[data-vanilla-tabs] > [data-tabs] > div.active {
   display: block;
 }
 /* pixelfix */
-[data-vanila-tabs] > [data-buttons] > .active {
+[data-vanilla-tabs] > [data-buttons] > .active {
   position: relative;
 }
-[data-vanila-tabs] > [data-buttons] > .active:before {
+[data-vanilla-tabs] > [data-buttons] > .active:before {
   content: "";
   position: absolute;
   bottom: -1px;

diff --git a/noprettier/vanilla-tabs.js b/noprettier/vanilla-tabs.js
@@ -1,7 +1,7 @@
 /**
  * https://github.com/stopsopa/tabs
  */
-window.vanilaTabs = (function () {
+window.vanillaTabs = (function () {
   const onChangeEvents = {};
 
   const dataidkey = "data-vanilla-tab-id";
@@ -16,6 +16,8 @@ window.vanilaTabs = (function () {
     }
   })();
 
+  const th = (msg) => new Error(`vanilla-tabs error: ${msg}`);
+
   function isObjectLike(value) {
     return value != null && typeof value == "object";
   }
@@ -36,9 +38,7 @@ window.vanilaTabs = (function () {
     },
     produceId: function (parent) {
       if (!isNode(parent)) {
-        warn(`parent argument is not valid DOM element`, parent);
-
-        return this;
+        throw th(`parent argument is not valid DOM element`, parent);
       }
 
       let id = parent.getAttribute(dataidkey);
@@ -54,8 +54,7 @@ window.vanilaTabs = (function () {
 
       const { onChange } = { ...opt };
 
-      Array.from(document.querySelectorAll("[data-vanila-tabs]"))
-
+      Array.from(document.querySelectorAll("[data-vanilla-tabs]"))
         .map((parent) => {
           ids.push(this.produceId(parent));
 
@@ -72,20 +71,16 @@ window.vanilaTabs = (function () {
         })
         .filter(Boolean)
         .forEach((target) => {
-          this.activeByButtonElement(target.parentNode.parentNode, target, { onChange });
+          this.activeByButtonElement(target.parentNode.parentNode, target, {
+            onChange,
+          });
         });
 
       return ids;
     },
     activeByButtonElement: function (parent, target, extra) {
       const id = this.produceId(parent);
 
-      if (!isNode(target)) {
-        warn(`target argument is not valid DOM element`, parent, target);
-
-        return id;
-      }
-
       let { buttons, onChange } = { ...extra };
 
       if (!buttons) {
@@ -131,15 +126,17 @@ window.vanilaTabs = (function () {
       }
 
       if (buttons.length !== tabs.length) {
-        warn(`buttons and tabs length mismatch`, parent);
-
-        return id;
+        throw th(`buttons and tabs length mismatch`, parent);
       }
 
-      if (!(Number.isInteger(zeroIndex) && !Number.isNaN(zeroIndex) && zeroIndex > -1)) {
-        warn(`zeroIndex not found`, zeroIndex, parent, target);
-
-        return id;
+      if (
+        !(
+          Number.isInteger(zeroIndex) &&
+          !Number.isNaN(zeroIndex) &&
+          zeroIndex > -1
+        )
+      ) {
+        throw th(`zeroIndex not found`, zeroIndex, parent, target);
       }
 
       {
@@ -180,12 +177,14 @@ window.vanilaTabs = (function () {
       const event = (e) => {
         var target = e.target;
 
-        var match = target.matches("[data-vanila-tabs] > [data-buttons] > *");
+        var match = target.matches("[data-vanilla-tabs] > [data-buttons] > *");
 
         if (match) {
           const parent = target.parentNode.parentNode;
 
-          const buttons = Array.from(parent.querySelector("[data-buttons]").children);
+          const buttons = Array.from(
+            parent.querySelector("[data-buttons]").children
+          );
 
           const zeroIndex = buttons.indexOf(target) ?? 0;
 

diff --git a/pages/js/index.html b/pages/js/index.html
@@ -21,7 +21,7 @@ <h1>Table of Contents</h1>
             <li><a href="webcomponent/index.html">WebComponent</a></li>
             <li><a href="components/index.html">Components</a></li>
             <li><a href="eventloop/index.html">Event loop</a></li>
-            <li><a href="popper/index.html">popover tooltip (Popper.js) - vanila</a></li>
+            <li><a href="popper/index.html">popover tooltip (Popper.js) - vanilla</a></li>
             <li><a href="popper/react.html">popover tooltip (Popper.js) - react</a></li>
           </ul>
         </div>
@@ -256,12 +256,12 @@ <h2>alert prompt box modal</h2>
           }
         </script>
         <h2>Visibility page visibilitychange visibilityState hidden page document</h2>
-        <a href="visibilityState/focus.vanila.html">focus.vanila</a>
+        <a href="visibilityState/focus.vanilla.html">focus.vanilla</a>
         <br />
         <a href="visibilityState/focus.react.html">focus.react</a>
         <br />
 
-        <a href="visibilityState/visible.vanila.html">visible.vanila</a>
+        <a href="visibilityState/visible.vanilla.html">visible.vanilla</a>
         <br />
         <a href="visibilityState/visible.react.html">visible.react</a>
         <h2>Keyboard event</h2>

diff --git a/pages/js/popper/index.html b/pages/js/popper/index.html
@@ -49,7 +49,7 @@ <h2>Basics</h2>
 
         <h2>Simple example</h2>
 
-        <div class="example1 vanila-tooltip">
+        <div class="example1 vanilla-tooltip">
           <script type="editor" data-lang="js" data-eval>
 
             const setupTooltipGroup = (function () {

diff --git a/pages/js/popper/popper.css b/pages/js/popper/popper.css
@@ -1,10 +1,10 @@
 .example1 {
   /*
    * vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
-   * All of styles in .vanila-tooltip are needed only for vanilla js tooltip
-   * so add .vanila-tooltip class to the parent element 
+   * All of styles in .vanilla-tooltip are needed only for vanilla js tooltip
+   * so add .vanilla-tooltip class to the parent element 
    */
-  &.vanila-tooltip {
+  &.vanilla-tooltip {
     .tooltipstyle {
       display: none;
       &[data-tooltip-id] {
@@ -24,8 +24,8 @@
     }
   }
   /*
-  * All of styles in .vanila-tooltip are needed only for vanilla js tooltip
-  * so add .vanila-tooltip class to the parent element 
+  * All of styles in .vanilla-tooltip are needed only for vanilla js tooltip
+  * so add .vanilla-tooltip class to the parent element 
   * ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    */
   [data-tooltipselector] {

diff --git a/pages/js/visibilityState/focus.vanila.html → pages/js/visibilityState/focus.vanilla.html b/pages/js/visibilityState/focus.vanila.html → pages/js/visibilityState/focus.vanilla.html
diff --git a/pages/js/visibilityState/visible.react.html b/pages/js/visibilityState/visible.react.html
@@ -12,7 +12,7 @@
   <body class="layout bg" toc>
     <div class="body">
       <div class="inside">
-        <h2>vanila</h2>
+        <h2>vanilla</h2>
         <p>On when page is visible</p>
         <br />
         <a href="/viewer.html?file=%2Fpages%2Fjs%2FvisibilityState%2Fvisiblestate.visible.entry.js"

diff --git a/pages/js/visibilityState/visible.vanila.html b/pages/js/visibilityState/visible.vanila.html
@@ -40,7 +40,7 @@
   <body class="layout bg" toc>
     <div class="body">
       <div class="inside">
-        <h2>vanila</h2>
+        <h2>vanilla</h2>
         <p>On when page is visible</p>
         <p>To test first launch <a href="/pages/js/sound.html">/pages/js/sound.html</a></p>
         <script type="editor" data-lang="js" data-eval>

diff --git a/pages/node/index.html b/pages/node/index.html
@@ -2468,7 +2468,7 @@ <h2>Node clock controlled crash</h2>
 
         <h2>Express template</h2>
 
-        <div data-vanila-tabs>
+        <div data-vanilla-tabs>
           <div data-buttons>
             <span class="active">esm</span>
             <span>commonjs</span>