From 66e912655bcb3c682c9741ca4fbe492a2c2a3cfe Mon Sep 17 00:00:00 2001 From: Szymon Dzialowski Date: Mon, 16 Dec 2024 14:52:58 +0000 Subject: [PATCH] update [q] --- js/github.js | 8 ++-- noprettier/vanilla-tabs.css | 22 +++++----- noprettier/vanilla-tabs.js | 43 +++++++++---------- pages/js/index.html | 6 +-- pages/js/popper/index.html | 2 +- pages/js/popper/popper.css | 10 ++--- .../{focus.vanila.html => focus.vanilla.html} | 0 pages/js/visibilityState/visible.react.html | 2 +- pages/js/visibilityState/visible.vanila.html | 2 +- pages/node/index.html | 2 +- 10 files changed, 48 insertions(+), 49 deletions(-) rename pages/js/visibilityState/{focus.vanila.html => focus.vanilla.html} (100%) diff --git a/js/github.js b/js/github.js index 9763be0e..543fa3a4 100644 --- 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 index e4f626b9..ef1361c1 100644 --- a/noprettier/vanilla-tabs.css +++ b/noprettier/vanilla-tabs.css @@ -1,7 +1,7 @@ /** * @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 * @@ -9,15 +9,15 @@ * 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 index 933d602c..3fa4d48c 100644 --- 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,7 +71,9 @@ window.vanilaTabs = (function () { }) .filter(Boolean) .forEach((target) => { - this.activeByButtonElement(target.parentNode.parentNode, target, { onChange }); + this.activeByButtonElement(target.parentNode.parentNode, target, { + onChange, + }); }); return ids; @@ -80,12 +81,6 @@ window.vanilaTabs = (function () { 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 index 2614bbeb..819915e2 100644 --- a/pages/js/index.html +++ b/pages/js/index.html @@ -21,7 +21,7 @@

Table of Contents

  • WebComponent
  • Components
  • Event loop
    • -
  • popover tooltip (Popper.js) - vanila
    • +
  • popover tooltip (Popper.js) - vanilla
  • popover tooltip (Popper.js) - react
    • @@ -256,12 +256,12 @@

    alert prompt box modal

    }

    Visibility page visibilitychange visibilityState hidden page document

    - focus.vanila + focus.vanilla
    focus.react
    - visible.vanila + visible.vanilla
    visible.react

    Keyboard event

    diff --git a/pages/js/popper/index.html b/pages/js/popper/index.html index 39823880..3f63c5df 100644 --- a/pages/js/popper/index.html +++ b/pages/js/popper/index.html @@ -49,7 +49,7 @@

    Basics

    Simple example

    -
    +