Add Color Transform feature in Color Mode

templaza · Aug 16, 2024 · b5e24fa · b5e24fa
1 parent 9878568
commit b5e24fa
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 35 deletions.
diff --git a/framework/frontend/colormode.php b/framework/frontend/colormode.php
@@ -12,5 +12,11 @@
 defined('_JEXEC') or die;
 extract($displayData);
 $template   = Astroid\Framework::getTemplate();
+$params = $template->getParams();
 $color_mode = $template->getColorMode();
-echo '<div class="d-flex align-items-center astroid-color-mode"><div class="form-check form-switch"><input class="form-check-input switcher" type="checkbox" aria-label="Color Mode" role="switch"'.($color_mode == 'dark' ? ' checked' : '').'></div></div>';
+if ($color_mode) {
+    $enable_color_mode_transform    =   $params->get('enable_color_mode_transform', 0);
+    if (!$enable_color_mode_transform) {
+        echo '<div class="d-flex align-items-center astroid-color-mode"><div class="form-check form-switch"><input class="form-check-input switcher" type="checkbox" aria-label="Color Mode" role="switch"'.($color_mode == 'dark' ? ' checked' : '').'></div></div>';
+    }
+}
diff --git a/framework/library/astroid/Helper/Head.php b/framework/library/astroid/Helper/Head.php
@@ -77,7 +77,22 @@ public static function scripts()
         }
         $color_mode = $template->getColorMode();
         if ($color_mode) {
-            $wa->addInlineScript('var TEMPLATE_HASH = "'. md5($template->template).'", ASTROID_COLOR_MODE ="'.$color_mode.'";');
+            $enable_color_mode_transform    =   $params->get('enable_color_mode_transform', 0);
+            if ($enable_color_mode_transform) {
+                $colormode_transform_type               =   $params->get('colormode_transform_type', 'light_dark');
+                $astroid_colormode_transform_offset     =   $params->get('astroid_colormode_transform_offset', 50);
+                if ($colormode_transform_type === 'light_dark') {
+                    $from   =   'light';
+                    $to     =   'dark';
+                } else {
+                    $from   =   'dark';
+                    $to     =   'light';
+                }
+                $wa->registerAndUseScript('astroid.colortransform', 'astroid/colortransform.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']);
+                $wa->addInlineScript('var ASTROID_COLOR_TRANSFORM = {from:"'.$from.'", to:"'.$to.'", offset:'.$astroid_colormode_transform_offset.'};');
+            } else {
+                $wa->addInlineScript('var TEMPLATE_HASH = "'. md5($template->template).'", ASTROID_COLOR_MODE ="'.$color_mode.'";');
+            }
         }
     }
 

diff --git a/framework/library/astroid/Template.php b/framework/library/astroid/Template.php
@@ -387,9 +387,15 @@ public function getColorMode() {
 
         $color_mode_theme = '';
         if ($plg_color_mode && $color_mode) {
-            $app               =   Factory::getApplication();
-            $client_color      =   $app->input->get('color_mode', '', 'ALNUM');
-            $color_mode_theme  =   !empty($client_color) ? $client_color : $app->input->cookie->get('astroid-color-mode-'.md5($this->template), $color_mode_default);
+            $enable_color_mode_transform    =   $this->params->get('enable_color_mode_transform', 0);
+            if ($enable_color_mode_transform) {
+                $colormode_transform_type   =   $this->params->get('colormode_transform_type', 'light_dark');
+                $color_mode_theme           =   $colormode_transform_type === 'light_dark' ? 'light' : 'dark';
+            } else {
+                $app               =   Factory::getApplication();
+                $client_color      =   $app->input->get('color_mode', '', 'ALNUM');
+                $color_mode_theme  =   !empty($client_color) ? $client_color : $app->input->cookie->get('astroid-color-mode-'.md5($this->template), $color_mode_default);
+            }
         }
         return $color_mode_theme;
     }

diff --git a/framework/options/basic.xml b/framework/options/basic.xml
@@ -144,17 +144,24 @@
          </field>
 
          <field astroidgroup="colormode" description="TPL_ASTROID_BASIC_ENABLE_COLOR_MODE_DESC" name="astroid_color_mode_enable" type="astroidradio" astroid-switch="true" default="1" label="TPL_ASTROID_BASIC_ENABLE_COLOR_MODE_LABEL" />
-         <field astroidgroup="colormode" ngShow="[astroid_color_mode_enable]=='1'" description="TPL_ASTROID_BASIC_COLOR_MODE_DEFAULT_DESC" name="astroid_color_mode_default" type="astroidradio" default="auto" label="TPL_ASTROID_BASIC_COLOR_MODE_DEFAULT_LABEL">
+         <field astroidgroup="colormode" ngShow="[astroid_color_mode_enable]=='1'" description="TPL_ASTROID_BASIC_ENABLE_COLOR_MODE_TRANSFORM_DESC" name="enable_color_mode_transform" type="astroidradio" astroid-switch="true" default="0" label="TPL_ASTROID_BASIC_ENABLE_COLOR_MODE_TRANSFORM_LABEL" />
+         <field astroidgroup="colormode" ngShow="[astroid_color_mode_enable]=='1' AND [enable_color_mode_transform]==0" description="TPL_ASTROID_BASIC_COLOR_MODE_DEFAULT_DESC" name="astroid_color_mode_default" type="astroidradio" default="auto" label="TPL_ASTROID_BASIC_COLOR_MODE_DEFAULT_LABEL">
             <option value="auto">TPL_ASTROID_BASIC_COLOR_MODE_OPTION_AUTO</option>
             <option value="light">TPL_ASTROID_BASIC_COLOR_MODE_OPTION_LIGHT</option>
             <option value="dark">TPL_ASTROID_BASIC_COLOR_MODE_OPTION_DARK</option>
          </field>
-         <field astroidgroup="colormode" name="colormode_module_position" type="astroidmodulesposition" default="position-1" astroid-content-layout="colormode" label="TPL_ASTROID_MODULE_POSITION_LABEL" description="TPL_ASTROID_MODULE_POSITION_DESC" class="form-select" ngShow="[astroid_color_mode_enable]=='1'"/>
-         <field astroidgroup="colormode" name="colormode_module_load_position" type="astroidlist" label="TPL_ASTROID_FEATURE_LOAD_POSITION_LABEL" description="TPL_ASTROID_FEATURE_LOAD_POSITION_DESC" class="form-control" astroid-content-layout-load="colormode_module_position" default="after" ngShow="[astroid_color_mode_enable]=='1'">
+         <field astroidgroup="colormode" name="colormode_module_position" type="astroidmodulesposition" default="position-1" astroid-content-layout="colormode" label="TPL_ASTROID_MODULE_POSITION_LABEL" description="TPL_ASTROID_MODULE_POSITION_DESC" class="form-select" ngShow="[astroid_color_mode_enable]=='1' AND [enable_color_mode_transform]==0"/>
+         <field astroidgroup="colormode" name="colormode_module_load_position" type="astroidlist" label="TPL_ASTROID_FEATURE_LOAD_POSITION_LABEL" description="TPL_ASTROID_FEATURE_LOAD_POSITION_DESC" class="form-control" astroid-content-layout-load="colormode_module_position" default="after" ngShow="[astroid_color_mode_enable]=='1' AND [enable_color_mode_transform]==0">
             <option value="after">TPL_ASTROID_AFTER_MODULE</option>
             <option value="before">TPL_ASTROID_BEFORE_MODULE</option>
          </field>
 
+         <field astroidgroup="colormode" name="colormode_transform_type" type="astroidlist" label="TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_TYPE_LABEL" description="TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_TYPE_DESC" default="light_dark" ngShow="[astroid_color_mode_enable]=='1' AND [enable_color_mode_transform]==1">
+            <option value="light_dark">TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_TYPE_LIGHT_DARK_LABEL</option>
+            <option value="dark_light">TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_TYPE_DARK_LIGHT_LABEL</option>
+         </field>
+         <field astroidgroup="colormode" ngShow="[astroid_color_mode_enable]==1 AND [enable_color_mode_transform]==1" name="astroid_colormode_transform_offset" type="astroidrange" min="1" max="100" step="1" default="50" label="TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_OFFSET_LABEL" description="TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_OFFSET_DESC" postfix="%" />
+
          <field astroidgroup="smooth_scroll" description="TPL_SMOOTH_SCROLL_ENABLE_DESC" name="enable_smooth_scroll" type="astroidradio" astroid-switch="true" default="0" label="TPL_SMOOTH_SCROLL_ENABLE_LBL"/>
          <field ngShow="[enable_smooth_scroll]=='1'" astroidgroup="smooth_scroll" name="smooth_scroll_speed" type="astroidrange" astroid-scss-variable="spinkit-size" min="1" max="10000" step="1" default="300" label="TPL_SMOOTH_SCROLL_SPEED_LBL" description="TPL_SMOOTH_SCROLL_SPEED_DESC" postfix="ms" />
       </fieldset>

diff --git a/js/colortransform.js b/js/colortransform.js
@@ -0,0 +1,15 @@
+(function ($) {
+    window.addEventListener("load", (event) => {
+        window.onscroll = function(ev) {
+            if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight * (ASTROID_COLOR_TRANSFORM.offset/100)) {
+                if ($('html').attr('data-bs-theme') === ASTROID_COLOR_TRANSFORM.from) {
+                    $('html').attr('data-bs-theme', ASTROID_COLOR_TRANSFORM.to);
+                }
+            } else {
+                if ($('html').attr('data-bs-theme') === ASTROID_COLOR_TRANSFORM.to) {
+                    $('html').attr('data-bs-theme', ASTROID_COLOR_TRANSFORM.from);
+                }
+            }
+        };
+    });
+}(jQuery));
diff --git a/js/colortransform.min.js b/js/colortransform.min.js
diff --git a/js/script.js b/js/script.js
@@ -337,30 +337,4 @@
    $(window).on('resize', winResize);
    $(window).on('scroll', winScroll);
    window.addEventListener("orientationchange", winResize);
-})(jQuery);
-
-/* 
- * Add missing Mootools when Bootstrap is loaded
- * This fix creates dummy implementations for the missing Mootools functions.
- * It requires that you have jQuery loaded and if you are dealing with Mootools + jQuery is a good idea to add the call just before this javascript code.
- * This issue shouldn't affect Bootstrap 3 templates but the fix explained here should be compatible with both.
- */
-(function ($) {
-   $(document).ready(function () {
-      var bootstrapLoaded = (typeof $().tooltip == 'function');
-      var mootoolsLoaded = (typeof MooTools != 'undefined');
-      if (bootstrapLoaded && mootoolsLoaded) {
-         Element.implement({
-            hide: function () {
-               return this;
-            },
-            show: function (v) {
-               return this;
-            },
-            slide: function (v) {
-               return this;
-            }
-         });
-      }
-   });
 })(jQuery);
diff --git a/js/script.min.js b/js/script.min.js
diff --git a/language/en-GB/en-GB.astroid.ini b/language/en-GB/en-GB.astroid.ini
@@ -210,6 +210,14 @@ TPL_ASTROID_OPEN_GRAPH_TITLE_LABEL="Open Graph"
 TPL_ASTROID_PAGE_SETTING_MAIN_TITLE_LABEL="Page Settings"
 TPL_ASTROID_BASIC_ENABLE_COLOR_MODE_LABEL="Color Mode"
 ASTROID_BASIC_ENABLE_COLOR_MODE_DESC="Enable or disable the color mode."
+TPL_ASTROID_BASIC_ENABLE_COLOR_MODE_TRANSFORM_LABEL="Enable Color Transform"
+TPL_ASTROID_BASIC_ENABLE_COLOR_MODE_TRANSFORM_DESC="Change color from light to dark or vice versa"
+TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_TYPE_LABEL="Transform Type"
+TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_TYPE_DESC="Change color from light to dark or vice versa. Choose one of these types"
+TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_TYPE_LIGHT_DARK_LABEL="Light to Dark"
+TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_TYPE_DARK_LIGHT_LABEL="Dark to Light"
+TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_OFFSET_LABEL="Transform Offset"
+TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_OFFSET_DESC="Vertical page offset triggers color to switch"
 TPL_ASTROID_BASIC_ENABLE_WIDGETS_LABEL="Enable Widgets"
 TPL_ASTROID_BASIC_ENABLE_WIDGETS_DESC="Enable or disable the Widgets"
 TPL_ASTROID_BASIC_REMOVE_GENERATOR_LABEL="Remove Generator"