Themeroller

example/app/asides/features.html

@@ -132,6 +132,13 @@
                     <strong>Grid System</strong>
                 </a>
             </li>
+
+            <!-- Theme roller -->
+            <li>
+                <a href="#themeroller" data-router="section" data-async="app/sections/themeroller.html">
+                    <strong>Theme roller</strong>
+                </a>
+            </li>
         </ul>
     </article>
 </aside>

example/app/events.themeroller.js

@@ -0,0 +1,7 @@
+$$("#themeroller li").tap(function() {
+    var link = $$("#theme-stylesheet");
+    var url = link.attr("href");
+    var new_url = url.split("/").slice(0, -1);
+    new_url.push($$(this).attr("data-theme"));
+    link.attr('href', new_url.join("/"));
+});

example/app/sections/themeroller.html

@@ -0,0 +1,26 @@
+<section id="themeroller" data-transition="slide">
+    <header data-title="Theme roller">
+        <nav class="box">
+            <a href="#back" data-router="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <article class="active list indented">
+        <ul>
+             <li class="dark" data-icon="help" data-theme="theme.lungo.css">
+                <strong>First theme</strong>
+                <small>This element has an associated event</small>
+            </li>
+             <li class="dark" data-icon="help" data-theme="theme2.lungo.css">
+                <strong>Second theme</strong>
+                <small>This element has an associated event</small>
+            </li>
+             <li class="dark" data-icon="help" data-theme="theme3.lungo.css">
+                <strong>Third theme</strong>
+                <small>This element has an associated event</small>
+            </li>
+        </ul>
+
+    </article>
+
+</section>

example/index.html

@@ -50,7 +50,7 @@
     <link rel="stylesheet" href="components/lungo/lungo.icon.brand.css">
     <link rel="stylesheet" href="components/lungo/lungo.css">
 
-    <link rel="stylesheet" href="components/lungo/theme.lungo.css">
+    <link rel="stylesheet" href="components/lungo/theme.lungo.css" id="theme-stylesheet">
 
     <!-- App Stylesheet -->
     <link rel="stylesheet" href="stylesheets/app.css">
@@ -178,10 +178,11 @@
         });
     </script>
     <script src="app/app.js"></script>
-        <script src="app/events.notification.js"></script>
-        <script src="app/events.touch.js"></script>
-        <script src="app/events.pull.js"></script>
-        <script src="app/events.carousel.js"></script>
-        <script src="app/events.trigger.js"></script>
+    <script src="app/events.notification.js"></script>
+    <script src="app/events.touch.js"></script>
+    <script src="app/events.pull.js"></script>
+    <script src="app/events.carousel.js"></script>
+    <script src="app/events.trigger.js"></script>
+    <script src="app/events.themeroller.js"></script>
 </body>
 </html>