diff --git a/dist/vanilla-js-tabs.js b/dist/vanilla-js-tabs.js index 0d01431..11da28a 100644 --- a/dist/vanilla-js-tabs.js +++ b/dist/vanilla-js-tabs.js @@ -3,7 +3,7 @@ * @author Zoltan Toth * @version 2.0.0 */ -let Tabs = function (options) { +const Tabs = function (options) { const el = document.getElementById(options.elem); if (!el) throw new Error(`Element with ID "${options.elem}" not found`); diff --git a/dist/vanilla-js-tabs.min.js b/dist/vanilla-js-tabs.min.js index 9334d95..6789c32 100644 --- a/dist/vanilla-js-tabs.min.js +++ b/dist/vanilla-js-tabs.min.js @@ -2,4 +2,4 @@ * Vanilla JavaScript Tabs v1.1.0 * https://zoltantothcom.github.io/vanilla-js-tabs */ -let Tabs=function(e){var t=document.getElementById(e.elem);if(!t)throw new Error(`Element with ID "${e.elem}" not found`);const n=t;let l=e.open||0;const r="js-tabs__title",a="js-tabs__title-active",c="js-tabs__content",o=n.querySelectorAll("."+r).length;function s(e){n.addEventListener("click",i);var t=d(null==e?l:e);for(let e=0;e{e.style.display="none"}),[].forEach.call(n.querySelectorAll("."+r),e=>{e.className=function(e,t){t=new RegExp(`(\\s|^)${t}(\\s|$)`,"g");return e.replace(t,"")}(e.className,a)})}function d(e){return e<0||isNaN(e)||e>=o?0:e}function f(e){u();e=d(e);n.querySelectorAll("."+r)[e].classList.add(a),n.querySelectorAll("."+c)[e].style.display=""}function y(){n.removeEventListener("click",i)}return s(),{open:f,update:function(e){y(),u(),s(e)},destroy:y}}; \ No newline at end of file +const Tabs=function(e){var t=document.getElementById(e.elem);if(!t)throw new Error(`Element with ID "${e.elem}" not found`);const n=t;let l=e.open||0;const r="js-tabs__title",c="js-tabs__title-active",a="js-tabs__content",o=n.querySelectorAll("."+r).length;function s(e){n.addEventListener("click",i);var t=d(null==e?l:e);for(let e=0;e{e.style.display="none"}),[].forEach.call(n.querySelectorAll("."+r),e=>{e.className=function(e,t){t=new RegExp(`(\\s|^)${t}(\\s|$)`,"g");return e.replace(t,"")}(e.className,c)})}function d(e){return e<0||isNaN(e)||e>=o?0:e}function f(e){u();e=d(e);n.querySelectorAll("."+r)[e].classList.add(c),n.querySelectorAll("."+a)[e].style.display=""}function y(){n.removeEventListener("click",i)}return s(),{open:f,update:function(e){y(),u(),s(e)},destroy:y}}; \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 608f4d2..9263feb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -33,50 +33,36 @@

Demo

-

ONE

-

+

TAB 1

+

Shabby chic ennui cred godard, forage roof party scenester health - goth typewriter pitchfork. Stumptown whatever fap, austin heirloom - asymmetrical lo-fi ethical seitan. Post-ironic hella listicle brunch - meggings artisan. YOLO tattooed blue bottle, fanny pack gluten-free - put a bird on it migas forage trust fund. -

+ goth typewriter pitchfork. +

-

TWO

- - -

- Shabby chic ennui cred godard, forage roof party - scenester health goth typewriter pitchfork. Stumptown whatever fap, - austin heirloom asymmetrical lo-fi ethical seitan. Post-ironic hella - listicle brunch meggings artisan. YOLO tattooed blue bottle, fanny - pack gluten-free put a bird on it migas forage trust fund. -

+

TAB 2

+

+ Shabby chic + github cred godard, + forage roof party scenester health goth typewriter pitchfork. +

-

THREE

- +

TAB 3

+

+ Yolo tattooed blue bottle, fanny pack gluten-free put a bird on it + migas forage trust fund. +

-

FOUR

-

- Meggings distillery pop-up artisan, hashtag 90's echo park - kickstarter gluten-free. Pinterest gentrify squid vinyl chicharrones - meh venmo. Beard aesthetic whatever bicycle rights artisan - gastropub. Fingerstache bicycle rights you probably haven't heard of - them, schlitz franzen semiotics microdosing. -

-

- Shabby chic ennui cred godard, forage roof party scenester health - goth typewriter pitchfork. Stumptown whatever fap, austin heirloom - asymmetrical lo-fi ethical seitan. Post-ironic hella listicle brunch - meggings artisan. YOLO tattooed blue bottle, fanny pack gluten-free - put a bird on it migas forage trust fund. -

+

TAB 4

+

+ Fingerstache bicycle rights you probably haven't heard of them, + schlitz franzen semiotics. +

@@ -139,7 +125,7 @@

Installation

  • Initialize the tabs - 
    var tabs = new Tabs({
+          
    var tabs = Tabs({
     elem: "tabs",
     open: 2
 });
diff --git a/docs/javascript/vanilla-js-tabs.min.js b/docs/javascript/vanilla-js-tabs.min.js
index 9334d95..6789c32 100644
--- a/docs/javascript/vanilla-js-tabs.min.js
+++ b/docs/javascript/vanilla-js-tabs.min.js
@@ -2,4 +2,4 @@
  * Vanilla JavaScript Tabs v1.1.0
  * https://zoltantothcom.github.io/vanilla-js-tabs
  */
-let Tabs=function(e){var t=document.getElementById(e.elem);if(!t)throw new Error(`Element with ID "${e.elem}" not found`);const n=t;let l=e.open||0;const r="js-tabs__title",a="js-tabs__title-active",c="js-tabs__content",o=n.querySelectorAll("."+r).length;function s(e){n.addEventListener("click",i);var t=d(null==e?l:e);for(let e=0;e{e.style.display="none"}),[].forEach.call(n.querySelectorAll("."+r),e=>{e.className=function(e,t){t=new RegExp(`(\\s|^)${t}(\\s|$)`,"g");return e.replace(t,"")}(e.className,a)})}function d(e){return e<0||isNaN(e)||e>=o?0:e}function f(e){u();e=d(e);n.querySelectorAll("."+r)[e].classList.add(a),n.querySelectorAll("."+c)[e].style.display=""}function y(){n.removeEventListener("click",i)}return s(),{open:f,update:function(e){y(),u(),s(e)},destroy:y}};
\ No newline at end of file
+const Tabs=function(e){var t=document.getElementById(e.elem);if(!t)throw new Error(`Element with ID "${e.elem}" not found`);const n=t;let l=e.open||0;const r="js-tabs__title",c="js-tabs__title-active",a="js-tabs__content",o=n.querySelectorAll("."+r).length;function s(e){n.addEventListener("click",i);var t=d(null==e?l:e);for(let e=0;e{e.style.display="none"}),[].forEach.call(n.querySelectorAll("."+r),e=>{e.className=function(e,t){t=new RegExp(`(\\s|^)${t}(\\s|$)`,"g");return e.replace(t,"")}(e.className,c)})}function d(e){return e<0||isNaN(e)||e>=o?0:e}function f(e){u();e=d(e);n.querySelectorAll("."+r)[e].classList.add(c),n.querySelectorAll("."+a)[e].style.display=""}function y(){n.removeEventListener("click",i)}return s(),{open:f,update:function(e){y(),u(),s(e)},destroy:y}};
\ No newline at end of file
diff --git a/docs/styles/docs-page.css b/docs/styles/docs-page.css
index b79bbe9..3f95d25 100644
--- a/docs/styles/docs-page.css
+++ b/docs/styles/docs-page.css
@@ -1 +1 @@
-body{counter-reset:item;font-family:sans-serif;font-size:15px;margin:0;padding:0}img{display:inline-block}header{width:800px;margin:16px auto;text-align:center}h1{margin:48px 0 0}h3{font-size:17px;font-style:italic;font-weight:400;margin:32px 0 48px}section{border:1px solid #f0db4f;border-radius:3px;line-height:1.75;margin:0 auto 32px;width:800px}section h2{background:#fefac9;border-bottom:1px solid #f0db4f;font-size:15px;margin:0 0 30px;padding:10px}section ol,section p,section ul{margin:0 45px 30px}section ol{list-style:none;margin-left:25px}section ol li{counter-increment:item;margin-bottom:3em}section ol li:before{margin-right:10px;border-radius:4px;content:counter(item);background:#272822;color:#fff;width:2em;text-align:center;display:inline-block;height:2em;line-height:2em}section a{color:#55acee;text-decoration:none}section a:hover{text-decoration:underline}section table{border:1px solid #eee;border-collapse:collapse;font-size:14px;margin:16px 32px 32px;width:92%}section table th{background:#272822;color:#fafafa;font-size:14px;font-weight:400}section table th.subhead{background:#fffeee;color:#e09e41}section table td{font-family:monospace}section table tr:nth-child(2n){background:#f5f5f5}section table td,section table th{border:1px solid #eee;padding:10px;text-align:left}section section code{font-size:16px}.smaller{font-size:16px;font-style:italic}#custom-color-select{display:block;margin:0 auto;width:24em}input{display:block;height:3em;margin:2em auto;width:8em}
\ No newline at end of file
+body{counter-reset:item;font-family:sans-serif;font-size:15px;margin:0;padding:0}img{display:inline-block}header{width:800px;margin:16px auto;text-align:center}h1{margin:48px 0 0}h3{font-size:18px;font-style:italic;font-weight:400;margin:32px 0 48px}h4{font-size:16px;font-weight:400;margin:32px 0 48px}section{border:1px solid #f0db4f;border-radius:3px;line-height:1.75;margin:0 auto 32px;width:800px}section h2{background:#fefac9;border-bottom:1px solid #f0db4f;font-size:15px;margin:0 0 30px;padding:10px}section ol,section p,section ul{margin:0 45px 30px}section ol{list-style:none;margin-left:25px}section ol li{counter-increment:item;margin-bottom:3em}section ol li:before{margin-right:10px;border-radius:4px;content:counter(item);background:#272822;color:#fff;width:2em;text-align:center;display:inline-block;height:2em;line-height:2em}section a{color:#55acee;text-decoration:none}section a:hover{text-decoration:underline}section table{border:1px solid #eee;border-collapse:collapse;font-size:14px;margin:16px 32px 32px;width:92%}section table th{background:#272822;color:#fafafa;font-size:14px;font-weight:400}section table th.subhead{background:#fffeee;color:#e09e41}section table td{font-family:monospace}section table tr:nth-child(2n){background:#f5f5f5}section table td,section table th{border:1px solid #eee;padding:10px;text-align:left}section section code{font-size:16px}.smaller{font-size:16px;font-style:italic}#custom-color-select{display:block;margin:0 auto;width:24em}input{display:block;height:3em;margin:2em auto;width:8em}
\ No newline at end of file
diff --git a/docs/styles/docs-page.less b/docs/styles/docs-page.less
index 76262af..838b4e3 100644
--- a/docs/styles/docs-page.less
+++ b/docs/styles/docs-page.less
@@ -1,136 +1,145 @@
 body {
-    counter-reset: item;
-    font-family: sans-serif;
-    font-size: 15px;
-    margin: 0;
-    padding: 0;
+  counter-reset: item;
+  font-family: sans-serif;
+  font-size: 15px;
+  margin: 0;
+  padding: 0;
 }
 
 img {
-    display: inline-block;
+  display: inline-block;
 }
 
 header {
-    width: 800px;
-    margin: 16px auto;
-    text-align: center;
+  width: 800px;
+  margin: 16px auto;
+  text-align: center;
 }
 
 h1 {
-    margin: 48px 0 0;
+  margin: 48px 0 0;
 }
 
 h3 {
-    font-size: 17px;
-    font-style: italic;
-    font-weight: 400;
-    margin: 32px 0 48px;
+  font-size: 18px;
+  font-style: italic;
+  font-weight: 400;
+  margin: 32px 0 48px;
+}
+
+h4 {
+  font-size: 16px;
+  font-weight: 400;
+  margin: 32px 0 48px;
 }
 
 section {
-    border: 1px solid #f0db4f;
-    border-radius: 3px;
-    line-height: 1.75;
-    margin: 0 auto 32px;
-    width: 800px;
-
-    h2 {
-        background: #fefac9;
-        border-bottom: 1px solid #f0db4f;
-        font-size: 15px;
-        margin: 0 0 30px;
-        padding: 10px;
+  border: 1px solid #f0db4f;
+  border-radius: 3px;
+  line-height: 1.75;
+  margin: 0 auto 32px;
+  width: 800px;
+
+  h2 {
+    background: #fefac9;
+    border-bottom: 1px solid #f0db4f;
+    font-size: 15px;
+    margin: 0 0 30px;
+    padding: 10px;
+  }
+
+  p,
+  ul,
+  ol {
+    margin: 0 45px 30px;
+  }
+
+  ol {
+    list-style: none;
+    margin-left: 25px;
+
+    li {
+      counter-increment: item;
+      margin-bottom: 3em;
+
+      &:before {
+        margin-right: 10px;
+        border-radius: 4px;
+        content: counter(item);
+        background: #272822;
+        color: #fff;
+        width: 2em;
+        text-align: center;
+        display: inline-block;
+        height: 2em;
+        line-height: 2em;
+      }
     }
+  }
 
-    p, ul, ol {
-        margin: 0 45px 30px;
-    }
+  a {
+    color: #55acee;
+    text-decoration: none;
 
-    ol {
-        list-style: none;
-        margin-left: 25px;
-
-        li {
-            counter-increment: item;
-            margin-bottom: 3em;
-
-            &:before {
-                margin-right: 10px;
-                border-radius: 4px;
-                content: counter(item);
-                background: #272822;
-                color: #fff;
-                width: 2em;
-                text-align: center;
-                display: inline-block;
-                height: 2em;
-                line-height: 2em;
-            }
-        }
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  table {
+    border: 1px solid #eee;
+    border-collapse: collapse;
+    font-size: 14px;
+    margin: 16px 32px 32px;
+    width: 92%;
+
+    th {
+      background: #272822;
+      color: #fafafa;
+      font-size: 14px;
+      font-weight: 400;
+
+      &.subhead {
+        background: #fffeee;
+        color: #e09e41;
+      }
     }
 
-    a {
-        color: #55acee;
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: underline;
-        }
+    td {
+      font-family: monospace;
     }
 
-    table {
-        border: 1px solid #eee;
-        border-collapse: collapse;
-        font-size: 14px;
-        margin: 16px 32px 32px;
-        width: 92%;
-
-        th {
-            background: #272822;
-            color: #fafafa;
-            font-size: 14px;
-            font-weight: 400;
-
-            &.subhead {
-                background: #fffeee;
-                color: #e09e41;
-            }
-        }
-
-        td {
-            font-family: monospace;
-        }
-
-        tr:nth-child(2n) {
-            background: #f5f5f5;
-        }
-
-        th, td {
-            border: 1px solid #eee;
-            padding: 10px;
-            text-align: left;
-        }
+    tr:nth-child(2n) {
+      background: #f5f5f5;
     }
 
-    section code {
-        font-size: 16px;
+    th,
+    td {
+      border: 1px solid #eee;
+      padding: 10px;
+      text-align: left;
     }
+  }
+
+  section code {
+    font-size: 16px;
+  }
 }
 
 .smaller {
-    font-size: 16px;
-    font-style: italic;
+  font-size: 16px;
+  font-style: italic;
 }
 
 #custom-color-select {
-    display: block;
-    margin: 0 auto;
-    width: 24em;
+  display: block;
+  margin: 0 auto;
+  width: 24em;
 }
 
 input {
-    display: block;
-    height: 3em;
-    margin: 2em auto;
-    width: 8em;
-}
\ No newline at end of file
+  display: block;
+  height: 3em;
+  margin: 2em auto;
+  width: 8em;
+}
diff --git a/src/javascript/vanilla-js-tabs.ts b/src/javascript/vanilla-js-tabs.ts
index cdba8a4..c3b2c81 100644
--- a/src/javascript/vanilla-js-tabs.ts
+++ b/src/javascript/vanilla-js-tabs.ts
@@ -24,7 +24,7 @@ interface Tabs {
   destroy: () => void;
 }
 
-let Tabs = function (options: TabsOptions): Tabs {
+const Tabs = function (options: TabsOptions): Tabs {
   const el: HTMLElement | null = document.getElementById(options.elem);
   if (!el) throw new Error(`Element with ID "${options.elem}" not found`);