css/car/components/settings/js/themes.js

   1 /* global ThemeEngine, Settings, ko, $, loadTemplate */
   2
   3 /**
   4  * @module Settings
   5  */
   6 /**
   7  * Themes class provides grid view of available themes, detection of theme changes and method of updating selected theme.
   8  *
   9  * This class requires following components:
  10  *
  11  * * {{#crossLink "Tabs"}}{{/crossLink}} component
  12  * * {{#crossLink "ThemeEngine"}}{{/crossLink}} component
  13  * * {{#crossLink "Settings"}}{{/crossLink}} component
  14  *
  15  * @class Themes
  16  * @constructor
  17  */
  18 var Themes = function() {
  19         "use strict";
  20         /**
  21          * Marks a given user theme as selected.
  22          *
  23          * @method setTheme
  24          * @param theme {Object} Object representing theme's information.
  25          */
  26         this.setTheme = function(theme) {
  27                 if (typeof ThemeEngine !== 'undefined') {
  28                         ThemeEngine.setUserTheme(theme.id);
  29                 }
  30         };
  31
  32         this.init();
  33 };
  34
  35 /**
  36  * Contains array of available user themes.
  37  *
  38  * @property themes
  39  * @public
  40  * @type ko.observableArray
  41  * @default []
  42  */
  43 Themes.prototype.themes = ko.observableArray([]);
  44
  45 /**
  46  * Adds a listener to receive notifications about theme changes and updates the list of available user themes.
  47  *
  48  * @method init
  49  */
  50 Themes.prototype.init = function() {
  51         "use strict";
  52         var self = this;
  53         if (typeof ThemeEngine !== 'undefined') {
  54                 ThemeEngine.addStatusListener(function(themeId) {
  55                         self.loadThemes();
  56                 });
  57         } else {
  58                 console.error("ThemeEngine API is not available.");
  59         }
  60 };
  61
  62 /**
  63  * Shows grid view of available user themes and allows to change theme.
  64  *
  65  * @method show
  66  */
  67 Themes.prototype.show = function() {
  68         "use strict";
  69         var self = this;
  70         var subpanelModel = {
  71                 textTitle : "SETTINGS",
  72                 textSubtitle : "THEMES",
  73                 actionName : "BACK",
  74                 action : function() {
  75                         Settings.renderSettingsView();
  76                 }
  77         };
  78         var loadThemesUI = function() {
  79                 if (!$("#themeList").length) {
  80                         var themeList = '<div id="themeList" data-bind="template: { name: \'';
  81                         themeList += templateName;
  82                         themeList += '\', foreach: Settings.Theme.themes }"></div>';
  83                         $(themeList).appendTo($('.' + themesContent));
  84                         ko.applyBindings(window.Settings);
  85                 }
  86         };
  87         var themesContent = "themesContent";
  88         var templateName = "template-themes";
  89         Settings.domElement.tabs("clearContent");
  90         Settings.domElement.tabs("changeContentClass", themesContent);
  91         Settings.domElement.tabs("subpanelContentTemplateCompile", subpanelModel, function() {
  92                 loadTemplate(Settings.SETTINGS_TEMPLATES_PATH, templateName, loadThemesUI);
  93         });
  94         self.loadThemes();
  95 };
  96
  97 /**
  98  * Loads available user themes from ThemeEngine service.
  99  *
 100  * @method loadThemes
 101  */
 102 Themes.prototype.loadThemes = function(successCallback) {
 103         "use strict";
 104         console.log("updateThemes called");
 105         var self = this;
 106         if (typeof ThemeEngine !== 'undefined') {
 107                 ThemeEngine.getUserThemes(function(newThemes) {
 108                         self.themes.removeAll();
 109                         self.themes([]);
 110                         for ( var i = 0; i < newThemes.length; ++i) {
 111                                 self.themes.push(newThemes[i]);
 112                         }
 113                 });
 114         }
 115 };