diff --git a/docs/freezeframe.min.js b/docs/freezeframe.min.js index 58c5eef..83209c8 100644 --- a/docs/freezeframe.min.js +++ b/docs/freezeframe.min.js @@ -1,10 +1,10 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Freezeframe=e():t.Freezeframe=e()}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="examples",n(n.s=4)}([function(t,e,n){var i,r;!function(o,s){"use strict";i=[n(2)],void 0===(r=function(t){return function(t,e){var n=t.jQuery,i=t.console;function r(t,e){for(var n in e)t[n]=e[n];return t}var o=Array.prototype.slice;function s(t,e,a){if(!(this instanceof s))return new s(t,e,a);var c,l=t;("string"==typeof t&&(l=document.querySelectorAll(t)),l)?(this.elements=(c=l,Array.isArray(c)?c:"object"==typeof c&&"number"==typeof c.length?o.call(c):[c]),this.options=r({},this.options),"function"==typeof e?a=e:r(this.options,e),a&&this.on("always",a),this.getImages(),n&&(this.jqDeferred=new n.Deferred),setTimeout(this.check.bind(this))):i.error("Bad element for imagesLoaded "+(l||t))}s.prototype=Object.create(e.prototype),s.prototype.options={},s.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},s.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&a[e]){for(var n=t.querySelectorAll("img"),i=0;i`✨Freezeframe: ${t}✨`,a=t=>"string"==typeof t?document.querySelectorAll(t):t,c=(t,e,n)=>{const i=t instanceof HTMLElement?[t]:t;return Array.from(i).reduce((t,e)=>{if(e instanceof HTMLImageElement)t.push(e),"gif"!==(t=>t.split(".").pop().toLowerCase().substring(0,3))(e.src)&&n.warnings&&((t,...e)=>{console.warn(s(t),...e)})("Image does not appear to be a gif",e);else{const n=e.querySelectorAll("img");n.length?t=t.concat(...n):((t,...e)=>{console.error(s(t),...e)})("Invalid element",e)}return t},[])},l=t=>[...new Set(t)],u=t=>{const e=window.document.createElement("div");e.innerHTML=t;return e.childNodes[0]};var m,h,d=function(){function t(t,e){for(var n=0;n1?n-1:0),r=1;r0&&Array.isArray(i[0])&&(i=i[0]),this.transformers=i.map((function(t){return"function"==typeof t?t():t})),this.tag}return d(t,[{key:"interimTag",value:function(t,e){for(var n=arguments.length,i=Array(n>2?n-2:0),r=2;r0&&void 0!==arguments[0]?arguments[0]:"";return{onEndResult:function(e){if(""===t)return e.trim();if("start"===(t=t.toLowerCase())||"left"===t)return e.replace(/^\s*/,"");if("end"===t||"right"===t)return e.replace(/\s*$/,"");throw new Error("Side not supported: "+t)}}};function v(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e0&&void 0!==arguments[0]?arguments[0]:"initial";return{onEndResult:function(e){if("initial"===t){var n=e.match(/^[^\S\n]*(?=\S)/gm),i=n&&Math.min.apply(Math,v(n.map((function(t){return t.length}))));if(i){var r=new RegExp("^.{"+i+"}","gm");return e.replace(r,"")}return e}if("all"===t)return e.replace(/^[^\S\n]+/gm,"");throw new Error("Unknown type: "+t)}}},b=function(t,e){return{onEndResult:function(n){if(null==t||null==e)throw new Error("replaceResultTransformer requires at least 2 arguments.");return n.replace(t,e)}}},Z=function(t,e){return{onSubstitution:function(n,i){if(null==t||null==e)throw new Error("replaceSubstitutionTransformer requires at least 2 arguments.");return null==n?n:n.toString().replace(t,e)}}},j={separator:"",conjunction:"",serial:!1},S=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:j;return{onSubstitution:function(e,n){if(Array.isArray(e)){var i=e.length,r=t.separator,o=t.conjunction,s=t.serial,a=n.match(/(\n?[^\S\n]+)$/);if(e=a?e.join(r+a[1]):e.join(r+" "),o&&i>1){var c=e.lastIndexOf(r);e=e.slice(0,c)+(s?r:"")+" "+o+e.slice(c+1)}}return e}}},w=function(t){return{onSubstitution:function(e,n){if(null==t||"string"!=typeof t)throw new Error("You need to specify a string character to split by.");return"string"==typeof e&&e.includes(t)&&(e=e.split(t)),e}}},G=function(t){return null!=t&&!Number.isNaN(t)&&"boolean"!=typeof t},W=function(){return{onSubstitution:function(t){return Array.isArray(t)?t.filter(G):G(t)?t:""}}},P=(new g(S({separator:","}),y,I),new g(S({separator:",",conjunction:"and"}),y,I),new g(S({separator:",",conjunction:"or"}),y,I),new g(w("\n"),W,S,y,I));new g(w("\n"),S,y,I,Z(/&/g,"&"),Z(//g,">"),Z(/"/g,"""),Z(/'/g,"'"),Z(/`/g,"`")),new g(b(/(?:\n(?:\s*))+/g," "),I),new g(b(/(?:\n\s*)/g,""),I),new g(S({separator:","}),b(/(?:\s+)/g," "),I),new g(S({separator:",",conjunction:"or"}),b(/(?:\s+)/g," "),I),new g(S({separator:",",conjunction:"and"}),b(/(?:\s+)/g," "),I),new g(S,y,I),new g(S,b(/(?:\s+)/g," "),I),new g(y,I),new g(y("all"),I);const E=".freezeframe",R="ff-container",Y="ff-loading-icon",A="ff-image",B="ff-canvas",x="ff-ready",J="ff-inactive",F="ff-active",L="ff-canvas-ready",k="ff-responsive",z="ff-overlay",H={responsive:!0,trigger:"hover",overlay:!1,warnings:!0};var M=n(1),T=n.n(M);var X,V,N=function(t,e,n){if(!e.has(t))throw new TypeError("attempted to set private field on non-instance");return e.set(t,n),n},U=function(t,e){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return e.get(t)};X=new WeakMap,V=new WeakMap;e.default=class{constructor(t=E,e){this.items=[],this.$images=[],X.set(this,void 0),this._eventListeners=Object.assign({},Object.values(i).reduce((t,e)=>(t[e]=[],t),{})),V.set(this,[]),this.options=t instanceof Object&&!e?Object.assign(Object.assign({},H),t):Object.assign(Object.assign({},H),e);const n=this.options.selector||t;this._init(n)}get _stylesInjected(){return!!document.querySelector("style#ff-styles")}_init(t){this._injectStylesheet(),N(this,X,"ontouchstart"in window||"onmsgesturechange"in window),this._capture(t),this._load(this.$images)}_capture(t){this.$images=((...t)=>(...e)=>t.reduceRight((t,n)=>(...i)=>t(n(...i,...e)))())(a,c,l)(t,this.options)}_load(t){o()(t).on("progress",(t,{img:e})=>{this._setup(e)})}async _setup(t){const e=this._wrap(t);this.items.push(e),await this._process(e),this._attach(e)}_wrap(t){const e=u(P` -
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Freezeframe=e():t.Freezeframe=e()}(window,(function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="examples",i(i.s=4)}([function(t,e,i){var n,r;!function(o,s){"use strict";n=[i(2)],void 0===(r=function(t){return function(t,e){var i=t.jQuery,n=t.console;function r(t,e){for(var i in e)t[i]=e[i];return t}var o=Array.prototype.slice;function s(t,e,a){if(!(this instanceof s))return new s(t,e,a);var c,l=t;("string"==typeof t&&(l=document.querySelectorAll(t)),l)?(this.elements=(c=l,Array.isArray(c)?c:"object"==typeof c&&"number"==typeof c.length?o.call(c):[c]),this.options=r({},this.options),"function"==typeof e?a=e:r(this.options,e),a&&this.on("always",a),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):n.error("Bad element for imagesLoaded "+(l||t))}s.prototype=Object.create(e.prototype),s.prototype.options={},s.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},s.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&a[e]){for(var i=t.querySelectorAll("img"),n=0;n`✨Freezeframe: ${t}✨`,a=(t,...e)=>{console.error(s(t),...e)},c=t=>"string"==typeof t?document.querySelectorAll(t):t,l=(t,e,i)=>{const n=t instanceof Element?[t]:t;return Array.from(n).reduce((t,e)=>{if(e instanceof HTMLImageElement)t.push(e),"gif"!==(t=>t.split(".").pop().toLowerCase().substring(0,3))(e.src)&&i.warnings&&((t,...e)=>{console.warn(s(t),...e)})("Image does not appear to be a gif",e);else{const i=e.querySelectorAll("img");i.length?t=t.concat(...i):a("Invalid element",e)}return t},[])},u=t=>[...new Set(t)],m=t=>{const e=window.document.createElement("div");e.innerHTML=t;return e.childNodes[0]};var h,d,f=function(){function t(t,e){for(var i=0;i1?i-1:0),r=1;r0&&Array.isArray(n[0])&&(n=n[0]),this.transformers=n.map((function(t){return"function"==typeof t?t():t})),this.tag}return f(t,[{key:"interimTag",value:function(t,e){for(var i=arguments.length,n=Array(i>2?i-2:0),r=2;r0&&void 0!==arguments[0]?arguments[0]:"";return{onEndResult:function(e){if(""===t)return e.trim();if("start"===(t=t.toLowerCase())||"left"===t)return e.replace(/^\s*/,"");if("end"===t||"right"===t)return e.replace(/\s*$/,"");throw new Error("Side not supported: "+t)}}};function y(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e0&&void 0!==arguments[0]?arguments[0]:"initial";return{onEndResult:function(e){if("initial"===t){var i=e.match(/^[^\S\n]*(?=\S)/gm),n=i&&Math.min.apply(Math,y(i.map((function(t){return t.length}))));if(n){var r=new RegExp("^.{"+n+"}","gm");return e.replace(r,"")}return e}if("all"===t)return e.replace(/^[^\S\n]+/gm,"");throw new Error("Unknown type: "+t)}}},Z=function(t,e){return{onEndResult:function(i){if(null==t||null==e)throw new Error("replaceResultTransformer requires at least 2 arguments.");return i.replace(t,e)}}},j=function(t,e){return{onSubstitution:function(i,n){if(null==t||null==e)throw new Error("replaceSubstitutionTransformer requires at least 2 arguments.");return null==i?i:i.toString().replace(t,e)}}},S={separator:"",conjunction:"",serial:!1},w=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:S;return{onSubstitution:function(e,i){if(Array.isArray(e)){var n=e.length,r=t.separator,o=t.conjunction,s=t.serial,a=i.match(/(\n?[^\S\n]+)$/);if(e=a?e.join(r+a[1]):e.join(r+" "),o&&n>1){var c=e.lastIndexOf(r);e=e.slice(0,c)+(s?r:"")+" "+o+e.slice(c+1)}}return e}}},G=function(t){return{onSubstitution:function(e,i){if(null==t||"string"!=typeof t)throw new Error("You need to specify a string character to split by.");return"string"==typeof e&&e.includes(t)&&(e=e.split(t)),e}}},W=function(t){return null!=t&&!Number.isNaN(t)&&"boolean"!=typeof t},P=function(){return{onSubstitution:function(t){return Array.isArray(t)?t.filter(W):W(t)?t:""}}},E=(new I(w({separator:","}),b,v),new I(w({separator:",",conjunction:"and"}),b,v),new I(w({separator:",",conjunction:"or"}),b,v),new I(G("\n"),P,w,b,v));new I(G("\n"),w,b,v,j(/&/g,"&"),j(//g,">"),j(/"/g,"""),j(/'/g,"'"),j(/`/g,"`")),new I(Z(/(?:\n(?:\s*))+/g," "),v),new I(Z(/(?:\n\s*)/g,""),v),new I(w({separator:","}),Z(/(?:\s+)/g," "),v),new I(w({separator:",",conjunction:"or"}),Z(/(?:\s+)/g," "),v),new I(w({separator:",",conjunction:"and"}),Z(/(?:\s+)/g," "),v),new I(w,b,v),new I(w,Z(/(?:\s+)/g," "),v),new I(b,v),new I(b("all"),v);const R=".freezeframe",Y="ff-container",A="ff-loading-icon",B="ff-image",x="ff-canvas",J="ff-ready",F="ff-inactive",L="ff-active",k="ff-canvas-ready",z="ff-responsive",M="ff-overlay",H={selector:R,responsive:!0,trigger:"hover",overlay:!1,warnings:!0};var T=i(1),X=i.n(T);var V,N,C,U=function(t,e,i){if(!e.has(t))throw new TypeError("attempted to set private field on non-instance");return e.set(t,i),i},O=function(t,e){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return e.get(t)};V=new WeakMap,N=new WeakMap,C=new WeakMap;e.default=class{constructor(t=R,e){this.items=[],this.$images=[],V.set(this,void 0),N.set(this,void 0),this._eventListeners=Object.assign({},Object.values(n).reduce((t,e)=>(t[e]=[],t),{})),C.set(this,[]),"string"==typeof t||t instanceof Element||t instanceof HTMLCollection||t instanceof NodeList?(this.options=Object.assign(Object.assign({},H),e),U(this,V,t)):"object"!=typeof t||e?a("Invalid FreezeFrame.js configuration:",...[t,e].filter(t=>void 0!==t)):(this.options=Object.assign(Object.assign({},H),t),U(this,V,this.options.selector)),this._init(O(this,V))}get _stylesInjected(){return!!document.querySelector("style#ff-styles")}_init(t){this._injectStylesheet(),U(this,N,"ontouchstart"in window||"onmsgesturechange"in window),this._capture(t),this._load(this.$images)}_capture(t){this.$images=((...t)=>(...e)=>t.reduceRight((t,i)=>(...n)=>t(i(...n,...e)))())(c,l,u)(t,this.options)}_load(t){o()(t).on("progress",(t,{img:e})=>{this._setup(e)})}async _setup(t){const e=this._wrap(t);this.items.push(e),await this._process(e),this._attach(e)}_wrap(t){const e=m(E` +
- `),n=u(P` - + `),i=m(E` + - `);var i,r;return this.options.responsive&&e.classList.add(k),this.options.overlay&&e.appendChild(u(P` -
+ `);var n,r;return this.options.responsive&&e.classList.add(z),this.options.overlay&&e.appendChild(m(E` +
- `)),t.classList.add(A),e.appendChild(n),r=e,(i=t).parentNode.insertBefore(r,i),r.appendChild(i),{$container:e,$canvas:n,$image:t}}_process(t){return new Promise(e=>{const{$canvas:n,$image:i,$container:r}=t,{clientWidth:o,clientHeight:s}=i;n.setAttribute("width",o.toString()),n.setAttribute("height",s.toString());n.getContext("2d").drawImage(i,0,0,o,s),n.classList.add(L),n.addEventListener("transitionend",()=>{this._ready(r),e(t)},{once:!0})})}_ready(t){t.classList.add(x),t.classList.add(J),t.classList.remove(Y)}_attach(t){const{$image:e}=t;if(!U(this,X)&&"hover"===this.options.trigger){const n=()=>{this._toggleOn(t),this._emit(i.START,t,!0),this._emit(i.TOGGLE,t,!0)},r=()=>{this._toggleOff(t),this._emit(i.START,t,!1),this._emit(i.TOGGLE,t,!1)};this._addEventListener(e,"mouseleave",r),this._addEventListener(e,"mouseenter",n)}if(U(this,X)||"click"===this.options.trigger){const n=()=>{this._toggle(t)};this._addEventListener(e,"click",n)}}_addEventListener(t,e,n){U(this,V).push({$image:t,event:e,listener:n}),t.addEventListener(e,n)}_removeEventListener(t,e,n){t.removeEventListener(e,n)}_injectStylesheet(){this._stylesInjected||document.head.appendChild(u(P(`\n \n `)))}_emit(t,e,n){this._eventListeners[t].forEach(t=>{t(Array.isArray(e)&&1===e.length?e[0]:e,n)})}_toggleOn(t){const{$container:e,$image:n}=t;e.classList.contains(x)&&(n.setAttribute("src",n.src),e.classList.remove(J),e.classList.add(F))}_toggleOff(t){const{$container:e}=t;e.classList.contains(x)&&(e.classList.add(J),e.classList.remove(F))}_toggle(t){const{$container:e}=t,n=e.classList.contains(F);return n?this._toggleOff(t):this._toggleOn(t),!n}start(){return this.items.forEach(t=>{this._toggleOn(t)}),this._emit(i.START,this.items,!0),this._emit(i.TOGGLE,this.items,!0),this}stop(){return this.items.forEach(t=>{this._toggleOff(t)}),this._emit(i.STOP,this.items,!1),this._emit(i.TOGGLE,this.items,!1),this}toggle(){return this.items.forEach(t=>{const e=this._toggle(t);e?this._emit(i.START,this.items,!1):this._emit(i.STOP,this.items,!1),this._emit(i.TOGGLE,this.items,e)}),this}on(t,e){return this._eventListeners[t].push(e),this}destroy(){U(this,V).forEach(({$image:t,event:e,listener:n})=>{this._removeEventListener(t,e,n)})}}}]).default})); \ No newline at end of file + `)),t.classList.add(B),e.appendChild(i),r=e,(n=t).parentNode.insertBefore(r,n),r.appendChild(n),{$container:e,$canvas:i,$image:t}}_process(t){return new Promise(e=>{const{$canvas:i,$image:n,$container:r}=t,{clientWidth:o,clientHeight:s}=n;i.setAttribute("width",o.toString()),i.setAttribute("height",s.toString());i.getContext("2d").drawImage(n,0,0,o,s),i.classList.add(k),i.addEventListener("transitionend",()=>{this._ready(r),e(t)},{once:!0})})}_ready(t){t.classList.add(J),t.classList.add(F),t.classList.remove(A)}_attach(t){const{$image:e}=t;if(!O(this,N)&&"hover"===this.options.trigger){const i=()=>{this._toggleOn(t),this._emit(n.START,t,!0),this._emit(n.TOGGLE,t,!0)},r=()=>{this._toggleOff(t),this._emit(n.START,t,!1),this._emit(n.TOGGLE,t,!1)};this._addEventListener(e,"mouseleave",r),this._addEventListener(e,"mouseenter",i)}if(O(this,N)||"click"===this.options.trigger){const i=()=>{this._toggle(t)};this._addEventListener(e,"click",i)}}_addEventListener(t,e,i){O(this,C).push({$image:t,event:e,listener:i}),t.addEventListener(e,i)}_removeEventListener(t,e,i){t.removeEventListener(e,i)}_injectStylesheet(){this._stylesInjected||document.head.appendChild(m(E(`\n \n `)))}_emit(t,e,i){this._eventListeners[t].forEach(t=>{t(Array.isArray(e)&&1===e.length?e[0]:e,i)})}_toggleOn(t){const{$container:e,$image:i}=t;e.classList.contains(J)&&(i.setAttribute("src",i.src),e.classList.remove(F),e.classList.add(L))}_toggleOff(t){const{$container:e}=t;e.classList.contains(J)&&(e.classList.add(F),e.classList.remove(L))}_toggle(t){const{$container:e}=t,i=e.classList.contains(L);return i?this._toggleOff(t):this._toggleOn(t),!i}start(){return this.items.forEach(t=>{this._toggleOn(t)}),this._emit(n.START,this.items,!0),this._emit(n.TOGGLE,this.items,!0),this}stop(){return this.items.forEach(t=>{this._toggleOff(t)}),this._emit(n.STOP,this.items,!1),this._emit(n.TOGGLE,this.items,!1),this}toggle(){return this.items.forEach(t=>{const e=this._toggle(t);e?this._emit(n.START,this.items,!1):this._emit(n.STOP,this.items,!1),this._emit(n.TOGGLE,this.items,e)}),this}on(t,e){return this._eventListeners[t].push(e),this}destroy(){O(this,C).forEach(({$image:t,event:e,listener:i})=>{this._removeEventListener(t,e,i)})}}}]).default})); \ No newline at end of file diff --git a/packages/freezeframe/demo.sh b/packages/freezeframe/demo.sh index dfb00c8..f35c62b 100755 --- a/packages/freezeframe/demo.sh +++ b/packages/freezeframe/demo.sh @@ -1,7 +1,7 @@ #!/usr/bin/env bash -rm ../../docs/index.html -rm ../../docs/freezeframe.min.js +rm -f ../../docs/index.html +rm -f ../../docs/freezeframe.min.js cp ./dist/index.html ../../docs/index.html cp ./dist/freezeframe.min.js ../../docs/freezeframe.min.js diff --git a/packages/freezeframe/dist/freezeframe.min.js b/packages/freezeframe/dist/freezeframe.min.js index 58c5eef..83209c8 100644 --- a/packages/freezeframe/dist/freezeframe.min.js +++ b/packages/freezeframe/dist/freezeframe.min.js @@ -1,10 +1,10 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Freezeframe=e():t.Freezeframe=e()}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="examples",n(n.s=4)}([function(t,e,n){var i,r;!function(o,s){"use strict";i=[n(2)],void 0===(r=function(t){return function(t,e){var n=t.jQuery,i=t.console;function r(t,e){for(var n in e)t[n]=e[n];return t}var o=Array.prototype.slice;function s(t,e,a){if(!(this instanceof s))return new s(t,e,a);var c,l=t;("string"==typeof t&&(l=document.querySelectorAll(t)),l)?(this.elements=(c=l,Array.isArray(c)?c:"object"==typeof c&&"number"==typeof c.length?o.call(c):[c]),this.options=r({},this.options),"function"==typeof e?a=e:r(this.options,e),a&&this.on("always",a),this.getImages(),n&&(this.jqDeferred=new n.Deferred),setTimeout(this.check.bind(this))):i.error("Bad element for imagesLoaded "+(l||t))}s.prototype=Object.create(e.prototype),s.prototype.options={},s.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},s.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&a[e]){for(var n=t.querySelectorAll("img"),i=0;i`✨Freezeframe: ${t}✨`,a=t=>"string"==typeof t?document.querySelectorAll(t):t,c=(t,e,n)=>{const i=t instanceof HTMLElement?[t]:t;return Array.from(i).reduce((t,e)=>{if(e instanceof HTMLImageElement)t.push(e),"gif"!==(t=>t.split(".").pop().toLowerCase().substring(0,3))(e.src)&&n.warnings&&((t,...e)=>{console.warn(s(t),...e)})("Image does not appear to be a gif",e);else{const n=e.querySelectorAll("img");n.length?t=t.concat(...n):((t,...e)=>{console.error(s(t),...e)})("Invalid element",e)}return t},[])},l=t=>[...new Set(t)],u=t=>{const e=window.document.createElement("div");e.innerHTML=t;return e.childNodes[0]};var m,h,d=function(){function t(t,e){for(var n=0;n1?n-1:0),r=1;r0&&Array.isArray(i[0])&&(i=i[0]),this.transformers=i.map((function(t){return"function"==typeof t?t():t})),this.tag}return d(t,[{key:"interimTag",value:function(t,e){for(var n=arguments.length,i=Array(n>2?n-2:0),r=2;r0&&void 0!==arguments[0]?arguments[0]:"";return{onEndResult:function(e){if(""===t)return e.trim();if("start"===(t=t.toLowerCase())||"left"===t)return e.replace(/^\s*/,"");if("end"===t||"right"===t)return e.replace(/\s*$/,"");throw new Error("Side not supported: "+t)}}};function v(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e0&&void 0!==arguments[0]?arguments[0]:"initial";return{onEndResult:function(e){if("initial"===t){var n=e.match(/^[^\S\n]*(?=\S)/gm),i=n&&Math.min.apply(Math,v(n.map((function(t){return t.length}))));if(i){var r=new RegExp("^.{"+i+"}","gm");return e.replace(r,"")}return e}if("all"===t)return e.replace(/^[^\S\n]+/gm,"");throw new Error("Unknown type: "+t)}}},b=function(t,e){return{onEndResult:function(n){if(null==t||null==e)throw new Error("replaceResultTransformer requires at least 2 arguments.");return n.replace(t,e)}}},Z=function(t,e){return{onSubstitution:function(n,i){if(null==t||null==e)throw new Error("replaceSubstitutionTransformer requires at least 2 arguments.");return null==n?n:n.toString().replace(t,e)}}},j={separator:"",conjunction:"",serial:!1},S=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:j;return{onSubstitution:function(e,n){if(Array.isArray(e)){var i=e.length,r=t.separator,o=t.conjunction,s=t.serial,a=n.match(/(\n?[^\S\n]+)$/);if(e=a?e.join(r+a[1]):e.join(r+" "),o&&i>1){var c=e.lastIndexOf(r);e=e.slice(0,c)+(s?r:"")+" "+o+e.slice(c+1)}}return e}}},w=function(t){return{onSubstitution:function(e,n){if(null==t||"string"!=typeof t)throw new Error("You need to specify a string character to split by.");return"string"==typeof e&&e.includes(t)&&(e=e.split(t)),e}}},G=function(t){return null!=t&&!Number.isNaN(t)&&"boolean"!=typeof t},W=function(){return{onSubstitution:function(t){return Array.isArray(t)?t.filter(G):G(t)?t:""}}},P=(new g(S({separator:","}),y,I),new g(S({separator:",",conjunction:"and"}),y,I),new g(S({separator:",",conjunction:"or"}),y,I),new g(w("\n"),W,S,y,I));new g(w("\n"),S,y,I,Z(/&/g,"&"),Z(//g,">"),Z(/"/g,"""),Z(/'/g,"'"),Z(/`/g,"`")),new g(b(/(?:\n(?:\s*))+/g," "),I),new g(b(/(?:\n\s*)/g,""),I),new g(S({separator:","}),b(/(?:\s+)/g," "),I),new g(S({separator:",",conjunction:"or"}),b(/(?:\s+)/g," "),I),new g(S({separator:",",conjunction:"and"}),b(/(?:\s+)/g," "),I),new g(S,y,I),new g(S,b(/(?:\s+)/g," "),I),new g(y,I),new g(y("all"),I);const E=".freezeframe",R="ff-container",Y="ff-loading-icon",A="ff-image",B="ff-canvas",x="ff-ready",J="ff-inactive",F="ff-active",L="ff-canvas-ready",k="ff-responsive",z="ff-overlay",H={responsive:!0,trigger:"hover",overlay:!1,warnings:!0};var M=n(1),T=n.n(M);var X,V,N=function(t,e,n){if(!e.has(t))throw new TypeError("attempted to set private field on non-instance");return e.set(t,n),n},U=function(t,e){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return e.get(t)};X=new WeakMap,V=new WeakMap;e.default=class{constructor(t=E,e){this.items=[],this.$images=[],X.set(this,void 0),this._eventListeners=Object.assign({},Object.values(i).reduce((t,e)=>(t[e]=[],t),{})),V.set(this,[]),this.options=t instanceof Object&&!e?Object.assign(Object.assign({},H),t):Object.assign(Object.assign({},H),e);const n=this.options.selector||t;this._init(n)}get _stylesInjected(){return!!document.querySelector("style#ff-styles")}_init(t){this._injectStylesheet(),N(this,X,"ontouchstart"in window||"onmsgesturechange"in window),this._capture(t),this._load(this.$images)}_capture(t){this.$images=((...t)=>(...e)=>t.reduceRight((t,n)=>(...i)=>t(n(...i,...e)))())(a,c,l)(t,this.options)}_load(t){o()(t).on("progress",(t,{img:e})=>{this._setup(e)})}async _setup(t){const e=this._wrap(t);this.items.push(e),await this._process(e),this._attach(e)}_wrap(t){const e=u(P` -
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Freezeframe=e():t.Freezeframe=e()}(window,(function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="examples",i(i.s=4)}([function(t,e,i){var n,r;!function(o,s){"use strict";n=[i(2)],void 0===(r=function(t){return function(t,e){var i=t.jQuery,n=t.console;function r(t,e){for(var i in e)t[i]=e[i];return t}var o=Array.prototype.slice;function s(t,e,a){if(!(this instanceof s))return new s(t,e,a);var c,l=t;("string"==typeof t&&(l=document.querySelectorAll(t)),l)?(this.elements=(c=l,Array.isArray(c)?c:"object"==typeof c&&"number"==typeof c.length?o.call(c):[c]),this.options=r({},this.options),"function"==typeof e?a=e:r(this.options,e),a&&this.on("always",a),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):n.error("Bad element for imagesLoaded "+(l||t))}s.prototype=Object.create(e.prototype),s.prototype.options={},s.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},s.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&a[e]){for(var i=t.querySelectorAll("img"),n=0;n`✨Freezeframe: ${t}✨`,a=(t,...e)=>{console.error(s(t),...e)},c=t=>"string"==typeof t?document.querySelectorAll(t):t,l=(t,e,i)=>{const n=t instanceof Element?[t]:t;return Array.from(n).reduce((t,e)=>{if(e instanceof HTMLImageElement)t.push(e),"gif"!==(t=>t.split(".").pop().toLowerCase().substring(0,3))(e.src)&&i.warnings&&((t,...e)=>{console.warn(s(t),...e)})("Image does not appear to be a gif",e);else{const i=e.querySelectorAll("img");i.length?t=t.concat(...i):a("Invalid element",e)}return t},[])},u=t=>[...new Set(t)],m=t=>{const e=window.document.createElement("div");e.innerHTML=t;return e.childNodes[0]};var h,d,f=function(){function t(t,e){for(var i=0;i1?i-1:0),r=1;r0&&Array.isArray(n[0])&&(n=n[0]),this.transformers=n.map((function(t){return"function"==typeof t?t():t})),this.tag}return f(t,[{key:"interimTag",value:function(t,e){for(var i=arguments.length,n=Array(i>2?i-2:0),r=2;r0&&void 0!==arguments[0]?arguments[0]:"";return{onEndResult:function(e){if(""===t)return e.trim();if("start"===(t=t.toLowerCase())||"left"===t)return e.replace(/^\s*/,"");if("end"===t||"right"===t)return e.replace(/\s*$/,"");throw new Error("Side not supported: "+t)}}};function y(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e0&&void 0!==arguments[0]?arguments[0]:"initial";return{onEndResult:function(e){if("initial"===t){var i=e.match(/^[^\S\n]*(?=\S)/gm),n=i&&Math.min.apply(Math,y(i.map((function(t){return t.length}))));if(n){var r=new RegExp("^.{"+n+"}","gm");return e.replace(r,"")}return e}if("all"===t)return e.replace(/^[^\S\n]+/gm,"");throw new Error("Unknown type: "+t)}}},Z=function(t,e){return{onEndResult:function(i){if(null==t||null==e)throw new Error("replaceResultTransformer requires at least 2 arguments.");return i.replace(t,e)}}},j=function(t,e){return{onSubstitution:function(i,n){if(null==t||null==e)throw new Error("replaceSubstitutionTransformer requires at least 2 arguments.");return null==i?i:i.toString().replace(t,e)}}},S={separator:"",conjunction:"",serial:!1},w=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:S;return{onSubstitution:function(e,i){if(Array.isArray(e)){var n=e.length,r=t.separator,o=t.conjunction,s=t.serial,a=i.match(/(\n?[^\S\n]+)$/);if(e=a?e.join(r+a[1]):e.join(r+" "),o&&n>1){var c=e.lastIndexOf(r);e=e.slice(0,c)+(s?r:"")+" "+o+e.slice(c+1)}}return e}}},G=function(t){return{onSubstitution:function(e,i){if(null==t||"string"!=typeof t)throw new Error("You need to specify a string character to split by.");return"string"==typeof e&&e.includes(t)&&(e=e.split(t)),e}}},W=function(t){return null!=t&&!Number.isNaN(t)&&"boolean"!=typeof t},P=function(){return{onSubstitution:function(t){return Array.isArray(t)?t.filter(W):W(t)?t:""}}},E=(new I(w({separator:","}),b,v),new I(w({separator:",",conjunction:"and"}),b,v),new I(w({separator:",",conjunction:"or"}),b,v),new I(G("\n"),P,w,b,v));new I(G("\n"),w,b,v,j(/&/g,"&"),j(//g,">"),j(/"/g,"""),j(/'/g,"'"),j(/`/g,"`")),new I(Z(/(?:\n(?:\s*))+/g," "),v),new I(Z(/(?:\n\s*)/g,""),v),new I(w({separator:","}),Z(/(?:\s+)/g," "),v),new I(w({separator:",",conjunction:"or"}),Z(/(?:\s+)/g," "),v),new I(w({separator:",",conjunction:"and"}),Z(/(?:\s+)/g," "),v),new I(w,b,v),new I(w,Z(/(?:\s+)/g," "),v),new I(b,v),new I(b("all"),v);const R=".freezeframe",Y="ff-container",A="ff-loading-icon",B="ff-image",x="ff-canvas",J="ff-ready",F="ff-inactive",L="ff-active",k="ff-canvas-ready",z="ff-responsive",M="ff-overlay",H={selector:R,responsive:!0,trigger:"hover",overlay:!1,warnings:!0};var T=i(1),X=i.n(T);var V,N,C,U=function(t,e,i){if(!e.has(t))throw new TypeError("attempted to set private field on non-instance");return e.set(t,i),i},O=function(t,e){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return e.get(t)};V=new WeakMap,N=new WeakMap,C=new WeakMap;e.default=class{constructor(t=R,e){this.items=[],this.$images=[],V.set(this,void 0),N.set(this,void 0),this._eventListeners=Object.assign({},Object.values(n).reduce((t,e)=>(t[e]=[],t),{})),C.set(this,[]),"string"==typeof t||t instanceof Element||t instanceof HTMLCollection||t instanceof NodeList?(this.options=Object.assign(Object.assign({},H),e),U(this,V,t)):"object"!=typeof t||e?a("Invalid FreezeFrame.js configuration:",...[t,e].filter(t=>void 0!==t)):(this.options=Object.assign(Object.assign({},H),t),U(this,V,this.options.selector)),this._init(O(this,V))}get _stylesInjected(){return!!document.querySelector("style#ff-styles")}_init(t){this._injectStylesheet(),U(this,N,"ontouchstart"in window||"onmsgesturechange"in window),this._capture(t),this._load(this.$images)}_capture(t){this.$images=((...t)=>(...e)=>t.reduceRight((t,i)=>(...n)=>t(i(...n,...e)))())(c,l,u)(t,this.options)}_load(t){o()(t).on("progress",(t,{img:e})=>{this._setup(e)})}async _setup(t){const e=this._wrap(t);this.items.push(e),await this._process(e),this._attach(e)}_wrap(t){const e=m(E` +
- `),n=u(P` - + `),i=m(E` + - `);var i,r;return this.options.responsive&&e.classList.add(k),this.options.overlay&&e.appendChild(u(P` -
+ `);var n,r;return this.options.responsive&&e.classList.add(z),this.options.overlay&&e.appendChild(m(E` +
- `)),t.classList.add(A),e.appendChild(n),r=e,(i=t).parentNode.insertBefore(r,i),r.appendChild(i),{$container:e,$canvas:n,$image:t}}_process(t){return new Promise(e=>{const{$canvas:n,$image:i,$container:r}=t,{clientWidth:o,clientHeight:s}=i;n.setAttribute("width",o.toString()),n.setAttribute("height",s.toString());n.getContext("2d").drawImage(i,0,0,o,s),n.classList.add(L),n.addEventListener("transitionend",()=>{this._ready(r),e(t)},{once:!0})})}_ready(t){t.classList.add(x),t.classList.add(J),t.classList.remove(Y)}_attach(t){const{$image:e}=t;if(!U(this,X)&&"hover"===this.options.trigger){const n=()=>{this._toggleOn(t),this._emit(i.START,t,!0),this._emit(i.TOGGLE,t,!0)},r=()=>{this._toggleOff(t),this._emit(i.START,t,!1),this._emit(i.TOGGLE,t,!1)};this._addEventListener(e,"mouseleave",r),this._addEventListener(e,"mouseenter",n)}if(U(this,X)||"click"===this.options.trigger){const n=()=>{this._toggle(t)};this._addEventListener(e,"click",n)}}_addEventListener(t,e,n){U(this,V).push({$image:t,event:e,listener:n}),t.addEventListener(e,n)}_removeEventListener(t,e,n){t.removeEventListener(e,n)}_injectStylesheet(){this._stylesInjected||document.head.appendChild(u(P(`\n \n `)))}_emit(t,e,n){this._eventListeners[t].forEach(t=>{t(Array.isArray(e)&&1===e.length?e[0]:e,n)})}_toggleOn(t){const{$container:e,$image:n}=t;e.classList.contains(x)&&(n.setAttribute("src",n.src),e.classList.remove(J),e.classList.add(F))}_toggleOff(t){const{$container:e}=t;e.classList.contains(x)&&(e.classList.add(J),e.classList.remove(F))}_toggle(t){const{$container:e}=t,n=e.classList.contains(F);return n?this._toggleOff(t):this._toggleOn(t),!n}start(){return this.items.forEach(t=>{this._toggleOn(t)}),this._emit(i.START,this.items,!0),this._emit(i.TOGGLE,this.items,!0),this}stop(){return this.items.forEach(t=>{this._toggleOff(t)}),this._emit(i.STOP,this.items,!1),this._emit(i.TOGGLE,this.items,!1),this}toggle(){return this.items.forEach(t=>{const e=this._toggle(t);e?this._emit(i.START,this.items,!1):this._emit(i.STOP,this.items,!1),this._emit(i.TOGGLE,this.items,e)}),this}on(t,e){return this._eventListeners[t].push(e),this}destroy(){U(this,V).forEach(({$image:t,event:e,listener:n})=>{this._removeEventListener(t,e,n)})}}}]).default})); \ No newline at end of file + `)),t.classList.add(B),e.appendChild(i),r=e,(n=t).parentNode.insertBefore(r,n),r.appendChild(n),{$container:e,$canvas:i,$image:t}}_process(t){return new Promise(e=>{const{$canvas:i,$image:n,$container:r}=t,{clientWidth:o,clientHeight:s}=n;i.setAttribute("width",o.toString()),i.setAttribute("height",s.toString());i.getContext("2d").drawImage(n,0,0,o,s),i.classList.add(k),i.addEventListener("transitionend",()=>{this._ready(r),e(t)},{once:!0})})}_ready(t){t.classList.add(J),t.classList.add(F),t.classList.remove(A)}_attach(t){const{$image:e}=t;if(!O(this,N)&&"hover"===this.options.trigger){const i=()=>{this._toggleOn(t),this._emit(n.START,t,!0),this._emit(n.TOGGLE,t,!0)},r=()=>{this._toggleOff(t),this._emit(n.START,t,!1),this._emit(n.TOGGLE,t,!1)};this._addEventListener(e,"mouseleave",r),this._addEventListener(e,"mouseenter",i)}if(O(this,N)||"click"===this.options.trigger){const i=()=>{this._toggle(t)};this._addEventListener(e,"click",i)}}_addEventListener(t,e,i){O(this,C).push({$image:t,event:e,listener:i}),t.addEventListener(e,i)}_removeEventListener(t,e,i){t.removeEventListener(e,i)}_injectStylesheet(){this._stylesInjected||document.head.appendChild(m(E(`\n \n `)))}_emit(t,e,i){this._eventListeners[t].forEach(t=>{t(Array.isArray(e)&&1===e.length?e[0]:e,i)})}_toggleOn(t){const{$container:e,$image:i}=t;e.classList.contains(J)&&(i.setAttribute("src",i.src),e.classList.remove(F),e.classList.add(L))}_toggleOff(t){const{$container:e}=t;e.classList.contains(J)&&(e.classList.add(F),e.classList.remove(L))}_toggle(t){const{$container:e}=t,i=e.classList.contains(L);return i?this._toggleOff(t):this._toggleOn(t),!i}start(){return this.items.forEach(t=>{this._toggleOn(t)}),this._emit(n.START,this.items,!0),this._emit(n.TOGGLE,this.items,!0),this}stop(){return this.items.forEach(t=>{this._toggleOff(t)}),this._emit(n.STOP,this.items,!1),this._emit(n.TOGGLE,this.items,!1),this}toggle(){return this.items.forEach(t=>{const e=this._toggle(t);e?this._emit(n.START,this.items,!1):this._emit(n.STOP,this.items,!1),this._emit(n.TOGGLE,this.items,e)}),this}on(t,e){return this._eventListeners[t].push(e),this}destroy(){O(this,C).forEach(({$image:t,event:e,listener:i})=>{this._removeEventListener(t,e,i)})}}}]).default})); \ No newline at end of file diff --git a/packages/freezeframe/src/index.ts b/packages/freezeframe/src/index.ts index c4f4503..6256892 100644 --- a/packages/freezeframe/src/index.ts +++ b/packages/freezeframe/src/index.ts @@ -62,7 +62,10 @@ class Freezeframe { this.options = { ...defaultOptions, ...target }; this.#target = this.options.selector; } else { - error('Invalid FreezeFrame.js configuration'); + error( + 'Invalid FreezeFrame.js configuration:', + ...[target, options].filter((arg) => arg !== undefined) + ); } this._init(this.#target); } diff --git a/packages/freezeframe/tsconfig.json b/packages/freezeframe/tsconfig.json index 5105368..4b337eb 100644 --- a/packages/freezeframe/tsconfig.json +++ b/packages/freezeframe/tsconfig.json @@ -1,4 +1,5 @@ { + "exclude": ["./tests/ts-intellisense"], "compilerOptions": { "outDir": "./dist/", "noImplicitAny": true,