[TikiWiki-commits] [Git][tikiwiki/tiki][master] [REM][REF] PluginImg: remove jQuery Reflection plugin and implement...

luci pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
95b2fe68 by ushindi bienvenu at 2025-08-18T09:58:52+00:00
[REM][REF] PluginImg: remove jQuery Reflection plugin and implement customizable image reflection CSS-based feature
---
* [REF] Implement customizable image reflection css-based feature

* [REF] Implement customizable image reflection css-based feature

* [REF] Implement customizable image reflection css-based feature

* [REF] Implement customizable image reflection css-based feature

See merge request tikiwiki/tiki!7561

- - - - -


8 changed files:

- installer/tiki-installer.php
- lib/jquery_tiki/tiki-jquery.js
- lib/prefs/feature.php
- lib/setup/javascript.php
- lib/wiki-plugins/wikiplugin_img.php
- templates/admin/include_features.tpl
- templates/wizard/changes_ui.tpl
- tiki-setup.php


Changes:

=====================================
installer/tiki-installer.php
=====================================
@@ -809,7 +809,6 @@ var jqueryTiki = new Object();
 jqueryTiki.ui = false;
 jqueryTiki.ui_theme = "";
 jqueryTiki.tooltips = false;
-jqueryTiki.reflection = false;
 jqueryTiki.tablesorter = false;
 jqueryTiki.colorbox = false;
 jqueryTiki.carousel = false;


=====================================
lib/jquery_tiki/tiki-jquery.js
=====================================
@@ -648,11 +648,6 @@ $.tikiPopoverWhereToPlace = function (pop, el) {
 $(function() { // JQuery's DOM is ready event - before onload
     if (!window.jqueryTiki) window.jqueryTiki = {};
 
-    // Reflections
-    if (jqueryTiki.reflection) {
-        $("img.reflect").reflect({});
-    }
-
     if (jqueryTiki.tooltips) {
         $(document).tiki_popover();
     }


=====================================
lib/prefs/feature.php
=====================================
@@ -1873,13 +1873,6 @@ function prefs_feature_list($partial = false)
             'type' => 'flag',
             'default' => 'n',
         ],
-        'feature_jquery_reflection' => [
-            'name' => tra('Reflection'),
-            'description' => tra('Creates a reflection under an image. Used in Plugin Img with the parameter "class=reflect"'),
-            'type' => 'flag',
-            'help' => 'JQuery#Reflection',
-            'default' => 'n',       // reflection effects on images
-        ],
         'feature_jquery_ui' => [
             'name' => tra('JQuery UI'),
             'description' => tra('Include jQuery UI library. Enables a number of interface features.'),


=====================================
lib/setup/javascript.php
=====================================
@@ -172,7 +172,6 @@ $jqueryTiki['tooltips'] = true;
 $jqueryTiki['smartmenus'] = $prefs['jquery_smartmenus_enable'] === 'y' ? true : false;
 $jqueryTiki['smartmenus_collapsible_behavior'] = $prefs['jquery_smartmenus_collapsible_behavior'];
 $jqueryTiki['smartmenus_open_close_click'] = $prefs['jquery_smartmenus_open_close_click'] === 'y' ? true : false;
-$jqueryTiki['reflection'] = $prefs['feature_jquery_reflection'] === 'y' ? true : false;
 $jqueryTiki['tablesorter'] = $prefs['feature_jquery_tablesorter'] === 'y' ? true : false;
 $jqueryTiki['colorbox'] = $prefs['feature_shadowbox'] === 'y';
 $jqueryTiki['sheet'] = $prefs['feature_sheet'] === 'y' ? true : false;


=====================================
lib/wiki-plugins/wikiplugin_img.php
=====================================
@@ -1083,7 +1083,7 @@ function wikiplugin_img($data, $params)
             }
             if (
                 (! empty($imgdata['max']) && $imgdata['thumb'] != 'download')
-                    && (empty($urlthumb) && empty($urlmax[0]) && empty($urlprev))
+                && (empty($urlthumb) && empty($urlmax[0]) && empty($urlprev))
             ) {
                 $src .= '&max=' . $imgdata['max'];
                 $imgdata_dim .= ' width="' . $width . '"';
@@ -1290,8 +1290,9 @@ function wikiplugin_img($data, $params)
         $replimg .= ' usemap="#' . $imgdata['usemap'] . '"';
     }
     //class
-    if (! empty($imgdata['class'])) {
-        $replimg .= ' class="' . $imgdata['class'] . '"';
+    [$imageClassList, $reflectClassList] = filterImgClassList($imgdata['class']);
+    if (! empty($imageClassList)) {
+        $replimg .= ' class="' . $imageClassList . '"';
     }
     //data-src
     if (! empty($imgdata['data-src'])) {
@@ -1355,6 +1356,7 @@ function wikiplugin_img($data, $params)
         $replimg .= '>' . $repldata . '</' . $tagName . '>';
     }
 
+    $replimg = applyReflectIfExists($replimg, $src, $reflectClassList);
 
     ////////////////////////////////////////// Create the HTML link ///////////////////////////////////////////
     //Variable for identifying if javascript mouseover is set
@@ -1736,3 +1738,106 @@ function buildLinkRelAttribute(array $imgdata): string
 
     return '';
 }
+
+function filterImgClassList($classList)
+{
+    $reflectClassList = '';
+    $imageClassList = '';
+    // get all the class that doesn't start with reflect
+    foreach (explode(' ', $classList) as $class) {
+        if (str_starts_with($class, 'reflect')) {
+            $reflectClassList .= $class . ' ';
+        } else {
+            $imageClassList .= $class . ' ';
+        }
+    }
+    return [$imageClassList, $reflectClassList];
+}
+
+function applyReflectIfExists($html, $src, $classList)
+{
+    global $base_url, $headerlib;
+    $classes = explode(' ', $classList);
+    // Check if "reflect" exists as a standalone word
+    if (in_array('reflect', $classes)) {
+        $headerlib->add_jq_onready(<<<JS
+            function setReflectHeight(\$img) {
+                const height = \$img.height();
+                \$img.closest('.reflect-container').css('--reflect-height', height + 'px');
+            }
+            // select all images inside reflect-container
+            $('.reflect-container > img').each(function() {
+                const \$img = $(this);
+                // if image already loaded (cached), apply immediately
+                if (this.complete) {
+                    setReflectHeight(\$img);
+                } else {
+                    // attach load handler
+                    //.off('load.reflect') → ensures we don’t attach multiple handlers accidentally.
+                    \$img.off('load.reflect').on('load.reflect', function() {
+                        setReflectHeight(\$img);
+                    });
+                }
+            });
+            
+            // recalc on window resize
+            $(window).on('resize', function() {
+                $('.reflect-container img').each(function() {
+                    setReflectHeight($(this));
+                });
+            });
+JS);
+        $headerlib->add_css(<<<CSS
+                .reflect-container {
+                    --reflect-height: 200px;
+                    --reflect-opacity: 0.5;
+                    --reflect-fade-point: 80%;
+                    --reflect-gap: 0px;
+                    position: relative;
+                    display: inline-block;
+                    margin-bottom: calc((var(--reflect-height) + var(--reflect-gap)));
+                }
+                
+                .reflect-container > img {
+                    display: block;
+                    margin-bottom: var(--reflect-gap);
+                }
+                
+                .reflect-container::after {
+                    content: "";
+                    position: absolute;
+                    width: 100%;
+                    height: var(--reflect-height);
+                    background-image: var(--reflect-src);
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    background-position: bottom;
+                    transform: scaleY(-1);
+                    mask-image: linear-gradient(to top, rgba(0, 0, 0, var(--reflect-opacity)) 0%, rgba(0, 0, 0, 0.0) var(--reflect-fade-point));
+                    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, var(--reflect-opacity)) 0%, rgba(0, 0, 0, 0.0) var(--reflect-fade-point));
+                }
+CSS);
+        if (! str_starts_with($src, 'http:') && ! str_starts_with($src, 'https:')) {
+            $src = $base_url . $src;
+        }
+        $styles = "--reflect-src: url('" . htmlspecialchars($src) . "');";
+        // Match all words starting with "reflect-"
+        foreach ($classes as $class) {
+            if (str_starts_with($class, 'reflect-')) {
+                if (str_starts_with($class, 'reflect-opacity-')) {
+                    $opacity = substr($class, strlen('reflect-opacity-')) / 100;
+                    $styles .= " --reflect-opacity: " . number_format($opacity, 2) . ";";
+                } elseif (str_starts_with($class, 'reflect-height-')) {
+                    $height = substr($class, strlen('reflect-height-')) . "px";
+                    $styles .= " --reflect-height: " . $height . ";";
+                } elseif (str_starts_with($class, 'reflect-gap-')) {
+                    $gap = substr($class, strlen('reflect-gap-')) . "px";
+                    $styles .= " --reflect-gap: " . $gap . ";";
+                }
+            }
+        }
+        $html = '<div class="reflect-container" style="' . $styles . '">' . $html . '</div>';
+    }
+
+    return $html;
+}


=====================================
templates/admin/include_features.tpl
=====================================
@@ -192,7 +192,6 @@
             </fieldset>
             <fieldset class="mb-3 w-100 clearfix featurelist">
                 <legend class="h3"><h4 class="showhide_heading" id="jQuery_plugins_and_add-ons"> {tr}jQuery plugins and add-ons{/tr}  <a href="#jQuery_plugins_and_add" class="heading-link" aria-label="{tr}jQuery {/tr}">{icon name="link"}</a></h4></legend>
-                {preference name=feature_jquery_reflection}
                 <div class="adminoptionbox">
                     {preference name=jquery_smartmenus_enable}
                     <div class="adminoptionboxchild" id="jquery_smartmenus_enable_childcontainer">


=====================================
templates/wizard/changes_ui.tpl
=====================================
@@ -45,7 +45,6 @@
         </fieldset>
         <fieldset class="mb-3 w-100 clearfix featurelist">
             <legend> {tr}jQuery plugins and add-ons{/tr} </legend>
-            {preference name=feature_jquery_reflection}
             {preference name=feature_jquery_zoom}
             {preference name=feature_jquery_carousel} {icon name='warning' alt="{tr}Experimental{/tr}" ititle="{tr}Experimental{/tr}"}
             {preference name=feature_jquery_tablesorter} {icon name='warning' alt="{tr}Experimental{/tr}" ititle="{tr}Experimental{/tr}"}


=====================================
tiki-setup.php
=====================================
@@ -629,9 +629,7 @@ if ($prefs['jquery_smartmenus_enable'] == 'y') {
         }
     ');
 }
-if ($prefs['feature_jquery_reflection'] == 'y') {
-    $headerlib->add_jsfile('vendor_bundled/vendor/jquery-plugins/reflection-jquery/js/reflection.js');
-}
+
 if ($prefs['feature_jquery_tablesorter'] == 'y') {
     $headerlib->add_jsfile(NODE_PUBLIC_DIST_PATH . '/tablesorter/dist/js/jquery.tablesorter.combined.js');
     $headerlib->add_jsfile(NODE_PUBLIC_DIST_PATH . '/tablesorter/dist/js/parsers/parser-input-select.min.js');



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/95b2fe68e75b5bb5c9155216734d6833675f299c

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/95b2fe68e75b5bb5c9155216734d6833675f299c
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs