changed the description to match te 2.0 structure, added some new opt…

…ions, fixed Class name
magicznyleszek · Apr 10, 2014 · 723d5e4 · 723d5e4
1 parent 1671030
commit 723d5e4
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 55 deletions.
diff --git a/_includes/examples/hashTabber-example-code-js-options.liquid b/_includes/examples/hashTabber-example-code-js-options.liquid
@@ -1,7 +1,8 @@
-var tabber = new hashTabber(options = {
-    activeClass: 'showMe',
-    container: '.testTabber',
-    data: '.testTabber-data',
-    nav: '.testTabber-nav',
-    tab: 'data-startingTab',
+var tabber = new HashTabber(options = {
+    classActive: 'active',
+    classData: 'hashTabber-data',
+    classNav: 'hashTabber-nav',
+    dataDefault: 'data-hashtabber-default',
+    dataId: 'data-hashtabber-id',
+    dataPair: 'data-hashtabber-pair',
 });
diff --git a/_includes/examples/hashTabber-example-code-js-run.liquid b/_includes/examples/hashTabber-example-code-js-run.liquid
@@ -1,2 +1,2 @@
-var tabber = new hashTabber();
+var tabber = new HashTabber();
 tabber.run();
diff --git a/_includes/examples/hashTabber-example-sandstone.liquid b/_includes/examples/hashTabber-example-sandstone.liquid
@@ -1,19 +1,21 @@
-<ol class="hashTabber-nav" data-hashtabber-id="dinosaurs" data-hashtabber-default="pterosaur">
-    <h2>Species:</h2>
-    {% for dinosaur in site.data.dinosaurs %}
-        <li data-hashtabber-pair="{{ dinosaur.slug }}">
-            <a>{{ dinosaur.name }}</a>
-        </li>
-    {% endfor %}
-</ol><!--
---><ol class="hashTabber-data" data-hashtabber-id="dinosaurs">
-    {% for dinosaur in site.data.dinosaurs %}
-        <li data-hashtabber-pair="{{ dinosaur.slug }}">
-            <article>
-                <h3>{{ dinosaur.name}}</h3>
-                <p>{{ dinosaur.description }}</p>
-                <p><a href="{{ dinosaur.url }}" target="_blank">Read more about {{ dinosaur.name }}</a></p>
-            </article>
-        </li>
-    {% endfor %}
-</ol>
+<section class="hashTabber-sandstone-wrapper">
+    <ol class="hashTabber-nav hashTabber-sandstone" data-hashtabber-id="dinosaurs" data-hashtabber-default="pterosaur">
+        <h2>Species:</h2>
+        {% for dinosaur in site.data.dinosaurs %}
+            <li data-hashtabber-pair="{{ dinosaur.slug }}">
+                <a>{{ dinosaur.name }}</a>
+            </li>
+        {% endfor %}
+    </ol><!--
+ --><ol class="hashTabber-data hashTabber-sandstone" data-hashtabber-id="dinosaurs">
+        {% for dinosaur in site.data.dinosaurs %}
+            <li data-hashtabber-pair="{{ dinosaur.slug }}">
+                <article>
+                    <h3>{{ dinosaur.name}}</h3>
+                    <p>{{ dinosaur.description }}</p>
+                    <p><a href="{{ dinosaur.url }}" target="_blank">Read more about {{ dinosaur.name }}</a></p>
+                </article>
+            </li>
+        {% endfor %}
+    </ol>
+</section>
diff --git a/_includes/examples/hashTabber-example-theme-blank.liquid b/_includes/examples/hashTabber-example-theme-blank.liquid
@@ -1,7 +1,4 @@
-.hashTabber.hashTabber-name {
-}
-
-.hashTabber-name ol.hashTabber-nav {
+ol.hashTabber-nav.hashTabber-themename {
     > li {
         &.active {
             a {
@@ -15,8 +12,7 @@
         }
     }
 }
-
-.hashTabber-name ol.hashTabber-data {
+ol.hashTabber-data.hashTabber-themename {
     > li {
         &.active {
         }

diff --git a/assets/css/global.css b/assets/css/global.css
diff --git a/assets/js/libraries/hashTabber.js b/assets/js/libraries/hashTabber.js
@@ -4,7 +4,7 @@
 // License CC0 1.0
 // --------------------------------------------------
 
-function hashTabber(customOptions) {
+function HashTabber(customOptions) {
     this.options = {
         classActive: 'active',
         classData: 'hashTabber-data',
@@ -94,7 +94,6 @@ function hashTabber(customOptions) {
                 var parameter = hashArray[a];
                 var value = hashArray[a + 1];
                 var tabName = '';
-                console.log(parameter, value);
                 // check if hashlink exists in nav element                
                 if (document.querySelectorAll('.' + options.classNav + ' a[href="#' + parameter + '=' + value + '"]').length > 0) {
                     // get the current tabber nav and data lists

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -6,7 +6,7 @@ function projectInterface() {
 
     this.run = run;
     function run() {
-        var tabber = new hashTabber();
+        var tabber = new HashTabber();
         tabber.run();
     }
 

diff --git a/assets/scss/layout/_hashTabber-sandstone.scss b/assets/scss/layout/_hashTabber-sandstone.scss
@@ -1,16 +1,16 @@
-.hashTabber.hashTabber-sandstone {
+.hashTabber-sandstone-wrapper {
     @include column();
     background-color: $sandstoneLighter;
     padding: 1rem;
 }
 
-.hashTabber-sandstone ol.hashTabber-nav, .hashTabber-sandstone ol.hashTabber-data {
+ol.hashTabber-nav.hashTabber-sandstone, ol.hashTabber-data.hashTabber-sandstone {
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
-.hashTabber-sandstone ol.hashTabber-nav {
+ol.hashTabber-nav.hashTabber-sandstone {
     @include column(1,5);
     > h2 {
         font-size: 0.875rem;
@@ -52,7 +52,7 @@
     }
 }
 
-.hashTabber-sandstone ol.hashTabber-data {
+ol.hashTabber-data.hashTabber-sandstone {
     @include column(4,5);
     @include border-radius(0.25rem);
     background-color: $white;

diff --git a/assets/scss/setup/_typography.scss b/assets/scss/setup/_typography.scss
@@ -21,7 +21,7 @@ a {
     }
 }
 
-p a {
+p a, ol a, ul a, blockquote a {
     border-bottom: 0.125rem solid $crimson;
     &:hover {
         border-color: transparent;