diff --git a/.eslintrc.yml b/.eslintrc.yml index c70cd2b..0f5f0b9 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -16,6 +16,7 @@ rules: indent: - error - 4 + - SwitchCase: 1 linebreak-style: - error - unix diff --git a/README.md b/README.md index d73a1d5..afdc85a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around 1.8kb minified and gzipped and 4kb minified.
+PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights less than 2kb minified and gzipped.
Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/playground) 😊 diff --git a/dist/powerglitch.min.js b/dist/powerglitch.min.js index e999fb8..8688785 100644 --- a/dist/powerglitch.min.js +++ b/dist/powerglitch.min.js @@ -1 +1 @@ -(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,i=e.glitchTimeSpan.end;if(ri)return 0;const a=n+(i-n)/2;r{const n=Math.floor(Math.random()*((r-e)*100+1))+e*100,i=Math.floor(Math.random()*((o-t)*100+1))+t*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:e,left:r,height:t,width:o})=>{const n=`${r+o}% ${e}%`,i=`${r+o}% ${e+t}%`,a=`${r}% ${e+t}%`,s=`${r}% ${e}%`;return`polygon(${n}, ${i}, ${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 o=0;o{if(!e.shake)return{steps:[],timing:f(1)};const r=Math.floor(e.shake.velocity*e.timing.duration/1e3)+1,t=[];for(let o=0;o{const r=[];if(r.push(L(e)),e.slice)for(let t=0;t{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 i of r){const a=n.cloneNode(!1);a.style.backgroundImage=`url(${o})`,a.animate(i.steps,i.timing),e.appendChild(a)}};function w(...e){const r=t=>t&&typeof t=="object";return e.reduce((t,o)=>(Object.keys(o).forEach(n=>{const i=t[n],a=o[n];if(Array.isArray(i)&&Array.isArray(a)){t[n]=i.concat(...a);return}if(r(i)&&r(a)){t[n]=w(i,a);return}a!==void 0&&(t[n]=a)}),t),{})}const R={glitch:(e=".powerglitch",r={})=>{const t=w(m(),r);let o=[];if(typeof e=="string"){const s=document.querySelectorAll(e);if(!s.length)throw new Error(`Could not find any element with selector ${e}`);o=Array.from(s)}else o=[e];const n=o.filter(s=>s instanceof HTMLImageElement),i=o.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.remove(),p(h,a,t,t.imageUrl||s.src)}for(const s of i){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||{}); +(function(u){"use strict";var b=Object.defineProperty,g=Object.getOwnPropertySymbols,E=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable,f=(e,n,t)=>n in e?b(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,c=(e,n)=>{for(var t in n||(n={}))E.call(n,t)&&f(e,t,n[t]);if(g)for(var t of g(n))$.call(n,t)&&f(e,t,n[t]);return e};const d=(e="always")=>e==="always"?{playMode:e,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}}:{playMode:e,backgroundColor:"transparent",hideOverflow:!1,timing:{duration:150,iterations:1},glitchTimeSpan:{start:0,end:1},shake:{velocity:15,amplitudeX:.05,amplitudeY:.05},slice:{count:6,velocity:15,minHeight:.02,maxHeight:.15,hueRotate:!0}},m=(e,n)=>{let t=0;if(e.glitchTimeSpan){const r=e.glitchTimeSpan.start,i=e.glitchTimeSpan.end;if(ni)return 0;const a=r+(i-r)/2;n{const r=Math.floor(Math.random()*((n-e)*100+1))+e*100,i=Math.floor(Math.random()*((l-t)*100+1))+t*100,a=Math.floor(Math.random()*(100-r)),o=Math.floor(Math.random()*(100-i));return{top:a,left:o,height:r,width:i}},M=({top:e,left:n,height:t,width:l})=>{const r=`${n+l}% ${e}%`,i=`${n+l}% ${e+t}%`,a=`${n}% ${e+t}%`,o=`${n}% ${e}%`;return`polygon(${r}, ${i}, ${a}, ${o})`},h=e=>({easing:`steps(${e}, jump-start)`}),_=e=>{if(!e.slice)throw new Error("Slice are not enabled");const n=Math.floor(e.slice.velocity*e.timing.duration/1e3)+1,t=[];for(let l=0;l{if(!e.shake)return{steps:[],timing:h(1)};const n=Math.floor(e.shake.velocity*e.timing.duration/1e3)+1,t=[];for(let l=0;l{const n=[];if(n.push(C(e)),e.slice)for(let t=0;t{const r=document.createElement("div");for(r.classList.add("layer"),r.style.backgroundColor=t.backgroundColor,r.style.backgroundRepeat="no-repeat",r.style.backgroundPosition="center",r.style.backgroundSize="contain",r.style.width="100%",r.style.height="100%",r.style.top="0",r.style.left="0",r.style.position="absolute",e.style.position="relative",t.hideOverflow?e.style.overflow="hidden":e.style.overflow="visible";e.firstChild;)e.removeChild(e.firstChild);for(let o=0;o{n.forEach((o,s)=>e.children[s].animate(o.steps,o.timing))},a=()=>{n.forEach((o,s)=>e.children[s].getAnimations().map(O=>O.cancel()))};switch(t.playMode){case"always":i(),e.onmouseenter=null,e.onmouseleave=null;break;case"hover-triggered":e.onmouseenter=()=>{i(),e.onmouseenter=null},e.onmouseleave=null;break;case"hover-only":e.onmouseenter=i,e.onmouseleave=a;break}};function p(...e){const n=t=>t&&typeof t=="object";return e.reduce((t,l)=>(Object.keys(l).forEach(r=>{const i=t[r],a=l[r];if(Array.isArray(i)&&Array.isArray(a)){t[r]=i.concat(...a);return}if(n(i)&&n(a)){t[r]=p(i,a);return}a!==void 0&&(t[r]=a)}),t),{})}const k={glitch:(e=".powerglitch",n={})=>{const t=p(d(n.playMode),n);let l=[];if(typeof e=="string"){const o=document.querySelectorAll(e);if(!o.length)throw new Error(`Could not find any element with selector ${e}`);l=Array.from(o)}else l=[e];const r=l.filter(o=>o instanceof HTMLImageElement),i=l.filter(o=>o instanceof HTMLDivElement),a=y(t);for(const o of r){const s=document.createElement("div");if(s.style.width=o.clientWidth+"px",s.style.height=o.clientHeight+"px",!o.parentElement)throw new Error("Unable to glitch image, it is not attached to a parent element");o.parentElement.insertBefore(s,o),o.remove(),w(s,a,t,t.imageUrl||o.src)}for(const o of i){if(!t.imageUrl)throw new Error("Options.imageUrl must be set if there are div elements to glitch");w(o,a,t,t.imageUrl)}},generateLayers:y,getDefaultOptions:d};u.PowerGlitch=k,Object.defineProperty(u,"__esModule",{value:!0})})(this.window=this.window||{}); diff --git a/docs-src/src/components/ImagePreview.vue b/docs-src/src/components/ImagePreview.vue index 7e383c5..cbcf237 100644 --- a/docs-src/src/components/ImagePreview.vue +++ b/docs-src/src/components/ImagePreview.vue @@ -16,7 +16,7 @@ const rebuild = () => { // Rebuild when mounted or options changed onMounted(rebuild); -watch(rebuild); +watch(appStore.powerGlitchOptions, rebuild);