[dark theme] added 'Themes' controller

apps/common/main/lib/controller/Themes.js

@@ -0,0 +1,62 @@
+/**
+ * Created by Maxim.Kadushkin on 2/5/2021.
+ */
+
+define([
+    'core'
+], function () {
+    'use strict';
+
+    Common.UI.Themes = new (function() {
+        var sdk_themes_relation = {
+            'theme-light': 'flat',
+            'theme-dark': 'flatDark'
+        };
+
+        sdk_themes_relation.contains = function (name) {
+            return !!this[name];
+        }
+
+        return {
+            init: function (api) {
+                var me = this;
+                $(window).on('storage', function (e) {
+                    if ( e.key == 'ui-theme' ) {
+                        me.setTheme(e.originalEvent.newValue);
+                    }
+                })
+
+                this.api = api;
+                api.asc_setSkin(sdk_themes_relation[Common.localStorage.getItem('ui-theme', 'theme-light')]);
+
+                // app.eventbus.addListeners({
+                //    'FileMenu': {
+                //         'settings:apply': function (menu) {
+                //         }
+                //     }
+                // }, {id: 'Themes'});
+
+                // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
+            },
+
+            current: function () {
+                return Common.localStorage.getItem('ui-theme', 'theme-light');
+            },
+
+            setTheme: function (name) {
+                if ( sdk_themes_relation.contains(name) ) {
+                    var classname = document.documentElement.className.replace(/theme-\w+\s?/, '');
+                    document.documentElement.className = classname;
+
+                    this.api.asc_setSkin(sdk_themes_relation[name]);
+                    $(':root').addClass(name);
+                    Common.localStorage.setItem('ui-theme', name);
+                }
+            },
+
+            toggleTheme: function () {
+                this.setTheme(this.current() == 'theme-dark' ? 'theme-light' : 'theme-dark');
+            }
+        }
+    })();
+});

apps/documenteditor/main/app.js

@@ -205,6 +205,7 @@ require([
                 ,'common/main/lib/controller/ExternalMergeEditor'
                 ,'common/main/lib/controller/ReviewChanges'
                 ,'common/main/lib/controller/Protection'
+                ,'common/main/lib/controller/Themes'
                 ,'common/main/lib/controller/Desktop'
             ], function() {
                 app.start();

apps/documenteditor/main/app/controller/Main.js

@@ -171,6 +171,7 @@ define([
                 this.api = this.getApplication().getController('Viewport').getApi();
 
                 Common.UI.FocusManager.init();
+                Common.UI.Themes.init(this.api);
 
                 if (this.api){
                     this.api.SetDrawingFreeze(true);
@@ -189,9 +190,6 @@ define([
                         case '2': this.api.SetFontRenderingMode(2); break;
                     }
 
-                    value = Common.localStorage.getItem("uitheme", "theme-light");
-                    me.api.asc_setSkin(value == "theme-dark" ? 'flatDark' : "flat");
-
                     this.api.asc_registerCallback('asc_onError',                    _.bind(this.onError, this));
                     this.api.asc_registerCallback('asc_onDocumentContentReady',     _.bind(this.onDocumentContentReady, this));
                     this.api.asc_registerCallback('asc_onOpenDocumentProgress',     _.bind(this.onOpenDocument, this));
@@ -1122,17 +1120,7 @@ define([
                 $('#header-logo').children(0).click(e => {
                     e.stopImmediatePropagation();
 
-                    var value = Common.localStorage.getItem("uitheme", "theme-light");
+                    Common.UI.Themes.toggleTheme();
-                    var classname = document.documentElement.className.replace(/theme-\w+\s?/, '');
-                    document.documentElement.className = classname;
-                    if ( value != "theme-dark" ) {
-                        me.api.asc_setSkin('flatDark');
-                        $(':root').addClass('theme-dark');
-                        Common.localStorage.setItem("uitheme", "theme-dark");
-                    } else {
-                        me.api.asc_setSkin("flat");
-                        Common.localStorage.setItem("uitheme", "theme-light");
-                    }
 
                     // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
                 })

apps/documenteditor/main/app_dev.js

@@ -195,6 +195,7 @@ require([
                 ,'common/main/lib/controller/ExternalMergeEditor'
                 ,'common/main/lib/controller/ReviewChanges'
                 ,'common/main/lib/controller/Protection'
+                ,'common/main/lib/controller/Themes'
                 ,'common/main/lib/controller/Desktop'
             ], function() {
                 window.compareVersions = true;

apps/presentationeditor/main/app.js

@@ -189,6 +189,7 @@ require([
             'common/main/lib/controller/ExternalDiagramEditor'
             ,'common/main/lib/controller/ReviewChanges'
             ,'common/main/lib/controller/Protection'
+            ,'common/main/lib/controller/Themes'
             ,'common/main/lib/controller/Desktop'
         ], function() {
             app.start();

apps/presentationeditor/main/app/controller/Main.js

@@ -156,6 +156,7 @@ define([
                 this.api = this.getApplication().getController('Viewport').getApi();
 
                 Common.UI.FocusManager.init();
+                Common.UI.Themes.init(this.api);
                 
                 if (this.api){
                     this.api.SetDrawingFreeze(true);
@@ -170,9 +171,6 @@ define([
                     Common.Utils.InternalSettings.set("pe-settings-fontrender", value);
                     this.api.SetFontRenderingMode(parseInt(value));
 
-                    value = Common.localStorage.getItem("uitheme", "theme-light");
-                    me.api.asc_setSkin(value == "theme-dark" ? 'flatDark' : "flat");
-
                     this.api.asc_registerCallback('asc_onError',                    _.bind(this.onError, this));
                     this.api.asc_registerCallback('asc_onDocumentContentReady',     _.bind(this.onDocumentContentReady, this));
                     this.api.asc_registerCallback('asc_onOpenDocumentProgress',     _.bind(this.onOpenDocument, this));
@@ -846,17 +844,7 @@ define([
                 $('#header-logo').children(0).click(e => {
                     e.stopImmediatePropagation();
 
-                    var value = Common.localStorage.getItem("uitheme", "theme-light");
+                    Common.UI.Themes.toggleTheme();
-                    var classname = document.documentElement.className.replace(/theme-\w+\s?/, '');
-                    document.documentElement.className = classname;
-                    if ( value != "theme-dark" ) {
-                        me.api.asc_setSkin('flatDark');
-                        $(':root').addClass('theme-dark');
-                        Common.localStorage.setItem("uitheme", "theme-dark");
-                    } else {
-                        me.api.asc_setSkin("flat");
-                        Common.localStorage.setItem("uitheme", "theme-light");
-                    }
                 })
             },
 

apps/presentationeditor/main/app_dev.js

@@ -180,6 +180,7 @@ require([
             'common/main/lib/controller/ExternalDiagramEditor'
             ,'common/main/lib/controller/ReviewChanges'
             ,'common/main/lib/controller/Protection'
+            ,'common/main/lib/controller/Themes'
             ,'common/main/lib/controller/Desktop'
         ], function() {
             window.compareVersions = true;

apps/spreadsheeteditor/main/app.js

@@ -201,6 +201,7 @@ require([
             'common/main/lib/controller/Plugins'
             ,'common/main/lib/controller/ReviewChanges'
             ,'common/main/lib/controller/Protection'
+            ,'common/main/lib/controller/Themes'
             ,'common/main/lib/controller/Desktop'
         ], function() {
             app.start();

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -166,7 +166,8 @@ define([
                 this.api = this.getApplication().getController('Viewport').getApi();
 
                 Common.UI.FocusManager.init();
-                
+                Common.UI.Themes.init(this.api);
+
                 var value = Common.localStorage.getBool("sse-settings-cachemode", true);
                 Common.Utils.InternalSettings.set("sse-settings-cachemode", value);
                 this.api.asc_setDefaultBlitMode(!!value);
@@ -176,9 +177,6 @@ define([
                 Common.Utils.InternalSettings.set("sse-settings-fontrender", value);
                 this.api.asc_setFontRenderingMode(parseInt(value));
 
-                value = Common.localStorage.getItem("uitheme", "theme-light");
-                this.api.asc_setSkin(value == "theme-dark" ? 'flatDark' : "flat");
-
                 this.api.asc_registerCallback('asc_onOpenDocumentProgress',  _.bind(this.onOpenDocument, this));
                 this.api.asc_registerCallback('asc_onEndAction',             _.bind(this.onLongActionEnd, this));
                 this.api.asc_registerCallback('asc_onError',                 _.bind(this.onError, this));
@@ -910,18 +908,7 @@ define([
 
                 $('#header-logo').children(0).click(e => {
                     e.stopImmediatePropagation();
-
+                    Common.UI.Themes.toggleTheme();
-                    document.documentElement.className = document.documentElement.className.replace(/theme-\w+\s?/, '');
-                    if ( "theme-dark" != Common.localStorage.getItem("uitheme", "theme-light") ) {
-                        me.api.asc_setSkin('flatDark');
-                        $(':root').addClass('theme-dark');
-                        Common.localStorage.setItem("uitheme", "theme-dark");
-                    } else {
-                        me.api.asc_setSkin("flat");
-                        Common.localStorage.setItem("uitheme", "theme-light");
-                    }
-
-                    // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
                 })
             },
 

apps/spreadsheeteditor/main/app_dev.js

@@ -191,6 +191,7 @@ require([
             'common/main/lib/controller/Plugins'
             ,'common/main/lib/controller/ReviewChanges'
             ,'common/main/lib/controller/Protection'
+            ,'common/main/lib/controller/Themes'
             ,'common/main/lib/controller/Desktop'
         ], function() {
             window.compareVersions = true;