chameleon-backgrounds 2.0.0 → 2.0.1

package/README.md

@@ -24,10 +24,17 @@ Large background images slow down initial page loads. ChameleonBackgrounds **def
 
 ## Installation
 
-### npm
+### Package Managers (npm / yarn / bun)
 
 ```bash
+# npm
 npm install chameleon-backgrounds
+
+# yarn
+yarn add chameleon-backgrounds
+
+# bun
+bun add chameleon-backgrounds
 ```
 
 ### CDN / Script Tag

package/dist/chameleon-backgrounds.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see chameleon-backgrounds.min.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ChameleonBackgrounds=t():e.ChameleonBackgrounds=t()}(this,()=>(()=>{"use strict";const e={d:(t,n)=>{if(Array.isArray(n))for(var o=0;o<n.length;){var r=n[o++],i=n[o++];e.o(t,r)?0===i&&o++:0===i?Object.defineProperty(t,r,{enumerable:!0,value:n[o++]}):Object.defineProperty(t,r,{enumerable:!0,get:i})}else for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};let t={};class n{static#e=Object.freeze({element:"body",type:"single",src:"",overlayColor:"#0f1e25",overlayImage:null,minOverlay:0,transitionDuration:2e3,sliderDuration:8e3,sliderLoop:!1});static#t=Object.freeze({transition_duration:"transitionDuration",slider_duration:"sliderDuration",slider_loop:"sliderLoop",min_overlay:"minOverlay",overlay_color:"overlayColor",overlay_image:"overlayImage"});#n;#o;#r;#i;#s=null;#l=null;#a=!1;constructor(e={}){const t=n.#d(e);this.#n={...n.#e,...t},this.#r=n.#c(),this.#o=n.#h(this.#n.element),this.#i=this.#o.innerHTML,this.#u()}destroy(){this.#a||(this.#a=!0,null!==this.#l&&(clearInterval(this.#l),this.#l=null),this.#s?.parentNode&&(this.#s.parentNode.removeChild(this.#s),this.#s=null),this.#o.innerHTML=this.#i,this.#o.style.backgroundImage="")}get options(){return{...this.#n}}#u(){this.#m(),this.#y(),this.#o.matches("body")?queueMicrotask(()=>this.#p()):"complete"===document.readyState?this.#p():window.addEventListener("load",()=>this.#p(),{once:!0})}#m(){const e=this.#r,t="body"===this.#n.element||this.#o.matches("body")?"body":this.#n.element,n=this.#n.transitionDuration/1e3,o=`\n      ${"string"==typeof t?t:`.cbg-host-${e}`} {\n        position: relative;\n      }\n\n      #cbg-inner-${e} {\n        z-index: 2;\n        position: relative;\n      }\n\n      .cbg-loader-${e} {\n        height: 100%;\n        width: 100%;\n        position: ${this.#o.matches("body")?"fixed":"absolute"};\n        background-image: ${this.#n.overlayImage?`url(${this.#n.overlayImage})`:"none"};\n        background-color: ${this.#n.overlayColor};\n        opacity: 1;\n        z-index: 1;\n        transition: opacity ${n}s ease;\n        top: 0;\n        left: 0;\n      }\n    `,r=document.createElement("style");r.dataset.chameleonUid=e,r.textContent=o,document.head.appendChild(r),this.#s=r}#y(){const e=this.#r,t=this.#o.innerHTML,n=document.createElement("div");n.id=`cbg-inner-${e}`,n.innerHTML=t;const o=document.createElement("div");o.classList.add(`cbg-loader-${e}`),this.#o.innerHTML="",this.#o.appendChild(n),this.#o.appendChild(o)}#p(){this.#a||("single"===this.#n.type?this.#g("string"==typeof this.#n.src?this.#n.src:this.#n.src[0]):"slider"===this.#n.type&&this.#f())}#g(e,t=!0){return this.#a?Promise.resolve():new Promise(t=>{const n=new Image;n.onload=()=>{if(this.#a)return t();this.#o.style.backgroundImage=`url(${e})`,this.#o.style.backgroundSize="cover";const n=this.#o.querySelector(`.cbg-loader-${this.#r}`);n&&(n.style.opacity=String(this.#n.minOverlay)),t()},n.onerror=()=>{console.warn(`[ChameleonBackgrounds] Failed to load image: ${e}`),t()},n.src=e})}reloadBackground(e){if(this.#a)return Promise.resolve();const t=this.#o.querySelector(`.cbg-loader-${this.#r}`);return t&&(t.style.opacity="1"),new Promise(t=>{setTimeout(()=>{if(this.#a)return t();this.#g(e,!1).then(t)},this.#n.transitionDuration)})}#f(){if(this.#a)return;const e=this.#n.src;if(!Array.isArray(e)||0===e.length)return void console.warn("[ChameleonBackgrounds] Slider mode requires an array of image URLs in `src`.");let t=0;this.#g(e[t]).then(()=>{if(this.#a)return;if(t=1,1===e.length)return;const n=this.#n.sliderDuration+2*this.#n.transitionDuration;this.#l=setInterval(()=>{this.#a?clearInterval(this.#l):(this.reloadBackground(e[t]),t++,t>=e.length&&(this.#n.sliderLoop?t=0:(clearInterval(this.#l),this.#l=null)))},n)})}static#d(e){const t={};for(const[o,r]of Object.entries(e))t[n.#t[o]??o]=r;return t}static#h(e){if(e instanceof HTMLElement)return e;if("string"==typeof e){if("body"===e)return document.body;const t=document.querySelector(e);if(!t)throw new Error(`[ChameleonBackgrounds] Element not found: ${e}`);return t}throw new TypeError(`[ChameleonBackgrounds] Invalid element: ${e}`)}static#c(){return"undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID().slice(0,8):Array.from({length:8},()=>"abcdefghijklmnopqrstuvwxyz0123456789".charAt(Math.floor(36*Math.random()))).join("")}}const o=n;return e.d(t,["default",0,o]),t=t.default,t})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ChameleonBackgrounds=t():e.ChameleonBackgrounds=t()}(this,()=>(()=>{"use strict";const e={d:(t,n)=>{if(Array.isArray(n))for(var o=0;o<n.length;){var r=n[o++],i=n[o++];e.o(t,r)?0===i&&o++:0===i?Object.defineProperty(t,r,{enumerable:!0,value:n[o++]}):Object.defineProperty(t,r,{enumerable:!0,get:i})}else for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};let t={};class n{static#e=Object.freeze({element:"body",type:"single",src:"",overlayColor:"#0f1e25",overlayImage:null,minOverlay:0,transitionDuration:2e3,sliderDuration:8e3,sliderLoop:!1});static#t=Object.freeze({transition_duration:"transitionDuration",slider_duration:"sliderDuration",slider_loop:"sliderLoop",min_overlay:"minOverlay",overlay_color:"overlayColor",overlay_image:"overlayImage"});#n;#o;#r;#i;#s=null;#l=null;#a=!1;constructor(e={}){const t=n.#d(e);this.#n={...n.#e,...t},this.#r=n.#c(),this.#o=n.#h(this.#n.element),this.#i=this.#o.innerHTML,this.#u()}destroy(){if(this.#a)return;this.#a=!0,null!==this.#l&&(clearInterval(this.#l),this.#l=null),this.#s?.parentNode&&(this.#s.parentNode.removeChild(this.#s),this.#s=null);const e=this.#o.querySelector(`#cbg-inner-${this.#r}`);if(e&&e.parentNode===this.#o){for(;e.firstChild;)this.#o.insertBefore(e.firstChild,e);this.#o.removeChild(e)}const t=this.#o.querySelector(`.cbg-loader-${this.#r}`);t&&t.remove(),this.#o.style.backgroundImage=""}get options(){return{...this.#n}}#u(){this.#m(),this.#y(),this.#o.matches("body")?queueMicrotask(()=>this.#p()):"complete"===document.readyState?this.#p():window.addEventListener("load",()=>this.#p(),{once:!0})}#m(){const e=this.#r,t="body"===this.#n.element||this.#o.matches("body")?"body":this.#n.element,n=this.#n.transitionDuration/1e3,o=`\n      ${"string"==typeof t?t:`.cbg-host-${e}`} {\n        position: relative;\n      }\n\n      #cbg-inner-${e} {\n        z-index: 2;\n        position: relative;\n      }\n\n      .cbg-loader-${e} {\n        height: 100%;\n        width: 100%;\n        position: ${this.#o.matches("body")?"fixed":"absolute"};\n        background-image: ${this.#n.overlayImage?`url(${this.#n.overlayImage})`:"none"};\n        background-color: ${this.#n.overlayColor};\n        opacity: 1;\n        z-index: 1;\n        transition: opacity ${n}s ease;\n        top: 0;\n        left: 0;\n      }\n    `,r=document.createElement("style");r.dataset.chameleonUid=e,r.textContent=o,document.head.appendChild(r),this.#s=r}#y(){const e=this.#r,t=document.createElement("div");for(t.id=`cbg-inner-${e}`;this.#o.firstChild;)t.appendChild(this.#o.firstChild);const n=document.createElement("div");n.classList.add(`cbg-loader-${e}`),this.#o.appendChild(t),this.#o.appendChild(n)}#p(){this.#a||("single"===this.#n.type?this.#g("string"==typeof this.#n.src?this.#n.src:this.#n.src[0]):"slider"===this.#n.type&&this.#f())}#g(e,t=!0){return this.#a?Promise.resolve():new Promise(t=>{const n=new Image;n.onload=()=>{if(this.#a)return t();this.#o.style.backgroundImage=`url(${e})`,this.#o.style.backgroundSize="cover";const n=this.#o.querySelector(`.cbg-loader-${this.#r}`);n&&(n.style.opacity=String(this.#n.minOverlay)),t()},n.onerror=()=>{console.warn(`[ChameleonBackgrounds] Failed to load image: ${e}`),t()},n.src=e})}reloadBackground(e){if(this.#a)return Promise.resolve();const t=this.#o.querySelector(`.cbg-loader-${this.#r}`);return t&&(t.style.opacity="1"),new Promise(t=>{setTimeout(()=>{if(this.#a)return t();this.#g(e,!1).then(t)},this.#n.transitionDuration)})}#f(){if(this.#a)return;const e=this.#n.src;if(!Array.isArray(e)||0===e.length)return void console.warn("[ChameleonBackgrounds] Slider mode requires an array of image URLs in `src`.");let t=0;this.#g(e[t]).then(()=>{if(this.#a)return;if(t=1,1===e.length)return;const n=this.#n.sliderDuration+2*this.#n.transitionDuration;this.#l=setInterval(()=>{this.#a?clearInterval(this.#l):(this.reloadBackground(e[t]),t++,t>=e.length&&(this.#n.sliderLoop?t=0:(clearInterval(this.#l),this.#l=null)))},n)})}static#d(e){const t={};for(const[o,r]of Object.entries(e))t[n.#t[o]??o]=r;return t}static#h(e){if(e instanceof HTMLElement)return e;if("string"==typeof e){if("body"===e)return document.body;const t=document.querySelector(e);if(!t)throw new Error(`[ChameleonBackgrounds] Element not found: ${e}`);return t}throw new TypeError(`[ChameleonBackgrounds] Invalid element: ${e}`)}static#c(){return"undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID().slice(0,8):Array.from({length:8},()=>"abcdefghijklmnopqrstuvwxyz0123456789".charAt(Math.floor(36*Math.random()))).join("")}}const o=n;return e.d(t,["default",0,o]),t=t.default,t})());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chameleon-backgrounds",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A zero-dependency JavaScript library to dynamically load background images with elegant fade-in transitions and slideshow support.",
   "type": "module",
   "main": "dist/chameleon-backgrounds.js",

package/src/chameleon-backgrounds.js

@@ -119,8 +119,22 @@ class ChameleonBackgrounds {
       this.#styleElement = null;
     }
 
-    // Restore original HTML and remove inline background-image
-    this.#element.innerHTML = this.#originalHTML;
+    // Unwrap the original content instead of resetting innerHTML
+    const wrapper = this.#element.querySelector(`#cbg-inner-${this.#uid}`);
+    if (wrapper && wrapper.parentNode === this.#element) {
+      while (wrapper.firstChild) {
+        this.#element.insertBefore(wrapper.firstChild, wrapper);
+      }
+      this.#element.removeChild(wrapper);
+    }
+
+    // Remove loader
+    const loader = this.#element.querySelector(`.cbg-loader-${this.#uid}`);
+    if (loader) {
+      loader.remove();
+    }
+
+    // Remove inline background-image
     this.#element.style.backgroundImage = '';
   }
 
@@ -209,17 +223,19 @@ class ChameleonBackgrounds {
    */
   #buildDOM() {
     const uid = this.#uid;
-    const content = this.#element.innerHTML;
 
     const wrapper = document.createElement('div');
     wrapper.id = `cbg-inner-${uid}`;
-    wrapper.innerHTML = content;
+
+    // Move all child nodes from the element into the wrapper
+    while (this.#element.firstChild) {
+      wrapper.appendChild(this.#element.firstChild);
+    }
 
     const loader = document.createElement('div');
     loader.classList.add(`cbg-loader-${uid}`);
 
-    // Replace element contents
-    this.#element.innerHTML = '';
+    // Append wrapper and loader
     this.#element.appendChild(wrapper);
     this.#element.appendChild(loader);
   }