refactor: Move js API functions to CMS.Helpers to make them available…

… also to the admin site (#7384) Move CMS.API.Toolbar.get_color_scheme to CMS.API.Helpers.getColorScheme and CMS.API.Toolbar.set_color_scheme to CMS.API.Helpers.setColorScheme
django-cms · Sep 27, 2022 · a7f8cd4 · a7f8cd4
1 parent 1ec5698
commit a7f8cd4
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 51 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -5,6 +5,9 @@ Changelog
 unreleased
 ==========
 
+* Make javascript dark mode functions available to popups as CMS.API.getColorScheme
+  and CMS.API.setColorScheme
+
 3.11.0 (2022-08-02)
 ===================
 

diff --git a/cms/static/cms/js/modules/cms.base.js b/cms/static/cms/js/modules/cms.base.js
@@ -468,6 +468,65 @@ export const Helpers = {
         var path = win.location.pathname + win.location.search;
 
         return this.makeURL(url, [['cms_path', path]]);
+    },
+
+    /**
+     * Get color scheme either from :root[data-color-scheme] or user system setting
+     *
+     * @method get_color_scheme
+     * @public
+     * @returns {String}
+     */
+    getColorScheme: function () {
+        let state = $('html').attr('data-color-scheme');
+
+        if (!state) {
+            if (!CMS.settings) {
+                // Settings loaded? If not, pls. load.
+                this.getSettings();
+            }
+            state = CMS.settings.color_scheme;
+            if (!state && window.matchMedia) {
+                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    state = 'dark'; // dark mode
+                } else {
+                    state = 'light';
+                }
+            }
+        }
+
+        return state;
+    },
+
+    /**
+     * Sets the color scheme for the current document and all iframes contained.
+     *
+     * @method setColorScheme
+     * @public
+     * @param scheme {String}
+     * @retiurns {void}
+     */
+
+    setColorScheme: function (scheme) {
+        let body = $('html');
+
+        this.setSettings({ color_scheme: scheme });
+        if (scheme === 'auto') {
+            body.removeAttr('data-color-scheme');
+            body.find('div.cms iframe').each(function(i, e) {
+                delete e.contentDocument.documentElement.dataset.colorScheme;
+            });
+        } else {
+            body.attr('data-color-scheme', scheme);
+            body.find('div.cms iframe').each(function setFrameColorScheme(i, e) {
+                if (e.contentDocument) {
+                    e.contentDocument.documentElement.dataset.colorScheme = scheme;
+                    // ckeditor (and potentially other apps) have iframes inside their admin forms
+                    // also set color scheme there
+                    $(e.contentDocument).find('iframe').each(setFrameColorScheme);
+                }
+            });
+        }
     }
 };
 

diff --git a/cms/static/cms/js/modules/cms.toolbar.js b/cms/static/cms/js/modules/cms.toolbar.js
@@ -422,9 +422,9 @@ var Toolbar = new Class({
         }
 
         if (CMS.settings.color_scheme) {
-            this.set_color_scheme (CMS.settings.color_scheme);
+            Helpers.setColorScheme (CMS.settings.color_scheme);
         } else if (CMS.config.color_scheme) {
-            this.set_color_scheme (CMS.config.color_scheme);
+            Helpers.setColorScheme (CMS.config.color_scheme);
         }
 
         // check if there are messages and display them
@@ -623,12 +623,12 @@ var Toolbar = new Class({
                 });
                 break;
             case 'color-toggle':
-                switch (this.get_color_scheme()) {
+                switch (Helpers.getColorScheme()) {
                     case 'light':
-                        this.set_color_scheme('dark');
+                        Helpers.setColorScheme('dark');
                         break;
                     case 'dark':
-                        this.set_color_scheme('light');
+                        Helpers.setColorScheme('light');
                         break;
                     default:
                         break;
@@ -777,53 +777,11 @@ var Toolbar = new Class({
     },
 
     /**
-     * Get color scheme either from :root[data-color-scheme] or user system setting
+     * Compatibility shims to be removed CMS 4.0+
      *
-     * @method get_color_scheme
-     * @public
-     * @returns {String}
-     */
-    get_color_scheme: function () {
-        let state = this.ui.body.attr('data-color-scheme');
-
-        if (!state && window.matchMedia) {
-            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                state = 'dark'; // dark mode
-            } else {
-                state = 'light';
-            }
-        }
-        return state;
-    },
-
-    /**
-     * Sets the color scheme for the current document and all iframes contained.
-     *
-     * @method set_color_scheme
-     * @public
-     * @param scheme {String}
-     * @retiurns {void}
      */
-
-    set_color_scheme: function (scheme) {
-        CMS.API.Helpers.setSettings({ color_scheme: scheme });
-        if (scheme === 'auto') {
-            this.ui.body.removeAttr('data-color-scheme');
-            this.ui.body.find('div.cms iframe').each(function(i, e) {
-                delete e.contentDocument.documentElement.dataset.colorScheme;
-            });
-        } else {
-            this.ui.body.attr('data-color-scheme', scheme);
-            this.ui.body.find('div.cms iframe').each(function setFrameColorScheme(i, e) {
-                if (e.contentDocument) {
-                    e.contentDocument.documentElement.dataset.colorScheme = scheme;
-                    // ckeditor (and potentially other apps) have iframes inside their admin forms
-                    // also set color scheme there
-                    $(e.contentDocument).find('iframe').each(setFrameColorScheme);
-                }
-            });
-        }
-    }
+    get_color_scheme: Helpers.getColorScheme,
+    set_color_scheme: Helpers.setColorScheme
 });
 
 export default Toolbar;
diff --git a/cms/tests/frontend/unit/cms.base.test.js b/cms/tests/frontend/unit/cms.base.test.js
@@ -52,7 +52,7 @@ describe('cms.base.js', function() {
         it('exists', function() {
             expect(CMS.API.Helpers).toEqual(jasmine.any(Object));
             // this expectation is here so no one ever forgets to add a test
-            expect(Object.keys(CMS.API.Helpers).length).toEqual(23);
+            expect(Object.keys(CMS.API.Helpers).length).toEqual(25);
         });
 
         describe('.reloadBrowser()', function() {
@@ -1044,5 +1044,20 @@ describe('cms.base.js', function() {
                 expect(CMS.API.Helpers.updateUrlWithPath('/')).toEqual('/?cms_path=%2Fde%2F%3Flanguage%3Den');
             });
         });
+
+        describe('.setColorScheme() and .getColorScheme()', function() {
+            it('allows setting of dark color scheme', function() {
+                CMS.API.Helpers.setColorScheme('dark');
+                expect(CMS.API.Helpers.getColorScheme()).toEqual('dark');
+            });
+            it('allows setting of light color scheme', function() {
+                CMS.API.Helpers.setColorScheme('light');
+                expect(CMS.API.Helpers.getColorScheme()).toEqual('light');
+            });
+            it('allows setting of system color scheme', function() {
+                CMS.API.Helpers.setColorScheme('auto');
+                expect(CMS.API.Helpers.getColorScheme()).toEqual('auto');
+            });
+        });
     });
 });