From 1ac15996e306be4ee597a23e211a66c35585a241 Mon Sep 17 00:00:00 2001 From: 7PH Date: Thu, 1 Sep 2022 23:51:03 +0200 Subject: [PATCH] Handle play modes in playground & Add recommended default buttons --- dist/powerglitch.min.js | 2 +- docs-src/src/components/OptionPanel.vue | 30 +++++- docs-src/src/stores/app.js | 2 +- docs-src/src/views/PlaygroundView.vue | 2 +- ...{index.6058dd39.css => index.5af9e8a8.css} | 2 +- .../{index.737711a5.js => index.b5792558.js} | 38 ++++---- docs/index.html | 4 +- src/index.ts | 93 +++++++++++++------ 8 files changed, 117 insertions(+), 56 deletions(-) rename docs/assets/{index.6058dd39.css => index.5af9e8a8.css} (67%) rename docs/assets/{index.737711a5.js => index.b5792558.js} (61%) diff --git a/dist/powerglitch.min.js b/dist/powerglitch.min.js index 432cba3..8688785 100644 --- a/dist/powerglitch.min.js +++ b/dist/powerglitch.min.js @@ -1 +1 @@ -(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||{}); +(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/OptionPanel.vue b/docs-src/src/components/OptionPanel.vue index 37b0aef..66299be 100644 --- a/docs-src/src/components/OptionPanel.vue +++ b/docs-src/src/components/OptionPanel.vue @@ -1,5 +1,6 @@