More theme stuff for the welcome docs

HubSpot · Dec 14, 2013 · 228840a · 228840a
1 parent 10011cc
commit 228840a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git a/docs/welcome/coffee/welcome.coffee b/docs/welcome/coffee/welcome.coffee
@@ -5,13 +5,18 @@ init = ->
 setupHeroSelect = ->
     new Select el: $('.hero-select')[0]
 
+currentThemeClassName = undefined
 setupThemeSelect = ->
-    $select = $('.themes-select')
-    selectDrop = new Select el: $select[0]
+    $showcase = $ '#themeShowcase'
+    $select = $ '.themes-select'
+    currentThemeClassName = $select.val()
+    select = new Select
+        el: $select[0]
+        className: currentThemeClassName
 
-    $select.change = ->
+    $select.on 'change', ->
         newClassName = $select.val()
-        # ....
-        # selectDrop.$drop
+        $([select.dropSelect.$drop[0], select.$target[0], $showcase[0]]).removeClass(currentThemeClassName).addClass(newClassName)
+        currentThemeClassName = newClassName
 
 $ init
diff --git a/docs/welcome/css/welcome.css b/docs/welcome/css/welcome.css
@@ -99,6 +99,12 @@ table.showcase.about {
     margin-right: auto; }
 table.showcase.themes {
   background: #eeeeee; }
+  table.showcase.themes.select-theme-dark {
+    background: #323232; }
+    table.showcase.themes.select-theme-dark h1, table.showcase.themes.select-theme-dark h2 {
+      color: #e6e6e6; }
+  table.showcase.themes.select-theme-chosen {
+    background: white; }
   table.showcase.themes .themes-list {
     margin: 4em auto;
     padding: 0;

diff --git a/docs/welcome/index.html b/docs/welcome/index.html
@@ -15,6 +15,7 @@
     <!-- Select themes -->
     <link rel="stylesheet" href="/select/css/select-theme-default.css" />
     <link rel="stylesheet" href="/select/css/select-theme-dark.css" />
+    <link rel="stylesheet" href="/select/css/select-theme-chosen.css" />
 
     <!-- Welcome docs styles -->
     <link rel="stylesheet" href="/select/docs/welcome/css/prism.css" />
@@ -113,8 +114,10 @@ <h1>Themes</h1>
             <h2>Selects for every occasion.</h2>
             <p>
                 <select class="themes-select">
-                    <option value="default" selected="true">Default</option>
-                    <option value="dark">Dark</option>
+                    <option value="select-theme-default" selected="true">Select a theme...</option>
+                    <option value="select-theme-default">Default</option>
+                    <option value="select-theme-dark">Dark</option>
+                    <option value="select-theme-chosen">Chosen</option>
                 </select>
             </p>
         </div>

diff --git a/docs/welcome/js/welcome.js b/docs/welcome/js/welcome.js
@@ -1,5 +1,5 @@
 (function() {
-  var init, setupHeroSelect, setupThemeSelect;
+  var currentThemeClassName, init, setupHeroSelect, setupThemeSelect;
 
   init = function() {
     setupHeroSelect();
@@ -12,16 +12,23 @@
     });
   };
 
+  currentThemeClassName = void 0;
+
   setupThemeSelect = function() {
-    var $select, selectDrop;
+    var $select, $showcase, select;
+    $showcase = $('#themeShowcase');
     $select = $('.themes-select');
-    selectDrop = new Select({
-      el: $select[0]
+    currentThemeClassName = $select.val();
+    select = new Select({
+      el: $select[0],
+      className: currentThemeClassName
     });
-    return $select.change = function() {
+    return $select.on('change', function() {
       var newClassName;
-      return newClassName = $select.val();
-    };
+      newClassName = $select.val();
+      $([select.dropSelect.$drop[0], select.$target[0], $showcase[0]]).removeClass(currentThemeClassName).addClass(newClassName);
+      return currentThemeClassName = newClassName;
+    });
   };
 
   $(init);

diff --git a/docs/welcome/sass/welcome.sass b/docs/welcome/sass/welcome.sass
@@ -114,6 +114,15 @@ table.showcase
     &.themes
         background: #eee
 
+        &.select-theme-dark
+            background: #323232
+
+            h1, h2
+                color: #e6e6e6
+
+        &.select-theme-chosen
+            background: #fff
+
         .themes-list
             margin: 4em auto
             padding: 0