{"version":3,"sources":["components/preloader.js"],"names":["dmx","Component","attributes","preview","type","Boolean","default","color","String","bgcolor","size","Number","spinner","methods","show","this","_toggle","hide","init","node","_checkLoaded","debounce","bind","_hidden","_documentLoaded","_imagesLoaded","_dataLoaded","_spinners","rotatingPlane","doubleBounce","wave","wanderingCubes","pulse","chasingDots","threeBounce","circle","cubeGrid","fadingCircle","foldingCube","document","addEventListener","destroy","removeEventListener","render","props","_show","style","setProperty","classList","add","innerHTML","Array","from","length","map","join","performUpdate","updatedProps","has","$node","_hide","removeProperty","body","_checkDocumentLoaded","_checkImagesLoaded","_checkDataLoaded","requestAnimationFrame","readyState","getElementsByTagName","every","img","complete","isListening","image","Image","src","_dataComponents","component","noload","data","_xhr","components","app","children","forEach","_getDataComponents","push"],"mappings":"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","file":"dmxPreloader.js","sourcesContent":["dmx.Component('preloader', {\r\n\r\n attributes: {\r\n preview: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n\r\n color: {\r\n type: String,\r\n default: '#333',\r\n },\r\n\r\n bgcolor: {\r\n type: String,\r\n default: '#fff',\r\n },\r\n\r\n size: {\r\n type: Number,\r\n default: 60,\r\n },\r\n\r\n spinner: {\r\n type: String,\r\n default: '',\r\n },\r\n },\r\n\r\n methods: {\r\n show () {\r\n this._toggle(true);\r\n },\r\n\r\n hide () {\r\n this._toggle(false);\r\n },\r\n },\r\n\r\n init (node) {\r\n this._checkLoaded = dmx.debounce(this._checkLoaded.bind(this), 100);\r\n this._toggle = dmx.debounce(this._toggle.bind(this));\r\n\r\n this._hidden = false;\r\n this._documentLoaded = false;\r\n this._imagesLoaded = false;\r\n this._dataLoaded = false;\r\n this._spinners = {\r\n rotatingPlane: 0,\r\n doubleBounce: 2,\r\n wave: 5,\r\n wanderingCubes: 2,\r\n pulse: 0,\r\n chasingDots: 2,\r\n threeBounce: 3,\r\n circle: 12,\r\n cubeGrid: 9,\r\n fadingCircle: 12,\r\n foldingCube: 4\r\n };\r\n\r\n document.addEventListener('readystatechange', this._checkLoaded);\r\n\r\n this._checkLoaded();\r\n },\r\n\r\n destroy () {\r\n document.removeEventListener('readystatechange', this._checkLoaded);\r\n },\r\n\r\n render (node) {\r\n const { color, bgcolor, size, spinner } = this.props;\r\n\r\n this._show();\r\n\r\n node.style.setProperty('--color', color);\r\n node.style.setProperty('--bgcolor', bgcolor);\r\n node.style.setProperty('--size', size + 'px');\r\n node.classList.add('dmxPreloader');\r\n\r\n if (spinner) {\r\n node.innerHTML = `\r\n \r\n `;\r\n }\r\n },\r\n\r\n performUpdate (updatedProps) {\r\n if (updatedProps.has('color')) {\r\n this.$node.style.setProperty('--color', this.props.color);\r\n }\r\n\r\n if (updatedProps.has('bgcolor')) {\r\n this.$node.style.setProperty('--bgcolor', this.props.bgcolor);\r\n }\r\n\r\n if (updatedProps.has('size')) {\r\n this.$node.style.setProperty('--size', this.props.size + 'px');\r\n }\r\n },\r\n\r\n _toggle (show) {\r\n if (show) {\r\n this._show();\r\n } else {\r\n this._hide();\r\n }\r\n },\r\n\r\n _show () {\r\n this._hidden = false;\r\n this.$node.style.removeProperty('opacity');\r\n this.$node.style.removeProperty('z-index');\r\n document.body.style.setProperty('overflow', 'hidden');\r\n },\r\n\r\n _hide () {\r\n this._hidden = true;\r\n this.$node.style.setProperty('opacity', 0);\r\n this.$node.style.setProperty('z-index', -1);\r\n document.body.style.removeProperty('overflow');\r\n },\r\n\r\n _checkLoaded () {\r\n // When preview do nothing\r\n if (this.props.preview) return;\r\n\r\n this._checkDocumentLoaded();\r\n this._checkImagesLoaded();\r\n this._checkDataLoaded();\r\n\r\n if (this._documentLoaded && this._imagesLoaded && this._dataLoaded) {\r\n this._toggle(false);\r\n } else if (!this._hidden) {\r\n requestAnimationFrame(() => {\r\n this._checkLoaded();\r\n });\r\n }\r\n },\r\n\r\n _checkDocumentLoaded () {\r\n this._documentLoaded = (document.readyState === 'complete');\r\n },\r\n\r\n _checkImagesLoaded () {\r\n this._imagesLoaded = Array.from(document.getElementsByTagName('img')).every(img => {\r\n if (img.complete) return true;\r\n\r\n if (!img.isListening) {\r\n const image = new Image();\r\n image.addEventListener('load', () => this._checkLoaded());\r\n image.addEventListener('error', () => this._checkLoaded());\r\n image.src = img.src;\r\n img.isListening = true;\r\n }\r\n\r\n return false;\r\n });\r\n },\r\n\r\n _checkDataLoaded () {\r\n this._dataLoaded = this._dataComponents().every(component => {\r\n return component.props.noload || component.data.data != null || (component._xhr && component._xhr.readyState === 4);\r\n });\r\n },\r\n\r\n _dataComponents () {\r\n const components = [];\r\n\r\n dmx.app.children.forEach(function _getDataComponents(component) {\r\n if (component instanceof dmx.Component('fetch')) {\r\n components.push(component);\r\n }\r\n\r\n component.children.forEach(_getDataComponents);\r\n });\r\n\r\n return components;\r\n }\r\n\r\n});\r\n"]}