From 5980539cc3abefd4257409fab55dfd170dbce3fc Mon Sep 17 00:00:00 2001
From: Thomas Park <thomas@thomaspark.me>
Date: Wed, 27 Nov 2013 12:27:32 -0500
Subject: tests: add theme switcher to components, use api v3, remove unused
 code

---
 tests/components.html | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

(limited to 'tests/components.html')

diff --git a/tests/components.html b/tests/components.html
index 449b150c..2bb67b65 100644
--- a/tests/components.html
+++ b/tests/components.html
@@ -4,8 +4,18 @@
     <title>Bootswatch: Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
-    <link rel="stylesheet" href="../amelia/bootstrap.css" media="screen">
+    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" media="screen" id="stylesheet">
     <link rel="stylesheet" href="../assets/css/bootswatch.min.css">
+    <style>
+
+        #menu {
+          z-index: 1040;
+          position:fixed;
+          top:10px;
+          right:10px;
+        }
+
+    </style>
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="../bower_components/bootstrap/assets/js/html5shiv.js"></script>
@@ -77,8 +87,8 @@
     <div class="container">
 
       <div class="page-header">
-        <h1>Bootstrap</h1>
-        <p class="lead">The original</p>
+        <h1 id="theme">Bootstrap</h1>
+        <p id="description" class="lead">The original</p>
       </div>
 
 
@@ -2722,11 +2732,27 @@
 
     <script src="../bower_components/jquery/jquery.min.js"></script>
     <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
     <script src="../assets/js/bootswatch.js"></script>
     <script>
 
       $('[data-toggle=popover]').popover();
 
+      $.get("http://api.bootswatch.com/3/", function (data) {
+          var menuTemplate = "<div id='menu'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>",
+              menuHTML = Mustache.render(menuTemplate, data.themes);
+
+          $('body').append(menuHTML);
+                        
+          $('#menu').change(function(){
+            var theme = $('#menu :selected');
+            $('#theme').text(theme.text());
+            $('#description').text(theme.data('description'));
+            theme = '../' + theme.text().toLowerCase() + '/bootstrap.min.css';
+            $('#stylesheet').attr('href', theme);
+          });
+      }, "json");
+
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>
-- 
cgit v1.2.3