From 9f835518e96b8d314f4bf6ac0dc996b51b0a6dac Mon Sep 17 00:00:00 2001 From: Nick Ford Date: Mon, 7 Sep 2020 11:41:23 -0400 Subject: [PATCH] be consistent about casing of Freezeframe, update docs --- docs/freezeframe.min.js | 2 +- packages/freezeframe/README.md | 8 +++- packages/freezeframe/dist/freezeframe.min.js | 2 +- packages/freezeframe/dist/src/index.d.ts | 6 +-- .../freezeframe/dist/src/utils/index.d.ts | 4 +- packages/freezeframe/dist/types/index.d.ts | 6 +-- packages/freezeframe/src/index.ts | 40 +++++++++---------- packages/freezeframe/src/utils/index.ts | 4 +- .../freezeframe/tests/ts-intellisense/test.ts | 40 +++++++++---------- packages/freezeframe/types/index.ts | 6 +-- 10 files changed, 62 insertions(+), 56 deletions(-) diff --git a/docs/freezeframe.min.js b/docs/freezeframe.min.js index 6ef116a..8fb1c4f 100644 --- a/docs/freezeframe.min.js +++ b/docs/freezeframe.min.js @@ -1,4 +1,4 @@ -!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,...e)=>{console.error(s(t),...e)},c=t=>"string"==typeof t?document.querySelectorAll(t):t,l=(t,e,n)=>{const i=t instanceof Element?[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(Array.from(n)):a("Invalid element",e)}return t},[])},u=t=>[...new Set(t)],m=t=>{const e=window.document.createElement("div");e.innerHTML=t;const n=e.childNodes;return n.length>1?n:n[0]};var h,f,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 y(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,y(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)}}},Z=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)}}},j=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)}}},S={separator:"",conjunction:"",serial:!1},w=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:S;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}}},G=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}}},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",x="ff-image",B="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=n(1),X=n.n(T);var V,N,C,U=function(t,e,n,i){return new(n||(n=Promise))((function(r,o){function s(t){try{c(i.next(t))}catch(t){o(t)}}function a(t){try{c(i.throw(t))}catch(t){o(t)}}function c(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,a)}c((i=i.apply(t,e||[])).next())}))},O=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},D=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(i).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),O(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),O(this,V,this.options.selector)),this._init(D(this,V))}get _stylesInjected(){return!!document.querySelector("style#ff-styles")}_init(t){this._injectStylesheet(),O(this,N,"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)))())(c,l,u)(t,this.options)}_load(t){o()(t).on("progress",(t,{img:e})=>{this._setup(e)})}_setup(t){return U(this,void 0,void 0,(function*(){const e=this._wrap(t);this.items.push(e),yield this._process(e),this._attach(e)}))}_wrap(t){const e=m(E` +!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,...e)=>{console.error(s(t),...e)},c=t=>"string"==typeof t?document.querySelectorAll(t):t,l=(t,e,n)=>{const i=t instanceof Element?[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(Array.from(n)):a("Invalid element",e)}return t},[])},u=t=>[...new Set(t)],m=t=>{const e=window.document.createElement("div");e.innerHTML=t;const n=e.childNodes;return n.length>1?n:n[0]};var h,f,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 y(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,y(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)}}},Z=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)}}},j=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)}}},S={separator:"",conjunction:"",serial:!1},w=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:S;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}}},G=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}}},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",x="ff-image",B="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=n(1),X=n.n(T);var V,N,C,U=function(t,e,n,i){return new(n||(n=Promise))((function(r,o){function s(t){try{c(i.next(t))}catch(t){o(t)}}function a(t){try{c(i.throw(t))}catch(t){o(t)}}function c(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,a)}c((i=i.apply(t,e||[])).next())}))},O=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},D=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(i).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),O(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),O(this,V,this.options.selector)),this._init(D(this,V))}get _stylesInjected(){return!!document.querySelector("style#ff-styles")}_init(t){this._injectStylesheet(),O(this,N,"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)))())(c,l,u)(t,this.options)}_load(t){o()(t).on("progress",(t,{img:e})=>{this._setup(e)})}_setup(t){return U(this,void 0,void 0,(function*(){const e=this._wrap(t);this.items.push(e),yield this._process(e),this._attach(e)}))}_wrap(t){const e=m(E`
`),n=m(E` diff --git a/packages/freezeframe/README.md b/packages/freezeframe/README.md index 9589a7a..28bb6b2 100755 --- a/packages/freezeframe/README.md +++ b/packages/freezeframe/README.md @@ -11,7 +11,13 @@ animate on mouse hover / mouse click / touch event, or manually via class method Version 4.x no longer requires or supports jQuery. If you want to use freezeframe as a jQuery plugin, check out [freezeframe v3.0.10](https://github.com/ctrl-freaks/freezeframe.js/tree/archived/3.0.10). -FreezeFrame is now built in TypeScript, and offers consumable type definitions and improved input validation! +Freezeframe is now built in TypeScript, and offers consumable type definitions and improved input validation! + +To get started using the TypeScript beta: + +```sh +npm install freezeframe@5.0.0-beta.1 +``` - [Freezeframe.js](#freezeframejs) - [Examples](#examples) diff --git a/packages/freezeframe/dist/freezeframe.min.js b/packages/freezeframe/dist/freezeframe.min.js index 6ef116a..8fb1c4f 100644 --- a/packages/freezeframe/dist/freezeframe.min.js +++ b/packages/freezeframe/dist/freezeframe.min.js @@ -1,4 +1,4 @@ -!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,...e)=>{console.error(s(t),...e)},c=t=>"string"==typeof t?document.querySelectorAll(t):t,l=(t,e,n)=>{const i=t instanceof Element?[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(Array.from(n)):a("Invalid element",e)}return t},[])},u=t=>[...new Set(t)],m=t=>{const e=window.document.createElement("div");e.innerHTML=t;const n=e.childNodes;return n.length>1?n:n[0]};var h,f,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 y(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,y(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)}}},Z=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)}}},j=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)}}},S={separator:"",conjunction:"",serial:!1},w=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:S;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}}},G=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}}},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",x="ff-image",B="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=n(1),X=n.n(T);var V,N,C,U=function(t,e,n,i){return new(n||(n=Promise))((function(r,o){function s(t){try{c(i.next(t))}catch(t){o(t)}}function a(t){try{c(i.throw(t))}catch(t){o(t)}}function c(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,a)}c((i=i.apply(t,e||[])).next())}))},O=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},D=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(i).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),O(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),O(this,V,this.options.selector)),this._init(D(this,V))}get _stylesInjected(){return!!document.querySelector("style#ff-styles")}_init(t){this._injectStylesheet(),O(this,N,"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)))())(c,l,u)(t,this.options)}_load(t){o()(t).on("progress",(t,{img:e})=>{this._setup(e)})}_setup(t){return U(this,void 0,void 0,(function*(){const e=this._wrap(t);this.items.push(e),yield this._process(e),this._attach(e)}))}_wrap(t){const e=m(E` +!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,...e)=>{console.error(s(t),...e)},c=t=>"string"==typeof t?document.querySelectorAll(t):t,l=(t,e,n)=>{const i=t instanceof Element?[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(Array.from(n)):a("Invalid element",e)}return t},[])},u=t=>[...new Set(t)],m=t=>{const e=window.document.createElement("div");e.innerHTML=t;const n=e.childNodes;return n.length>1?n:n[0]};var h,f,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 y(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,y(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)}}},Z=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)}}},j=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)}}},S={separator:"",conjunction:"",serial:!1},w=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:S;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}}},G=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}}},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",x="ff-image",B="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=n(1),X=n.n(T);var V,N,C,U=function(t,e,n,i){return new(n||(n=Promise))((function(r,o){function s(t){try{c(i.next(t))}catch(t){o(t)}}function a(t){try{c(i.throw(t))}catch(t){o(t)}}function c(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,a)}c((i=i.apply(t,e||[])).next())}))},O=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},D=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(i).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),O(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),O(this,V,this.options.selector)),this._init(D(this,V))}get _stylesInjected(){return!!document.querySelector("style#ff-styles")}_init(t){this._injectStylesheet(),O(this,N,"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)))())(c,l,u)(t,this.options)}_load(t){o()(t).on("progress",(t,{img:e})=>{this._setup(e)})}_setup(t){return U(this,void 0,void 0,(function*(){const e=this._wrap(t);this.items.push(e),yield this._process(e),this._attach(e)}))}_wrap(t){const e=m(E`
`),n=m(E` diff --git a/packages/freezeframe/dist/src/index.d.ts b/packages/freezeframe/dist/src/index.d.ts index 92dce07..4e77543 100644 --- a/packages/freezeframe/dist/src/index.d.ts +++ b/packages/freezeframe/dist/src/index.d.ts @@ -1,12 +1,12 @@ -import { SelectorOrNodes, Freeze, FreezeFrameOptions, RequireProps } from '../types'; +import { SelectorOrNodes, Freeze, FreezeframeOptions, RequireProps } from '../types'; declare class Freezeframe { #private; - options: FreezeFrameOptions; + options: FreezeframeOptions; items: Freeze[]; $images: HTMLImageElement[]; private _eventListeners; private get _stylesInjected(); - constructor(target?: SelectorOrNodes | RequireProps, options?: FreezeFrameOptions); + constructor(target?: SelectorOrNodes | RequireProps, options?: FreezeframeOptions); private _init; private _capture; private _load; diff --git a/packages/freezeframe/dist/src/utils/index.d.ts b/packages/freezeframe/dist/src/utils/index.d.ts index 7da4801..b6a924c 100644 --- a/packages/freezeframe/dist/src/utils/index.d.ts +++ b/packages/freezeframe/dist/src/utils/index.d.ts @@ -1,4 +1,4 @@ -import { SelectorOrNodes, FreezeFrameOptions } from '../../types/index'; +import { SelectorOrNodes, FreezeframeOptions } from '../../types/index'; export declare const pipe: (...fns: Function[]) => (...initArgs: any[]) => any; export declare const formatMessage: (string: string) => string; export declare const error: (message: string, ...args: any[]) => void; @@ -7,7 +7,7 @@ export declare const isTouch: () => boolean; export declare const parseFilename: (filePath: string) => string; export declare const validateFilename: (filePath: string) => boolean; export declare const normalizeElements: (selectorOrNodes: SelectorOrNodes) => Element | HTMLCollectionOf | NodeListOf; -export declare const validateElements: (elements: Element | Element[], _: any, options: FreezeFrameOptions) => any[]; +export declare const validateElements: (elements: Element | Element[], _: any, options: FreezeframeOptions) => any[]; export declare const dedupeImages: (images: HTMLImageElement[]) => HTMLImageElement[]; export declare const htmlToNode: (html: string) => HTMLElement; export declare const wrapNode: ($el: HTMLElement, $wrapper: HTMLElement) => void; diff --git a/packages/freezeframe/dist/types/index.d.ts b/packages/freezeframe/dist/types/index.d.ts index 88252b8..ec96ee3 100644 --- a/packages/freezeframe/dist/types/index.d.ts +++ b/packages/freezeframe/dist/types/index.d.ts @@ -3,12 +3,12 @@ export declare type RequireProps = Omit & }; export declare type SelectorOrNodes = string | Element | HTMLCollectionOf | NodeListOf; export declare type TriggerType = string | false; -export declare enum FreezeFrameEventTypes { +export declare enum FreezeframeEventTypes { START = "start", STOP = "stop", TOGGLE = "toggle" } -export interface FreezeFrameOptions { +export interface FreezeframeOptions { selector?: SelectorOrNodes; responsive?: boolean; trigger?: TriggerType; @@ -20,7 +20,7 @@ export interface Freeze { $canvas: HTMLCanvasElement; $image: HTMLImageElement; } -export interface FreezeFrameEvent { +export interface FreezeframeEvent { $image: HTMLImageElement; event: string; listener: EventListenerOrEventListenerObject; diff --git a/packages/freezeframe/src/index.ts b/packages/freezeframe/src/index.ts index fccd823..427ad98 100644 --- a/packages/freezeframe/src/index.ts +++ b/packages/freezeframe/src/index.ts @@ -2,9 +2,9 @@ import imagesLoaded from 'imagesloaded'; import { SelectorOrNodes, Freeze, - FreezeFrameEvent, - FreezeFrameOptions, - FreezeFrameEventTypes, + FreezeframeEvent, + FreezeframeOptions, + FreezeframeEventTypes, RequireProps } from '../types'; import { @@ -25,7 +25,7 @@ import { } from './constants'; class Freezeframe { - options: FreezeFrameOptions; + options: FreezeframeOptions; items: Freeze[] = []; @@ -36,7 +36,7 @@ class Freezeframe { #isTouch: boolean; private _eventListeners = { - ...Object.values(FreezeFrameEventTypes) + ...Object.values(FreezeframeEventTypes) .reduce((acc, item) => { acc[item] = []; return acc; @@ -48,8 +48,8 @@ class Freezeframe { } constructor( - target: SelectorOrNodes | RequireProps = classes.SELECTOR, - options?: FreezeFrameOptions + target: SelectorOrNodes | RequireProps = classes.SELECTOR, + options?: FreezeframeOptions ) { if ( typeof target === 'string' @@ -64,7 +64,7 @@ class Freezeframe { this.#target = this.options.selector; } else { error( - 'Invalid FreezeFrame.js configuration:', + 'Invalid Freezeframe.js configuration:', ...[target, options].filter((arg) => arg !== undefined) ); } @@ -155,13 +155,13 @@ class Freezeframe { if (!this.#isTouch && this.options.trigger === 'hover') { const onMouseEnter = (): void => { this._toggleOn(freeze); - this._emit(FreezeFrameEventTypes.START, freeze, true); - this._emit(FreezeFrameEventTypes.TOGGLE, freeze, true); + this._emit(FreezeframeEventTypes.START, freeze, true); + this._emit(FreezeframeEventTypes.TOGGLE, freeze, true); }; const onMouseLeave = (): void => { this._toggleOff(freeze); - this._emit(FreezeFrameEventTypes.START, freeze, false); - this._emit(FreezeFrameEventTypes.TOGGLE, freeze, false); + this._emit(FreezeframeEventTypes.START, freeze, false); + this._emit(FreezeframeEventTypes.TOGGLE, freeze, false); }; this._addEventListener($image, 'mouseleave', onMouseLeave); this._addEventListener($image, 'mouseenter', onMouseEnter); @@ -175,7 +175,7 @@ class Freezeframe { } } - #internalEvents: FreezeFrameEvent[] = []; + #internalEvents: FreezeframeEvent[] = []; private _addEventListener( $image: HTMLImageElement, @@ -250,8 +250,8 @@ class Freezeframe { this.items.forEach((freeze) => { this._toggleOn(freeze); }); - this._emit(FreezeFrameEventTypes.START, this.items, true); - this._emit(FreezeFrameEventTypes.TOGGLE, this.items, true); + this._emit(FreezeframeEventTypes.START, this.items, true); + this._emit(FreezeframeEventTypes.TOGGLE, this.items, true); return this; } @@ -259,8 +259,8 @@ class Freezeframe { this.items.forEach((freeze) => { this._toggleOff(freeze); }); - this._emit(FreezeFrameEventTypes.STOP, this.items, false); - this._emit(FreezeFrameEventTypes.TOGGLE, this.items, false); + this._emit(FreezeframeEventTypes.STOP, this.items, false); + this._emit(FreezeframeEventTypes.TOGGLE, this.items, false); return this; } @@ -268,11 +268,11 @@ class Freezeframe { this.items.forEach((freeze) => { const isPlaying = this._toggle(freeze); if (isPlaying) { - this._emit(FreezeFrameEventTypes.START, this.items, false); + this._emit(FreezeframeEventTypes.START, this.items, false); } else { - this._emit(FreezeFrameEventTypes.STOP, this.items, false); + this._emit(FreezeframeEventTypes.STOP, this.items, false); } - this._emit(FreezeFrameEventTypes.TOGGLE, this.items, isPlaying); + this._emit(FreezeframeEventTypes.TOGGLE, this.items, isPlaying); }); return this; } diff --git a/packages/freezeframe/src/utils/index.ts b/packages/freezeframe/src/utils/index.ts index 203d419..fc528e4 100644 --- a/packages/freezeframe/src/utils/index.ts +++ b/packages/freezeframe/src/utils/index.ts @@ -1,4 +1,4 @@ -import { SelectorOrNodes, FreezeFrameOptions } from '../../types/index'; +import { SelectorOrNodes, FreezeframeOptions } from '../../types/index'; export const pipe = (...fns: Function[]) => ( (...initArgs: any[]) => { @@ -42,7 +42,7 @@ export const normalizeElements = (selectorOrNodes: SelectorOrNodes) => { export const validateElements = ( elements: Element | Element[], _: any, - options: FreezeFrameOptions + options: FreezeframeOptions ) => { const list = elements instanceof Element ? [elements] : elements; return Array.from(list).reduce((acc, image) => { diff --git a/packages/freezeframe/tests/ts-intellisense/test.ts b/packages/freezeframe/tests/ts-intellisense/test.ts index 6f7f169..a992653 100644 --- a/packages/freezeframe/tests/ts-intellisense/test.ts +++ b/packages/freezeframe/tests/ts-intellisense/test.ts @@ -1,45 +1,45 @@ /* eslint-disable no-new */ -import FreezeFrame from '../../src'; +import Freezeframe from '../../src'; // happy paths -new FreezeFrame(); -new FreezeFrame('.foo'); -new FreezeFrame('#foo'); -new FreezeFrame(document.body); -new FreezeFrame(document.getElementById('foo')); -new FreezeFrame(document.getElementsByClassName('foo')); -new FreezeFrame(document.querySelector('.foo')); -new FreezeFrame(document.querySelectorAll('.foo')); -new FreezeFrame({ +new Freezeframe(); +new Freezeframe('.foo'); +new Freezeframe('#foo'); +new Freezeframe(document.body); +new Freezeframe(document.getElementById('foo')); +new Freezeframe(document.getElementsByClassName('foo')); +new Freezeframe(document.querySelector('.foo')); +new Freezeframe(document.querySelectorAll('.foo')); +new Freezeframe({ selector: '.foo' }); -new FreezeFrame({ +new Freezeframe({ selector: document.body, responsive: false, trigger: 'click', overlay: false, warnings: false }); -new FreezeFrame(document.body, { +new Freezeframe(document.body, { responsive: false, trigger: 'click', overlay: false, warnings: false }); -new FreezeFrame('.foo', {}); // looks odd but isn't an issue +new Freezeframe('.foo', {}); // looks odd but isn't an issue // sad paths -new FreezeFrame(true); -new FreezeFrame(3); -new FreezeFrame({}); -new FreezeFrame([]); -new FreezeFrame({ +new Freezeframe(true); +new Freezeframe(3); +new Freezeframe({}); +new Freezeframe([]); +new Freezeframe({ foo: 3 }); -new FreezeFrame({ +new Freezeframe({ selector: 3 }); -new FreezeFrame({ +new Freezeframe({ responsive: false, trigger: 'click', overlay: false, diff --git a/packages/freezeframe/types/index.ts b/packages/freezeframe/types/index.ts index 62bd39f..5947011 100644 --- a/packages/freezeframe/types/index.ts +++ b/packages/freezeframe/types/index.ts @@ -9,13 +9,13 @@ export type SelectorOrNodes = string export type TriggerType = string | false -export enum FreezeFrameEventTypes { +export enum FreezeframeEventTypes { START = 'start', STOP = 'stop', TOGGLE = 'toggle' } -export interface FreezeFrameOptions { +export interface FreezeframeOptions { selector?: SelectorOrNodes, responsive?: boolean, trigger?: TriggerType, @@ -29,7 +29,7 @@ export interface Freeze { $image: HTMLImageElement } -export interface FreezeFrameEvent { +export interface FreezeframeEvent { $image: HTMLImageElement, event: string, listener: EventListenerOrEventListenerObject