slackthemes/source/javascripts/all.js.erb

//= require_tree .

var app = angular.module('theme', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('theme', {
                url: "/:slug",
                controller: 'ThemeController',
                params: {
                    slug: { value: '<%= themes.first.slug %>' }
                }
            });
        $urlRouterProvider.otherwise('/<%= themes.first.slug %>');
    }]);

app.controller('ThemeController', ['$scope', '$stateParams', '$state', '$location',
    function($scope, $stateParams, $state, $location) {
        var themes = {
          <%= 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;
            }
            if (slug === 'custom') {
                $scope.colors = $location.hash().split(',').map(function(part) {
                    return '#' + part;
                }).join(',');

                return;
            }
            $scope.colors = themes[$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];

            function updateHash() {
                $location.hash(parts.map(function(part) {
                    return part.replace('#', '');
                }));
            }

            if ($scope.slug === 'custom') {
                updateHash();
            } else if (colors !== themes[$scope.slug]) {
                $state.go('theme', { slug: 'custom' }).then(updateHash);
            }
        });
    }]);