Update liqglass.js

Added Svg Filters / 2 new filters

Author: kkmfd-Offical

src/liqglass.js

@@ -2,9 +2,7 @@
  * LiqGlass - Beautiful Glass Morphism Library
  * A comprehensive JavaScript library for creating stunning glass effects
  * 
- * @version 1.0.0
- * @author LiqGlass Library
- * @license MIT
+ * @version 1.2.0
  */
 
 (function (global, factory) {
@@ -36,6 +34,8 @@
    * @property {boolean} [hoverEffect=false] - Enable hover effects
    * @property {string} [element='div'] - HTML element type to create
    * @property {string} [className=''] - CSS class name to apply
+   * @property {string} [svgFilter] - SVG filter markup to inject
+   * @property {string} [svgFilterId] - ID of the SVG filter to apply
    */
 
   /**
@@ -62,6 +62,8 @@
       this.colorPresets = new Map();
       this.generatedStyles = new Set();
       this.styleElement = null;
+      this.svgFilters = new Map();
+      this.elementFilterMap = new WeakMap();
 
       this.initializeDefaultPresets();
       this.initializeColorPresets();
@@ -150,6 +152,34 @@
         gradientFrom: 'rgba(255,255,255,0.3)',
         gradientTo: 'rgba(255,255,255,0.1)'
       });
+
+      this.presets.set('refraction', {
+        blur: 10,
+        opacity: 0.08,
+        borderRadius: 20,
+        borderWidth: 1,
+        borderOpacity: 0.15,
+        shadowIntensity: 'medium',
+        gradient: true,
+        gradientFrom: 'rgba(255,255,255,0.15)',
+        gradientTo: 'rgba(255,255,255,0.05)',
+        svgFilter: '<svg style="display: none"><filter id="lg-dist" x="0%" y="0%" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.008 0.008" numOctaves="2" seed="92" result="noise" /><feGaussianBlur in="noise" stdDeviation="2" result="blurred" /><feDisplacementMap in="SourceGraphic" in2="blurred" scale="70" xChannelSelector="R" yChannelSelector="G" /></filter></svg>',
+        svgFilterId: 'lg-dist'
+      });
+
+      this.presets.set('distortion', {
+        blur: 8,
+        opacity: 0.12,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderOpacity: 0.2,
+        shadowIntensity: 'heavy',
+        gradient: true,
+        gradientFrom: 'rgba(255,255,255,0.2)',
+        gradientTo: 'rgba(255,255,255,0.08)',
+        svgFilter: '<svg style="display: none"><filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox"><feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence" /><feComponentTransfer in="turbulence" result="mapped"><feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" /><feFuncG type="gamma" amplitude="0" exponent="1" offset="0" /><feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" /></feComponentTransfer><feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" /><feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight"><fePointLight x="-200" y="-200" z="300" /></feSpecularLighting><feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" /><feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G" /></filter></svg>',
+        svgFilterId: 'glass-distortion'
+      });
     }
 
     /**
@@ -278,6 +308,11 @@
 
       Object.assign(element.style, styles);
 
+      // Handle SVG filters
+      if (config.svgFilter && config.svgFilterId) {
+        this.applySVGFilter(element, config.svgFilter, config.svgFilterId);
+      }
+      
       // Add base class
       element.classList.add('liqglass-base');
 
@@ -291,6 +326,102 @@
       }
     }
 
+    /**
+     * Apply SVG filter to an element
+     * @param {HTMLElement} element - Target element
+     * @param {string} svgFilter - SVG filter markup
+     * @param {string} filterId - Filter ID
+     * @private
+     */
+    applySVGFilter(element, svgFilter, filterId) {
+      if (typeof document === 'undefined') return;
+
+      // Check if filter already exists
+      if (!this.svgFilters.has(filterId)) {
+        // Create SVG element
+        const svgContainer = document.createElement('div');
+        svgContainer.innerHTML = svgFilter;
+        const svgElement = svgContainer.firstElementChild;
+        
+        if (svgElement) {
+          document.body.appendChild(svgElement);
+          this.svgFilters.set(filterId, svgElement);
+        }
+      }
+
+      // Track element for cleanup
+      this.elementFilterMap.set(element, filterId);
+
+      // Set up cleanup observer
+      this.setupElementCleanup(element, filterId);
+    }
+
+    /**
+     * Setup cleanup observer for element removal
+     * @param {HTMLElement} element - Element to observe
+     * @param {string} filterId - Filter ID
+     * @private
+     */
+    setupElementCleanup(element, filterId) {
+      if (typeof window === 'undefined' || !window.MutationObserver) return;
+
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (mutation.type === 'childList') {
+            for (const removedNode of Array.from(mutation.removedNodes)) {
+              if (removedNode === element || (removedNode.contains && removedNode.contains(element))) {
+                this.cleanupSVGFilter(filterId);
+                observer.disconnect();
+                return;
+              }
+            }
+          }
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+
+    /**
+     * Cleanup SVG filter when no longer needed
+     * @param {string} filterId - Filter ID
+     * @private
+     */
+    cleanupSVGFilter(filterId) {
+      const svgElement = this.svgFilters.get(filterId);
+      if (svgElement && svgElement.parentNode) {
+        // Check if any other elements are using this filter
+        const elementsWithFilter = document.querySelectorAll(`[style*="url(#${filterId})"]`);
+        if (elementsWithFilter.length === 0) {
+          svgElement.parentNode.removeChild(svgElement);
+          this.svgFilters.delete(filterId);
+        }
+      }
+    }
+
+    /**
+     * Remove SVG filter from an element
+     * @param {HTMLElement} element - Element to remove filter from
+     */
+    removeSVGFilter(element) {
+      const filterId = this.elementFilterMap.get(element);
+      if (filterId) {
+        // Remove filter style
+        if (element.style.filter) {
+          element.style.filter = element.style.filter.replace(`url(#${filterId})`, '').trim();
+          if (!element.style.filter) {
+            element.style.removeProperty('filter');
+          }
+        }
+        
+        this.elementFilterMap.delete(element);
+        this.cleanupSVGFilter(filterId);
+      }
+    }
+
     /**
      * Generate inline styles for a glass configuration
      * @param {GlassConfig} [config={}] - Glass configuration options
@@ -307,6 +438,7 @@
         gradient = false,
         gradientFrom = 'rgba(255,255,255,0.1)',
         gradientTo = 'rgba(255,255,255,0.05)',
+        svgFilterId
       } = config;
 
       const shadowMap = {
@@ -316,7 +448,7 @@
         heavy: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
       };
 
-      return {
+      const styles = {
         backdropFilter: `blur(${blur}px)`,
         WebkitBackdropFilter: `blur(${blur}px)`,
         background: gradient 
@@ -328,6 +460,13 @@
         position: 'relative',
         overflow: 'hidden',
       };
+
+      // Add SVG filter if specified
+      if (svgFilterId) {
+        styles.filter = `url(#${svgFilterId})`;
+      }
+
+      return styles;
     }
 
     /**
@@ -505,6 +644,16 @@ ${cssProperties}
                 <h3>Colored Glass</h3>
                 <p>Beautiful gradients with color presets.</p>
             </div>
+
+            <div class="liqglass-base liqglass-refraction liqglass-card liqglass-animated liqglass-hover">
+                <h3>Refraction Glass</h3>
+                <p>Advanced glass with refraction effects.</p>
+            </div>
+
+            <div class="liqglass-base liqglass-distortion liqglass-card liqglass-animated liqglass-hover">
+                <h3>Distortion Glass</h3>
+                <p>Complex distortion with lighting effects.</p>
+            </div>
         </div>
     </div>
 
@@ -513,22 +662,28 @@ ${cssProperties}
         const liqGlass = new LiqGlass();
         console.log('LiqGlass v' + liqGlass.getVersion() + ' initialized');
 
-        // Example: Create a dynamic glass element
-        const dynamicGlass = liqGlass.createGlassElement({
-            blur: 18,
-            opacity: 0.2,
-            borderRadius: 25,
-            gradient: true,
-            gradientFrom: 'rgba(147, 51, 234, 0.3)',
-            gradientTo: 'rgba(79, 70, 229, 0.1)',
+        // Example: Create dynamic glass elements with new presets
+        const refractionGlass = liqGlass.createGlassElement({
+            ...liqGlass.getPreset('refraction'),
+            className: 'liqglass-card',
             animated: true,
-            hoverEffect: true,
-            className: 'liqglass-card'
+            hoverEffect: true
         });
+        refractionGlass.innerHTML = '<h3>Dynamic Refraction</h3><p>Created with JavaScript!</p>';
+        refractionGlass.style.marginTop = '2rem';
 
-        dynamicGlass.innerHTML = '<h3>Dynamic Glass</h3><p>Created with JavaScript!</p>';
-        dynamicGlass.style.marginTop = '2rem';
-        document.querySelector('.container').appendChild(dynamicGlass);
+        const distortionGlass = liqGlass.createGlassElement({
+            ...liqGlass.getPreset('distortion'),
+            className: 'liqglass-card',
+            animated: true,
+            hoverEffect: true
+        });
+        distortionGlass.innerHTML = '<h3>Dynamic Distortion</h3><p>Complex SVG filters in action!</p>';
+        distortionGlass.style.marginTop = '1rem';
+
+        const container = document.querySelector('.container');
+        container.appendChild(refractionGlass);
+        container.appendChild(distortionGlass);
     </script>
 </body>
 </html>`;
@@ -564,9 +719,18 @@ ${cssProperties}
         document.head.removeChild(this.styleElement);
         this.styleElement = null;
       }
+
+      // Clean up all SVG filters
+      for (const [filterId, svgElement] of this.svgFilters) {
+        if (svgElement.parentNode) {
+          svgElement.parentNode.removeChild(svgElement);
+        }
+      }
+
       this.presets.clear();
       this.colorPresets.clear();
       this.generatedStyles.clear();
+      this.svgFilters.clear();
     }
   }
 
@@ -604,21 +768,25 @@ ${cssProperties}
  *   borderRadius: 20
  * });
  * 
- * // Using singleton
- * const glassSingleton = LiqGlass.getInstance();
- * glassSingleton.applyGlassStyles(document.getElementById('myDiv'), {
- *   preset: 'frosted'
+ * // Using new SVG filter presets
+ * const refractionElement = glass.createGlassElement({
+ *   ...glass.getPreset('refraction'),
+ *   className: 'my-refraction-glass'
  * });
  * 
- * // Generate CSS
- * const css = glass.generateVanillaCSS();
+ * const distortionElement = glass.createGlassElement({
+ *   ...glass.getPreset('distortion'),
+ *   className: 'my-distortion-glass'
+ * });
  * 
- * // Create custom presets
- * glass.addPreset('custom', {
- *   blur: 25,
- *   opacity: 0.3,
- *   gradient: true,
- *   gradientFrom: 'rgba(255, 0, 0, 0.2)',
- *   gradientTo: 'rgba(255, 100, 100, 0.1)'
+ * // Custom SVG filter
+ * const customElement = glass.createGlassElement({
+ *   blur: 10,
+ *   opacity: 0.15,
+ *   svgFilter: '<svg style="display: none"><filter id="custom-filter">...</filter></svg>',
+ *   svgFilterId: 'custom-filter'
  * });
+ * 
+ * // Remove SVG filter when needed
+ * glass.removeSVGFilter(customElement);
  */