@gobistories/gobi-web-integration - npm Package Compare versions

Comparing version 1.2.4 to 1.3.0

dist/gobi-web-integration.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.gobi=e():t.gobi=e()}(window,function(){return function(n){var i={};function r(t){if(i[t])return i[t].exports;var e=i[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}return r.m=n,r.c=i,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=7)}([function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,p,d){"use strict";(function(e){var t=d(2),n=setTimeout;function i(){}function o(t){if(!(this instanceof o))throw new TypeError("Promises must be constructed via new");if("function"!=typeof t)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],u(t,this)}function r(n,i){for(;3===n._state;)n=n._value;0!==n._state?(n._handled=!0,o._immediateFn(function(){var t=1===n._state?i.onFulfilled:i.onRejected;if(null!==t){var e;try{e=t(n._value)}catch(t){return void a(i.promise,t)}s(i.promise,e)}else(1===n._state?s:a)(i.promise,n._value)})):n._deferreds.push(i)}function s(e,t){try{if(t===e)throw new TypeError("A promise cannot be resolved with itself.");if(t&&("object"==typeof t||"function"==typeof t)){var n=t.then;if(t instanceof o)return e._state=3,e._value=t,void l(e);if("function"==typeof n)return void u((i=n,r=t,function(){i.apply(r,arguments)}),e)}e._state=1,e._value=t,l(e)}catch(t){a(e,t)}var i,r}function a(t,e){t._state=2,t._value=e,l(t)}function l(t){2===t._state&&0===t._deferreds.length&&o._immediateFn(function(){t._handled||o._unhandledRejectionFn(t._value)});for(var e=0,n=t._deferreds.length;e<n;e++)r(t,t._deferreds[e]);t._deferreds=null}function c(t,e,n){this.onFulfilled="function"==typeof t?t:null,this.onRejected="function"==typeof e?e:null,this.promise=n}function u(t,e){var n=!1;try{t(function(t){n||(n=!0,s(e,t))},function(t){n||(n=!0,a(e,t))})}catch(t){if(n)return;n=!0,a(e,t)}}o.prototype.catch=function(t){return this.then(null,t)},o.prototype.then=function(t,e){var n=new this.constructor(i);return r(this,new c(t,e,n)),n},o.prototype.finally=t.a,o.all=function(e){return new o(function(i,r){if(!e||void 0===e.length)throw new TypeError("Promise.all accepts an array");var o=Array.prototype.slice.call(e);if(0===o.length)return i([]);var s=o.length;function a(e,t){try{if(t&&("object"==typeof t||"function"==typeof t)){var n=t.then;if("function"==typeof n)return void n.call(t,function(t){a(e,t)},r)}o[e]=t,0==--s&&i(o)}catch(t){r(t)}}for(var t=0;t<o.length;t++)a(t,o[t])})},o.resolve=function(e){return e&&"object"==typeof e&&e.constructor===o?e:new o(function(t){t(e)})},o.reject=function(n){return new o(function(t,e){e(n)})},o.race=function(r){return new o(function(t,e){for(var n=0,i=r.length;n<i;n++)r[n].then(t,e)})},o._immediateFn="function"==typeof e&&function(t){e(t)}||function(t){n(t,0)},o._unhandledRejectionFn=function(t){"undefined"!=typeof console&&console&&console.warn("Possible Unhandled Promise Rejection:",t)},p.a=o}).call(this,d(4).setImmediate)},function(t,e,n){"use strict";e.a=function(e){var n=this.constructor;return this.then(function(t){return n.resolve(e()).then(function(){return t})},function(t){return n.resolve(e()).then(function(){return n.reject(t)})})}},function(t,e,n){},function(t,r,o){(function(t){var e=void 0!==t&&t||"undefined"!=typeof self&&self||window,n=Function.prototype.apply;function i(t,e){this._id=t,this._clearFn=e}r.setTimeout=function(){return new i(n.call(setTimeout,e,arguments),clearTimeout)},r.setInterval=function(){return new i(n.call(setInterval,e,arguments),clearInterval)},r.clearTimeout=r.clearInterval=function(t){t&&t.close()},i.prototype.unref=i.prototype.ref=function(){},i.prototype.close=function(){this._clearFn.call(e,this._id)},r.enroll=function(t,e){clearTimeout(t._idleTimeoutId),t._idleTimeout=e},r.unenroll=function(t){clearTimeout(t._idleTimeoutId),t._idleTimeout=-1},r._unrefActive=r.active=function(t){clearTimeout(t._idleTimeoutId);var e=t._idleTimeout;0<=e&&(t._idleTimeoutId=setTimeout(function(){t._onTimeout&&t._onTimeout()},e))},o(5),r.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==t&&t.setImmediate||this&&this.setImmediate,r.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==t&&t.clearImmediate||this&&this.clearImmediate}).call(this,o(0))},function(t,e,n){(function(t,f){!function(n,i){"use strict";if(!n.setImmediate){var r,o,e,s,t,a=1,l={},c=!1,u=n.document,p=Object.getPrototypeOf&&Object.getPrototypeOf(n);p=p&&p.setTimeout?p:n,r="[object process]"==={}.toString.call(n.process)?function(t){f.nextTick(function(){h(t)})}:function(){if(n.postMessage&&!n.importScripts){var t=!0,e=n.onmessage;return n.onmessage=function(){t=!1},n.postMessage("","*"),n.onmessage=e,t}}()?(s="setImmediate$"+Math.random()+"$",t=function(t){t.source===n&&"string"==typeof t.data&&0===t.data.indexOf(s)&&h(+t.data.slice(s.length))},n.addEventListener?n.addEventListener("message",t,!1):n.attachEvent("onmessage",t),function(t){n.postMessage(s+t,"*")}):n.MessageChannel?((e=new MessageChannel).port1.onmessage=function(t){h(t.data)},function(t){e.port2.postMessage(t)}):u&&"onreadystatechange"in u.createElement("script")?(o=u.documentElement,function(t){var e=u.createElement("script");e.onreadystatechange=function(){h(t),e.onreadystatechange=null,o.removeChild(e),e=null},o.appendChild(e)}):function(t){setTimeout(h,0,t)},p.setImmediate=function(t){"function"!=typeof t&&(t=new Function(""+t));for(var e=new Array(arguments.length-1),n=0;n<e.length;n++)e[n]=arguments[n+1];var i={callback:t,args:e};return l[a]=i,r(a),a++},p.clearImmediate=d}function d(t){delete l[t]}function h(t){if(c)setTimeout(h,0,t);else{var e=l[t];if(e){c=!0;try{!function(t){var e=t.callback,n=t.args;switch(n.length){case 0:e();break;case 1:e(n[0]);break;case 2:e(n[0],n[1]);break;case 3:e(n[0],n[1],n[2]);break;default:e.apply(i,n)}}(e)}finally{d(t),c=!1}}}}}("undefined"==typeof self?void 0===t?this:t:self)}).call(this,n(0),n(6))},function(t,e){var n,i,r=t.exports={};function o(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function a(e){if(n===setTimeout)return setTimeout(e,0);if((n===o||!n)&&setTimeout)return n=setTimeout,setTimeout(e,0);try{return n(e,0)}catch(t){try{return n.call(null,e,0)}catch(t){return n.call(this,e,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:o}catch(t){n=o}try{i="function"==typeof clearTimeout?clearTimeout:s}catch(t){i=s}}();var l,c=[],u=!1,p=-1;function d(){u&&l&&(u=!1,l.length?c=l.concat(c):p=-1,c.length&&h())}function h(){if(!u){var t=a(d);u=!0;for(var e=c.length;e;){for(l=c,c=[];++p<e;)l&&l[p].run();p=-1,e=c.length}l=null,u=!1,function(e){if(i===clearTimeout)return clearTimeout(e);if((i===s||!i)&&clearTimeout)return i=clearTimeout,clearTimeout(e);try{i(e)}catch(t){try{return i.call(null,e)}catch(t){return i.call(this,e)}}}(t)}}function f(t,e){this.fun=t,this.array=e}function y(){}r.nextTick=function(t){var e=new Array(arguments.length-1);if(1<arguments.length)for(var n=1;n<arguments.length;n++)e[n-1]=arguments[n];c.push(new f(t,e)),1!==c.length||u||a(h)},f.prototype.run=function(){this.fun.apply(null,this.array)},r.title="browser",r.browser=!0,r.env={},r.argv=[],r.version="",r.versions={},r.on=y,r.addListener=y,r.once=y,r.off=y,r.removeListener=y,r.removeAllListeners=y,r.emit=y,r.prependListener=y,r.prependOnceListener=y,r.listeners=function(t){return[]},r.binding=function(t){throw new Error("process.binding is not supported")},r.cwd=function(){return"/"},r.chdir=function(t){throw new Error("process.chdir is not supported")},r.umask=function(){return 0}},function(t,e,n){"use strict";n.r(e);n(3);var i=function(){function t(){this._eventsCallbacks={}}return t.prototype.on=function(t,e){this._eventsCallbacks.hasOwnProperty(t)||(this._eventsCallbacks[t]=[]);var n=this._eventsCallbacks[t];-1===n.indexOf(e)&&n.push(e)},t.prototype.off=function(t,e){"string"==typeof t?this._eventsCallbacks.hasOwnProperty(t)&&("function"==typeof e?this._removeCallback(t,e):this._eventsCallbacks[t]=[]):this._removeAllCallbacks()},t.prototype.emit=function(t,e,n){if(this._eventsCallbacks.hasOwnProperty(t))for(var i=this._eventsCallbacks[t],r=i.length,o=0;o<r;o++)i[o].call(n||this,e)},t.prototype._removeCallback=function(t,e){var n=this._eventsCallbacks[t],i=n.indexOf(e);-1<i&&n.splice(i,1)},t.prototype._removeAllCallbacks=function(){for(var t in this._eventsCallbacks)this._eventsCallbacks.hasOwnProperty(t)&&delete this._eventsCallbacks[t]},t}(),o=n(1);function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}function a(t,e){for(var n,i=t.length,r=0;r<i;r++)(n=t[r]).className=e+n.className}function c(r){return new o.a(function(t,e){var n=new XMLHttpRequest,i="https://live.gobiapp.com/projector/player/storyModules/"+r;n.open("GET",i,!0),n.send(),n.onload=function(){this.status<400?t(JSON.parse(this.responseText)):e(Error("Module didn't load successfully; error code:"+n.statusText))},n.onerror=function(){e(Error("There was a network error."))}})}function u(t,e){var n=[];for(var i in t){var r=t[i],o=e[i];n.push(o?s(r,o):r)}return n}function p(t){return t.map(function(t){return{title:t.title,avatarSrc:t.thumbnail,description:t.description,name:t.story_id}})}function r(t,e,n){var i=function(t){return n(t)};return t.addEventListener(e,i),function(){return t.removeEventListener(e,i)}}var l={scrollTop:0,bodyOverflow:"",htmlOverflow:"",disable:function(){this.isIOS?this.IOSDisable():this.classicDisable()},enable:function(){this.isIOS?this.IOSEnable():this.classicEnable()},classicDisable:function(){this.bodyOverflow=document.body.style.overflow,this.htmlOverflow=document.documentElement.style.overflow,document.documentElement.style.overflow="hidden",document.body.style.overflow="hidden"},classicEnable:function(){document.documentElement.style.overflow=this.htmlOverflow,document.body.style.overflow=this.bodyOverflow},IOSEnable:function(){document.documentElement.classList.remove("disabled-scroll"),document.body.classList.remove("disabled-scroll"),window.scrollTo(0,this.scrollTop)},IOSDisable:function(){this.scrollTop=window.pageYOffset,document.documentElement.classList.add("disabled-scroll"),document.body.classList.add("disabled-scroll")},isIOS:/iPad|iPhone|iPod/.test(navigator.userAgent)};function d(){return(d=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var h=function(){function t(t){var n=this;this._defaultOptions={autoStart:!1,hideOverlay:!1,loop:!1,width:0,height:0,roundedCorners:!0,shadow:!0,checkViewPort:!0},this._eventEmitter=new i,this.on=this._eventEmitter.on.bind(this._eventEmitter),this.off=this._eventEmitter.off.bind(this._eventEmitter),this._removeIsOnScreenChecker=function(){},this._removeIsOutOfScreenChecker=function(){},this._options=d({},this._defaultOptions,t),this.el=this._createIframe(),this._options.container&&this._options.container.appendChild(this.el),window.addEventListener("message",function(t){if(n.el.contentWindow===t.source){var e=t.data;e.event&&(n._eventEmitter.emit(e.event,e.value,n),n._options.checkViewPort&&n._viewPortChecker(e.event))}})}return Object.defineProperty(t.prototype,"storyURL",{get:function(){return"https://live.gobiapp.com/next/story/id/"+this._options.storyName+"?autoStart="+this._options.autoStart+"&addLooping="+this._options.loop+"&hideOverlay="+this._options.hideOverlay+"&roundedCorners="+this._options.roundedCorners},enumerable:!0,configurable:!0}),t.prototype.load=function(t){d(this._options,t),this.el.src=this.storyURL},t.prototype.play=function(){this._callPlayerMethod("play")},t.prototype.pause=function(){this._callPlayerMethod("pause")},t.prototype.reload=function(){this._callPlayerMethod("reset")},t.prototype.setMute=function(t){this._callPlayerMethod("setMute",t)},t.prototype.isInViewport=function(){var t=this.el.getBoundingClientRect(),e=window.innerHeight||document.documentElement.clientHeight,n=window.innerWidth||document.documentElement.clientWidth,i=.8*t.height,r=.8*t.width;return t.top>=0-i&&t.left>=0-r&&t.bottom<=e+i&&t.right<=n+r},t.prototype._callPlayerMethod=function(t,e){void 0===e&&(e=void 0),this._sendMessage({method:t,value:e})},t.prototype._sendMessage=function(t){var e=this.el.contentWindow;e&&e.postMessage(t,"*")},t.prototype._createIframe=function(){var t=document.createElement("iframe"),e=this._calcPlayerSize();return t.src=this.storyURL,t.width=e.width.toString(),t.height=e.height.toString(),t.frameBorder="0",t.scrolling="no",t.style.overflow="hidden",t.style.background="#000",t.style.border="0",this._options.shadow&&t.classList.add("gobi-player-shadow"),this._options.roundedCorners&&(t.style.borderRadius="10px"),t.setAttribute("allow","autoplay;"),t},t.prototype._viewPortChecker=function(t){switch(t){case"play":this._addIsOutOfScreenChecker();break;case"pause":this.isInViewport()&&(this._removeIsOnScreenChecker(),this._removeIsOutOfScreenChecker());break;case"ended":this._removeIsOnScreenChecker(),this._removeIsOutOfScreenChecker()}},t.prototype._addIsOutOfScreenChecker=function(){var t=this;this._removeIsOutOfScreenChecker(),this._removeIsOnScreenChecker(),this._removeIsOutOfScreenChecker=r(window,"scroll",function(){t.isInViewport()||(t.pause(),t._removeIsOutOfScreenChecker(),t._addIsOnScreenChecker())})},t.prototype._addIsOnScreenChecker=function(){var t=this;this._removeIsOnScreenChecker=r(window,"scroll",function(){t.isInViewport()&&(t.play(),t._removeIsOnScreenChecker(),t._addIsOutOfScreenChecker())})},t.prototype._calcPlayerSize=function(){var t=612,e=1088;return this._options.width&&this._options.height?(t=this._options.width,e=this._options.height):this._options.width?e=(t=this._options.width)/.5625:this._options.height&&(t=.5625*(e=this._options.height)),{width:t,height:e}},t}(),f=function(t,e){return(f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function y(t,e){function n(){this.constructor=t}f(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function v(){return(v=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var _=function(){function n(t){this._listeners=[],this._eventEmitter=new i,this.on=this._eventEmitter.on.bind(this._eventEmitter),this.off=this._eventEmitter.off.bind(this._eventEmitter);var e=v({},n._defaultStoryOptions,t);this.el=this._createTemplate(),this.name=e.name,this._title=e.title,this._description=e.description,this._avatarSrc=e.avatarSrc,this._color=e.color,this._addSelectEmitter(),"function"==typeof e.onSelect&&this._eventEmitter.on("select",e.onSelect),e.container&&e.container.appendChild(this.el)}return n.prototype.destroy=function(){this.el.parentElement&&this.el.parentElement.removeChild(this.el),this._eventEmitter.off();for(var t=this._listeners.length;t--;)this._listeners[t]()},n.prototype._addSelectEmitter=function(){for(var t=this,e=this.el.querySelectorAll("[data-select-area]"),n=function(){t._eventEmitter.emit("select",t)},i=e.length;i--;)this._listeners.push(r(e[i],"click",n))},n.prototype._getElem=function(t){var e="data-"+t,n=this.el.querySelector("["+e+"]");if(n)return n.removeAttribute(e),n;throw new Error("Story does not contain element with name:"+t)},n._defaultStoryOptions={avatarSrc:"",title:"",description:"",color:"",selected:!1,titleColor:"",descriptionColor:""},n}(),m=function(n){function i(t){var e=n.call(this,t)||this;return e._selected=!1,e._elems={title:e._getElem("title"),description:e._getElem("description"),avatar:e._getElem("avatar"),avatarContainer:e._getElem("avatarContainer")},t.titleColor&&(e._elems.title.style.color=t.titleColor),t.descriptionColor&&(e._elems.description.style.color=t.descriptionColor),t.titleSize&&(e._elems.title.style.fontSize=t.titleSize),t.descriptionSize&&(e._elems.description.style.fontSize=t.descriptionSize),t.avatarSize&&(e._elems.avatarContainer.style.width=t.avatarSize),e._selected=!!t.selected,e.title=e._title,e.description=e._description,e.avatarSrc=e._avatarSrc,e.color=e._color,e}return y(i,n),Object.defineProperty(i.prototype,"avatarSrc",{get:function(){return this._avatarSrc},set:function(t){this._avatarSrc=t,this._elems.avatar.style.backgroundImage="url("+t+")"},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"title",{get:function(){return this._title},set:function(t){this._title=t,this._elems.title.textContent=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"description",{get:function(){return this._description},set:function(t){this._description=t,this._elems.description.textContent=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"color",{get:function(){return this._color},set:function(t){this._color=t,this._elems.avatarContainer.style.borderColor=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"selected",{get:function(){return this._selected},set:function(t){t?this.el.classList.add("gobi-story--selected"):this.el.classList.remove("gobi-story--selected"),this._selected=t},enumerable:!0,configurable:!0}),i.prototype._createTemplate=function(){var t="gobi-story",e=document.createElement("div");return e.classList.add(t),e.innerHTML=i._HTML,a(e.querySelectorAll("*"),t+"__"),e},Object.defineProperty(i,"_HTML",{get:function(){return'<div class="avatar-container" data-select-area data-avatarContainer><div class="avatar" data-avatar></div></div><div class="title" data-title></div><div class="description" data-description></div>'},enumerable:!0,configurable:!0}),i}(_);function b(){return(b=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var g=function(){function i(t){var e=this,n=b({},i._defaultOptions,t);this.el=this._createTemplate(),this._title=n.title,this.title=n.title,this._color=n.color,this._activeColor=n.activeColor,this.stories=this._createStories(n.stories,n),this._currentStory=this.stories[0],this._playerContainer=this.el.querySelector("[data-player]"),this.player=new h(b({storyName:this._currentStory.name,container:this._playerContainer},n.playerOptions)),this._playerContainer.style.maxWidth=Math.min(.53*window.innerHeight,350)+"px",window.addEventListener("resize",function(){e._playerContainer.style.maxWidth=Math.min(.53*window.innerHeight,350)+"px"}),this.currentStory=this._currentStory}return Object.defineProperty(i.prototype,"title",{get:function(){return this._title},set:function(t){var e=this.el.querySelector("[data-title]");e&&(this._title=t,e.textContent=t)},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"currentStory",{get:function(){return this._currentStory},set:function(t){this._currentStory.color=this._color,this._currentStory.selected=!1,this._currentStory=t,this._currentStory.selected=!0,this._currentStory.color=this._activeColor,this.player.load({storyName:this._currentStory.name})},enumerable:!0,configurable:!0}),i.prototype.append=function(t){t.appendChild(this.el)},i.prototype.remove=function(){var t=this.el.parentElement;t&&t.removeChild(this.el)},i.prototype._createStories=function(t,e){var n=this,i=this.el.querySelector("[data-stories]");return t.map(function(t){return new m({name:t.name,container:i,avatarSrc:t.avatarSrc,title:t.title,description:t.description,titleColor:t.titleColor,descriptionColor:t.descriptionColor,color:n._color,titleSize:e.titleSize,avatarSize:e.avatarSize,descriptionSize:e.descriptionSize,onSelect:n._onStorySelect.bind(n)})})},i.prototype._onStorySelect=function(t){console.log("_onStorySelect"),this.currentStory=t},i.prototype._createTemplate=function(){var t=document.createElement("div"),e="gobi-module";return t.classList.add(e),t.innerHTML=i._HTML,a(t.querySelectorAll("*"),e+"__"),t},Object.defineProperty(i,"_HTML",{get:function(){return'<div class="player-block"><div class="player" data-player></div></div><div class="stories-block"><div class="title" data-title></div><div class="stories" data-stories></div></div>'},enumerable:!0,configurable:!0}),i._defaultOptions={title:"",color:"",activeColor:"",playerOptions:{}},i}();function w(){return(w=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var O=function(){function t(t){this._isOpen=!1,this._defaultOptions={classes:"",openers:"",closers:""},this._eventEmitter=new i,this._listeners=[];var e=w({},this._defaultOptions,t);this.el=this._createDiv(e.classes),this.content=this._createDiv("gobi-popup__content"),this.iframeContainer=this._createDiv("gobi-popup__iframe-container"),this._createTemplate(),this.player=e.player,this.appendPlayer(this.player),this._initClosers(e.closers)}return Object.defineProperty(t.prototype,"isOpen",{get:function(){return this._isOpen},enumerable:!0,configurable:!0}),t.prototype.appendPlayer=function(t){this.player=t,this.iframeContainer.insertBefore(this.player.el,this.iframeContainer.lastElementChild)},t.prototype.open=function(){l.disable(),this.el.style.zIndex=(function(){for(var t=document.body.querySelectorAll("*"),e=1,n=0,i=t.length;i--;)e<(n=Number(window.getComputedStyle(t[i]).zIndex))&&(e=n);return e}()+1).toString(),this.el.classList.add("gobi-popup--active"),this._listeners.push(r(window,"keyup",this._onKeyUpClose.bind(this))),this._isOpen=!0,this._eventEmitter.emit("open",this,this)},t.prototype.close=function(){this.el.style.zIndex="",this.el.classList.remove("gobi-popup--active"),this.el.style.padding="",l.enable(),this._removeListeners(),this.player.pause(),this._isOpen=!1,this._eventEmitter.emit("close",this,this)},t.prototype.on=function(t,e){this._eventEmitter.on(t,e)},t.prototype.off=function(t,e){this._eventEmitter.off(t,e)},t.prototype._removeListeners=function(){for(var t=this._listeners.length;t--;)this._listeners[t]()},t.prototype._createTemplate=function(){var t=this._createElement("button","gobi-popup__close-btn");r(t,"click",this.close.bind(this)),this._calcPlayerSize(),this.iframeContainer.appendChild(t),this.content.appendChild(this.iframeContainer),this.el.classList.add("gobi-popup"),this.el.appendChild(this.content),window.addEventListener("resize",this._calcPlayerSize.bind(this))},t.prototype._createDiv=function(t){return this._createElement("div",t)},t.prototype._createElement=function(t,e){var n=document.createElement(t);return n.className=e,n},t.prototype._initClosers=function(t){this.el.addEventListener("click",this._onOutsideClose.bind(this)),this.content.addEventListener("click",this._onOutsideClose.bind(this))},t.prototype._onOutsideClose=function(t){t.target===t.currentTarget&&this.close()},t.prototype._onKeyUpClose=function(t){(void 0!==t.key?"Escape"===t.key||"Esc"===t.key:27===t.keyCode)&&this.close()},t.prototype._calcPlayerSize=function(){var t,e,n=window.innerHeight-100,i=window.innerWidth;e=.5625<i/n?(t=.5625*n,n):(t=i)/.5625,this.iframeContainer.style.width=t+"px",this.iframeContainer.style.height=e+"px"},t}(),S=function(n){function i(t){var e=n.call(this,t)||this;return e._elems={title:e._getElem("title"),description:e._getElem("description"),avatar:e._getElem("avatar"),avatarContainer:e._getElem("avatarContainer")},t.titleColor&&(e._elems.title.style.color=t.titleColor),t.descriptionColor&&(e._elems.description.style.color=t.descriptionColor),e.title=e._title,e.description=e._description,e.avatarSrc=e._avatarSrc,e.color=e._color,e}return y(i,n),Object.defineProperty(i.prototype,"avatarSrc",{get:function(){return this._avatarSrc},set:function(t){this._avatarSrc=t,this._elems.avatar.style.backgroundImage="url("+t+")"},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"title",{get:function(){return this._title},set:function(t){this._title=t,this._elems.title.textContent=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"description",{get:function(){return this._description},set:function(t){this._description=t,this._elems.description.textContent=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"color",{get:function(){return this._color},set:function(t){this._color=t,this._elems.avatarContainer.style.borderColor=t},enumerable:!0,configurable:!0}),i.prototype._createTemplate=function(){var t="gobi-popup-story",e=document.createElement("div");return e.classList.add(t),e.innerHTML=i._HTML,a(e.querySelectorAll("*"),t+"__"),e},Object.defineProperty(i,"_HTML",{get:function(){return'<div class="avatar-container" data-select-area data-avatarContainer><div class="avatar" data-avatar></div></div><div class="title" data-title></div><div class="description"><div class="description-text" data-description></div></div>'},enumerable:!0,configurable:!0}),i}(_);function C(){return(C=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var E=function(){function r(t){var e=C({},r._defaultMobileModuleOptions,t);this.el=this._createTemplate(e.verticalOrientation),this._title=e.title,this.title=e.title,this._color=e.color,this.stories=this._createStories(e.stories),this._currentStory=this.stories[0],this.player=new h(C({storyName:this.currentStory.name,checkViewPort:!1},e.playerOptions)),this.popup=new O({player:this.player})}return Object.defineProperty(r.prototype,"title",{get:function(){return this._title},set:function(t){var e=this.el.querySelector("[data-title]");e&&(this._title=t||"",e.textContent=this._title,e.style.display=this._title?"":"none")},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"currentStory",{get:function(){return this._currentStory},set:function(t){this._currentStory=t,this.player.load({storyName:this._currentStory.name})},enumerable:!0,configurable:!0}),r.prototype.append=function(t){document.body.appendChild(this.popup.el),t.appendChild(this.el)},r.prototype.remove=function(){var t=this.el.parentElement;t&&(document.body.removeChild(this.popup.el),t.removeChild(this.el),this.popup.close())},r.prototype._createStories=function(t){var e=this,n=this.el.querySelector("[data-stories]");return t.map(function(t){return new S({name:t.name,container:n,avatarSrc:t.avatarSrc,title:t.title,description:t.description,titleColor:t.titleColor,descriptionColor:t.descriptionColor,color:e._color,onSelect:e._onStorySelect.bind(e)})})},r.prototype._onStorySelect=function(t){this.currentStory=t,this.popup.open()},r.prototype._createTemplate=function(t){void 0===t&&(t=!1);var e=document.createElement("div"),n="gobi-popup-module";e.classList.add(n),e.innerHTML=r._HTML,a(e.querySelectorAll("*"),n+"__");var i=e.lastElementChild;return t?i.classList.add(n+"__stories--vertical"):i.classList.add(n+"__stories--horizontal"),e},Object.defineProperty(r,"_HTML",{get:function(){return'<div class="title" data-title></div>\n                <div class="stories" data-stories></div>'},enumerable:!0,configurable:!0}),r._defaultMobileModuleOptions={title:"",color:"",playerOptions:{}},r}();function T(){return(T=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var k=function(){function l(t){this.load(t)}return l.prototype.load=function(s){var a=this;c(s.moduleId).then(function(t){var e=T({},l._defaultOptions,s),n=e.container,i=u(p(t),e.stories),r=window.innerWidth<768,o=a._initModules(e,i);window.innerWidth<768&&o.mobile.append(n),767<window.innerWidth&&o.desktop.append(n),window.addEventListener("resize",function(){window.innerWidth<768&&!r&&(o.desktop.remove(),o.mobile.append(n),r=!0),767<window.innerWidth&&r&&(o.mobile.remove(),o.desktop.append(n),r=!1)})})},l.prototype._initModules=function(t,e){return{desktop:new g({title:t.title,color:t.color,activeColor:t.activeColor,stories:e,playerOptions:t.playerOptions,titleSize:t.desktopStoryStyle.titleSize,avatarSize:t.desktopStoryStyle.avatarSize,descriptionSize:t.desktopStoryStyle.descriptionSize}),mobile:new E({title:t.title,color:t.activeColor,stories:e,playerOptions:t.playerOptions})}},l._defaultOptions={title:"",color:"#999999",activeColor:"#15d6ea",stories:[],desktopStoryStyle:{}},l}();function P(){return(P=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var j=function(){function r(t){this.load(t)}return r.prototype.load=function(i){c(i.moduleId).then(function(t){var e=P({},r._defaultOptions,i),n=u(p(t),e.stories);new E({verticalOrientation:e.verticalOrientation,title:i.title,color:i.color,stories:n,playerOptions:i.playerOptions}).append(e.container)})},r._defaultOptions={title:"",color:"#15d6ea",stories:[]},r}();n.d(e,"Module",function(){return I}),n.d(e,"MobileModule",function(){return L}),n.d(e,"Player",function(){return M});var I=k,L=j,M=h}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.gobi=e():t.gobi=e()}(window,function(){return function(n){var i={};function r(t){if(i[t])return i[t].exports;var e=i[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}return r.m=n,r.c=i,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=7)}([function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,d,p){"use strict";(function(e){var t=p(2),n=setTimeout;function i(){}function o(t){if(!(this instanceof o))throw new TypeError("Promises must be constructed via new");if("function"!=typeof t)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],u(t,this)}function r(n,i){for(;3===n._state;)n=n._value;0!==n._state?(n._handled=!0,o._immediateFn(function(){var t=1===n._state?i.onFulfilled:i.onRejected;if(null!==t){var e;try{e=t(n._value)}catch(t){return void a(i.promise,t)}s(i.promise,e)}else(1===n._state?s:a)(i.promise,n._value)})):n._deferreds.push(i)}function s(e,t){try{if(t===e)throw new TypeError("A promise cannot be resolved with itself.");if(t&&("object"==typeof t||"function"==typeof t)){var n=t.then;if(t instanceof o)return e._state=3,e._value=t,void c(e);if("function"==typeof n)return void u((i=n,r=t,function(){i.apply(r,arguments)}),e)}e._state=1,e._value=t,c(e)}catch(t){a(e,t)}var i,r}function a(t,e){t._state=2,t._value=e,c(t)}function c(t){2===t._state&&0===t._deferreds.length&&o._immediateFn(function(){t._handled||o._unhandledRejectionFn(t._value)});for(var e=0,n=t._deferreds.length;e<n;e++)r(t,t._deferreds[e]);t._deferreds=null}function l(t,e,n){this.onFulfilled="function"==typeof t?t:null,this.onRejected="function"==typeof e?e:null,this.promise=n}function u(t,e){var n=!1;try{t(function(t){n||(n=!0,s(e,t))},function(t){n||(n=!0,a(e,t))})}catch(t){if(n)return;n=!0,a(e,t)}}o.prototype.catch=function(t){return this.then(null,t)},o.prototype.then=function(t,e){var n=new this.constructor(i);return r(this,new l(t,e,n)),n},o.prototype.finally=t.a,o.all=function(e){return new o(function(i,r){if(!e||void 0===e.length)throw new TypeError("Promise.all accepts an array");var o=Array.prototype.slice.call(e);if(0===o.length)return i([]);var s=o.length;function a(e,t){try{if(t&&("object"==typeof t||"function"==typeof t)){var n=t.then;if("function"==typeof n)return void n.call(t,function(t){a(e,t)},r)}o[e]=t,0==--s&&i(o)}catch(t){r(t)}}for(var t=0;t<o.length;t++)a(t,o[t])})},o.resolve=function(e){return e&&"object"==typeof e&&e.constructor===o?e:new o(function(t){t(e)})},o.reject=function(n){return new o(function(t,e){e(n)})},o.race=function(r){return new o(function(t,e){for(var n=0,i=r.length;n<i;n++)r[n].then(t,e)})},o._immediateFn="function"==typeof e&&function(t){e(t)}||function(t){n(t,0)},o._unhandledRejectionFn=function(t){"undefined"!=typeof console&&console&&console.warn("Possible Unhandled Promise Rejection:",t)},d.a=o}).call(this,p(4).setImmediate)},function(t,e,n){"use strict";e.a=function(e){var n=this.constructor;return this.then(function(t){return n.resolve(e()).then(function(){return t})},function(t){return n.resolve(e()).then(function(){return n.reject(t)})})}},function(t,e,n){},function(t,r,o){(function(t){var e=void 0!==t&&t||"undefined"!=typeof self&&self||window,n=Function.prototype.apply;function i(t,e){this._id=t,this._clearFn=e}r.setTimeout=function(){return new i(n.call(setTimeout,e,arguments),clearTimeout)},r.setInterval=function(){return new i(n.call(setInterval,e,arguments),clearInterval)},r.clearTimeout=r.clearInterval=function(t){t&&t.close()},i.prototype.unref=i.prototype.ref=function(){},i.prototype.close=function(){this._clearFn.call(e,this._id)},r.enroll=function(t,e){clearTimeout(t._idleTimeoutId),t._idleTimeout=e},r.unenroll=function(t){clearTimeout(t._idleTimeoutId),t._idleTimeout=-1},r._unrefActive=r.active=function(t){clearTimeout(t._idleTimeoutId);var e=t._idleTimeout;0<=e&&(t._idleTimeoutId=setTimeout(function(){t._onTimeout&&t._onTimeout()},e))},o(5),r.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==t&&t.setImmediate||this&&this.setImmediate,r.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==t&&t.clearImmediate||this&&this.clearImmediate}).call(this,o(0))},function(t,e,n){(function(t,f){!function(n,i){"use strict";if(!n.setImmediate){var r,o,e,s,t,a=1,c={},l=!1,u=n.document,d=Object.getPrototypeOf&&Object.getPrototypeOf(n);d=d&&d.setTimeout?d:n,r="[object process]"==={}.toString.call(n.process)?function(t){f.nextTick(function(){h(t)})}:function(){if(n.postMessage&&!n.importScripts){var t=!0,e=n.onmessage;return n.onmessage=function(){t=!1},n.postMessage("","*"),n.onmessage=e,t}}()?(s="setImmediate$"+Math.random()+"$",t=function(t){t.source===n&&"string"==typeof t.data&&0===t.data.indexOf(s)&&h(+t.data.slice(s.length))},n.addEventListener?n.addEventListener("message",t,!1):n.attachEvent("onmessage",t),function(t){n.postMessage(s+t,"*")}):n.MessageChannel?((e=new MessageChannel).port1.onmessage=function(t){h(t.data)},function(t){e.port2.postMessage(t)}):u&&"onreadystatechange"in u.createElement("script")?(o=u.documentElement,function(t){var e=u.createElement("script");e.onreadystatechange=function(){h(t),e.onreadystatechange=null,o.removeChild(e),e=null},o.appendChild(e)}):function(t){setTimeout(h,0,t)},d.setImmediate=function(t){"function"!=typeof t&&(t=new Function(""+t));for(var e=new Array(arguments.length-1),n=0;n<e.length;n++)e[n]=arguments[n+1];var i={callback:t,args:e};return c[a]=i,r(a),a++},d.clearImmediate=p}function p(t){delete c[t]}function h(t){if(l)setTimeout(h,0,t);else{var e=c[t];if(e){l=!0;try{!function(t){var e=t.callback,n=t.args;switch(n.length){case 0:e();break;case 1:e(n[0]);break;case 2:e(n[0],n[1]);break;case 3:e(n[0],n[1],n[2]);break;default:e.apply(i,n)}}(e)}finally{p(t),l=!1}}}}}("undefined"==typeof self?void 0===t?this:t:self)}).call(this,n(0),n(6))},function(t,e){var n,i,r=t.exports={};function o(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function a(e){if(n===setTimeout)return setTimeout(e,0);if((n===o||!n)&&setTimeout)return n=setTimeout,setTimeout(e,0);try{return n(e,0)}catch(t){try{return n.call(null,e,0)}catch(t){return n.call(this,e,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:o}catch(t){n=o}try{i="function"==typeof clearTimeout?clearTimeout:s}catch(t){i=s}}();var c,l=[],u=!1,d=-1;function p(){u&&c&&(u=!1,c.length?l=c.concat(l):d=-1,l.length&&h())}function h(){if(!u){var t=a(p);u=!0;for(var e=l.length;e;){for(c=l,l=[];++d<e;)c&&c[d].run();d=-1,e=l.length}c=null,u=!1,function(e){if(i===clearTimeout)return clearTimeout(e);if((i===s||!i)&&clearTimeout)return i=clearTimeout,clearTimeout(e);try{i(e)}catch(t){try{return i.call(null,e)}catch(t){return i.call(this,e)}}}(t)}}function f(t,e){this.fun=t,this.array=e}function y(){}r.nextTick=function(t){var e=new Array(arguments.length-1);if(1<arguments.length)for(var n=1;n<arguments.length;n++)e[n-1]=arguments[n];l.push(new f(t,e)),1!==l.length||u||a(h)},f.prototype.run=function(){this.fun.apply(null,this.array)},r.title="browser",r.browser=!0,r.env={},r.argv=[],r.version="",r.versions={},r.on=y,r.addListener=y,r.once=y,r.off=y,r.removeListener=y,r.removeAllListeners=y,r.emit=y,r.prependListener=y,r.prependOnceListener=y,r.listeners=function(t){return[]},r.binding=function(t){throw new Error("process.binding is not supported")},r.cwd=function(){return"/"},r.chdir=function(t){throw new Error("process.chdir is not supported")},r.umask=function(){return 0}},function(t,e,n){"use strict";n.r(e);n(3);var i=function(){function t(){this._eventsCallbacks={}}return t.prototype.on=function(t,e){this._eventsCallbacks.hasOwnProperty(t)||(this._eventsCallbacks[t]=[]);var n=this._eventsCallbacks[t];-1===n.indexOf(e)&&n.push(e)},t.prototype.off=function(t,e){"string"==typeof t?this._eventsCallbacks.hasOwnProperty(t)&&("function"==typeof e?this._removeCallback(t,e):this._eventsCallbacks[t]=[]):this._removeAllCallbacks()},t.prototype.emit=function(t,e,n){if(this._eventsCallbacks.hasOwnProperty(t))for(var i=this._eventsCallbacks[t],r=i.length,o=0;o<r;o++)i[o].call(n||this,e)},t.prototype._removeCallback=function(t,e){var n=this._eventsCallbacks[t],i=n.indexOf(e);-1<i&&n.splice(i,1)},t.prototype._removeAllCallbacks=function(){for(var t in this._eventsCallbacks)this._eventsCallbacks.hasOwnProperty(t)&&delete this._eventsCallbacks[t]},t}(),o=n(1);function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}function a(t,e){for(var n,i=t.length,r=0;r<i;r++)(n=t[r]).className=e+n.className}function r(r){return new o.a(function(t,e){var n=new XMLHttpRequest,i="https://live.gobiapp.com/projector/player/storyModules/"+r;n.open("GET",i,!0),n.send(),n.onload=function(){this.status<400?t(JSON.parse(this.responseText)):e(Error("Module didn't load successfully; error code:"+n.statusText))},n.onerror=function(){e(Error("There was a network error."))}})}function l(t,e){if(e){var n=[];for(var i in t){var r=t[i],o=e[i];n.push(o?s(r,o):r)}return n}return t}function u(t){return t.map(function(t){return{title:t.title,avatarSrc:t.thumbnail,description:t.description,id:t.story_id}})}function c(t,e,n){var i=function(t){return n(t)};return t.addEventListener(e,i),function(){return t.removeEventListener(e,i)}}var d={scrollTop:0,bodyOverflow:"",htmlOverflow:"",disable:function(){this.isIOS?this.IOSDisable():this.classicDisable()},enable:function(){this.isIOS?this.IOSEnable():this.classicEnable()},classicDisable:function(){this.bodyOverflow=document.body.style.overflow,this.htmlOverflow=document.documentElement.style.overflow,document.documentElement.style.overflow="hidden",document.body.style.overflow="hidden"},classicEnable:function(){document.documentElement.style.overflow=this.htmlOverflow,document.body.style.overflow=this.bodyOverflow},IOSEnable:function(){document.documentElement.classList.remove("disabled-scroll"),document.body.classList.remove("disabled-scroll"),window.scrollTo(0,this.scrollTop)},IOSDisable:function(){this.scrollTop=window.pageYOffset,document.documentElement.classList.add("disabled-scroll"),document.body.classList.add("disabled-scroll")},isIOS:/iPad|iPhone|iPod/.test(navigator.userAgent)};function p(){return(p=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var h=function(){function t(t){var n=this;this._defaultOptions={autoStart:!1,hideOverlay:!1,loop:!1,width:0,height:0,roundedCorners:!0,shadow:!0,checkViewPort:!0},this._eventEmitter=new i,this.on=this._eventEmitter.on.bind(this._eventEmitter),this.off=this._eventEmitter.off.bind(this._eventEmitter),this._removeIsOnScreenChecker=function(){},this._removeIsOutOfScreenChecker=function(){},this._options=p({},this._defaultOptions,t),this.el=this._createIframe(),this._options.container&&this._options.container.appendChild(this.el),window.addEventListener("message",function(t){if(n.el.contentWindow===t.source){var e=t.data;e.event&&(n._eventEmitter.emit(e.event,e.value,n),n._options.checkViewPort&&n._viewPortChecker(e.event))}})}return Object.defineProperty(t.prototype,"storyURL",{get:function(){return"https://live.gobiapp.com/next/story/id/"+this._options.storyName+"?autoStart="+this._options.autoStart+"&addLooping="+this._options.loop+"&hideOverlay="+this._options.hideOverlay+"&roundedCorners="+this._options.roundedCorners},enumerable:!0,configurable:!0}),t.prototype.load=function(t){p(this._options,t),this.el.src=this.storyURL},t.prototype.play=function(){this._callPlayerMethod("play")},t.prototype.pause=function(){this._callPlayerMethod("pause")},t.prototype.reload=function(){this._callPlayerMethod("reset")},t.prototype.setMute=function(t){this._callPlayerMethod("setMute",t)},t.prototype.isInViewport=function(){var t=this.el.getBoundingClientRect(),e=window.innerHeight||document.documentElement.clientHeight,n=window.innerWidth||document.documentElement.clientWidth,i=.8*t.height,r=.8*t.width;return t.top>=0-i&&t.left>=0-r&&t.bottom<=e+i&&t.right<=n+r},t.prototype._callPlayerMethod=function(t,e){void 0===e&&(e=void 0),this._sendMessage({method:t,value:e})},t.prototype._sendMessage=function(t){var e=this.el.contentWindow;e&&e.postMessage(t,"*")},t.prototype._createIframe=function(){var t=document.createElement("iframe"),e=this._calcPlayerSize();return t.src=this.storyURL,t.width=e.width.toString(),t.height=e.height.toString(),t.frameBorder="0",t.scrolling="no",t.style.overflow="hidden",t.style.background="#000",t.style.border="0",this._options.shadow&&t.classList.add("gobi-player-shadow"),this._options.roundedCorners&&(t.style.borderRadius="10px"),t.setAttribute("allow","autoplay;"),t},t.prototype._viewPortChecker=function(t){switch(t){case"play":this._addIsOutOfScreenChecker();break;case"pause":this.isInViewport()&&(this._removeIsOnScreenChecker(),this._removeIsOutOfScreenChecker());break;case"ended":this._removeIsOnScreenChecker(),this._removeIsOutOfScreenChecker()}},t.prototype._addIsOutOfScreenChecker=function(){var t=this;this._removeIsOutOfScreenChecker(),this._removeIsOnScreenChecker(),this._removeIsOutOfScreenChecker=c(window,"scroll",function(){t.isInViewport()||(t.pause(),t._removeIsOutOfScreenChecker(),t._addIsOnScreenChecker())})},t.prototype._addIsOnScreenChecker=function(){var t=this;this._removeIsOnScreenChecker=c(window,"scroll",function(){t.isInViewport()&&(t.play(),t._removeIsOnScreenChecker(),t._addIsOutOfScreenChecker())})},t.prototype._calcPlayerSize=function(){var t=612,e=1088;return this._options.width&&this._options.height?(t=this._options.width,e=this._options.height):this._options.width?e=(t=this._options.width)/.5625:this._options.height&&(t=.5625*(e=this._options.height)),{width:t,height:e}},t}(),f=function(t,e){return(f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function y(t,e){function n(){this.constructor=t}f(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var v=function(){function t(t){this._listeners=[],this._eventEmitter=new i,this.on=this._eventEmitter.on.bind(this._eventEmitter),this.off=this._eventEmitter.off.bind(this._eventEmitter),this.el=this._createTemplate(),this.id=t.id,this._title=t.title||"",this._description=t.description||"",this._avatarSrc=t.avatarSrc||"",this._color=t.color||"",this._addSelectEmitter(),"function"==typeof t.onSelect&&this._eventEmitter.on("select",t.onSelect),t.container&&t.container.appendChild(this.el)}return t.prototype.destroy=function(){this.el.parentElement&&this.el.parentElement.removeChild(this.el),this._eventEmitter.off();for(var t=this._listeners.length;t--;)this._listeners[t]()},t.prototype._addSelectEmitter=function(){for(var t=this,e=this.el.querySelectorAll("[data-select-area]"),n=function(){t._eventEmitter.emit("select",t)},i=e.length;i--;)this._listeners.push(c(e[i],"click",n))},t.prototype._getElem=function(t){var e="data-"+t,n=this.el.querySelector("["+e+"]");if(n)return n.removeAttribute(e),n;throw new Error("Story does not contain element with name:"+t)},t}(),_=function(n){function i(t){var e=n.call(this,t)||this;return e._selected=!1,e._elems={title:e._getElem("title"),description:e._getElem("description"),avatar:e._getElem("avatar"),avatarContainer:e._getElem("avatarContainer")},t.titleColor&&(e._elems.title.style.color=t.titleColor),t.descriptionColor&&(e._elems.description.style.color=t.descriptionColor),t.titleSize&&(e._elems.title.style.fontSize=t.titleSize),t.descriptionSize&&(e._elems.description.style.fontSize=t.descriptionSize),t.avatarSize&&(e._elems.avatarContainer.style.width=t.avatarSize),e._selected=!!t.selected,e.title=e._title,e.description=e._description,e.avatarSrc=e._avatarSrc,e.color=e._color,e}return y(i,n),Object.defineProperty(i.prototype,"avatarSrc",{get:function(){return this._avatarSrc},set:function(t){this._avatarSrc=t,this._elems.avatar.style.backgroundImage="url("+t+")"},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"title",{get:function(){return this._title},set:function(t){this._title=t,this._elems.title.textContent=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"description",{get:function(){return this._description},set:function(t){this._description=t,this._elems.description.textContent=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"color",{get:function(){return this._color},set:function(t){this._color=t,this._elems.avatarContainer.style.borderColor=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"selected",{get:function(){return this._selected},set:function(t){t?this.el.classList.add("gobi-story--selected"):this.el.classList.remove("gobi-story--selected"),this._selected=t},enumerable:!0,configurable:!0}),i.prototype._createTemplate=function(){var t="gobi-story",e=document.createElement("div");return e.classList.add(t),e.innerHTML=i._HTML,a(e.querySelectorAll("*"),t+"__"),e},Object.defineProperty(i,"_HTML",{get:function(){return'<div class="avatar-container" data-select-area data-avatarContainer><div class="avatar" data-avatar></div></div><div class="title" data-title></div><div class="description" data-description></div>'},enumerable:!0,configurable:!0}),i}(v);function m(){return(m=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var b=function(){function i(t){var e=this,n=m({},i._defaultOptions,t);this.el=this._createTemplate(),this._title=n.title,this.title=n.title,this._color=n.color,this._activeColor=n.activeColor,this.stories=this._createStories(n.stories,n),this._currentStory=this.stories[0],this._playerContainer=this.el.querySelector("[data-player]"),this.player=new h(m({storyName:this._currentStory.id,container:this._playerContainer},n.playerOptions)),this._playerContainer.style.maxWidth=Math.min(.53*window.innerHeight,350)+"px",window.addEventListener("resize",function(){e._playerContainer.style.maxWidth=Math.min(.53*window.innerHeight,350)+"px"}),this.currentStory=this._currentStory}return Object.defineProperty(i.prototype,"title",{get:function(){return this._title},set:function(t){var e=this.el.querySelector("[data-title]");e&&(this._title=t,e.textContent=t)},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"currentStory",{get:function(){return this._currentStory},set:function(t){this._currentStory.color=this._color,this._currentStory.selected=!1,this._currentStory=t,this._currentStory.selected=!0,this._currentStory.color=this._activeColor,this.player.load({storyName:this._currentStory.id})},enumerable:!0,configurable:!0}),i.prototype.append=function(t){t.appendChild(this.el)},i.prototype.remove=function(){var t=this.el.parentElement;t&&t.removeChild(this.el)},i.prototype._createStories=function(t,e){var n=this,i=this.el.querySelector("[data-stories]");return t.map(function(t){return new _({id:t.id,container:i,avatarSrc:t.avatarSrc,title:t.title,description:t.description,titleColor:t.titleColor,descriptionColor:t.descriptionColor,color:n._color,titleSize:e.titleSize,avatarSize:e.avatarSize,descriptionSize:e.descriptionSize,onSelect:n._onStorySelect.bind(n)})})},i.prototype._onStorySelect=function(t){this.currentStory=t},i.prototype._createTemplate=function(){var t=document.createElement("div"),e="gobi-module";return t.classList.add(e),t.innerHTML=i._HTML,a(t.querySelectorAll("*"),e+"__"),t},Object.defineProperty(i,"_HTML",{get:function(){return'<div class="player-block"><div class="player" data-player></div></div><div class="stories-block"><div class="title" data-title></div><div class="stories" data-stories></div></div>'},enumerable:!0,configurable:!0}),i._defaultOptions={title:"",color:"",activeColor:"",playerOptions:{}},i}();function g(){return(g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var w=function(){function t(t){this._isOpen=!1,this._defaultOptions={classes:"",openers:"",closers:""},this._eventEmitter=new i,this._listeners=[];var e=g({},this._defaultOptions,t);this.el=this._createDiv(e.classes),this.content=this._createDiv("gobi-popup__content"),this.iframeContainer=this._createDiv("gobi-popup__iframe-container"),this._createTemplate(),this.player=e.player,this.appendPlayer(this.player),this._initClosers(e.closers)}return Object.defineProperty(t.prototype,"isOpen",{get:function(){return this._isOpen},enumerable:!0,configurable:!0}),t.prototype.appendPlayer=function(t){this.player=t,this.iframeContainer.insertBefore(this.player.el,this.iframeContainer.lastElementChild)},t.prototype.open=function(){d.disable(),this.el.style.zIndex=(function(){for(var t=document.body.querySelectorAll("*"),e=1,n=0,i=t.length;i--;)e<(n=Number(window.getComputedStyle(t[i]).zIndex))&&(e=n);return e}()+1).toString(),this.el.classList.add("gobi-popup--active"),this._listeners.push(c(window,"keyup",this._onKeyUpClose.bind(this))),this._isOpen=!0,this._eventEmitter.emit("open",this,this)},t.prototype.close=function(){this.el.style.zIndex="",this.el.classList.remove("gobi-popup--active"),this.el.style.padding="",d.enable(),this._removeListeners(),this.player.pause(),this._isOpen=!1,this._eventEmitter.emit("close",this,this)},t.prototype.on=function(t,e){this._eventEmitter.on(t,e)},t.prototype.off=function(t,e){this._eventEmitter.off(t,e)},t.prototype._removeListeners=function(){for(var t=this._listeners.length;t--;)this._listeners[t]()},t.prototype._createTemplate=function(){var t=this._createElement("button","gobi-popup__close-btn");c(t,"click",this.close.bind(this)),this._calcPlayerSize(),this.iframeContainer.appendChild(t),this.content.appendChild(this.iframeContainer),this.el.classList.add("gobi-popup"),this.el.appendChild(this.content),window.addEventListener("resize",this._calcPlayerSize.bind(this))},t.prototype._createDiv=function(t){return this._createElement("div",t)},t.prototype._createElement=function(t,e){var n=document.createElement(t);return n.className=e,n},t.prototype._initClosers=function(t){this.el.addEventListener("click",this._onOutsideClose.bind(this)),this.content.addEventListener("click",this._onOutsideClose.bind(this))},t.prototype._onOutsideClose=function(t){t.target===t.currentTarget&&this.close()},t.prototype._onKeyUpClose=function(t){(void 0!==t.key?"Escape"===t.key||"Esc"===t.key:27===t.keyCode)&&this.close()},t.prototype._calcPlayerSize=function(){var t,e,n=window.innerHeight-100,i=window.innerWidth;e=.5625<i/n?(t=.5625*n,n):(t=i)/.5625,this.iframeContainer.style.width=t+"px",this.iframeContainer.style.height=e+"px"},t}(),S=function(n){function i(t){var e=n.call(this,t)||this;return e._elems={title:e._getElem("title"),description:e._getElem("description"),avatar:e._getElem("avatar"),avatarContainer:e._getElem("avatarContainer")},t.titleColor&&(e._elems.title.style.color=t.titleColor),t.descriptionColor&&(e._elems.description.style.color=t.descriptionColor),e.title=e._title,e.description=e._description,e.avatarSrc=e._avatarSrc,e.color=e._color,e}return y(i,n),Object.defineProperty(i.prototype,"avatarSrc",{get:function(){return this._avatarSrc},set:function(t){this._avatarSrc=t,this._elems.avatar.style.backgroundImage="url("+t+")"},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"title",{get:function(){return this._title},set:function(t){this._title=t,this._elems.title.textContent=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"description",{get:function(){return this._description},set:function(t){this._description=t,this._elems.description.textContent=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"color",{get:function(){return this._color},set:function(t){this._color=t,this._elems.avatarContainer.style.borderColor=t},enumerable:!0,configurable:!0}),i.prototype._createTemplate=function(){var t="gobi-popup-story",e=document.createElement("div");return e.classList.add(t),e.innerHTML=i._HTML,a(e.querySelectorAll("*"),t+"__"),e},Object.defineProperty(i,"_HTML",{get:function(){return'<div class="avatar-container" data-select-area data-avatarContainer><div class="avatar" data-avatar></div></div><div class="title" data-title></div><div class="description"><div class="description-text" data-description></div></div>'},enumerable:!0,configurable:!0}),i}(v);function O(){return(O=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var C=function(){function r(t){this.el=this._createTemplate(t.verticalOrientation),this._title=t.title||"",this.title=this._title,this.stories=this._createStories(t.stories,t.color),this._currentStory=this.stories[0],this.player=new h(O({storyName:this.currentStory.id,checkViewPort:!1},t.playerOptions)),this.popup=new w({player:this.player}),t.container&&this.append(t.container)}return Object.defineProperty(r.prototype,"title",{get:function(){return this._title},set:function(t){var e=this.el.querySelector("[data-title]");e&&(this._title=t||"",e.textContent=this._title,e.style.display=this._title?"":"none")},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"currentStory",{get:function(){return this._currentStory},set:function(t){this._currentStory=t,this.player.load({storyName:this._currentStory.id})},enumerable:!0,configurable:!0}),r.prototype.append=function(t){document.body.appendChild(this.popup.el),t.appendChild(this.el)},r.prototype.remove=function(){var t=this.el.parentElement;t&&(document.body.removeChild(this.popup.el),t.removeChild(this.el),this.popup.close())},r.prototype._createStories=function(t,e){var n=this,i=this.el.querySelector("[data-stories]");return t.map(function(t){return new S({id:t.id,container:i,avatarSrc:t.avatarSrc,title:t.title,description:t.description,titleColor:t.titleColor,descriptionColor:t.descriptionColor,color:e,onSelect:n._onStorySelect.bind(n)})})},r.prototype._onStorySelect=function(t){this.currentStory=t,this.popup.open()},r.prototype._createTemplate=function(t){void 0===t&&(t=!1);var e=document.createElement("div"),n="gobi-popup-module";e.classList.add(n),e.innerHTML=r._HTML,a(e.querySelectorAll("*"),n+"__");var i=e.lastElementChild;return t?i.classList.add(n+"__stories--vertical"):i.classList.add(n+"__stories--horizontal"),e},Object.defineProperty(r,"_HTML",{get:function(){return'<div class="title" data-title></div>\n                <div class="stories" data-stories></div>'},enumerable:!0,configurable:!0}),r}();function E(){return(E=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var T=function(){function c(t){this.load(t)}return c.prototype.load=function(s){var a=this;r(s.moduleId).then(function(t){var e=E({},c._defaultOptions,s),n=e.container,i=l(u(t),e.stories),r=window.innerWidth<768,o=a._initModules(e,i);window.innerWidth<768&&o.mobile.append(n),767<window.innerWidth&&o.desktop.append(n),window.addEventListener("resize",function(){window.innerWidth<768&&!r&&(o.desktop.remove(),o.mobile.append(n),r=!0),767<window.innerWidth&&r&&(o.mobile.remove(),o.desktop.append(n),r=!1)})})},c.prototype._initModules=function(t,e){return{desktop:new b({title:t.title,color:t.color,activeColor:t.activeColor,stories:e,playerOptions:t.playerOptions,titleSize:t.desktopStoryStyle.titleSize,avatarSize:t.desktopStoryStyle.avatarSize,descriptionSize:t.desktopStoryStyle.descriptionSize}),mobile:new C({title:t.title,color:t.activeColor,stories:e,playerOptions:t.playerOptions})}},c._defaultOptions={title:"",color:"#999999",activeColor:"#15d6ea",stories:[],desktopStoryStyle:{}},c}(),k=function(){function t(t){this.load(t)}return t.prototype.load=function(n){r(n.moduleId).then(function(t){var e=l(u(t),n.stories);new C({verticalOrientation:n.verticalOrientation,title:n.title,color:n.color,stories:e,playerOptions:n.playerOptions,container:n.container})})},t}();n.d(e,"Module",function(){return P}),n.d(e,"Player",function(){return j}),n.d(e,"MobileModule",function(){return I}),n.d(e,"MobileLayout",function(){return L});var P=T,j=h,I=k,L=C}])});

package.json

 {
   "name": "@gobistories/gobi-web-integration",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/gobi-web-integration.js",

README.md

@@ -274,2 +274,49 @@ # Gobi Web Integration
 
+## MobileLayout Constructor
+
+Function which create **mobile** layout with already embedded player. The output will be the same as MobileModule, the difference is that instead of the module identifier it is get the identifier of each story
+
+### Create
+```html
+<head>
+  <link href="https://unpkg.com/@gobistories/gobi-web-integration/dist/gobi-web-integration.css" rel="stylesheet">
+  <script src="https://unpkg.com/@gobistories/gobi-web-integration"></script>
+</head>
+<body>
+  <div id="container"></div>
+  <script>
+        new gobi.MobileLayout({
+          container: document.getElementById('container'),
+          stories: [{
+                id: 'story-id',
+                title: 'Some Title',
+                description: 'Some Description'
+            }, {
+                id: 'another-story-id',
+                title: 'Some Another Title',
+                description: 'Some Another Description'
+            }],
+        });
+  </script>
+</body>
+```
+### Options
+
+option                            | default  | description
+----------------------------------| -------- | -----------
+container                         |          | **Required.** HTMLElement. Container where the module will be embed.
+title                             |    ``    | String. Module title.
+color                             |`#15d6ea` | Any valid css color value (#000, rgb(...), rgba(...)). The color of border of story circle.
+verticalOrientation               |  `false` | Boolean. Displays a list of stories vertically.
+**playerOptions**                 |   `{}`   | Object. Provides interface for customization of player view.
+playerOptions.roundedCorners      |  `true`  | Boolean. Remove or add rounded corners to player element.
+playerOptions.shadow              |  `true`  | Boolean. Remove or add shadow to player element.
+**stories**                       |          | **Required.** Array. Data of stories.
+stories[0...n].id                 |          | **Required.** String. Identifire of story.
+stories[0...n].title              |    ``    | String. Change title text of specific story.
+stories[0...n].description        |    ``    | String. Change description text of specific story.
+stories[0...n].avatarSrc          |    ``    | String. Avatar URL of specific story.
+stories[0...n].titleColor         |    ``    | Any valid css color value (#000, rgb(...), rgba(...)). Set color of specific story title text.
+stories[0...n].descriptionColor   |    ``    | Any valid css color value (#000, rgb(...), rgba(...)). Set color of specific story description text.
+
 ## Player Constructor
@@ -276,0 +323,0 @@

src/index.ts

 import './styles.scss';
 import {default as _Player} from "@/GobiPlayer/gobi-player";
 import {default as _Module} from "@/Module/gobi-module";
-import GobiMobileModule from "@/GobiMobileModule/gobi-mobile-module";
+import {default as _MobileModule} from "@/Module/MobileModule/mobile-module";
+import {default as _MobileLayout} from "@/Layouts/MobileLayout/mobile-layout";
 
 
 export const Module = _Module;
-export const MobileModule = GobiMobileModule;
 export const Player = _Player;
+export const MobileModule = _MobileModule;
+export const MobileLayout = _MobileLayout;

src/Module/DesktopModule/desktop-module.ts

 import {addPrefixToClassName} from "@/utils/utils";
 import Player from "@/GobiPlayer/gobi-player";
-import {StoryComingOptions} from "@/Story/story.types";
+import {StoryOptions} from "@/Story/story.types";
 import Story from "@/Story/story";
@@ -46,3 +46,3 @@ import DesktopStory from "@/Story/DesktopStory/desktop-story";
         this.player.load({
-            storyName: this._currentStory.name
+            storyName: this._currentStory.id
         });
@@ -62,3 +62,3 @@ }
         this.player = new Player(Object.assign({
-            storyName: this._currentStory.name,
+            storyName: this._currentStory.id,
             container: this._playerContainer,
@@ -86,7 +86,7 @@ }, _options.playerOptions));
 
-    private _createStories(storiesOptions:StoryComingOptions[], options:DesktopModuleOptions):DesktopStory[] {
+    private _createStories(storiesOptions:StoryOptions[], options:DesktopModuleOptions):DesktopStory[] {
         const storiesBlock = this.el.querySelector('[data-stories]') as HTMLElement;
         return storiesOptions.map((story) => {
             return new DesktopStory({
-                name: story.name,
+                id: story.id,
                 container: storiesBlock,
@@ -108,3 +108,2 @@ avatarSrc: story.avatarSrc,
     private _onStorySelect(story:Story) {
-        console.log('_onStorySelect');
         this.currentStory = story as DesktopStory;
@@ -111,0 +110,0 @@ }

src/Module/DesktopModule/desktop-module.types.ts

@@ -1,2 +0,2 @@
-import {StoryComingOptions} from "@/Story/story.types";
+import {StoryOptions} from "@/Story/story.types";
 import {ModulePlayerOptions} from "@/Module/gobi-module.types";
@@ -8,3 +8,3 @@
     activeColor: string,
-    stories: StoryComingOptions[],
+    stories: StoryOptions[],
     playerOptions: ModulePlayerOptions,
@@ -21,3 +21,3 @@ titleSize?: string,
     playerOptions?: ModulePlayerOptions,
-    stories: StoryComingOptions[],
+    stories: StoryOptions[],
     titleSize?: string,
@@ -24,0 +24,0 @@ descriptionSize?: string,

src/Module/gobi-module.ts

@@ -7,5 +7,5 @@ import {
 import DesktopModule from "@/Module/DesktopModule/desktop-module";
-import {StoryComingOptions} from "@/Story/story.types";
-import MobileModule from "@/Module/MobileModule/mobile-module";
+import {StoryOptions} from "@/Story/story.types";
 import {decorateResponseStories, getModule, mergeStoriesOptions} from "@/utils/utils";
+import MobileLayout from "@/Layouts/MobileLayout/mobile-layout";
 
@@ -56,3 +56,3 @@ export default class Module {
     private _initModules(options:ModuleOptions,
-                         storiesOptions:StoryComingOptions[]):{ desktop:DesktopModule, mobile:MobileModule } {
+                         storiesOptions:StoryOptions[]):{ desktop:DesktopModule, mobile:MobileLayout } {
         return {
@@ -69,3 +69,3 @@ desktop: new DesktopModule({
             }),
-            mobile: new MobileModule({
+            mobile: new MobileLayout({
                 title:  options.title,
@@ -72,0 +72,0 @@ color: options.activeColor,

src/Module/gobi-module.types.ts

@@ -17,21 +17,4 @@
 }
-export interface GobiMobileModuleOptions {
-    moduleId: string,
-    container: HTMLElement,
-    title: string,
-    color: string,
-    verticalOrientation?: boolean,
-    stories: ModuleStoriesOptionsObj,
-    playerOptions?: ModulePlayerOptions,
-}
-export interface GobiMobileModuleComingOptions {
-    moduleId: string,
-    container: HTMLElement,
-    title?: string,
-    color?: string,
-    verticalOrientation?: boolean
-    playerOptions?: ModulePlayerOptions,
-    stories?: ModuleStoriesOptionsObj,
-}
 
+
 export interface ModuleComingOptions {
@@ -38,0 +21,0 @@ moduleId: string,

src/Module/MobileModule/mobile-module.ts

@@ -1,119 +0,25 @@
-import {addPrefixToClassName} from "@/utils/utils";
-import GobiPopup from "@/GobiPopup/gobi-popup";
-import {MobileModuleComingOptions, MobileModuleOptions} from "@/Module/MobileModule/mobile-module.types";
-import MobileStory from "@/Story/MobileStory/mobile-story";
-import Player from "@/GobiPlayer/gobi-player";
-import {StoryComingOptions} from "@/Story/story.types";
-import Story from "@/Story/story";
+import {ResponseModuleStory} from "@/Module/gobi-module.types";
+import {decorateResponseStories, getModule, mergeStoriesOptions} from "@/utils/utils";
+import MobileLayout from "@/Layouts/MobileLayout/mobile-layout";
+import {MobileModuleOptions} from "@/Story/MobileStory/mobile-story.types";
 
 export default class MobileModule {
-    private static readonly _defaultMobileModuleOptions = {
-        title: '',
-        color: '',
-        playerOptions: {},
-    };
-
-    private _currentStory:MobileStory;
-    private _title:string;
-    private _color:string;
-
-    el:HTMLElement;
-    popup:GobiPopup;
-    player:Player;
-    stories:MobileStory[];
-
-    get title():string {
-        return this._title;
+    constructor(options:MobileModuleOptions) {
+        this.load(options)
     }
-    set title(title:string) {
-        const titleEl = this.el.querySelector('[data-title]') as HTMLElement;
-        if (titleEl) {
-            this._title = title || '';
-            titleEl.textContent = this._title;
-            titleEl.style.display = this._title ? '' : 'none';
-        }
-    }
-    get currentStory():MobileStory {
-        return this._currentStory;
-    }
-    set currentStory(story:MobileStory) {
-        this._currentStory = story;
-        this.player.load({
-            storyName: this._currentStory.name
-        });
-    }
 
-    constructor(options:MobileModuleComingOptions) {
-        const _options:MobileModuleOptions = Object.assign({}, MobileModule._defaultMobileModuleOptions, options);
-        this.el = this._createTemplate(_options.verticalOrientation);
-        this._title = _options.title;
-        this.title = _options.title;
-        this._color = _options.color;
-        this.stories = this._createStories(_options.stories);
-        this._currentStory = this.stories[0];
-        this.player = new Player(Object.assign({
-            storyName: this.currentStory.name,
-            checkViewPort: false
-        }, _options.playerOptions));
-        this.popup = new GobiPopup({
-            player: this.player
-        });
-    }
-
-    append(container:HTMLElement) {
-        document.body.appendChild(this.popup.el);
-        container.appendChild(this.el);
-    }
-
-    remove() {
-        const container = this.el.parentElement;
-        if (container) {
-            document.body.removeChild(this.popup.el);
-            container.removeChild(this.el);
-            this.popup.close();
-        }
-    }
-
-    private _createStories(storiesOptions:StoryComingOptions[]):MobileStory[] {
-        const storiesBlock = this.el.querySelector('[data-stories]') as HTMLElement;
-        return storiesOptions.map((story) => {
-            return new MobileStory({
-                name: story.name,
-                container: storiesBlock,
-                avatarSrc: story.avatarSrc,
-                title: story.title,
-                description: story.description,
-                titleColor: story.titleColor,
-                descriptionColor: story.descriptionColor,
-                color: this._color,
-                onSelect: this._onStorySelect.bind(this)
+    load(options:MobileModuleOptions) {
+        getModule(options.moduleId).then((stories:ResponseModuleStory[]) => {
+            const responseStoryOptions = decorateResponseStories(stories);
+            const storiesOptions = mergeStoriesOptions(responseStoryOptions, options.stories);
+            new MobileLayout({
+                verticalOrientation: options.verticalOrientation,
+                title:  options.title,
+                color: options.color,
+                stories: storiesOptions,
+                playerOptions: options.playerOptions,
+                container: options.container
             });
         });
     }
-
-    private _onStorySelect(story:Story) {
-        this.currentStory = story as MobileStory;
-        this.popup.open();
-    }
-
-    private _createTemplate(isVertical:boolean = false):HTMLElement {
-        const container = document.createElement('div');
-        const classPrefix = 'gobi-popup-module';
-        container.classList.add(classPrefix);
-        container.innerHTML = MobileModule._HTML;
-        addPrefixToClassName(container.querySelectorAll('*'), classPrefix + '__');
-        const storiesContainerEl = container.lastElementChild as HTMLElement;
-        if (isVertical) {
-            storiesContainerEl.classList.add(classPrefix + '__stories--vertical');
-        }
-        else {
-            storiesContainerEl.classList.add(classPrefix + '__stories--horizontal');
-        }
-        return container;
-    }
-
-    private static get _HTML():string {
-        return `<div class="title" data-title></div>
-                <div class="stories" data-stories></div>`;
-    }
 }

src/Story/DesktopStory/desktop-story.types.ts

@@ -1,2 +0,2 @@
-import {StoryComingOptions} from "@/Story/story.types";
+import {StoryOptions} from "@/Story/story.types";
 
@@ -9,3 +9,3 @@ export interface DesktopStoryOptions {
 }
-export interface DesktopStoryComingOptions extends StoryComingOptions {
+export interface DesktopStoryComingOptions extends StoryOptions {
     selected?: boolean,
@@ -12,0 +12,0 @@ titleSize?: string,

src/Story/MobileStory/mobile-story.ts

 import {addPrefixToClassName} from "@/utils/utils";
 import Story from "@/Story/story";
-import {StoryComingOptions} from "@/Story/story.types";
+import {StoryOptions} from "@/Story/story.types";
 
@@ -43,3 +43,3 @@ export default class MobileStory extends Story {
 
-    constructor(options:StoryComingOptions) {
+    constructor(options:StoryOptions) {
         super(options);
@@ -46,0 +46,0 @@ this._elems = {

src/Story/story.ts

 import SimpleEventEmitter from "@/utils/event-emitter";
-import {StoryComingOptions, StoryOptions} from "@/Story/story.types";
+import {StoryOptions} from "@/Story/story.types";
 import {addListener} from "@/utils/utils";
@@ -7,13 +7,4 @@
     el:HTMLElement;
-    name:string;
+    id:string;
 
-    private static readonly _defaultStoryOptions = {
-        avatarSrc: '',
-        title: '',
-        description: '',
-        color: '',
-        selected: false,
-        titleColor: '',
-        descriptionColor: ''
-    };
     protected _listeners:Array<() => void> = [];
@@ -40,16 +31,15 @@
 
-    protected constructor(options:StoryComingOptions) {
-        const _options:StoryOptions = Object.assign({}, Story._defaultStoryOptions, options);
+    protected constructor(options:StoryOptions) {
         this.el = this._createTemplate();
-        this.name = _options.name;
-        this._title = _options.title;
-        this._description = _options.description;
-        this._avatarSrc = _options.avatarSrc;
-        this._color = _options.color;
+        this.id = options.id;
+        this._title = options.title || '';
+        this._description = options.description || '';
+        this._avatarSrc = options.avatarSrc || '';
+        this._color = options.color || '';
         this._addSelectEmitter();
-        if (typeof _options.onSelect === 'function') {
-            this._eventEmitter.on('select', _options.onSelect);
+        if (typeof options.onSelect === 'function') {
+            this._eventEmitter.on('select', options.onSelect);
         }
-        if (_options.container) {
-            _options.container.appendChild(this.el);
+        if (options.container) {
+            options.container.appendChild(this.el);
         }
@@ -56,0 +46,0 @@ }

src/Story/story.types.ts

 import Story from "./story";
 
 export interface StoryOptions {
-    name: string
-    container?: HTMLElement | null,
-    avatarSrc: string,
-    title: string,
-    description: string,
-    color: string,
-    titleColor: string,
-    descriptionColor: string
-    onSelect?: (story:Story) => void | any
-}
-export interface StoryComingOptions {
-    name: string
-    container?: HTMLElement | null,
+    id: string
+    container?: HTMLElement,
     avatarSrc?: string,
@@ -18,0 +7,0 @@ title?: string,

src/utils/utils.ts

 import Promise from "promise-polyfill";
 import {ModuleStoriesOptionsObj, ResponseModuleStory} from "@/Module/gobi-module.types";
-import {StoryComingOptions} from "@/Story/story.types";
+import {StoryOptions} from "@/Story/story.types";
 
@@ -40,17 +40,22 @@ export function forEach<T>(list:ArrayLike<T>, callback:(listItem?:T, index?:number, list?:ArrayLike<T>) => void) {
 
-export function mergeStoriesOptions(responseStories:StoryComingOptions[],
-    comingStories:ModuleStoriesOptionsObj):StoryComingOptions[] {
-  const mergedOptions: StoryComingOptions[] = [];
-  for (const key in responseStories) {
-    const responseStory = responseStories[key];
-    const comingOptions = comingStories[key];
-    mergedOptions.push(comingOptions ?
-        Object.assign(responseStory, comingOptions) :
-        responseStory);
+export function mergeStoriesOptions(responseStories:StoryOptions[],
+    comingStories?:ModuleStoriesOptionsObj):StoryOptions[] {
+  if (comingStories) {
+    const mergedOptions: StoryOptions[] = [];
+    for (const key in responseStories) {
+      const responseStory = responseStories[key];
+      const comingOptions = comingStories[key];
+      mergedOptions.push(comingOptions ?
+          Object.assign(responseStory, comingOptions) :
+          responseStory);
+    }
+    return mergedOptions;
   }
-  return mergedOptions;
+  else {
+    return responseStories;
+  }
 }
 
-export function decorateResponseStories(responseStories:ResponseModuleStory[]):Array<StoryComingOptions> {
-  return responseStories.map((responseStory): StoryComingOptions => {
+export function decorateResponseStories(responseStories:ResponseModuleStory[]):Array<StoryOptions> {
+  return responseStories.map((responseStory): StoryOptions => {
     return {
@@ -60,3 +65,3 @@ title: responseStory.title,
       description: responseStory.description,
-      name: responseStory.story_id
+      id: responseStory.story_id
     };
@@ -63,0 +68,0 @@ })

No alert changes

Improved metrics

Total package byte prevSize

124813

increased by0.51%

Number of lines in readme file

544

increased by9.46%

Worsened metrics

Lines of code

1306

decreased by-2.25%

No dependency changes