chameleon-backgrounds 2.0.0 → 2.1.0

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
@@ -150,6 +157,23 @@ Stops any running slider, removes all injected DOM and styles, and restores the
 
 Returns a read-only copy of the resolved options.
 
+### `.reloadOptions(newOptions)`
+
+Update options on the fly without destroying the instance. For example, you can change the transition duration or even convert a single background into a slider dynamically:
+```javascript
+bg.reloadOptions({
+  type: 'slider',
+  src: [
+    './img/slide1.jpg',
+    './img/slide2.jpg'
+  ],
+  transitionDuration: 5000,
+  overlayColor: '#ff0000'
+});
+// To apply the updated options, simply reload the background
+bg.reloadBackground();
+```
+
 ---
 
 ## Migration from v1

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,i)=>{if(Array.isArray(i))for(var n=0;n<i.length;){var o=i[n++],r=i[n++];e.o(t,o)?0===r&&n++:0===r?Object.defineProperty(t,o,{enumerable:!0,value:i[n++]}):Object.defineProperty(t,o,{enumerable:!0,get:r})}else for(var o in i)e.o(i,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:i[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};let t={};class i{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"});#i;#n;#o;#r;#s=null;#l=null;#d=!1;constructor(e={}){const t=i.#a(e);this.#i={...i.#e,...t},this.#o=i.#h(),this.#n=i.#c(this.#i.element),this.#r=this.#n.innerHTML,this.#u()}destroy(){if(this.#d)return;this.#d=!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.#n.querySelector(`#cbg-inner-${this.#o}`);if(e&&e.parentNode===this.#n){for(;e.firstChild;)this.#n.insertBefore(e.firstChild,e);this.#n.removeChild(e)}const t=this.#n.querySelector(`.cbg-loader-${this.#o}`);t&&t.remove(),this.#n.style.backgroundImage=""}get options(){return{...this.#i}}#u(){this.#m(),this.#p(),this.#n.matches("body")?queueMicrotask(()=>this.#y()):"complete"===document.readyState?this.#y():window.addEventListener("load",()=>this.#y(),{once:!0})}#m(){const e=this.#o,t="body"===this.#i.element||this.#n.matches("body")?"body":this.#i.element,i=this.#i.transitionDuration/1e3,n=`\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.#n.matches("body")?"fixed":"absolute"};\n        background-image: ${this.#i.overlayImage?`url(${this.#i.overlayImage})`:"none"};\n        background-color: ${this.#i.overlayColor};\n        opacity: 1;\n        z-index: 1;\n        transition: opacity ${i}s ease;\n        top: 0;\n        left: 0;\n      }\n    `,o=document.createElement("style");o.dataset.chameleonUid=e,o.textContent=n,document.head.appendChild(o),this.#s=o}#p(){const e=this.#o,t=document.createElement("div");for(t.id=`cbg-inner-${e}`;this.#n.firstChild;)t.appendChild(this.#n.firstChild);const i=document.createElement("div");i.classList.add(`cbg-loader-${e}`),this.#n.appendChild(t),this.#n.appendChild(i)}#y(){this.#d||("single"===this.#i.type?this.#g("string"==typeof this.#i.src?this.#i.src:this.#i.src[0]):"slider"===this.#i.type&&this.#f())}#g(e,t=!0){return this.#d?Promise.resolve():new Promise(t=>{const i=new Image;i.onload=()=>{if(this.#d)return t();this.#n.style.backgroundImage=`url(${e})`,this.#n.style.backgroundSize="cover";const i=this.#n.querySelector(`.cbg-loader-${this.#o}`);i&&(i.style.opacity=String(this.#i.minOverlay)),t()},i.onerror=()=>{console.warn(`[ChameleonBackgrounds] Failed to load image: ${e}`),t()},i.src=e})}reloadBackground(e){if(this.#d)return Promise.resolve();void 0!==e&&("slider"===this.#i.type&&"string"==typeof e?this.#i.src=e.includes(",")?e.split(",").map(e=>e.trim()):[e]:this.#i.src=e),null!==this.#l&&(clearInterval(this.#l),this.#l=null);const t=this.#n.querySelector(`.cbg-loader-${this.#o}`);return t&&(t.style.opacity="1"),new Promise(e=>{setTimeout(()=>{if(this.#d)return e();if("single"===this.#i.type){const t="string"==typeof this.#i.src?this.#i.src:this.#i.src[0];this.#g(t,!1).then(e)}else"slider"===this.#i.type&&(this.#f(),e())},this.#i.transitionDuration)})}reloadOptions(e){if(this.#d)return;const t=i.#a(e);this.#i={...this.#i,...t},this.#s?.parentNode&&(this.#s.parentNode.removeChild(this.#s),this.#s=null),this.#m()}#f(){if(this.#d)return;const e=this.#i.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.#d)return;if(t=1,1===e.length)return;const i=this.#i.sliderDuration+2*this.#i.transitionDuration;this.#l=setInterval(()=>{this.#d?clearInterval(this.#l):(this.reloadBackground(e[t]),t++,t>=e.length&&(this.#i.sliderLoop?t=0:(clearInterval(this.#l),this.#l=null)))},i)})}static#a(e){const t={};for(const[n,o]of Object.entries(e))t[i.#t[n]??n]=o;return t}static#c(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#h(){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 n=i;return e.d(t,["default",0,n]),t=t.default,t})());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chameleon-backgrounds",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "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);
   }
@@ -276,14 +292,30 @@ class ChameleonBackgrounds {
     });
   }
 
+  /**
   /**
    * Reload background with a fade-out → swap → fade-in cycle.
-   * @param {string} src - New image URL.
+   * @param {string} [src] - Optional new image URL. If omitted, reloads using current options.
    * @returns {Promise<void>}
    */
   reloadBackground(src) {
     if (this.#destroyed) return Promise.resolve();
 
+    if (src !== undefined) {
+      if (this.#options.type === 'slider' && typeof src === 'string') {
+        // If the user passes a comma-separated string, split it. Otherwise wrap it.
+        this.#options.src = src.includes(',') ? src.split(',').map(s => s.trim()) : [src];
+      } else {
+        this.#options.src = src;
+      }
+    }
+
+    // Stop any running slider
+    if (this.#sliderIntervalId !== null) {
+      clearInterval(this.#sliderIntervalId);
+      this.#sliderIntervalId = null;
+    }
+
     const loader = this.#element.querySelector(`.cbg-loader-${this.#uid}`);
     if (loader) {
       loader.style.opacity = '1';
@@ -292,11 +324,38 @@ class ChameleonBackgrounds {
     return new Promise((resolve) => {
       setTimeout(() => {
         if (this.#destroyed) return resolve();
-        this.#loadBackground(src, false).then(resolve);
+        
+        if (this.#options.type === 'single') {
+          const singleSrc = typeof this.#options.src === 'string' ? this.#options.src : this.#options.src[0];
+          this.#loadBackground(singleSrc, false).then(resolve);
+        } else if (this.#options.type === 'slider') {
+          this.#startSlider();
+          resolve();
+        }
       }, this.#options.transitionDuration);
     });
   }
 
+  /**
+   * Update options on the fly without destroying the instance.
+   * @param {Object} newOptions - The new options to merge.
+   */
+  reloadOptions(newOptions) {
+    if (this.#destroyed) return;
+
+    const normalized = ChameleonBackgrounds.#normalizeOptions(newOptions);
+    this.#options = { ...this.#options, ...normalized };
+
+    // Remove old styles
+    if (this.#styleElement?.parentNode) {
+      this.#styleElement.parentNode.removeChild(this.#styleElement);
+      this.#styleElement = null;
+    }
+
+    // Inject updated styles
+    this.#injectStyles();
+  }
+
   // ---------------------------------------------------------------------------
   //  Slider
   // ---------------------------------------------------------------------------