Add optional hideOverflow to options

dist/powerglitch.min.js

@@ -1 +1 @@
-(function(d){"use strict";var w=Object.defineProperty,b=Object.defineProperties,_=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,E=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable,u=(t,r,e)=>r in t?w(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,l=(t,r)=>{for(var e in r||(r={}))E.call(r,e)&&u(t,e,r[e]);if(f)for(var e of f(r))$.call(r,e)&&u(t,e,r[e]);return t},v=(t,r)=>b(t,_(r));const m=()=>({backgroundColor:"transparent",timing:{duration:2*1e3,iterations:1/0},glitchTimeSpan:{start:.5,end:.7},shake:{velocity:15,amplitudeX:.4,amplitudeY:.4},slice:{count:6,velocity:15,minHeight:.02,maxHeight:.15,hueRotate:!0}}),c=(t,r)=>{let e=0;if(t.glitchTimeSpan){const n=t.glitchTimeSpan.start,i=t.glitchTimeSpan.end;if(r<n||r>i)return 0;const a=n+(i-n)/2;r<a?e=(r-n)/(a-n):e=(i-r)/(i-a)}else e=1;return(Math.random()-.5)*2*e},M=({minHeight:t,maxHeight:r,minWidth:e,maxWidth:o})=>{const n=Math.floor(Math.random()*((r-t)*100+1))+t*100,i=Math.floor(Math.random()*((o-e)*100+1))+e*100,a=Math.floor(Math.random()*(100-n)),s=Math.floor(Math.random()*(100-i));return{top:a,left:s,height:n,width:i}},P=({top:t,left:r,height:e,width:o})=>{const n=`${r+o}% ${t}%`,i=`${r+o}% ${t+e}%`,a=`${r}% ${t+e}%`,s=`${r}% ${t}%`;return`polygon(${n}, ${i}, ${a}, ${s})`},g=t=>v(l({},m().timing),{easing:`steps(${t}, jump-start)`}),C=t=>{if(!t.slice)throw new Error("Slice are not enabled");const r=Math.floor(t.slice.velocity*t.timing.duration/1e3)+1,e=[];for(let o=0;o<r;++o){const n=M({minHeight:t.slice.minHeight,maxHeight:t.slice.maxHeight,minWidth:1,maxWidth:1}),i=c(t,o/r)*30,a={};a.transform=`translate3d(${i}%, 0, 0)`,a.clipPath=P(n),t.slice.hueRotate&&(a.filter=`hue-rotate(${Math.floor(c(t,o/r)*360)}deg)`),e.push(a)}return{steps:e,timing:l(l({},g(r)),t.timing)}},O=t=>{if(!t.shake)return{steps:[],timing:g(1)};const r=Math.floor(t.shake.velocity*t.timing.duration/1e3)+1,e=[];for(let o=0;o<r;++o){const n=c(t,o/r)*t.shake.amplitudeX*100,i=c(t,o/r)*t.shake.amplitudeY*100,a={};a.transform=`translate3d(${n}%, ${i}%, 0)`,e.push(a)}return{steps:e,timing:l(l({},g(r)),t.timing)}},k=t=>{const r=[];if(r.push(O(t)),t.slice)for(let e=0;e<t.slice.count;++e)r.push(C(t));return r},y=(t,r,e,o)=>{const n=document.createElement("div");for(n.classList.add("layer"),n.style.backgroundColor=e,n.style.backgroundRepeat="no-repeat",n.style.backgroundPosition="center",n.style.backgroundSize="contain",n.style.width="100%",n.style.height="100%",n.style.top="0",n.style.left="0",n.style.position="absolute",t.style.position="relative",t.style.overflow="hidden";t.firstChild;)t.removeChild(t.firstChild);for(const i of r){const a=n.cloneNode(!1);a.style.backgroundImage=`url(${o})`,a.animate(i.steps,i.timing),t.appendChild(a)}};function p(...t){const r=e=>e&&typeof e=="object";return t.reduce((e,o)=>(Object.keys(o).forEach(n=>{const i=e[n],a=o[n];if(Array.isArray(i)&&Array.isArray(a)){e[n]=i.concat(...a);return}if(r(i)&&r(a)){e[n]=p(i,a);return}a!==void 0&&(e[n]=a)}),e),{})}const L={glitch:(t=".powerglitch",r={})=>{const e=p(m(),r);let o=[];if(typeof t=="string"){const s=document.querySelectorAll(t);if(!s.length)throw new Error(`Could not find any element with selector ${t}`);o=Array.from(s)}else o=[t];const n=o.filter(s=>s instanceof HTMLImageElement),i=o.filter(s=>s instanceof HTMLDivElement),a=k(e);for(const s of n){const h=document.createElement("div");if(h.style.width=s.clientWidth+"px",h.style.height=s.clientHeight+"px",!s.parentElement)throw new Error("Unable to glitch image, it is not attached to a parent element");s.parentElement.insertBefore(h,s),s.style.display="none",y(h,a,e.backgroundColor,e.imageUrl||s.src)}for(const s of i){if(!e.imageUrl)throw new Error("Options.imageUrl must be set if there are div elements to glitch");y(s,a,e.backgroundColor,e.imageUrl)}},getDefaultOptions:m};d.PowerGlitch=L,Object.defineProperty(d,"__esModule",{value:!0})})(this.window=this.window||{});
+(function(g){"use strict";var v=Object.defineProperty,b=Object.defineProperties,_=Object.getOwnPropertyDescriptors,d=Object.getOwnPropertySymbols,E=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable,u=(e,r,t)=>r in e?v(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,l=(e,r)=>{for(var t in r||(r={}))E.call(r,t)&&u(e,t,r[t]);if(d)for(var t of d(r))$.call(r,t)&&u(e,t,r[t]);return e},O=(e,r)=>b(e,_(r));const m=()=>({backgroundColor:"transparent",hideOverflow:!1,timing:{duration:2*1e3,iterations:1/0},glitchTimeSpan:{start:.5,end:.7},shake:{velocity:15,amplitudeX:.4,amplitudeY:.4},slice:{count:6,velocity:15,minHeight:.02,maxHeight:.15,hueRotate:!0}}),c=(e,r)=>{let t=0;if(e.glitchTimeSpan){const n=e.glitchTimeSpan.start,o=e.glitchTimeSpan.end;if(r<n||r>o)return 0;const a=n+(o-n)/2;r<a?t=(r-n)/(a-n):t=(o-r)/(o-a)}else t=1;return(Math.random()-.5)*2*t},M=({minHeight:e,maxHeight:r,minWidth:t,maxWidth:i})=>{const n=Math.floor(Math.random()*((r-e)*100+1))+e*100,o=Math.floor(Math.random()*((i-t)*100+1))+t*100,a=Math.floor(Math.random()*(100-n)),s=Math.floor(Math.random()*(100-o));return{top:a,left:s,height:n,width:o}},P=({top:e,left:r,height:t,width:i})=>{const n=`${r+i}% ${e}%`,o=`${r+i}% ${e+t}%`,a=`${r}% ${e+t}%`,s=`${r}% ${e}%`;return`polygon(${n}, ${o}, ${a}, ${s})`},f=e=>O(l({},m().timing),{easing:`steps(${e}, jump-start)`}),C=e=>{if(!e.slice)throw new Error("Slice are not enabled");const r=Math.floor(e.slice.velocity*e.timing.duration/1e3)+1,t=[];for(let i=0;i<r;++i){const n=M({minHeight:e.slice.minHeight,maxHeight:e.slice.maxHeight,minWidth:1,maxWidth:1}),o=c(e,i/r)*30,a={};a.transform=`translate3d(${o}%, 0, 0)`,a.clipPath=P(n),e.slice.hueRotate&&(a.filter=`hue-rotate(${Math.floor(c(e,i/r)*360)}deg)`),t.push(a)}return{steps:t,timing:l(l({},f(r)),e.timing)}},L=e=>{if(!e.shake)return{steps:[],timing:f(1)};const r=Math.floor(e.shake.velocity*e.timing.duration/1e3)+1,t=[];for(let i=0;i<r;++i){const n=c(e,i/r)*e.shake.amplitudeX*100,o=c(e,i/r)*e.shake.amplitudeY*100,a={};a.transform=`translate3d(${n}%, ${o}%, 0)`,t.push(a)}return{steps:t,timing:l(l({},f(r)),e.timing)}},y=e=>{const r=[];if(r.push(L(e)),e.slice)for(let t=0;t<e.slice.count;++t)r.push(C(e));return r},p=(e,r,t,i)=>{const n=document.createElement("div");for(n.classList.add("layer"),n.style.backgroundColor=t.backgroundColor,n.style.backgroundRepeat="no-repeat",n.style.backgroundPosition="center",n.style.backgroundSize="contain",n.style.width="100%",n.style.height="100%",n.style.top="0",n.style.left="0",n.style.position="absolute",e.style.position="relative",t.hideOverflow?e.style.overflow="hidden":e.style.overflow="visible";e.firstChild;)e.removeChild(e.firstChild);for(const o of r){const a=n.cloneNode(!1);a.style.backgroundImage=`url(${i})`,a.animate(o.steps,o.timing),e.appendChild(a)}};function w(...e){const r=t=>t&&typeof t=="object";return e.reduce((t,i)=>(Object.keys(i).forEach(n=>{const o=t[n],a=i[n];if(Array.isArray(o)&&Array.isArray(a)){t[n]=o.concat(...a);return}if(r(o)&&r(a)){t[n]=w(o,a);return}a!==void 0&&(t[n]=a)}),t),{})}const R={glitch:(e=".powerglitch",r={})=>{const t=w(m(),r);let i=[];if(typeof e=="string"){const s=document.querySelectorAll(e);if(!s.length)throw new Error(`Could not find any element with selector ${e}`);i=Array.from(s)}else i=[e];const n=i.filter(s=>s instanceof HTMLImageElement),o=i.filter(s=>s instanceof HTMLDivElement),a=y(t);for(const s of n){const h=document.createElement("div");if(h.style.width=s.clientWidth+"px",h.style.height=s.clientHeight+"px",!s.parentElement)throw new Error("Unable to glitch image, it is not attached to a parent element");s.parentElement.insertBefore(h,s),s.style.display="none",p(h,a,t,t.imageUrl||s.src)}for(const s of o){if(!t.imageUrl)throw new Error("Options.imageUrl must be set if there are div elements to glitch");p(s,a,t,t.imageUrl)}},generateLayers:y,getDefaultOptions:m};g.PowerGlitch=R,Object.defineProperty(g,"__esModule",{value:!0})})(this.window=this.window||{});

docs-src/src/components/OptionPanel.vue

@@ -57,6 +57,11 @@ onMounted(() => {
             class="mt-1"
             :title="'Background color'"
         />
+        <BooleanOption
+            v-model="appStore.powerGlitchOptions.hideOverflow"
+            class="mt-1"
+            :title="'Hide overflow'"
+        />
 
         <div class="font-bold mt-6 mb-2 pl-2">
             Timing

docs-src/src/views/UsageView.vue

@@ -169,6 +169,7 @@ PowerGlitch.glitch(
     'div.glitch',
     {
         backgroundColor: 'transparent',
+        hideOverflow: true,
         timing: {
             duration: 1000,
             iterations: 15,

docs/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/powerglitch/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PowerGlitch - Glitch anything on the web</title>
-  <script type="module" crossorigin src="/powerglitch/assets/index.1fb6a104.js"></script>
-  <link rel="stylesheet" href="/powerglitch/assets/index.93a801f9.css">
+  <script type="module" crossorigin src="/powerglitch/assets/index.2d1aef38.js"></script>
+  <link rel="stylesheet" href="/powerglitch/assets/index.1fde9c53.css">
 </head>
 <body>
     <div id="app"></div>

src/index.ts

@@ -13,6 +13,11 @@ type PowerGlitchOptions = {
      */
     backgroundColor: string,
 
+    /**
+     * Whether to hide the glitch animation when it goes out of the bounding rectangle.
+     */
+    hideOverflow: boolean,
+
     /**
      * Timing of the animation.
      */
@@ -129,8 +134,9 @@ type Rectangle = {
 /**
  * Get best-looking default options for most images.
  */
-const getDefaultOptions = (): Partial<PowerGlitchOptions> => ({
+const getDefaultOptions = (): PowerGlitchOptions => ({
     backgroundColor: 'transparent',
+    hideOverflow: false,
     timing: {
         duration: 2 * 1000,
         iterations: Infinity,
@@ -294,12 +300,13 @@ const generateLayers = (options: PowerGlitchOptions): LayerDefinition[] => {
  * Animate a given div with a given set of layers, showing the specified image.
  * @param div 
  * @param layers 
+ * @param options
  * @param imageUrl 
  */
-const animateDiv = (div: HTMLDivElement, layers: LayerDefinition[], backgroundColor: string, imageUrl: string) => {
+const animateDiv = (div: HTMLDivElement, layers: LayerDefinition[], options: PowerGlitchOptions, imageUrl: string) => {
     const templateLayer = document.createElement('div');
     templateLayer.classList.add('layer');
-    templateLayer.style.backgroundColor = backgroundColor;
+    templateLayer.style.backgroundColor = options.backgroundColor;
     templateLayer.style.backgroundRepeat = 'no-repeat';
     templateLayer.style.backgroundPosition = 'center';
     templateLayer.style.backgroundSize = 'contain';
@@ -310,7 +317,11 @@ const animateDiv = (div: HTMLDivElement, layers: LayerDefinition[], backgroundCo
     templateLayer.style.position = 'absolute';
     // Empty & init. div style
     div.style.position = 'relative';
-    div.style.overflow = 'hidden';
+    if (options.hideOverflow) {
+        div.style.overflow = 'hidden';
+    } else {
+        div.style.overflow = 'visible';
+    }
     while (div.firstChild) {
         div.removeChild(div.firstChild);
     }
@@ -396,7 +407,7 @@ const glitch = (elOrSelector: string | HTMLDivElement = '.powerglitch', userOpti
         // Keep but hide the image, to avoid breaking the original application
         imgElement.style.display = 'none';
         // Animate the new container
-        animateDiv(newContainer, layers, options.backgroundColor, options.imageUrl || imgElement.src);
+        animateDiv(newContainer, layers, options, options.imageUrl || imgElement.src);
     }
 
     // Animate each div element
@@ -405,11 +416,12 @@ const glitch = (elOrSelector: string | HTMLDivElement = '.powerglitch', userOpti
         if (! options.imageUrl) {
             throw new Error('Options.imageUrl must be set if there are div elements to glitch');
         }
-        animateDiv(divElement, layers, options.backgroundColor, options.imageUrl);
+        animateDiv(divElement, layers, options, options.imageUrl);
     }
 };
 
 export const PowerGlitch = {
     glitch,
+    generateLayers,
     getDefaultOptions,
 };