Browse Source

Ticket #4040 - Artificer: Allow to enable only one color scheme.

AntonLV 4 years ago
parent
commit
e852db56db

+ 13 - 2
modules/boonex/artificer/classes/BxArtificerConfig.php

@@ -23,6 +23,14 @@ class BxArtificerConfig extends BxBaseModTemplateConfig
     {
         parent::__construct($aModule);
 
+        $this->_aJsClasses = array_merge($this->_aJsClasses, array(
+            'utils' => 'BxArtificerUtils'
+        ));
+
+        $this->_aJsObjects = array_merge($this->_aJsObjects, array(
+            'utils' => 'oBxArtificerUtils'
+        ));
+
         $this->_iLogoHeight = 40;
         $this->_iMarkHeight = 40;
 
@@ -44,8 +52,11 @@ class BxArtificerConfig extends BxBaseModTemplateConfig
         $this->_aThumbSizeByTemplate = [
             'unit_with_cover.html' => 'h-24 w-24' //--- 'ava' size
         ];
-        
-        
+    }
+
+    public function getColorScheme()
+    {
+        return getParam('bx_artificer_color_scheme');
     }
 
     public function getLogoParams()

+ 11 - 0
modules/boonex/artificer/classes/BxArtificerModule.php

@@ -42,6 +42,17 @@ class BxArtificerModule extends BxBaseModTemplateModule
         return $this->_oTemplate->getIncludeCssJs($sType);
     }
 
+    public function serviceGetOptionsColorScheme()
+    {
+        $aOptions = ['auto', 'light_only', 'dark_only'];
+
+        $aResult = [];
+        foreach($aOptions as $sOption)
+            $aResult[$sOption] = _t('_bx_artificer_stg_cpt_option_color_scheme_' . $sOption);
+
+        return $aResult;
+    }
+
     public function serviceGetSplashMarker($sName)
     {
         $sResult = '';

+ 3 - 0
modules/boonex/artificer/classes/BxArtificerTemplate.php

@@ -33,6 +33,9 @@ class BxArtificerTemplate extends BxBaseModGeneralTemplate
                 $this->addJs([
                     'utils.js'
                 ]);
+                $sResult .= $this->_oModule->_oTemplate->getJsCode('utils', [
+                    'sColorScheme' => $this->_oConfig->getColorScheme()
+                ]);
 
                 $sCss = trim(getParam($this->_oConfig->getName() . '_styles_custom'));
                 if(!empty($sCss))

+ 8 - 0
modules/boonex/artificer/data/template/system/scripts/BxTemplFunctions.php

@@ -11,9 +11,13 @@ bx_import('BxDolDesigns');
 
 class BxTemplFunctions extends BxBaseFunctions
 {
+    protected $_sModule;
+
     public function __construct($oTemplate = null)
     {
         parent::__construct($oTemplate);
+
+        $this->_sModule = 'bx_artificer';
     }
 
     function getMainLogo($aParams = array())
@@ -200,6 +204,10 @@ class BxTemplFunctions extends BxBaseFunctions
             $sSwitcher = $aSwitcher['content'];
 
         return $this->_oTemplate->parsePageByName('sidebar_account.html', [
+            'bx_if:color_scheme_switcher' => [
+                'condition' => BxDolModule::getInstance($this->_sModule)->_oConfig->getColorScheme() == 'auto',
+                'content' => []
+            ],
             'active_profile' => $oProfile->getUnit(),
             'menu_notifications' => BxDolMenu::getObjectInstance('sys_account_notifications')->getCode(),
             'profile_switcher' => $sSwitcher,

+ 1 - 1
modules/boonex/artificer/data/template/system/scripts/BxTemplMenuAccountNotifications.php

@@ -27,7 +27,7 @@ class BxTemplMenuAccountNotifications extends BxBaseMenuAccountNotifications
         switch ($a['name']) {
             case 'add-content':
                 if(isset($a['onclick']))
-                    $a['onclick'] = str_replace(['bx_menu_slide_inline', 'bx-menu-toolbar-item-add-content'], ['bx_artificer_add_content_panel', 'bx-menu-toolbar-item-account'], $a['onclick']);
+                    $a['onclick'] = str_replace(['bx_menu_slide_inline', 'bx-menu-toolbar-item-add-content'], ['oBxArtificerUtils.getAddContentMenu', 'bx-menu-toolbar-item-account'], $a['onclick']);
                 break;
         }
 

+ 40 - 38
modules/boonex/artificer/data/template/system/sidebar_account.html

@@ -11,45 +11,47 @@
             </button>
         </div>
         <div class="bx-sb-profile flex-shrink-0 px-4 pb-4 flex justify-between items-center">__active_profile__
-            <div class="bx-sb-theme-switcher">
-                <a class="hover:no-underline" href="javascript:" onclick="bx_artificer_get_color_scheme_menu()"><i class="sys-icon desktop"></i></a>
+            <bx_if:color_scheme_switcher>
+                <div class="bx-sb-theme-switcher">
+                    <a class="hover:no-underline" href="javascript:" onclick="oBxArtificerUtils.getColorSchemeMenu()"><i class="sys-icon desktop"></i></a>
+                </div>
+            </bx_if:color_scheme_switcher>
+            <div id="bx-sb-theme-switcher-menu" class="bx-popup-wrapper bx-popup-responsive bx-popup-trans-wrapper box-border"  style="display: none">
+                <div class="bx-popup-gap mx-4 my-px">
+                    <div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg">
+                        <div class="bx-popup-content overflow-hidden">
+                            <div class="bx-menu-item-more-popup w-full md:w-56 box-border">		
+                                <ul class="bx-menu-custom bx-menu-custom-ver bx-menu-submenu-more-auto bx-clearfix">
+                                    <li class="bx-menu-item bx-menu-item-albums-home  rounded-md bx-def-color-bg-hl-hover" >
+                                        <a href="javascript:" onclick="oBxArtificerUtils.setColorScheme(1)" class="bx-stl-mil group">
+                                            <div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                                                <i class="sys-icon sun"></i>
+                                            </div>
+                                            <div class="bx-menu-item-title bx-menu-floating-blocks-title bx-stl-mit whitespace-nowrap"><bx_text:_bx_artificer_txt_color_scheme_light /></div>
+                                        </a>
+                                    </li>
+                                    <li class="bx-menu-item bx-menu-item-groups-home  rounded-md bx-def-color-bg-hl-hover">
+                                        <a href="javascript:" onclick="oBxArtificerUtils.setColorScheme(2)" onclick="" class="bx-stl-mil group">
+                                            <div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                                                <i class="sys-icon moon"></i>
+                                            </div>
+                                            <div class="bx-menu-item-title bx-menu-floating-blocks-title bx-stl-mit whitespace-nowrap"><bx_text:_bx_artificer_txt_color_scheme_dark /></div>
+                                        </a>
+                                    </li>
+                                    <li class="bx-menu-item bx-menu-item-files-home  rounded-md bx-def-color-bg-hl-hover" >
+                                        <a href="javascript:" onclick="oBxArtificerUtils.setColorScheme(0)" onclick="" class="bx-stl-mil group">
+                                            <div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                                                <i class="sys-icon desktop"></i>
+                                            </div>
+                                            <div class="bx-menu-item-title bx-menu-floating-blocks-title bx-stl-mit whitespace-nowrap"><bx_text:_bx_artificer_txt_color_scheme_system /></div>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-			<div id="bx-sb-theme-switcher-menu" class="bx-popup-wrapper bx-popup-responsive bx-popup-trans-wrapper box-border"  style="display: none">
-				<div class="bx-popup-gap mx-4 my-px">
-        			<div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg">
-            			<div class="bx-popup-content overflow-hidden">
-							<div class="bx-menu-item-more-popup w-full md:w-56 box-border">		
-								<ul class="bx-menu-custom bx-menu-custom-ver bx-menu-submenu-more-auto bx-clearfix">
-									<li class="bx-menu-item bx-menu-item-albums-home  rounded-md bx-def-color-bg-hl-hover" >
-										<a href="javascript:" onclick="bx_artificer_set_color_scheme(1)" class="bx-stl-mil group">
-											<div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
-												<i class="sys-icon sun"></i>
-											</div>
-											<div class="bx-menu-item-title bx-menu-floating-blocks-title bx-stl-mit whitespace-nowrap"><bx_text:_bx_artificer_txt_color_scheme_light /></div>
-										</a>
-									</li>
-									<li class="bx-menu-item bx-menu-item-groups-home  rounded-md bx-def-color-bg-hl-hover">
-										<a href="javascript:" onclick="bx_artificer_set_color_scheme(2)" onclick="" class="bx-stl-mil group">
-											<div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
-												<i class="sys-icon moon"></i>
-											</div>
-											<div class="bx-menu-item-title bx-menu-floating-blocks-title bx-stl-mit whitespace-nowrap"><bx_text:_bx_artificer_txt_color_scheme_dark /></div>
-										</a>
-									</li>
-									<li class="bx-menu-item bx-menu-item-files-home  rounded-md bx-def-color-bg-hl-hover" >
-										<a href="javascript:" onclick="bx_artificer_set_color_scheme(0)" onclick="" class="bx-stl-mil group">
-											<div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
-												<i class="sys-icon desktop"></i>
-											</div>
-											<div class="bx-menu-item-title bx-menu-floating-blocks-title bx-stl-mit whitespace-nowrap"><bx_text:_bx_artificer_txt_color_scheme_system /></div>
-										</a>
-									</li>
-								</ul>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
         </div>
         <hr class="bx-def-hr" />
         <div class="bx-sb-menu flex-1 my-2">__menu_notifications__</div>

+ 4 - 0
modules/boonex/artificer/install/langs/en.xml

@@ -9,6 +9,10 @@
     <string name="_bx_artificer_stg_cpt_option_switcher_name"><![CDATA[Name in Template Switcher]]></string>	
     <string name="_bx_artificer_stg_cpt_option_page_width"><![CDATA[Page Width]]></string>
     <string name="_bx_artificer_stg_cpt_option_header_stretched"><![CDATA[Stretched Header]]></string>
+    <string name="_bx_artificer_stg_cpt_option_color_scheme"><![CDATA[Color Scheme]]></string>
+    <string name="_bx_artificer_stg_cpt_option_color_scheme_auto"><![CDATA[Auto with switcher]]></string>
+    <string name="_bx_artificer_stg_cpt_option_color_scheme_light_only"><![CDATA[Light mode only]]></string>
+    <string name="_bx_artificer_stg_cpt_option_color_scheme_dark_only"><![CDATA[Dark mode only]]></string>
 
     <string name="_bx_artificer_stg_cpt_category_styles_custom"><![CDATA[Custom Styles]]></string>
     <string name="_bx_artificer_stg_cpt_option_styles_custom"><![CDATA[Custom Styles]]></string>

+ 2 - 1
modules/boonex/artificer/install/sql/install.sql

@@ -14,7 +14,8 @@ SET @iCategoryId = LAST_INSERT_ID();
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
 (@iCategoryId, CONCAT(@sName, '_switcher_title'), '_bx_artificer_stg_cpt_option_switcher_name', 'Artificer', 'digit', '', '', '', 1), 
 (@iCategoryId, CONCAT(@sName, '_page_width'), '_bx_artificer_stg_cpt_option_page_width', '1280', 'digit', '', '', '', 2),
-(@iCategoryId, CONCAT(@sName, '_header_stretched'), '_bx_artificer_stg_cpt_option_header_stretched', '', 'checkbox', '', '', '', 3);
+(@iCategoryId, CONCAT(@sName, '_header_stretched'), '_bx_artificer_stg_cpt_option_header_stretched', '', 'checkbox', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_color_scheme'), '_bx_artificer_stg_cpt_option_color_scheme', 'auto', 'select', 'a:2:{s:6:"module";s:12:"bx_artificer";s:6:"method";s:24:"get_options_color_scheme";}', '', '', 4);
 
 -- SETTINGS: Artificer template Custom Styles
 INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 

+ 65 - 32
modules/boonex/artificer/js/utils.js

@@ -1,47 +1,82 @@
-//for custom JS
-$(document).ready(function() {
-    bx_artificer_set_color_scheme_icon();
-});
+function BxArtificerUtils(oOptions)
+{
+    this._sActionUri = oOptions.sActionUri;
+    this._sActionUrl = oOptions.sActionUrl;
+    this._sObject = oOptions.sObject;
+    this._aHtmlIds = undefined == oOptions.aHtmlIds ? {} : oOptions.aHtmlIds;  
+    this._sColorScheme = undefined == oOptions.sColorScheme ? 'auto' : oOptions.sColorScheme;
 
-function bx_artificer_set_color_scheme_html(){
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) 
-        $('html').addClass('dark')
-    else
-        $('html').removeClass('dark')
+    this.init();
 }
 
-function bx_artificer_set_color_scheme_icon(){
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-        $('.bx-sb-theme-switcher .sys-icon').addClass('moon').removeClass('sun');
-    }
+BxArtificerUtils.prototype.init = function()
+{
+    var $this = this;
 
-    if (localStorage.theme === 'sun' || (!('theme' in localStorage) && !window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-        $('.bx-sb-theme-switcher .sys-icon').addClass('sun').removeClass('moon');
-    }
-}
+    switch(this._sColorScheme) {
+        case 'auto':
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                $this.setColorSchemeIcon();
+                $this.setColorSchemeHtml();
+            });
+            break;
+
+        case 'light_only':
+            this.setColorScheme(1);
+            break;
 
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-    bx_artificer_set_color_scheme_icon();
-    bx_artificer_set_color_scheme_html();
-});
+        case 'dark_only':
+            this.setColorScheme(2);
+            break;
+    }    
 
-function bx_artificer_set_color_scheme(m){
-    switch (m) {
+    this.setColorSchemeHtml();
+
+    $(document).ready(function() {
+        $this.setColorSchemeIcon();
+    });
+};
+
+BxArtificerUtils.prototype.setColorScheme = function(iCode)
+{
+    switch(iCode) {
       case 0:
         localStorage.removeItem('theme');
         break;
+
       case 1:
         localStorage.theme = 'sun'
         break;
+
       case 2:
         localStorage.theme = 'dark'
         break;
     }
-    bx_artificer_set_color_scheme_icon();
-    bx_artificer_set_color_scheme_html();
-}
 
-function bx_artificer_get_color_scheme_menu(){
+    this.setColorSchemeIcon();
+    this.setColorSchemeHtml();
+};
+
+BxArtificerUtils.prototype.setColorSchemeHtml = function()
+{
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) 
+        $('html').addClass('dark')
+    else
+        $('html').removeClass('dark')
+};
+
+BxArtificerUtils.prototype.setColorSchemeIcon = function() 
+{
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        $('.bx-sb-theme-switcher .sys-icon').addClass('moon').removeClass('sun');
+    }
+
+    if (localStorage.theme === 'sun' || (!('theme' in localStorage) && !window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        $('.bx-sb-theme-switcher .sys-icon').addClass('sun').removeClass('moon');
+    }
+};
+
+BxArtificerUtils.prototype.getColorSchemeMenu = function() {
     $('#bx-sb-theme-switcher-menu').dolPopup({
         pointer: {
             el: $('.bx-sb-theme-switcher')
@@ -49,9 +84,9 @@ function bx_artificer_get_color_scheme_menu(){
         moveToDocRoot: true,
         cssClass: 'bx-popup-menu'
     });
-}
+};
 
-function bx_artificer_add_content_panel(sMenu, e, sPosition) {
+BxArtificerUtils.prototype.getAddContentMenu = function(sMenu, e, sPosition) {
     $('.bx-popup-applied:visible').dolPopupHide();
 
     var sSidebar = 'account';
@@ -59,6 +94,4 @@ function bx_artificer_add_content_panel(sMenu, e, sPosition) {
         bx_sidebar_toggle(sSidebar);
 
     bx_menu_popup_inline(sMenu, e, {});
-}
-
-bx_artificer_set_color_scheme_html();
+};