gluebert/dist/module/module.launcher.js

gluebert.js is a tiny helper orchestrating interactive html elements with on demand dynamic import Edit

'use strict';var _createClass=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();Object.defineProperty(exports,'__esModule',{value:!0});function _asyncToGenerator(a){return function(){var b=a.apply(this,arguments);return new Promise(function(a,c){function d(e,f){try{var g=b[e](f),h=g.value}catch(a){return void c(a)}return g.done?void a(h):Promise.resolve(h).then(function(a){d('next',a)},function(a){d('throw',a)})}return d('next')})}}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}var ModuleLauncher=function(){function a(){var b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],c=arguments[1],d=arguments[2];_classCallCheck(this,a),this._modules=b,this._dataObserver=c,this._elementBuilder=d,this._observeDomMutation=this._observeDomMutation.bind(this),this._observer=new MutationObserver(this._observeDomMutation),this._intersectionObserver=this.getIntersectionObserver(),this._instanceMap=new Map,this._signatureElements={},this._sleepersMap=new Map,this._stylesLoaded=new Set,this._batchStyles=[],this._batchStylesBusy=!1,this._lockedNodeSet=new Set,b.length&&this._init()}return _createClass(a,[{key:'_init',value:function _init(){this.registerObserver(document.body),this._bootstrap()}},{key:'getIntersectionObserver',value:function getIntersectionObserver(){return'function'==typeof IntersectionObserver?new IntersectionObserver(this._wokeUpElements.bind(this),{root:null,rootMargin:'0px',thresholds:[1]}):null}},{key:'registerObserver',value:function registerObserver(a,b){var c=Object.assign({attributes:!1,childList:!0,characterData:!1,subtree:!0},b);this._observer.observe(a,c)}},{key:'_eachModule',value:function _eachModule(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null;if('function'==typeof a)for(var b=0,c=this._modules.length;b<c;b++)a(this._modules[b])}},{key:'_destructInstance',value:function _destructInstance(a){var b=this,c=this._instanceMap.get(a),d=this.getSignaturesByElement(a);c&&('function'==typeof c.destruct&&c.destruct(),this._instanceMap.delete(a)),d.length&&(this.removeElementFromSignatureList(a),d.map(function(a){return b.cleanupSignatureStyles(a)}))}},{key:'getControllerFromSignature',value:function(){var a=_asyncToGenerator(regeneratorRuntime.mark(function a(b){return regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if('function'!=typeof b.importController){a.next=6;break}return a.next=3,b.importController();case 3:a.t0=a.sent,a.next=7;break;case 6:a.t0=null;case 7:return a.abrupt('return',a.t0);case 8:case'end':return a.stop();}},a,this)}));return function getControllerFromSignature(){return a.apply(this,arguments)}}()},{key:'bindControllerInstance',value:function bindControllerInstance(a,b,c){var d=this;window.requestAnimationFrame(function(){d._instanceMap.set(a,new b(a,d._dataObserver,d._elementBuilder,c))})}},{key:'_bindController',value:function(){var a=_asyncToGenerator(regeneratorRuntime.mark(function a(b,c){var d,e;return regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if(b&&c){a.next=2;break}return a.abrupt('return',null);case 2:return this.addElementToSignatureList(c,b),this._updateElementState(b,'sleeping','loading'),a.next=6,this.getControllerFromSignature(c);case 6:return d=a.sent,a.next=9,c.dependencyManager.resolve();case 9:e=a.sent,d&&!this._instanceMap.has(b)&&this.bindControllerInstance(b,d,e),this._stylesLoaded.has(c.name)||'function'!=typeof c.importStyles?this._updateElementState(b,'loading','ready'):this._addStyles(b,c.name,c.importStyles);case 12:case'end':return a.stop();}},a,this)}));return function _bindController(){return a.apply(this,arguments)}}()},{key:'addElementToSignatureList',value:function addElementToSignatureList(a,b){return'undefined'==typeof this._signatureElements[a.name]&&(this._signatureElements[a.name]=new Set),this._signatureElements[a.name].add(b),this}},{key:'removeElementFromSignatureList',value:function removeElementFromSignatureList(a){var b=this,c=this.getSignaturesByElement(a);return c.forEach(function(c){b._signatureElements[c].delete(a)}),this}},{key:'getSignaturesByElement',value:function getSignaturesByElement(a){var b=this,c=Object.keys(this._signatureElements);return c.filter(function(c){return b._signatureElements[c].has(a)})}},{key:'cleanupSignatureStyles',value:function cleanupSignatureStyles(a){var b=this._signatureElements[a];return b.size||this.removeStylesForSignature(a),this}},{key:'_wokeUpElements',value:function _wokeUpElements(a,b){var c=this;a.filter(function(a){return'boolean'==typeof a.isIntersecting?a.isIntersecting:0<a.intersectionRatio}).forEach(function(a){if(c._sleepersMap.has(a.target)){var d=c._sleepersMap.get(a.target);c._bindController(a.target,d),c._sleepersMap.delete(a.target)}b.unobserve(a.target)})}},{key:'_addAsSleeper',value:function _addAsSleeper(a,b){var c=this;return a.forEach(function(a){a instanceof Element&&(c._intersectionObserver&&b.isLazy?(c._updateElementState(a,null,'sleeping'),c._sleepersMap.set(a,b),c._intersectionObserver.observe(a)):c._bindController(a,b))}),this}},{key:'_launchMatchingElements',value:function(){var a=_asyncToGenerator(regeneratorRuntime.mark(function a(b){var c=this;return regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:this._lockedNodeSet.add(b),this._eachModule(function(){var a=_asyncToGenerator(regeneratorRuntime.mark(function a(d){var e,f,g;return regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:for(e=0,f=c._modules.length;e<f;e++)g='function'==typeof b.matches&&b.matches(d.selector),g&&c._addAsSleeper([b],d);case 1:case'end':return a.stop();}},a,c)}));return function(){return a.apply(this,arguments)}}());case 2:case'end':return a.stop();}},a,this)}));return function _launchMatchingElements(){return a.apply(this,arguments)}}()},{key:'_bootstrap',value:function(){var a=_asyncToGenerator(regeneratorRuntime.mark(function a(){var b=this;return regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:this._eachModule(function(){var a=_asyncToGenerator(regeneratorRuntime.mark(function a(c){var d;return regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:d=Array.from(document.querySelectorAll(c.selector)),d.length&&b._addAsSleeper(d,c);case 2:case'end':return a.stop();}},a,b)}));return function(){return a.apply(this,arguments)}}());case 1:case'end':return a.stop();}},a,this)}));return function _bootstrap(){return a.apply(this,arguments)}}()},{key:'_observeDomMutation',value:function _observeDomMutation(a){for(var b,c=this,d=0,e=a.length;d<e;d++)switch(b=a[d],b.type){case'childList':Array.from(new Set(b.addedNodes)).filter(function(a){return!c._lockedNodeSet.has(a)&&'function'==typeof a.querySelectorAll}).forEach(function(a){return c._launchMatchingElements(a)}),Array.from(new Set(b.removedNodes)).filter(function(a){return'function'==typeof a.querySelectorAll}).forEach(function(a){return c._destructInstance(a)});break;default:throw new Error('Unsupported Mutation Type '+b.type);}}},{key:'getStylesId',value:function getStylesId(a){return'gluebert-styles-'+a}},{key:'getStyleElement',value:function getStyleElement(a,b){var c=document.createElement('style');return c.type='text/css',c.id=this.getStylesId(a),c.styleSheet?c.styleSheet.cssText=b:c.appendChild(document.createTextNode(b)),c}},{key:'_addStyles',value:function(){var a=_asyncToGenerator(regeneratorRuntime.mark(function a(b,c,d){var e,f;return regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if(this._stylesLoaded.add(c),'function'==typeof d){a.next=3;break}return a.abrupt('return',this);case 3:return a.next=5,d();case 5:return e=a.sent,f=this.getStyleElement(c,e),this._batchStyles.push(f),this._batchStylesBusy||this._batchPaint(),this._updateElementState(b,'loading','ready',120),a.abrupt('return',this);case 11:case'end':return a.stop();}},a,this)}));return function _addStyles(){return a.apply(this,arguments)}}()},{key:'_batchPaint',value:function _batchPaint(){var a=this;this._batchStylesBusy=!0;var b=document.createDocumentFragment();window.setTimeout(function(){var c=a._batchStyles;a._batchStyles=[],a._batchStylesBusy=!1;for(var d=0,e=c.length;d<e;d++)b.appendChild(c[d]);window.requestAnimationFrame(function(){document.head.appendChild(b)})},100)}},{key:'updateElementStateClass',value:function updateElementStateClass(a,b,c,d,e,f){var g=this;return a&&'undefined'!=typeof a.classList&&(d||e)&&(f?window.setTimeout(function(){g._updateElementState(a,b,c)},f):window.requestAnimationFrame(function(){d&&a.classList.remove(d),e&&a.classList.add(e)})),this}},{key:'getStateClassByKey',value:function getStateClassByKey(a,b){return a&&'string'==typeof b[a.toUpperCase()]?b[a.toUpperCase()]:null}},{key:'_updateElementState',value:function _updateElementState(a,b,c){var d=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null,e=this._elementBuilder.getOptions(),f={SLEEPING:e.elementSleepingClass,LOADING:e.elementLoadingClass,READY:e.elementReadyClass},g=this.getStateClassByKey(b,f),h=this.getStateClassByKey(c,f);return this.updateElementStateClass(a,b,c,g,h,d)}},{key:'removeStylesForSignature',value:function removeStylesForSignature(a){var b=document.head.querySelector('#'+this.getStylesId(a));return b&&(document.head.removeChild(b),this._stylesLoaded.delete(a)),this}}]),a}();exports.ModuleLauncher=ModuleLauncher;