Update version to 1.4.0

CHANGELOG.md

@@ -50,4 +50,12 @@
 - Updated the ripple effect to apply the willChange property, enabling GPU acceleration.
 
 # 1.3.30
-- Fixed an issue where the ripple effect now recalculates the layout when the target element's size changes, preventing problems during dynamic size changes.
+- Fixed an issue where the ripple effect now recalculates the layout when the target element's size changes, preventing problems during dynamic size changes.
+
+# 1.4.0
+- Fixed an issue where the element would not be disposed when it was either display: none or its layout calculations were disabled, preventing further animations from being executed.
+
+- Added `--ripple-min-blur-radius` and `--ripple-max-blur-radius` custom properties to control the minimum and maximum blur radius of the touch ripple effect in percentage-based environments.
+
+- - --ripple-min-blur-radius: The minimum blur effect radius in pixels for the touch ripple effect. Default is 0px.
+- - --ripple-max-blur-radius: The maximum blur effect radius in pixels for the touch ripple effect. Default is 30px.

README.md

@@ -5,7 +5,7 @@
         <thead>
           <tr>
             <th>Version</th>
-            <th>v1.3.30</th>
+            <th>v1.4.0</th>
           </tr>
         </tbody>
     </table>
@@ -145,7 +145,9 @@ export function TestPage() {
 | --ripple-fadeout-curve | This is curve for fade-out animation of ripples. | default of browser
 | --ripple-cancel-duration | This is curve for fade-out animation of ripples when cancels. | 0s
 | --ripple-cancel-curve | This is curve for fade-out animation of ripples when cancels. | default of browser
-| --ripple-blur-radius | The blur effect radius pixels or percent of touch ripple effect. | 6%
+| --ripple-blur-radius | The blur effect radius pixels or percent of touch ripple effect. | 5%
+| --ripple-min-blur-radius | The blur effect radius minimum pixels of touch ripple effect in percentage-based environments. | 0px
+| --ripple-max-blur-radius | The blur effect radius maximum pixels of touch ripple effect in percentage-based environments. | 30px
 | --ripple-lower-scale | The ripple scale of start point. | 0.3
 | --ripple-upper-scale | The ripple scale of end point. | 1
 | --ripple-tap-preview-duration | The rejectable duration about tap event. | 0.15s

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-touch-ripple",
-  "version": "1.3.30",
+  "version": "1.4.0",
   "description": "This package provides visual representation of the pointer event to users.",
   "repository": "https://github.com/MTtankkeo/web_touch_ripple",
   "bugs": "https://github.com/MTtankkeo/web_touch_ripple/issues",

src/components/touch_ripple_effect.ts

@@ -103,8 +103,8 @@ export class TouchRippleEffectElement extends HTMLElement {
         const targetStyle = getComputedStyle(target);
         const targetRect = DOMRectUtil.intrinsicOf(target, targetStyle);
         const targetSize = {
-            width:  targetRect.width, // intrinsic size
-            height: targetRect.height // intrinsic size
+            width: targetRect.width,
+            height: targetRect.height
         };
         const targetShiftLeft = parseFloat(targetStyle.marginLeft);
         const targetShiftTop = parseFloat(targetStyle.marginTop);
@@ -115,14 +115,20 @@ export class TouchRippleEffectElement extends HTMLElement {
         const centerY = targetSize.height / 2;
 
         const getBlurRadius = function() {
-            var blurRadius = parent.getPropertyByName("--ripple-blur-radius") || "6%";
+            const blurRadius = parent.getPropertyByName("--ripple-blur-radius") || "5%";
             if (blurRadius.endsWith("%")) {
+                const minBlurRadius = Number.parseFloat(parent.getPropertyByName("--ripple-min-blur-radius") || "0px");
+                const maxBlurRadius = Number.parseFloat(parent.getPropertyByName("--ripple-max-blur-radius") || "30px");
                 const percent = Number(blurRadius.replace("%", "")) / 100;
                 const pixcels = targetMax * percent;
-                return Number(pixcels);
+
+                if (pixcels > maxBlurRadius) return maxBlurRadius;
+                if (pixcels < minBlurRadius) return minBlurRadius;
+
+                return pixcels;
             }
 
-            return Number(blurRadius.replace("px", ""));
+            return Number.parseFloat(blurRadius);
         }
 
         const getRippleSize = function(blurRadius: number) {
@@ -181,7 +187,14 @@ export class TouchRippleEffectElement extends HTMLElement {
         // See also, size changes of the target element should be observed starting in
         // the next frame after the initial layout by calling `requestAnimationFrame`.
         requestAnimationFrame(() => {
-            this._resizeObserver = new ResizeObserver(() => {
+            this._resizeObserver = new ResizeObserver(entries => {
+                // Disposes the target element when it is display none or when layout is not active.
+                if (entries.length != 0
+                 && entries[0].contentRect.width == 0
+                 && entries[0].contentRect.height == 0) {
+                    this.dispose();
+                }
+
                 if (this._markNeedsLayout == false) {
                     this._markNeedsLayout = true;
                     return;