From 7113f14e5999f2eda775b17111fc58d1026fe2a3 Mon Sep 17 00:00:00 2001 From: 7PH Date: Wed, 31 Aug 2022 23:57:57 +0200 Subject: [PATCH 1/3] Add playMode to support hover-triggered and hover-only effects --- .eslintrc.yml | 1 + dist/powerglitch.min.js | 2 +- docs-src/src/components/ImagePreview.vue | 2 +- docs-src/src/components/OptionPanel.vue | 6 +++ ...{index.fb88e143.css => index.6058dd39.css} | 2 +- .../{index.a43de88f.js => index.737711a5.js} | 40 +++++++++---------- docs/index.html | 4 +- src/index.ts | 34 +++++++++++++++- 8 files changed, 64 insertions(+), 27 deletions(-) rename docs/assets/{index.fb88e143.css => index.6058dd39.css} (99%) rename docs/assets/{index.a43de88f.js => index.737711a5.js} (69%) 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/dist/powerglitch.min.js b/dist/powerglitch.min.js index e999fb8..432cba3 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,E=Object.defineProperties,_=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable,d=(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={}))$.call(n,t)&&d(e,t,n[t]);if(f)for(var t of f(n))v.call(n,t)&&d(e,t,n[t]);return e},M=(e,n)=>E(e,_(n));const h=()=>({playMode:"always",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}}),m=(e,n)=>{let t=0;if(e.glitchTimeSpan){const r=e.glitchTimeSpan.start,s=e.glitchTimeSpan.end;if(ns)return 0;const o=r+(s-r)/2;n{const r=Math.floor(Math.random()*((n-e)*100+1))+e*100,s=Math.floor(Math.random()*((l-t)*100+1))+t*100,o=Math.floor(Math.random()*(100-r)),a=Math.floor(Math.random()*(100-s));return{top:o,left:a,height:r,width:s}},P=({top:e,left:n,height:t,width:l})=>{const r=`${n+l}% ${e}%`,s=`${n+l}% ${e+t}%`,o=`${n}% ${e+t}%`,a=`${n}% ${e}%`;return`polygon(${r}, ${s}, ${o}, ${a})`},g=e=>M(c({},h().timing),{easing:`steps(${e}, jump-start)`}),C=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:g(1)};const n=Math.floor(e.shake.velocity*e.timing.duration/1e3)+1,t=[];for(let l=0;l{const n=[];if(n.push(k(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 a=0;a{n.forEach((a,i)=>e.children[i].animate(a.steps,a.timing))},o=()=>{n.forEach((a,i)=>e.children[i].getAnimations().map(L=>L.cancel()))};switch(t.playMode){case"always":s(),e.onmouseenter=null,e.onmouseleave=null;break;case"hover-triggered":e.onmouseenter=()=>{s(),e.onmouseenter=null},e.onmouseleave=null;break;case"hover-only":e.onmouseenter=s,e.onmouseleave=o;break}};function w(...e){const n=t=>t&&typeof t=="object";return e.reduce((t,l)=>(Object.keys(l).forEach(r=>{const s=t[r],o=l[r];if(Array.isArray(s)&&Array.isArray(o)){t[r]=s.concat(...o);return}if(n(s)&&n(o)){t[r]=w(s,o);return}o!==void 0&&(t[r]=o)}),t),{})}const A={glitch:(e=".powerglitch",n={})=>{const t=w(h(),n);let l=[];if(typeof e=="string"){const a=document.querySelectorAll(e);if(!a.length)throw new Error(`Could not find any element with selector ${e}`);l=Array.from(a)}else l=[e];const r=l.filter(a=>a instanceof HTMLImageElement),s=l.filter(a=>a instanceof HTMLDivElement),o=y(t);for(const a of r){const i=document.createElement("div");if(i.style.width=a.clientWidth+"px",i.style.height=a.clientHeight+"px",!a.parentElement)throw new Error("Unable to glitch image, it is not attached to a parent element");a.parentElement.insertBefore(i,a),a.remove(),p(i,o,t,t.imageUrl||a.src)}for(const a of s){if(!t.imageUrl)throw new Error("Options.imageUrl must be set if there are div elements to glitch");p(a,o,t,t.imageUrl)}},generateLayers:y,getDefaultOptions:h};u.PowerGlitch=A,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);