From 729079ef613d5f0317814735079fac44a72c41a4 Mon Sep 17 00:00:00 2001
From: Mantas <mantas@baltcoda.com>
Date: Sat, 4 Sep 2021 06:14:10 +0300
Subject: [PATCH] docs(common) updated default configs for storybook

---
 docs/iframe.html                                                | 2 +-
 ...2cecaf85.iframe.bundle.js => main.88e25488.iframe.bundle.js} | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename docs/{main.2cecaf85.iframe.bundle.js => main.88e25488.iframe.bundle.js} (99%)

diff --git a/docs/iframe.html b/docs/iframe.html
index d2dc18c..a7b0010 100644
--- a/docs/iframe.html
+++ b/docs/iframe.html
@@ -135,4 +135,4 @@
             
         
             
-              window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.ecfb138e.iframe.bundle.js"></script><script src="vendors~main.7230a493.iframe.bundle.js"></script><script src="main.2cecaf85.iframe.bundle.js"></script></body></html>
\ No newline at end of file
+              window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.ecfb138e.iframe.bundle.js"></script><script src="vendors~main.7230a493.iframe.bundle.js"></script><script src="main.88e25488.iframe.bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/docs/main.2cecaf85.iframe.bundle.js b/docs/main.88e25488.iframe.bundle.js
similarity index 99%
rename from docs/main.2cecaf85.iframe.bundle.js
rename to docs/main.88e25488.iframe.bundle.js
index e94a2fb..a52e2d8 100644
--- a/docs/main.2cecaf85.iframe.bundle.js
+++ b/docs/main.88e25488.iframe.bundle.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{462:function(module,exports,__webpack_require__){__webpack_require__(463),__webpack_require__(623),__webpack_require__(624),__webpack_require__(825),__webpack_require__(827),__webpack_require__(828),__webpack_require__(829),__webpack_require__(826),__webpack_require__(822),__webpack_require__(830),__webpack_require__(823),__webpack_require__(824),__webpack_require__(831),module.exports=__webpack_require__(808)},530:function(module,exports){},624:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(340)},808:function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__(340).configure)([__webpack_require__(809),__webpack_require__(811)],module,!1)}).call(this,__webpack_require__(187)(module))},809:function(module,exports,__webpack_require__){var map={"./main.stories.mdx":810};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=809},810:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(24),__webpack_require__(284),__webpack_require__(5),__webpack_require__(18),__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(6),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(208),_excluded=["components"];function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.b,{title:"Intro",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("style",null,"\n\n  .tip {\n    display: inline-block;\n    border-radius: 5px;\n    font-size: 12px;\n    line-height: 16px;\n    font-weight: 700;\n    background: #E7FDD8;\n    color: #66BF3C;\n    padding: 5px 8px;\n    margin-right: 10px;\n    vertical-align: top;\n  }\n\n  .tip-wrapper {\n    font-size: 13px;\n    line-height: 26px;\n    margin-top: 15px;\n    margin-bottom: 40px;\n  }\n\n  .tip-wrapper code {\n    font-size: 12px;\n    display: inline-block;\n  }\n\n"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h1",{id:"canvas-scroll-clip"},"Canvas Scroll Clip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Canvas Scroll Clip is a standalone JavaScript micro-library for a fancy scroll based image sequence animation in canvas. There is no third party dependencies. Checkout a default ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"strong",href:"/story/canvas-scroll-clip--default"},"demo"))," and it's variations."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"install"},"Install"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"yarn add canvas-scroll-clip\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm install --save canvas-scroll-clip\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"usage"},"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Initialize Canvas Scroll Clip on an element with options:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},'import CanvasScrollClip from "canvas-scroll-clip";\n\nnew CanvasScrollClip(document.querySelector(\'.element\'), {\n  framePath: "{first_frame_url_of_a_sequence}",\n  frameCount: 101,\n  scrollArea: 2000\n})\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"requiredefault"},"require('...').default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"When importing a module using require use .default ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"const CanvasScrollClip = require('canvas-scroll-clip').default"),". Decided to stick with pure ES6 module semantics and keep the code generation as clean as possible."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"options"},"Options"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Options object is required and takes these parameters:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"framepath-required"},"framePath (required)"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"String")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"URL of first image of a sequence."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("div",{className:"tip-wrapper"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",{className:"tip"},"Important note"),"Sequence should start with leading 0, minimum 2 digits and at the end of the name. for example:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",null,"https://..URL../frame_0001.jpg")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"framecount-required"},"frameCount (required)"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"Number")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Number of in total in a sequence."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"scrollarea-recommended"},"scrollArea (recommended)"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"Number"),"\nDefault: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"2x the IMAGE height")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Scrollable area height that is used to play the image sequence."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"identifier"},"identifier"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"String"),"\nUsed for container and child element css classes."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"events"},"Events"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"viewportscroll"},"viewport.scroll"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Callback params: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"scrollTop"),"\nType: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"Number")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Event is triggered with scroll event. Returns ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"scrollTop")," position."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"usage-1"},"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"CanvasScrollClip.events.on('viewport.scroll', function(scrollTop){\n  console.log(scrollTop);\n});\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"viewportresize"},"viewport.resize"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Event is triggerent on window resize."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"usage-2"},"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"CanvasScrollClip.events.on('viewport.resize', function(){\n  console.log(\"window resized\");\n});\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"imagesloaded"},"images.loaded"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Event is triggered after all images preloaded. Good place to implement loader animation."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"usage-3"},"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"CanvasScrollClip.events.on('images.loaded', function() {\n  console.log(\"images.loaded\");\n});\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"other"},"Other"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"license"},"License"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"MIT license"))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Intro",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},811:function(module,exports,__webpack_require__){var map={"./main.stories.ts":821};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=811},821:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Default",(function(){return Default}));__webpack_require__(285),__webpack_require__(18),__webpack_require__(193),__webpack_require__(55),__webpack_require__(62),__webpack_require__(194),__webpack_require__(128),__webpack_require__(812),__webpack_require__(26),__webpack_require__(104),__webpack_require__(814),__webpack_require__(54),__webpack_require__(9),__webpack_require__(815),__webpack_require__(15),__webpack_require__(14),__webpack_require__(16),__webpack_require__(57),__webpack_require__(817),__webpack_require__(84),__webpack_require__(419),__webpack_require__(68),__webpack_require__(30),__webpack_require__(13),__webpack_require__(284),__webpack_require__(420),__webpack_require__(95),__webpack_require__(61),__webpack_require__(7),__webpack_require__(258);function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&_setPrototypeOf(subClass,superClass)}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(self)}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _wrapNativeSuper(Class){var _cache="function"==typeof Map?new Map:void 0;return(_wrapNativeSuper=function _wrapNativeSuper(Class){if(null===Class||!function _isNativeFunction(fn){return-1!==Function.toString.call(fn).indexOf("[native code]")}(Class))return Class;if("function"!=typeof Class)throw new TypeError("Super expression must either be null or a function");if(void 0!==_cache){if(_cache.has(Class))return _cache.get(Class);_cache.set(Class,Wrapper)}function Wrapper(){return _construct(Class,arguments,_getPrototypeOf(this).constructor)}return Wrapper.prototype=Object.create(Class.prototype,{constructor:{value:Wrapper,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(Wrapper,Class)})(Class)}function _construct(Parent,args,Class){return(_construct=_isNativeReflectConstruct()?Reflect.construct:function _construct(Parent,args,Class){var a=[null];a.push.apply(a,args);var instance=new(Function.bind.apply(Parent,a));return Class&&_setPrototypeOf(instance,Class.prototype),instance}).apply(null,arguments)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function _setPrototypeOf(o,p){return(_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o})(o,p)}function _getPrototypeOf(o){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}var CanvasScrollClipError=function(_Error){_inherits(CanvasScrollClipError,_Error);var _super=_createSuper(CanvasScrollClipError);function CanvasScrollClipError(message){var _this;return _classCallCheck(this,CanvasScrollClipError),message||(message="Whoops! Something went wrong."),_this=_super.call(this,""+message),Object.setPrototypeOf(_assertThisInitialized(_this),Object.getPrototypeOf(_assertThisInitialized(_this))),Error.captureStackTrace&&Error.captureStackTrace(_assertThisInitialized(_this),CanvasScrollClipError),_this}return _createClass(CanvasScrollClipError,[{key:"name",get:function get(){return this.constructor.name}}]),CanvasScrollClipError}(_wrapNativeSuper(Error)),AppError=function(_CanvasScrollClipErro){_inherits(AppError,_CanvasScrollClipErro);var _super2=_createSuper(AppError);function AppError(){return _classCallCheck(this,AppError),_super2.apply(this,arguments)}return _createClass(AppError,[{key:"name",get:function get(){return"CanvasScrollClipError"}}]),AppError}(CanvasScrollClipError),AppWarning=function(_AppLogger){_inherits(AppWarning,_AppLogger);var _super4=_createSuper(AppWarning);function AppWarning(message){var _this2;return _classCallCheck(this,AppWarning),(_this2=_super4.call(this,message)).warn(message),_this2}return AppWarning}(function(_CanvasScrollClipErro2){_inherits(AppLogger,_CanvasScrollClipErro2);var _super3=_createSuper(AppLogger);function AppLogger(){return _classCallCheck(this,AppLogger),_super3.apply(this,arguments)}return _createClass(AppLogger,[{key:"log",value:function log(message){console.log(this.name+": "+message)}},{key:"warn",value:function warn(message){console.warn(this.name+": "+message)}}]),AppLogger}(CanvasScrollClipError));function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}var RegExpLastDigitsMatch=/\d+(?!.*\d+)/,AppEvent={viewport:{resize:"viewport.resize",scroll:"viewport.scroll"},images:{loaded:"images.loaded"}},EventList=Object.values(AppEvent).map((function(e){return Object.values(e)})).flat(),debounce=function debounce(func){var timeout,threshold=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,debounced=function debounced(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];timeout&&clearTimeout(timeout),timeout=setTimeout((function(){return func.apply(void 0,args)}),threshold)};return debounced};function _getImage(){return(_getImage=_asyncToGenerator(regeneratorRuntime.mark((function _callee(imageLink){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.abrupt("return",new Promise((function(resolve,reject){var image=new Image;image.onload=function(){resolve(image)},image.src=imageLink,image.onerror=function(){reject(new AppError("Image with name '..."+imageLink.slice(-20)+"' was not found."))}})));case 1:case"end":return _context.stop()}}),_callee)})))).apply(this,arguments)}function preloadImages(frameOptions){var arrayOfImages=new Array(frameOptions.count).fill(0).map((function(_elem,index){return function getImage(_x){return _getImage.apply(this,arguments)}(function getFramePathByIndex(frameOptions){var frameNumber=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return[frameOptions.path,frameOptions.image.start,frameNumber.toString().padStart(frameOptions.image.padStart,"0"),frameOptions.image.ending].join("")}(frameOptions,index+1))}));return Promise.all(arrayOfImages)}function getScrollTop(){return window.pageYOffset||document.documentElement.scrollTop}function getImageStructure(firstFramePath,frameCount){var img=function getPathEnding(path){return path.split("/").pop()||""}(firstFramePath),ext=function getFileSuffix(fileName){var ext=fileName.split(".").pop()||" ";if(!["jpg","jpeg","png"].includes(ext))throw new AppError("Image with extension ['"+ext+"'] is not supported.");return"."+ext}(img),seq=function getImageSequence(imageName){var match=imageName.match(RegExpLastDigitsMatch),sequence=match&&null!==match[0]?match[0]:"";if(sequence.length<2)throw new AppError('Bad image sequence format. Should start with 0 and be longer than 2 numbers, f.e. "frame_01.jpg"');return sequence}(img);if(frameCount.toString().length>seq.length)throw new AppError("Leading zeros in first frame path has to be more than the frame count and sequence at the end.");return{start:img.slice(0,img.indexOf(seq)),sequence:parseInt(seq),padStart:seq.length,ending:img.slice(img.indexOf(seq)+seq.length),extension:ext}}__webpack_require__(74),__webpack_require__(283);var events_EventEmitter=function EventEmitter(){var _this=this;!function events_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,EventEmitter),this.observers=void 0,this.on=function(event,cb){EventList.includes(event)||new AppWarning("Event ['"+event+"'] is not supported.");var observer=_this.observers.get(event);observer?observer.push(cb):_this.observers.set(event,[cb])},this.remove=function(event,cb){var observer=_this.observers.get(event);if(observer)for(var i=0;i<observer.length;i++)if(observer[i]===cb)return void observer.splice(i,1)},this.emit=function(event){var observer=_this.observers.get(event);if(observer){for(var _len=arguments.length,args=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++)args[_key-1]=arguments[_key];for(var i=0;i<observer.length;i++)observer[i].apply(observer,args)}},this.observers=new Map};function base_defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var common_frame=function Frame(_ref){var framePath=_ref.framePath,frameCount=_ref.frameCount;if(function frame_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Frame),this.path=void 0,this.count=void 0,this.image=void 0,!framePath.length)throw new AppError("Frame path is not defined.");if(!frameCount)throw new AppError("Frame count is not defined.");this.count=frameCount,this.path=function getImageBasePath(firstFramePath){var path=firstFramePath.split("/");return path.pop(),path.join("/")+"/"}(framePath),this.image=getImageStructure(framePath,this.count)};function options_defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function options_setPrototypeOf(o,p){return(options_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o})(o,p)}function options_createSuper(Derived){var hasNativeReflectConstruct=function options_isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=options_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=options_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return options_possibleConstructorReturn(this,result)}}function options_possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function options_assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function options_getPrototypeOf(o){return(options_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}function canvas_asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function canvas_defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function canvas_setPrototypeOf(o,p){return(canvas_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o})(o,p)}function canvas_createSuper(Derived){var hasNativeReflectConstruct=function canvas_isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=canvas_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=canvas_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return canvas_possibleConstructorReturn(this,result)}}function canvas_possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function canvas_assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function canvas_getPrototypeOf(o){return(canvas_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}function main_defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function main_setPrototypeOf(o,p){return(main_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o})(o,p)}function main_createSuper(Derived){var hasNativeReflectConstruct=function main_isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=main_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=main_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return main_possibleConstructorReturn(this,result)}}function main_possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function main_assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function main_getPrototypeOf(o){return(main_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}var main=function(_Canvas){!function main_inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&main_setPrototypeOf(subClass,superClass)}(Main,_Canvas);var _super=main_createSuper(Main);function Main(element,options,callback){var _this;return function main_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Main),(_this=_super.call(this,element,options)).callback=void 0,_this.callback=callback||function(){},_this.init(),_this}return function main_createClass(Constructor,protoProps,staticProps){return protoProps&&main_defineProperties(Constructor.prototype,protoProps),staticProps&&main_defineProperties(Constructor,staticProps),Constructor}(Main,[{key:"init",value:function init(){var _this2=this;this.events.on(AppEvent.images.loaded,(function(){debounce(_this2.callback())}))}}]),Main}(function(_Options){!function canvas_inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&canvas_setPrototypeOf(subClass,superClass)}(Canvas,_Options);var _preload,_super=canvas_createSuper(Canvas);function Canvas(element,options){var _this;if(function canvas_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Canvas),(_this=_super.call(this,options)).loading=!0,_this._container=void 0,_this._wrapper=void 0,_this._canvas=void 0,_this.images=[],_this.context=void 0,_this.viewport=void 0,!element)throw new AppError("HTML element is not defined.");return _this._container=element,_this._container.classList.add(_this.identifier+"-container"),_this._container.style.setProperty("height",_this.scrollArea+"px"),_this._canvas=document.createElement("canvas"),_this._canvas.classList.add(_this.identifier+"-canvas"),_this._canvas.style.setProperty("max-width","100%"),_this._canvas.style.setProperty("height","auto"),_this._wrapper=document.createElement("div"),_this._wrapper.classList.add(_this.identifier),_this._wrapper.style.setProperty("position","sticky"),_this._wrapper.style.setProperty("top","0"),_this._wrapper.appendChild(_this._canvas),_this._container.appendChild(_this._wrapper),_this.context=_this._canvas.getContext("2d"),_this.viewport={width:_this.screen.x,height:_this.screen.y,top:0,bottom:_this.screen.y},_this.events.on(AppEvent.viewport.scroll,(function(scrollTop){_this.loading||_this.drawImageByScrollTop(scrollTop)})),_this.preload(),_this}return function canvas_createClass(Constructor,protoProps,staticProps){return protoProps&&canvas_defineProperties(Constructor.prototype,protoProps),staticProps&&canvas_defineProperties(Constructor,staticProps),Constructor}(Canvas,[{key:"preload",value:(_preload=function canvas_asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){canvas_asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){canvas_asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(regeneratorRuntime.mark((function _callee(){var _this2=this;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.next=2,preloadImages(this.frame).then((function(images){var _this2$images$,_this2$images$2;_this2.images=images,_this2.viewport={width:null===(_this2$images$=_this2.images[0])||void 0===_this2$images$?void 0:_this2$images$.width,height:null===(_this2$images$2=_this2.images[0])||void 0===_this2$images$2?void 0:_this2$images$2.height,top:_this2._container.getBoundingClientRect().top+getScrollTop()||0,bottom:_this2._container.getBoundingClientRect().bottom+getScrollTop()||0},_this2._canvas.width=_this2.viewport.width,_this2._canvas.height=_this2.viewport.height,_this2.setScrollableArea=2*_this2.viewport.height,_this2._container.style.setProperty("height",_this2.scrollArea+"px"),_this2.drawImageByScrollTop(),_this2._container.classList.add(_this2.identifier+"--loaded"),_this2.loading=!1,_this2.events.emit(AppEvent.images.loaded)}));case 2:return _context.abrupt("return",_context.sent);case 3:case"end":return _context.stop()}}),_callee,this)}))),function preload(){return _preload.apply(this,arguments)})},{key:"drawImage",value:function drawImage(image){this.context.drawImage(image,0,0,this.viewport.width,this.viewport.height)}},{key:"drawImageByFrameNumber",value:function drawImageByFrameNumber(){var frameNumber=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;this.drawImage(this.images[frameNumber])}},{key:"drawImageByScrollTop",value:function drawImageByScrollTop(scrollTop){var frameIndex,scrollFraction=function getScrollFraction(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:getScrollTop())/(document.documentElement.scrollHeight-window.innerHeight)||0}(scrollTop);(frameIndex=Math.min(this.frame.count-1,Math.ceil(scrollFraction*this.frame.count)))<=0&&(frameIndex=0),this.drawImageByFrameNumber(frameIndex)}}]),Canvas}(function(_Base){!function options_inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&options_setPrototypeOf(subClass,superClass)}(Options,_Base);var _super=options_createSuper(Options);function Options(options){var _this;return function options_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Options),(_this=_super.call(this)).inputs=void 0,_this.identifier=void 0,_this.scrollArea=0,_this.frame=void 0,_this.inputs=options,_this.identifier=options.identifier||"csc",_this.frame=new common_frame(options),_this.scrollArea=options.scrollArea||0,options.scrollArea&&"string"==typeof options.scrollArea&&(_this.scrollArea=parseInt(options.scrollArea,10)),_this}return function options_createClass(Constructor,protoProps,staticProps){return protoProps&&options_defineProperties(Constructor.prototype,protoProps),staticProps&&options_defineProperties(Constructor,staticProps),Constructor}(Options,[{key:"setScrollableArea",set:function set(height){this.scrollArea||(this.scrollArea=height)}}]),Options}(function(){function Base(){if(function base_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Base),this.events=void 0,this.screen=void 0,!window)throw new AppError("window is not found.");if(!document)throw new AppError("document is not found.");this.events=new events_EventEmitter,this.screen=this.getScreenViewport(),this.bind()}return function base_createClass(Constructor,protoProps,staticProps){return protoProps&&base_defineProperties(Constructor.prototype,protoProps),staticProps&&base_defineProperties(Constructor,staticProps),Constructor}(Base,[{key:"bind",value:function bind(){var _this=this;window.addEventListener("resize",debounce(this.handleResize.bind(this))),window.addEventListener("scroll",debounce(this.handleScroll.bind(this))),this.events.on(AppEvent.viewport.resize,(function(viewport){_this.screen=viewport}))}},{key:"getScreenViewport",value:function getScreenViewport(){var _document$documentEle,_document$documentEle2;return{x:window.innerWidth||(null===(_document$documentEle=document.documentElement)||void 0===_document$documentEle?void 0:_document$documentEle.clientWidth),y:window.innerHeight||(null===(_document$documentEle2=document.documentElement)||void 0===_document$documentEle2?void 0:_document$documentEle2.clientHeight)}}},{key:"handleResize",value:function handleResize(){this.events.emit(AppEvent.viewport.resize,this.getScreenViewport())}},{key:"handleScroll",value:function handleScroll(){var scrollTop=window.pageYOffset||document.documentElement.scrollTop;this.events.emit(AppEvent.viewport.scroll,scrollTop)}}]),Base}()))),Default=(__webpack_exports__.default={title:"Canvas Scroll Clip",argTypes:{framePath:{control:"text"},frameCount:{control:"number"},scrollArea:{control:"number"},identifier:{control:"text"},_EventOnViewporResize:{action:"resized"},_EventOnViewportScroll:{action:"scrollTop"},_EventOnImagesLoaded:{action:"loaded"}}},function Template(args){return function createPageTemplate(args){var canvas=document.createElement("div");canvas.classList.add(args.identifier||"undefined");var csc=new main(canvas,{framePath:args.framePath,frameCount:args.frameCount,scrollArea:args.scrollArea,identifier:args.identifier},args._EventOnImagesLoaded);return void 0!==args._EventOnViewportScroll&&csc.events.on("viewport.scroll",args._EventOnViewportScroll),void 0!==args._EventOnViewporResize&&csc.events.on("viewport.resize",args._EventOnViewporResize),canvas}(args)}.bind({}));Default.args={framePath:"https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0001.jpg",frameCount:50,scrollArea:1500},Default.parameters=Object.assign({storySource:{source:"(args) => createPageTemplate(args)"}},Default.parameters)},831:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters}));__webpack_require__(24),__webpack_require__(5),__webpack_require__(50),__webpack_require__(804),__webpack_require__(805),__webpack_require__(46),__webpack_require__(806),__webpack_require__(807),__webpack_require__(128);var client_api=__webpack_require__(838),esm=__webpack_require__(4),parameters={actions:{argTypesRegex:"^on[A-Z].*"},layout:"fullscreen",controls:{matchers:{color:/(background|color)$/i,date:/Date$/}}};function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":case"argTypes":return esm.a.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify(value));case"decorators":return value.forEach((function(decorator){return Object(client_api.c)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(client_api.d)(loader,!1)}));case"parameters":return Object(client_api.e)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(client_api.a)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return Object(client_api.b)(enhancer)}));case"render":return Object(client_api.g)(value);case"globals":case"globalTypes":var v={};return v[key]=value,Object(client_api.e)(v,!1);default:return console.log(key+" was not supported :( !")}}))}},[[462,2,3]]]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{462:function(module,exports,__webpack_require__){__webpack_require__(463),__webpack_require__(623),__webpack_require__(624),__webpack_require__(825),__webpack_require__(827),__webpack_require__(828),__webpack_require__(829),__webpack_require__(826),__webpack_require__(822),__webpack_require__(830),__webpack_require__(823),__webpack_require__(824),__webpack_require__(831),module.exports=__webpack_require__(808)},530:function(module,exports){},624:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(340)},808:function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__(340).configure)([__webpack_require__(809),__webpack_require__(811)],module,!1)}).call(this,__webpack_require__(187)(module))},809:function(module,exports,__webpack_require__){var map={"./main.stories.mdx":810};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=809},810:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(24),__webpack_require__(284),__webpack_require__(5),__webpack_require__(18),__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(6),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(208),_excluded=["components"];function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.b,{title:"Intro",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("style",null,"\n\n  .tip {\n    display: inline-block;\n    border-radius: 5px;\n    font-size: 12px;\n    line-height: 16px;\n    font-weight: 700;\n    background: #E7FDD8;\n    color: #66BF3C;\n    padding: 5px 8px;\n    margin-right: 10px;\n    vertical-align: top;\n  }\n\n  .tip-wrapper {\n    font-size: 13px;\n    line-height: 26px;\n    margin-top: 15px;\n    margin-bottom: 40px;\n  }\n\n  .tip-wrapper code {\n    font-size: 12px;\n    display: inline-block;\n  }\n\n"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h1",{id:"canvas-scroll-clip"},"Canvas Scroll Clip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Canvas Scroll Clip is a standalone JavaScript micro-library for a fancy scroll based image sequence animation in canvas. There is no third party dependencies. Checkout a default ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"strong",href:"/story/canvas-scroll-clip--default"},"demo"))," and it's variations."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"install"},"Install"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"yarn add canvas-scroll-clip\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm install --save canvas-scroll-clip\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"usage"},"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Initialize Canvas Scroll Clip on an element with options:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},'import CanvasScrollClip from "canvas-scroll-clip";\n\nnew CanvasScrollClip(document.querySelector(\'.element\'), {\n  framePath: "{first_frame_url_of_a_sequence}",\n  frameCount: 101,\n  scrollArea: 2000\n})\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"requiredefault"},"require('...').default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"When importing a module using require use .default ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"const CanvasScrollClip = require('canvas-scroll-clip').default"),". Decided to stick with pure ES6 module semantics and keep the code generation as clean as possible."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"options"},"Options"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Options object is required and takes these parameters:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"framepath-required"},"framePath (required)"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"String")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"URL of first image of a sequence."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("div",{className:"tip-wrapper"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",{className:"tip"},"Important note"),"Sequence should start with leading 0, minimum 2 digits and at the end of the name. for example:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",null,"https://..URL../frame_0001.jpg")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"framecount-required"},"frameCount (required)"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"Number")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Number of in total in a sequence."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"scrollarea-recommended"},"scrollArea (recommended)"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"Number"),"\nDefault: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"2x the IMAGE height")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Scrollable area height that is used to play the image sequence."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"identifier"},"identifier"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"String"),"\nUsed for container and child element css classes."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"events"},"Events"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"viewportscroll"},"viewport.scroll"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Callback params: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"scrollTop"),"\nType: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"Number")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Event is triggered with scroll event. Returns ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"scrollTop")," position."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"usage-1"},"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"CanvasScrollClip.events.on('viewport.scroll', function(scrollTop){\n  console.log(scrollTop);\n});\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"viewportresize"},"viewport.resize"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Event is triggerent on window resize."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"usage-2"},"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"CanvasScrollClip.events.on('viewport.resize', function(){\n  console.log(\"window resized\");\n});\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"imagesloaded"},"images.loaded"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Event is triggered after all images preloaded. Good place to implement loader animation."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"usage-3"},"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"CanvasScrollClip.events.on('images.loaded', function() {\n  console.log(\"images.loaded\");\n});\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"other"},"Other"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"license"},"License"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"MIT license"))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Intro",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},811:function(module,exports,__webpack_require__){var map={"./main.stories.ts":821};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=811},821:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Default",(function(){return Default}));__webpack_require__(285),__webpack_require__(18),__webpack_require__(193),__webpack_require__(55),__webpack_require__(62),__webpack_require__(194),__webpack_require__(128),__webpack_require__(812),__webpack_require__(26),__webpack_require__(104),__webpack_require__(814),__webpack_require__(54),__webpack_require__(9),__webpack_require__(815),__webpack_require__(15),__webpack_require__(14),__webpack_require__(16),__webpack_require__(57),__webpack_require__(817),__webpack_require__(84),__webpack_require__(419),__webpack_require__(68),__webpack_require__(30),__webpack_require__(13),__webpack_require__(284),__webpack_require__(420),__webpack_require__(95),__webpack_require__(61),__webpack_require__(7),__webpack_require__(258);function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&_setPrototypeOf(subClass,superClass)}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(self)}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _wrapNativeSuper(Class){var _cache="function"==typeof Map?new Map:void 0;return(_wrapNativeSuper=function _wrapNativeSuper(Class){if(null===Class||!function _isNativeFunction(fn){return-1!==Function.toString.call(fn).indexOf("[native code]")}(Class))return Class;if("function"!=typeof Class)throw new TypeError("Super expression must either be null or a function");if(void 0!==_cache){if(_cache.has(Class))return _cache.get(Class);_cache.set(Class,Wrapper)}function Wrapper(){return _construct(Class,arguments,_getPrototypeOf(this).constructor)}return Wrapper.prototype=Object.create(Class.prototype,{constructor:{value:Wrapper,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(Wrapper,Class)})(Class)}function _construct(Parent,args,Class){return(_construct=_isNativeReflectConstruct()?Reflect.construct:function _construct(Parent,args,Class){var a=[null];a.push.apply(a,args);var instance=new(Function.bind.apply(Parent,a));return Class&&_setPrototypeOf(instance,Class.prototype),instance}).apply(null,arguments)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function _setPrototypeOf(o,p){return(_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o})(o,p)}function _getPrototypeOf(o){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}var CanvasScrollClipError=function(_Error){_inherits(CanvasScrollClipError,_Error);var _super=_createSuper(CanvasScrollClipError);function CanvasScrollClipError(message){var _this;return _classCallCheck(this,CanvasScrollClipError),message||(message="Whoops! Something went wrong."),_this=_super.call(this,""+message),Object.setPrototypeOf(_assertThisInitialized(_this),Object.getPrototypeOf(_assertThisInitialized(_this))),Error.captureStackTrace&&Error.captureStackTrace(_assertThisInitialized(_this),CanvasScrollClipError),_this}return _createClass(CanvasScrollClipError,[{key:"name",get:function get(){return this.constructor.name}}]),CanvasScrollClipError}(_wrapNativeSuper(Error)),AppError=function(_CanvasScrollClipErro){_inherits(AppError,_CanvasScrollClipErro);var _super2=_createSuper(AppError);function AppError(){return _classCallCheck(this,AppError),_super2.apply(this,arguments)}return _createClass(AppError,[{key:"name",get:function get(){return"CanvasScrollClipError"}}]),AppError}(CanvasScrollClipError),AppWarning=function(_AppLogger){_inherits(AppWarning,_AppLogger);var _super4=_createSuper(AppWarning);function AppWarning(message){var _this2;return _classCallCheck(this,AppWarning),(_this2=_super4.call(this,message)).warn(message),_this2}return AppWarning}(function(_CanvasScrollClipErro2){_inherits(AppLogger,_CanvasScrollClipErro2);var _super3=_createSuper(AppLogger);function AppLogger(){return _classCallCheck(this,AppLogger),_super3.apply(this,arguments)}return _createClass(AppLogger,[{key:"log",value:function log(message){console.log(this.name+": "+message)}},{key:"warn",value:function warn(message){console.warn(this.name+": "+message)}}]),AppLogger}(CanvasScrollClipError));function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}var RegExpLastDigitsMatch=/\d+(?!.*\d+)/,AppEvent={viewport:{resize:"viewport.resize",scroll:"viewport.scroll"},images:{loaded:"images.loaded"}},EventList=Object.values(AppEvent).map((function(e){return Object.values(e)})).flat(),debounce=function debounce(func){var timeout,threshold=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,debounced=function debounced(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];timeout&&clearTimeout(timeout),timeout=setTimeout((function(){return func.apply(void 0,args)}),threshold)};return debounced};function _getImage(){return(_getImage=_asyncToGenerator(regeneratorRuntime.mark((function _callee(imageLink){return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.abrupt("return",new Promise((function(resolve,reject){var image=new Image;image.onload=function(){resolve(image)},image.src=imageLink,image.onerror=function(){reject(new AppError("Image with name '..."+imageLink.slice(-20)+"' was not found."))}})));case 1:case"end":return _context.stop()}}),_callee)})))).apply(this,arguments)}function preloadImages(frameOptions){var arrayOfImages=new Array(frameOptions.count).fill(0).map((function(_elem,index){return function getImage(_x){return _getImage.apply(this,arguments)}(function getFramePathByIndex(frameOptions){var frameNumber=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return[frameOptions.path,frameOptions.image.start,frameNumber.toString().padStart(frameOptions.image.padStart,"0"),frameOptions.image.ending].join("")}(frameOptions,index+1))}));return Promise.all(arrayOfImages)}function getScrollTop(){return window.pageYOffset||document.documentElement.scrollTop}function getImageStructure(firstFramePath,frameCount){var img=function getPathEnding(path){return path.split("/").pop()||""}(firstFramePath),ext=function getFileSuffix(fileName){var ext=fileName.split(".").pop()||" ";if(!["jpg","jpeg","png"].includes(ext))throw new AppError("Image with extension ['"+ext+"'] is not supported.");return"."+ext}(img),seq=function getImageSequence(imageName){var match=imageName.match(RegExpLastDigitsMatch),sequence=match&&null!==match[0]?match[0]:"";if(sequence.length<2)throw new AppError('Bad image sequence format. Should start with 0 and be longer than 2 numbers, f.e. "frame_01.jpg"');return sequence}(img);if(frameCount.toString().length>seq.length)throw new AppError("Leading zeros in first frame path has to be more than the frame count and sequence at the end.");return{start:img.slice(0,img.indexOf(seq)),sequence:parseInt(seq),padStart:seq.length,ending:img.slice(img.indexOf(seq)+seq.length),extension:ext}}__webpack_require__(74),__webpack_require__(283);var events_EventEmitter=function EventEmitter(){var _this=this;!function events_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,EventEmitter),this.observers=void 0,this.on=function(event,cb){EventList.includes(event)||new AppWarning("Event ['"+event+"'] is not supported.");var observer=_this.observers.get(event);observer?observer.push(cb):_this.observers.set(event,[cb])},this.remove=function(event,cb){var observer=_this.observers.get(event);if(observer)for(var i=0;i<observer.length;i++)if(observer[i]===cb)return void observer.splice(i,1)},this.emit=function(event){var observer=_this.observers.get(event);if(observer){for(var _len=arguments.length,args=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++)args[_key-1]=arguments[_key];for(var i=0;i<observer.length;i++)observer[i].apply(observer,args)}},this.observers=new Map};function base_defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}var common_frame=function Frame(_ref){var framePath=_ref.framePath,frameCount=_ref.frameCount;if(function frame_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Frame),this.path=void 0,this.count=void 0,this.image=void 0,!framePath.length)throw new AppError("Frame path is not defined.");if(!frameCount)throw new AppError("Frame count is not defined.");this.count=frameCount,this.path=function getImageBasePath(firstFramePath){var path=firstFramePath.split("/");return path.pop(),path.join("/")+"/"}(framePath),this.image=getImageStructure(framePath,this.count)};function options_defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function options_setPrototypeOf(o,p){return(options_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o})(o,p)}function options_createSuper(Derived){var hasNativeReflectConstruct=function options_isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=options_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=options_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return options_possibleConstructorReturn(this,result)}}function options_possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function options_assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function options_getPrototypeOf(o){return(options_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}function canvas_asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function canvas_defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function canvas_setPrototypeOf(o,p){return(canvas_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o})(o,p)}function canvas_createSuper(Derived){var hasNativeReflectConstruct=function canvas_isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=canvas_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=canvas_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return canvas_possibleConstructorReturn(this,result)}}function canvas_possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function canvas_assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function canvas_getPrototypeOf(o){return(canvas_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}function main_defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function main_setPrototypeOf(o,p){return(main_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){return o.__proto__=p,o})(o,p)}function main_createSuper(Derived){var hasNativeReflectConstruct=function main_isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=main_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=main_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return main_possibleConstructorReturn(this,result)}}function main_possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function main_assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function main_getPrototypeOf(o){return(main_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}var main=function(_Canvas){!function main_inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&main_setPrototypeOf(subClass,superClass)}(Main,_Canvas);var _super=main_createSuper(Main);function Main(element,options,callback){var _this;return function main_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Main),(_this=_super.call(this,element,options)).callback=void 0,_this.callback=callback||function(){},_this.init(),_this}return function main_createClass(Constructor,protoProps,staticProps){return protoProps&&main_defineProperties(Constructor.prototype,protoProps),staticProps&&main_defineProperties(Constructor,staticProps),Constructor}(Main,[{key:"init",value:function init(){var _this2=this;this.events.on(AppEvent.images.loaded,(function(){debounce(_this2.callback())}))}}]),Main}(function(_Options){!function canvas_inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&canvas_setPrototypeOf(subClass,superClass)}(Canvas,_Options);var _preload,_super=canvas_createSuper(Canvas);function Canvas(element,options){var _this;if(function canvas_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Canvas),(_this=_super.call(this,options)).loading=!0,_this._container=void 0,_this._wrapper=void 0,_this._canvas=void 0,_this.images=[],_this.context=void 0,_this.viewport=void 0,!element)throw new AppError("HTML element is not defined.");return _this._container=element,_this._container.classList.add(_this.identifier+"-container"),_this._container.style.setProperty("height",_this.scrollArea+"px"),_this._canvas=document.createElement("canvas"),_this._canvas.classList.add(_this.identifier+"-canvas"),_this._canvas.style.setProperty("max-width","100%"),_this._canvas.style.setProperty("height","auto"),_this._wrapper=document.createElement("div"),_this._wrapper.classList.add(_this.identifier),_this._wrapper.style.setProperty("position","sticky"),_this._wrapper.style.setProperty("top","0"),_this._wrapper.appendChild(_this._canvas),_this._container.appendChild(_this._wrapper),_this.context=_this._canvas.getContext("2d"),_this.viewport={width:_this.screen.x,height:_this.screen.y,top:0,bottom:_this.screen.y},_this.events.on(AppEvent.viewport.scroll,(function(scrollTop){_this.loading||_this.drawImageByScrollTop(scrollTop)})),_this.preload(),_this}return function canvas_createClass(Constructor,protoProps,staticProps){return protoProps&&canvas_defineProperties(Constructor.prototype,protoProps),staticProps&&canvas_defineProperties(Constructor,staticProps),Constructor}(Canvas,[{key:"preload",value:(_preload=function canvas_asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){canvas_asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){canvas_asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(regeneratorRuntime.mark((function _callee(){var _this2=this;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.next=2,preloadImages(this.frame).then((function(images){var _this2$images$,_this2$images$2;_this2.images=images,_this2.viewport={width:null===(_this2$images$=_this2.images[0])||void 0===_this2$images$?void 0:_this2$images$.width,height:null===(_this2$images$2=_this2.images[0])||void 0===_this2$images$2?void 0:_this2$images$2.height,top:_this2._container.getBoundingClientRect().top+getScrollTop()||0,bottom:_this2._container.getBoundingClientRect().bottom+getScrollTop()||0},_this2._canvas.width=_this2.viewport.width,_this2._canvas.height=_this2.viewport.height,_this2.setScrollableArea=2*_this2.viewport.height,_this2._container.style.setProperty("height",_this2.scrollArea+"px"),_this2.drawImageByScrollTop(),_this2._container.classList.add(_this2.identifier+"--loaded"),_this2.loading=!1,_this2.events.emit(AppEvent.images.loaded)}));case 2:return _context.abrupt("return",_context.sent);case 3:case"end":return _context.stop()}}),_callee,this)}))),function preload(){return _preload.apply(this,arguments)})},{key:"drawImage",value:function drawImage(image){this.context.drawImage(image,0,0,this.viewport.width,this.viewport.height)}},{key:"drawImageByFrameNumber",value:function drawImageByFrameNumber(){var frameNumber=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;this.drawImage(this.images[frameNumber])}},{key:"drawImageByScrollTop",value:function drawImageByScrollTop(scrollTop){var frameIndex,scrollFraction=function getScrollFraction(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:getScrollTop())/(document.documentElement.scrollHeight-window.innerHeight)||0}(scrollTop);(frameIndex=Math.min(this.frame.count-1,Math.ceil(scrollFraction*this.frame.count)))<=0&&(frameIndex=0),this.drawImageByFrameNumber(frameIndex)}}]),Canvas}(function(_Base){!function options_inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&options_setPrototypeOf(subClass,superClass)}(Options,_Base);var _super=options_createSuper(Options);function Options(options){var _this;return function options_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Options),(_this=_super.call(this)).inputs=void 0,_this.identifier=void 0,_this.scrollArea=0,_this.frame=void 0,_this.inputs=options,_this.identifier=options.identifier||"csc",_this.frame=new common_frame(options),_this.scrollArea=options.scrollArea||0,options.scrollArea&&"string"==typeof options.scrollArea&&(_this.scrollArea=parseInt(options.scrollArea,10)),_this}return function options_createClass(Constructor,protoProps,staticProps){return protoProps&&options_defineProperties(Constructor.prototype,protoProps),staticProps&&options_defineProperties(Constructor,staticProps),Constructor}(Options,[{key:"setScrollableArea",set:function set(height){this.scrollArea||(this.scrollArea=height)}}]),Options}(function(){function Base(){if(function base_classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,Base),this.events=void 0,this.screen=void 0,!window)throw new AppError("window is not found.");if(!document)throw new AppError("document is not found.");this.events=new events_EventEmitter,this.screen=this.getScreenViewport(),this.bind()}return function base_createClass(Constructor,protoProps,staticProps){return protoProps&&base_defineProperties(Constructor.prototype,protoProps),staticProps&&base_defineProperties(Constructor,staticProps),Constructor}(Base,[{key:"bind",value:function bind(){var _this=this;window.addEventListener("resize",debounce(this.handleResize.bind(this))),window.addEventListener("scroll",debounce(this.handleScroll.bind(this))),this.events.on(AppEvent.viewport.resize,(function(viewport){_this.screen=viewport}))}},{key:"getScreenViewport",value:function getScreenViewport(){var _document$documentEle,_document$documentEle2;return{x:window.innerWidth||(null===(_document$documentEle=document.documentElement)||void 0===_document$documentEle?void 0:_document$documentEle.clientWidth),y:window.innerHeight||(null===(_document$documentEle2=document.documentElement)||void 0===_document$documentEle2?void 0:_document$documentEle2.clientHeight)}}},{key:"handleResize",value:function handleResize(){this.events.emit(AppEvent.viewport.resize,this.getScreenViewport())}},{key:"handleScroll",value:function handleScroll(){var scrollTop=window.pageYOffset||document.documentElement.scrollTop;this.events.emit(AppEvent.viewport.scroll,scrollTop)}}]),Base}()))),Default=(__webpack_exports__.default={title:"Canvas Scroll Clip",argTypes:{framePath:{control:"text"},frameCount:{control:"number"},scrollArea:{control:"number"},identifier:{control:"text"},_EventOnViewporResize:{action:"resized"},_EventOnViewportScroll:{action:"scrollTop"},_EventOnImagesLoaded:{action:"loaded"}}},function Template(args){return function createPageTemplate(args){var canvas=document.createElement("div");canvas.classList.add(args.identifier||"undefined");var csc=new main(canvas,{framePath:args.framePath,frameCount:args.frameCount,scrollArea:args.scrollArea,identifier:args.identifier},args._EventOnImagesLoaded);return void 0!==args._EventOnViewportScroll&&csc.events.on("viewport.scroll",args._EventOnViewportScroll),void 0!==args._EventOnViewporResize&&csc.events.on("viewport.resize",args._EventOnViewporResize),canvas}(args)}.bind({}));Default.args={framePath:"https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0001.jpg",frameCount:140,scrollArea:2e3},Default.parameters=Object.assign({storySource:{source:"(args) => createPageTemplate(args)"}},Default.parameters)},831:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters}));__webpack_require__(24),__webpack_require__(5),__webpack_require__(50),__webpack_require__(804),__webpack_require__(805),__webpack_require__(46),__webpack_require__(806),__webpack_require__(807),__webpack_require__(128);var client_api=__webpack_require__(838),esm=__webpack_require__(4),parameters={actions:{argTypesRegex:"^on[A-Z].*"},layout:"fullscreen",controls:{matchers:{color:/(background|color)$/i,date:/Date$/}}};function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":case"argTypes":return esm.a.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify(value));case"decorators":return value.forEach((function(decorator){return Object(client_api.c)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(client_api.d)(loader,!1)}));case"parameters":return Object(client_api.e)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(client_api.a)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return Object(client_api.b)(enhancer)}));case"render":return Object(client_api.g)(value);case"globals":case"globalTypes":var v={};return v[key]=value,Object(client_api.e)(v,!1);default:return console.log(key+" was not supported :( !")}}))}},[[462,2,3]]]);
\ No newline at end of file