1 /* global ThemeEngine, Settings, ko, $, loadTemplate */
7 * Themes class provides grid view of available themes, detection of theme changes and method of updating selected theme.
9 * This class requires following components:
11 * * {{#crossLink "Tabs"}}{{/crossLink}} component
12 * * {{#crossLink "ThemeEngine"}}{{/crossLink}} component
13 * * {{#crossLink "Settings"}}{{/crossLink}} component
18 var Themes = function() {
21 * Marks a given user theme as selected.
24 * @param theme {Object} Object representing theme's information.
26 this.setTheme = function(theme) {
27 if (typeof ThemeEngine !== 'undefined') {
28 ThemeEngine.setUserTheme(theme.id);
36 * Contains array of available user themes.
40 * @type ko.observableArray
43 Themes.prototype.themes = ko.observableArray([]);
46 * Adds a listener to receive notifications about theme changes and updates the list of available user themes.
50 Themes.prototype.init = function() {
53 if (typeof ThemeEngine !== 'undefined') {
54 ThemeEngine.addStatusListener(function(themeId) {
58 console.error("ThemeEngine API is not available.");
63 * Shows grid view of available user themes and allows to change theme.
67 Themes.prototype.show = function() {
71 textTitle : "SETTINGS",
72 textSubtitle : "THEMES",
75 Settings.renderSettingsView();
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);
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);
98 * Loads available user themes from ThemeEngine service.
102 Themes.prototype.loadThemes = function(successCallback) {
104 console.log("updateThemes called");
106 if (typeof ThemeEngine !== 'undefined') {
107 ThemeEngine.getUserThemes(function(newThemes) {
108 self.themes.removeAll();
110 for ( var i = 0; i < newThemes.length; ++i) {
111 self.themes.push(newThemes[i]);