Link url routes and themes

source/index.html.erb

@@ -5,6 +5,6 @@ title: Slack Themes
 <% themes.each do |theme| %>
 <label class="radio theme_label theme_<%= theme.slug %>">
     <img src="/images/theme/<%= theme.slug %>-<%= theme.digest %>.png" class="theme_thumb"><br>
-    <input name="sidebar_theme_rd" type="radio" value="<%= theme.colors %>" ng-model="theme" ng-change="setTheme()"> <%= theme.name %>
+    <input name="sidebar_theme_rd" type="radio" value="<%= theme.slug %>" ng-model="slug"> <%= theme.name %>
 </label>
 <% end %>

source/javascripts/all.js

@@ -1,18 +0,0 @@
-//= require_tree .
-
-angular.module('theme', [])
-    .controller('ThemeController', ['$scope', function($scope) {
-       $scope.$watch(
-            function() { return $scope.theme; },
-            function(theme) {
-                parts = theme.split(',');
-                $scope.column_bg = parts[0];
-                $scope.menu_bg = parts[1];
-                $scope.active_item = parts[2];
-                $scope.active_item_text = parts[3];
-                $scope.hover_item = parts[4];
-                $scope.text_color = parts[5];
-                $scope.active_presence = parts[6];
-                $scope.mention_badge = parts[7];
-        });
-    }]);

source/javascripts/all.js.erb

@@ -0,0 +1,48 @@
+//= require_tree .
+
+var app = angular.module('theme', ['ui.router']);
+
+app.config(['$stateProvider',
+    function($stateProvider) {
+        $stateProvider
+            .state('theme', {
+                url: "/{slug}",
+                controller: 'ThemeController'
+            });
+    }]);
+
+app.controller('ThemeController', ['$scope', '$stateParams', '$state',
+    function($scope, $stateParams, $state) {
+        var colors = {
+          <%= themes.map do |theme|
+            "'#{theme.slug}': '#{theme.colors}'"
+          end.join ",\n" %>
+        };
+
+        $scope.$on('$stateChangeSuccess', function() {
+          $scope.slug = $stateParams.slug;
+        });
+
+        $scope.$watch('slug', function(slug) {
+            if (!slug) {
+                return;
+            }
+            $scope.colors = colors[$scope.slug]
+            $state.go('theme', { slug: slug });
+        });
+
+        $scope.$watch('colors', function(colors) {
+            if (!colors) {
+                return;
+            }
+            var parts = colors.split(',');
+            $scope.column_bg = parts[0];
+            $scope.menu_bg = parts[1];
+            $scope.active_item = parts[2];
+            $scope.active_item_text = parts[3];
+            $scope.hover_item = parts[4];
+            $scope.text_color = parts[5];
+            $scope.active_presence = parts[6];
+            $scope.mention_badge = parts[7];
+        });
+    }]);

source/layouts/layout.erb

@@ -10,6 +10,7 @@
     <title><%= current_page.data.title || "The Middleman" %></title>
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
 
     <link href="/stylesheets/rollup-client_core.css" rel="stylesheet" type="text/css">
     <link href="/stylesheets/rollup-client_primary.css" rel="stylesheet" type="text/css">
@@ -24,8 +25,7 @@
   <body class="<%= page_classes %>">
     <%= google_analytics_universal_tag %>
 
-    <div ng-app="theme" ng-controller='ThemeController'
+    <div ng-app="theme" ng-controller='ThemeController'>
-         ng-init="theme = '<%= data.themes.first[:colors] %>'">
         <style type="text/css" id="sidebar_theme_css">
             /* Column Background */
             #col_channels_bg,
@@ -353,7 +353,7 @@
                     </div> -->
 
                     <p class="input_note no_bottom_margin">Copy and paste these values to your <strong>Slack</strong> settings <strong>Sidebar Theme</strong> section:</p>
-                    <input type="text" name="sidebar_theme_custom" id="sidebar_theme_custom" class="monospace subtle_silver no_top_margin" ng-model="theme">
+                    <input type="text" name="sidebar_theme_custom" id="sidebar_theme_custom" class="monospace subtle_silver no_top_margin" ng-model="colors">
                 </div>
             </div>
         </div>