Skip to content

Commit

Permalink
Ticket #4040 - Artificer: Allow to enable only one color scheme.
Browse files Browse the repository at this point in the history
  • Loading branch information
AntonLV committed Sep 7, 2022
1 parent 4a08013 commit e852db5
Show file tree
Hide file tree
Showing 9 changed files with 147 additions and 74 deletions.
15 changes: 13 additions & 2 deletions modules/boonex/artificer/classes/BxArtificerConfig.php
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,14 @@ function __construct($aModule)
{
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;

Expand All @@ -44,8 +52,11 @@ function __construct($aModule)
$this->_aThumbSizeByTemplate = [
'unit_with_cover.html' => 'h-24 w-24' //--- 'ava' size
];


}

public function getColorScheme()
{
return getParam('bx_artificer_color_scheme');
}

public function getLogoParams()
Expand Down
11 changes: 11 additions & 0 deletions modules/boonex/artificer/classes/BxArtificerModule.php
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,17 @@ public function serviceIncludeCssJs($sType)
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 = '';
Expand Down
3 changes: 3 additions & 0 deletions modules/boonex/artificer/classes/BxArtificerTemplate.php
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ public function getIncludeCssJs($sType)
$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))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,13 @@

class BxTemplFunctions extends BxBaseFunctions
{
protected $_sModule;

public function __construct($oTemplate = null)
{
parent::__construct($oTemplate);

$this->_sModule = 'bx_artificer';
}

function getMainLogo($aParams = array())
Expand Down Expand Up @@ -200,6 +204,10 @@ protected function getInjFooterSidebarAccount()
$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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ protected function _getMenuItem ($a)
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;
}

Expand Down
78 changes: 40 additions & 38 deletions modules/boonex/artificer/data/template/system/sidebar_account.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions modules/boonex/artificer/install/langs/en.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion modules/boonex/artificer/install/sql/install.sql
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
97 changes: 65 additions & 32 deletions modules/boonex/artificer/js/utils.js
Original file line number Diff line number Diff line change
@@ -1,64 +1,97 @@
//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')
},
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';
if(bx_sidebar_active(sSidebar))
bx_sidebar_toggle(sSidebar);

bx_menu_popup_inline(sMenu, e, {});
}

bx_artificer_set_color_scheme_html();
};

0 comments on commit e852db5

Please sign in to comment.