Update docs

zoltantothcom · Apr 27, 2024 · afed873 · afed873
1 parent a14de56
commit afed873
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 141 deletions.
diff --git 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
diff --git a/docs/index.html b/docs/index.html
@@ -33,50 +33,36 @@ <h2>Demo</h2>
         </ul>
 
         <div class="js-tabs__content">
-          <h1>ONE</h1>
-          <p>
+          <h1>TAB 1</h1>
+          <h4>
             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.
-          </p>
+            goth typewriter pitchfork.
+          </h4>
         </div>
 
         <div class="js-tabs__content">
-          <h1>TWO</h1>
-          <img src="http://lorempixel.com/600/100" alt="" />
-
-          <p>
-            Shabby chic <a href="#">ennui</a> 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.
-          </p>
+          <h1>TAB 2</h1>
+          <h4>
+            Shabby chic
+            <a href="https://github.com" target="_blank">github</a> cred godard,
+            forage roof party scenester health goth typewriter pitchfork.
+          </h4>
         </div>
 
         <div class="js-tabs__content">
-          <h1>THREE</h1>
-          <img src="http://lorempixel.com/500/300" alt="" />
+          <h1>TAB 3</h1>
+          <h4>
+            Yolo tattooed blue bottle, fanny pack gluten-free put a bird on it
+            migas forage trust fund.
+          </h4>
         </div>
 
         <div class="js-tabs__content">
-          <h1>FOUR</h1>
-          <p>
-            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.
-          </p>
-          <p>
-            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.
-          </p>
+          <h1>TAB 4</h1>
+          <h4>
+            Fingerstache bicycle rights you probably haven't heard of them,
+            schlitz franzen semiotics.
+          </h4>
         </div>
       </div>
     </section>
@@ -139,7 +125,7 @@ <h2>Installation</h2>
         </li>
         <li>
           Initialize the tabs
-          <pre><code class="language-javascript">var tabs = new Tabs({
+          <pre><code class="language-javascript">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
diff --git a/docs/styles/docs-page.css b/docs/styles/docs-page.css
diff --git 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;
-}
+  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
@@ -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`);