add theme switcher to thumbnail test page

1 files changed, 32 insertions, 3 deletions

diff --git a/tests/thumbnail.html b/tests/thumbnail.html
index fe7d2540..b576f1b7 100644
--- a/tests/thumbnail.html
+++ b/tests/thumbnail.html
@@ -4,7 +4,7 @@
     <title>Bootswatch: Default Bootstrap</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
-    <link rel="stylesheet" href="../united/bootstrap.min.css" media="screen">
+    <link rel="stylesheet" href="../amelia/bootstrap.min.css" media="screen" id="stylesheet">
     <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="../assets/css/bootswatch.min.css">
     <style>
@@ -88,8 +88,8 @@
       <div class="row">
         <div class="col-12">
           <div class="page-header">
-            <h1>United</h1>
-            <p class="lead">Ubuntu orange and unique font</p>
+            <h1 id="theme">Amelia</h1>
+            <p id="description" class="lead">Sweet and cheery</p>
             <div class="bs-example">
               <button type="button" class="btn btn-default">Default</button>
               <button type="button" class="btn btn-primary">Primary</button>
@@ -104,5 +104,34 @@
 
     </div>
 
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
+    <script>
+
+      $.get("http://api.bootswatch.com", function (data) {
+
+           var t_menu = "<div id='menu' style='position:fixed;top:10px;right:10px;'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>";
+           var t_previews = "{{#.}}<div class='preview hidden' id='{{name}}'><h1>{{name}}: {{description}}</h1><p><a href='{{preview}}'><img src='{{thumbnail}}'></a></p></div>{{/.}}";
+                
+           var o_menu = Mustache.render(t_menu, data.themes);
+           var o_previews = Mustache.render(t_previews, data.themes);         
+
+          $('body').append(o_menu);
+                        
+          $('#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