{"version":3,"sources":["../src/scripts/customElements/clock.js"],"names":["clock","_HTMLElement","_this","_classCallCheck","this","_super","call","shadow","attachShadow","mode","timezone","undefined","dataset","titre","options","hour","minute","timeZone","_inherits","_createSuper","_createClass","key","value","minutes","shadowRoot","getElementById","hours","arr","Intl","DateTimeFormat","format","Date","split","innerHTML","self","render","pushTime","setInterval","document","addEventListener","hidden","concat","_wrapNativeSuper","HTMLElement","customElements","define"],"mappings":"mwJACA,IAIMA,OAAK,SAAAC,GACT,QAAAD,KAAc,GAAAE,EAYX,OAZWC,iBAAAC,KAAAJ,GAEbE,EAAAG,EAAAC,KAAAF,MACAF,EAAKK,OAASL,EAAKM,cAAeC,KAAM,SAExCP,EAAKQ,SAAqCC,SAA1BT,EAAKU,QAAQF,SAAyB,eAAiBR,EAAKU,QAAQF,SACpFR,EAAKW,MAA+BF,SAAvBT,EAAKU,QAAQC,MAAsB,gBAAkBX,EAAKU,QAAQC,MAE/EX,EAAKY,SACJC,KAAM,UACNC,OAAQ,UACRC,SAAUf,EAAKQ,UACdR,EAbMgB,UAAAlB,EAAAC,EAAA,IAAAI,GAAAc,aAAAnB,EAgGR,OAjFAoB,cAAApB,IAAAqB,IAAA,WAAAC,MACD,WACC,GAAIC,GAAUnB,KAAKoB,WAAWC,eAAe,WAC7CC,EAAQtB,KAAKoB,WAAWC,eAAe,SACnCE,EAAM,GAAIC,MAAKC,eAAe,QAASzB,KAAKU,SAASgB,OAAO,GAAIC,OAAQC,MAAM,IAClFN,GAAMO,UAAYN,EAAI,GACtBJ,EAAQU,UAAWN,EAAI,MACvBN,IAAA,oBAAAC,MACD,WACC,GAAIY,GAAO9B,IACXA,MAAK+B,SAGL/B,KAAKgC,WAGLC,YAAY,WACXH,EAAKE,YACH,KAEHE,SAASC,iBAAiB,cAAe,WACxCL,EAAKM,QAAUN,EAAKM,YAErBnB,IAAA,SAAAC,MAED,WAEClB,KAAKoB,WAAWS,UAAS,2sCAAAQ,OAiDArC,KAAKS,MAAK,mJAKnCb,GAAA0C,iBAhGiBC,aAkGpBC,gBAAeC,OAAO,oBAAqB7C","file":"static/scripts/customElements/clock.js.map","sourcesContent":["\r\n/**\r\n * Le block <clock-destination> appelé pour afficher l'heure courante à un fuseau horaire donné\r\n * DOC : https://developer.mozilla.org/fr/docs/Web/API/Web_components/Using_custom_elements\r\n */\r\nclass clock extends HTMLElement {\r\n\t\tconstructor() {\r\n\r\n\t\t\tsuper();\r\n\t\t\tthis.shadow = this.attachShadow({ mode: \"open\" });\r\n\r\n\t\t\tthis.timezone = this.dataset.timezone === undefined ? \"Europe/Paris\" : this.dataset.timezone;\r\n\t\t\tthis.titre = this.dataset.titre === undefined ? \"Heure à Paris\" : this.dataset.titre;\r\n\r\n\t\t\tthis.options = {\r\n\t\t\t\thour: \"numeric\",\r\n\t\t\t\tminute: \"numeric\",\r\n\t\t\t\ttimeZone: this.timezone,\r\n\t\t\t};\r\n\r\n\t\t}\r\n\t\tpushTime() {\r\n\t\t\tlet minutes = this.shadowRoot.getElementById('minutes'),\r\n\t\t\thours = this.shadowRoot.getElementById('hours');\r\n\t\t\tlet arr = new Intl.DateTimeFormat('fr-fr', this.options).format(new Date()).split(':');\r\n\t\t\thours.innerHTML = arr[0];\r\n\t\t\tminutes.innerHTML= arr[1];\r\n\t\t}\r\n\t\tconnectedCallback() {\r\n\t\t\tlet self = this;\r\n\t\t\tthis.render();\r\n\r\n\t\t\t// On init\r\n\t\t\tthis.pushTime();\r\n\r\n\t\t\t// Maj toutes les minutes\r\n\t\t\tsetInterval(function() {\r\n\t\t\t\tself.pushTime();\r\n\t\t\t}, 60000);\r\n\r\n\t\t\tdocument.addEventListener('show:widget', () => {\r\n\t\t\t\tself.hidden = !self.hidden\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\trender() {\r\n\r\n\t\t\tthis.shadowRoot.innerHTML = `\r\n\t\t\t\t<style>.bloc--widget {\r\n\t\t\t\tpadding-top:30px;\r\n\t\t\t\tpadding-bottom:30px;\r\n\t\t\t\t}\r\n        .bloc__titre {\r\n\t\t\t\t\tcolor:  var(--app-color-primary);\r\n\t\t\t\t\tfont-size: var(--app-fontSize-base);\r\n\t\t\t\t\tfont-weight: 700;\r\n\t\t\t\t\tline-height: 1;\r\n\t\t\t\t}\r\n\t\t\t\t.widget--time {\r\n\t\t\t\t\tmax-width: 255px;\r\n\t\t\t\t\tbackground: #efefef;\r\n\t\t\t\t\tborder-radius: 12px;\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\tfont-size: 34px;\r\n\t\t\t\t\tfont-weight: 300;\r\n\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\tline-height: 42px;\r\n\t\t\t\t\tpadding-bottom: 10px;\r\n\t\t\t\t\tpadding-top: 5px;\r\n\t\t\t\t}\r\n\t\t\t\t#hours:after {\r\n\t\t\t\t\tanimation-duration: 2s;\r\n\t\t\t\t\tanimation-name: flash;\r\n\t\t\t\t\tcontent: attr(data-separator);\r\n\t\t\t\t\tpadding-left:  10px;\r\n\t\t\t\t\tpadding-right: 10px;\r\n\t\t\t\t\tanimation-fill-mode: both;\r\n\t\t\t\t\tanimation-iteration-count: infinite;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t@keyframes flash {\r\n\t\t\t\t\tfrom,\r\n\t\t\t\t\t50%,\r\n\t\t\t\t\tto {\r\n\t\t\t\t\t\topacity: 1;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t25%,\r\n\t\t\t\t\t75% {\r\n\t\t\t\t\t\topacity: 0;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t</style>\r\n\r\n\r\n\t\t\t\t<div class=\"bloc bloc--widget\" id=\"widgetTime\">\r\n\t\t<h3 class=\"bloc__titre\">${this.titre}</h3>\r\n\t\t<div class=\"widget--time widget\">\r\n\t\t\t\t<div id=\"hours\" data-separator=\":\"></div><div id=\"minutes\"></div>\r\n\t\t</div>\r\n</div>`;\r\n\t\t}\r\n}\r\ncustomElements.define(\"clock-destination\", clock);\r\n"]}