Ticket #2096 - Possibility to change editor's skin from a mix. Usage in Froala.

inc/classes/BxDolEditor.php

@@ -65,6 +65,9 @@ class BxDolEditor extends BxDolFactory implements iBxDolFactoryObject
     protected $_sButtonsCustom = false;
     protected $_sPluginsCustom = false;
 
+    protected $_sSkin;
+    protected $_aSkins;
+
     /**
      * Constructor
      * @param $aObject array of editor options
@@ -75,6 +78,9 @@ class BxDolEditor extends BxDolFactory implements iBxDolFactoryObject
 
         $this->_sObject = $aObject['object'];
         $this->_aObject = $aObject;
+        
+        $this->_sSkin = !empty($aObject['skin']) ? $aObject['skin']: '';
+        $this->_aSkins = array();
     }
 
     /**
@@ -146,6 +152,29 @@ class BxDolEditor extends BxDolFactory implements iBxDolFactoryObject
         // override this function in particular editor class
     }
 
+    /**
+     * Get a list of available skins.
+     */
+    public function getSkins($bFullInfo = false)
+    {
+        if($bFullInfo)
+            return $this->_aSkins;
+
+        $aResults = array();
+        foreach($this->_aSkins as $aSkin)
+            $aResults[] = array('key' => $aSkin['name'], 'value' => _t($aSkin['title']));
+
+        return $aResults;
+    }
+
+    public function setSkin($sSkin)
+    {
+        if(!in_array($sSkin, array_keys($this->_aSkins)))
+            return;
+
+        $this->_sSkin = $sSkin;
+    }
+
     /**
      * Attach editor to HTML element, in most cases - textarea.
      * @param $sSelector - jQuery selector to attach editor to.

modules/boonex/froala/classes/BxFroalaEditor.php

@@ -96,8 +96,14 @@ EOS;
             $this->_oTemplate = $oTemplate;
         else
             $this->_oTemplate = BxDolTemplate::getInstance();
+
+        $this->_aSkins = array(
+            'dark' => array('name' => 'dark', 'title' => '_bx_froala_txt_skin_dark'),
+            'gray' => array('name' => 'gray', 'title' => '_bx_froala_txt_skin_gray'),
+            'royal' => array('name' => 'royal', 'title' => '_bx_froala_txt_skin_royal')
+        );
     }
-    
+
     /**
      * Attach editor to HTML element, in most cases - textarea.
      * @param $sSelector - jQuery selector to attach editor to.
@@ -142,7 +148,7 @@ EOS;
             'bx_var_custom_conf' => $this->_sConfCustom,
             'bx_var_plugins_path' => bx_js_string(BX_DOL_URL_PLUGINS_PUBLIC, BX_ESCAPE_STR_APOS),
             'bx_var_css_path' => bx_js_string($aCss['url'], BX_ESCAPE_STR_APOS),
-            'bx_var_skin' => bx_js_string($this->_aObject['skin'], BX_ESCAPE_STR_APOS),
+            'bx_var_skin' => bx_js_string($this->_sSkin, BX_ESCAPE_STR_APOS),
             'bx_var_lang' => bx_js_string($sLang, BX_ESCAPE_STR_APOS),
             'bx_var_selector' => bx_js_string($sSelector, BX_ESCAPE_STR_APOS),
             'bx_url_root' => bx_js_string(BX_DOL_URL_ROOT, BX_ESCAPE_STR_APOS),
@@ -226,7 +232,7 @@ EOS;
             BX_DIRECTORY_PATH_MODULES . 'boonex/froala/template/css/|editor.css',
             BX_DIRECTORY_PATH_MODULES . 'boonex/froala/plugins/froala/css/|froala_editor.pkgd.min.css', 
             BX_DIRECTORY_PATH_MODULES . 'boonex/froala/plugins/froala/css/|froala_style.min.css',
-            BX_DIRECTORY_PATH_MODULES . 'boonex/froala/plugins/froala/css/themes/|' . $this->_aObject['skin'] . '.min.css',
+            BX_DIRECTORY_PATH_MODULES . 'boonex/froala/plugins/froala/css/themes/|' . $this->_sSkin . '.min.css',
         );
 
         $aPlugins = $this->_getPlugins(true);

modules/boonex/froala/install/langs/en.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources name="en" flag="gb" title="English">
-	<string name="_sys_module_froala"><![CDATA[Froala]]></string>
-	<string name="_bx_froala"><![CDATA[Froala]]></string>
+    <string name="_sys_module_froala"><![CDATA[Froala]]></string>
+    <string name="_bx_froala"><![CDATA[Froala]]></string>
 
-	<string name="_bx_froala_setting"><![CDATA[Froala Setting]]></string>
+    <string name="_bx_froala_setting"><![CDATA[Froala Setting]]></string>
     <string name="_bx_froala_adm_stg_cpt_type"><![CDATA[Froala]]></string>
     <string name="_bx_froala_adm_stg_cpt_category_general"><![CDATA[General]]></string>
     <string name="_bx_froala_option_plugins"><![CDATA[Plugins]]></string>
@@ -11,7 +11,11 @@
     <string name="_bx_froala_option_toolbar_standard"><![CDATA[Toolbar buttons for standard editor]]></string>
     <string name="_bx_froala_option_toolbar_full"><![CDATA[Toolbar buttons for full editor]]></string>
 
-	<string name="_bx_froala_information"><![CDATA[Information]]></string>
+    <string name="_bx_froala_txt_skin_dark"><![CDATA[Dark]]></string>
+    <string name="_bx_froala_txt_skin_gray"><![CDATA[Gray]]></string>
+    <string name="_bx_froala_txt_skin_royal"><![CDATA[Royal]]></string>
+
+    <string name="_bx_froala_information"><![CDATA[Information]]></string>
     <string name="_bx_froala_information_block"><![CDATA[This is <a target="_blank" href="https://www.froala.com/wysiwyg-editor">Froala editor</a> integration.<br />
         <a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/plugins">List of plugins</a><br />
         <a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons">List of buttons</a>]]></string>

modules/boonex/protean/classes/BxProteanModule.php

@@ -18,7 +18,26 @@ class BxProteanModule extends BxBaseModTemplateModule
         parent::__construct($aModule);
     }
 
-	function serviceIncludeCssJs()
+    public function serviceGetOptionsFormInputEditorSkin()
+    {
+        $aResultError = array(
+            array('key' => '', 'value' => _t('_bx_protean_stg_cpt_option_form_input_editor_skin_unavailable'))
+        );
+
+        $oEditor = BxDolEditor::getObjectInstance();
+        if(!$oEditor)
+            return $aResultError;
+
+        $aSkins = $oEditor->getSkins();
+        if(empty($aSkins) || !is_array($aSkins))
+            return $aResultError;
+
+        return array_merge(array(
+            array('key' => '', 'value' => _t('_bx_protean_stg_cpt_option_form_input_editor_skin_select'))
+        ), $aSkins);
+    }
+
+    function serviceIncludeCssJs()
     {
         if(BxDolTemplate::getInstance()->getCode() != $this->_oConfig->getUri())
             return '';

modules/boonex/protean/data/template/system/scripts/BxTemplConfig.php

@@ -348,8 +348,11 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-viewport-font-tablet'] = $this->_setValue($sName . '_vpt_font_size_scale', '100%');
         $this->_aConfig['aLessConfig']['bx-viewport-font-mobile'] = $this->_setValue($sName . '_vpm_font_size_scale', '85%');
 
-        if($this->_isModule)
+        if($this->_isModule) {
             $this->setPageWidth('bx_protean_page_width');
+
+            BxDolEditor::getObjectInstance()->setSkin($this->_setValue($sName . '_form_input_editor_skin', ''));
+        }
     }
 }
 

modules/boonex/protean/install/langs/en.xml

@@ -214,6 +214,9 @@
 	<string name="_bx_protean_stg_cpt_option_form_input_font_family"><![CDATA[Input font stack]]></string>
 	<string name="_bx_protean_stg_cpt_option_form_input_font_size"><![CDATA[Input font size]]></string>
 	<string name="_bx_protean_stg_cpt_option_form_input_font_color"><![CDATA[Input font color]]></string>
+        <string name="_bx_protean_stg_cpt_option_form_input_editor_skin"><![CDATA[Editor skin]]></string>
+        <string name="_bx_protean_stg_cpt_option_form_input_editor_skin_select"><![CDATA[Select skin...]]></string>
+        <string name="_bx_protean_stg_cpt_option_form_input_editor_skin_unavailable"><![CDATA[Skins are unavailable]]></string>
 
 	<string name="_bx_protean_stg_cpt_category_styles_large_button"><![CDATA[Large Buttons]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_height"><![CDATA[Height]]></string>

modules/boonex/protean/install/sql/install.sql

@@ -297,7 +297,8 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 (@iCategoryId, CONCAT(@sName, '_form_input_shadow'), '_bx_protean_stg_cpt_option_form_input_shadow', 'inset 0px 0px 2px 1px rgba(0,0,0,0.15)', 'digit', '', '', '', 7),
 (@iCategoryId, CONCAT(@sName, '_form_input_font_family'), '_bx_protean_stg_cpt_option_form_input_font_family', 'Arial, sans-serif', 'digit', '', '', '', 8),
 (@iCategoryId, CONCAT(@sName, '_form_input_font_size'), '_bx_protean_stg_cpt_option_form_input_font_size', '1rem', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_form_input_font_color'), '_bx_protean_stg_cpt_option_form_input_font_color', 'rgba(20, 30, 40, 1)', 'rgba', '', '', '', 10);
+(@iCategoryId, CONCAT(@sName, '_form_input_font_color'), '_bx_protean_stg_cpt_option_form_input_font_color', 'rgba(20, 30, 40, 1)', 'rgba', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_form_input_editor_skin'), '_bx_protean_stg_cpt_option_form_input_editor_skin', '', 'select', 'a:2:{s:6:"module";s:10:"bx_protean";s:6:"method";s:34:"get_options_form_input_editor_skin";}', '', '', 11);
 
 
 -- SETTINGS: Protean template Styles Large Buttons
@@ -770,6 +771,7 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_form_input_font_size', @iMixId, '1rem'),
 ('bx_protean_form_input_height', @iMixId, '2.5rem'),
 ('bx_protean_form_input_shadow', @iMixId, 'inset 0px 0px 2px 1px rgba(0,0,0,0.15);'),
+('bx_protean_form_input_editor_skin', @iMixId, 'gray'),
 ('bx_protean_general_item_bg_color_active', @iMixId, 'rgba(243, 244, 245, 1)'),
 ('bx_protean_general_item_bg_color_disabled', @iMixId, 'rgba(233, 234, 235, 1)'),
 ('bx_protean_general_item_bg_color_hover', @iMixId, 'rgba(243, 244, 245, 0.8)'),
@@ -1022,6 +1024,7 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_form_input_font_size', @iMixId, '1rem'),
 ('bx_protean_form_input_height', @iMixId, '2.5rem'),
 ('bx_protean_form_input_shadow', @iMixId, 'none'),
+('bx_protean_form_input_editor_skin', @iMixId, 'dark'),
 ('bx_protean_general_item_bg_color_active', @iMixId, 'rgba(34, 51, 68, 1)'),
 ('bx_protean_general_item_bg_color_disabled', @iMixId, 'rgba(233, 234, 235, 1)'),
 ('bx_protean_general_item_bg_color_hover', @iMixId, 'rgba(51, 68, 85, 1)'),

modules/boonex/russian/data/langs/bx_froala/ru.xml

@@ -1,18 +1,22 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources name="ru" flag="ru" title="Russian">
-	<string name="_sys_module_froala"><![CDATA[Froala]]></string>
-	<string name="_bx_froala"><![CDATA[Froala]]></string>
-	
-	<string name="_bx_froala_setting"><![CDATA[Настройки Froala]]></string>
-	<string name="_bx_froala_adm_stg_cpt_type"><![CDATA[Froala]]></string>
-	<string name="_bx_froala_adm_stg_cpt_category_general"><![CDATA[Основные]]></string>
-	<string name="_bx_froala_option_plugins"><![CDATA[Плагины]]></string>
-	<string name="_bx_froala_option_toolbar_mini"><![CDATA[Кнопки панели инструментов для мини-редактора]]></string>
-	<string name="_bx_froala_option_toolbar_standard"><![CDATA[Кнопки панели инструментов для стандартного редактора]]></string>
-	<string name="_bx_froala_option_toolbar_full"><![CDATA[Кнопки панели инструментов для полного редактора]]></string>
-	
-	<string name="_bx_froala_information"><![CDATA[Информация]]></string>
-	<string name="_bx_froala_information_block"><![CDATA[Это интеграция<a target="_blank" href="https://www.froala.com/wysiwyg-editor">редактора Froala</a>.<br />
+    <string name="_sys_module_froala"><![CDATA[Froala]]></string>
+    <string name="_bx_froala"><![CDATA[Froala]]></string>
+
+    <string name="_bx_froala_setting"><![CDATA[Настройки Froala]]></string>
+    <string name="_bx_froala_adm_stg_cpt_type"><![CDATA[Froala]]></string>
+    <string name="_bx_froala_adm_stg_cpt_category_general"><![CDATA[Основные]]></string>
+    <string name="_bx_froala_option_plugins"><![CDATA[Плагины]]></string>
+    <string name="_bx_froala_option_toolbar_mini"><![CDATA[Кнопки панели инструментов для мини-редактора]]></string>
+    <string name="_bx_froala_option_toolbar_standard"><![CDATA[Кнопки панели инструментов для стандартного редактора]]></string>
+    <string name="_bx_froala_option_toolbar_full"><![CDATA[Кнопки панели инструментов для полного редактора]]></string>
+
+    <string name="_bx_froala_txt_skin_dark"><![CDATA[Темная]]></string>
+    <string name="_bx_froala_txt_skin_gray"><![CDATA[Серая]]></string>
+    <string name="_bx_froala_txt_skin_royal"><![CDATA[Королевская]]></string>
+
+    <string name="_bx_froala_information"><![CDATA[Информация]]></string>
+    <string name="_bx_froala_information_block"><![CDATA[Это интеграция<a target="_blank" href="https://www.froala.com/wysiwyg-editor">редактора Froala</a>.<br />
 	<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/plugins">Список плагинов</a><br />
 	<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons">Список кнопок</a>]]></string>
 </resources>

modules/boonex/russian/data/langs/bx_protean/ru.xml

@@ -214,6 +214,9 @@
 	<string name="_bx_protean_stg_cpt_option_form_input_font_family"><![CDATA[Набор шрифтов поля]]></string>
 	<string name="_bx_protean_stg_cpt_option_form_input_font_size"><![CDATA[Размер шрифта поля]]></string>
 	<string name="_bx_protean_stg_cpt_option_form_input_font_color"><![CDATA[Цвет шрифта поля]]></string>
+        <string name="_bx_protean_stg_cpt_option_form_input_editor_skin"><![CDATA[Тема редактора]]></string>
+        <string name="_bx_protean_stg_cpt_option_form_input_editor_skin_select"><![CDATA[Выбрать тему...]]></string>
+        <string name="_bx_protean_stg_cpt_option_form_input_editor_skin_unavailable"><![CDATA[Темы не доступны]]></string>
 
 	<string name="_bx_protean_stg_cpt_category_styles_large_button"><![CDATA[Большие кнопки]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_height"><![CDATA[Высота]]></string>