[ Index ] |
PHP Cross Reference of Joomla 4.2.2 documentation |
[Summary view] [Print] [Text view]
1 (customElements => { 2 'strict'; 3 /** 4 * Creates a custom element with the default spinner of the Joomla logo 5 */ 6 7 class JoomlaCoreLoader extends HTMLElement { 8 constructor() { 9 super(); 10 const template = document.createElement('template'); 11 template.innerHTML = `<style>:host{align-items:center;display:flex;height:100%;left:0;opacity:.8;overflow:hidden;position:fixed;top:0;width:100%;z-index:10000}.box{height:345px;margin:0 auto;position:relative;width:345px}.box p{color:#999;float:right;font:normal 1.25em/1em sans-serif;margin:95px 0 0}.box>span{-webkit-animation:jspinner 2s ease-in-out infinite;animation:jspinner 2s ease-in-out infinite}.box .red{-webkit-animation-delay:-1.5s;animation-delay:-1.5s}.box .blue{-webkit-animation-delay:-1s;animation-delay:-1s}.box .green{-webkit-animation-delay:-.5s;animation-delay:-.5s}.yellow{background:#f9a541;border-radius:90px;height:90px;width:90px}.yellow,.yellow:after,.yellow:before{content:"";left:0;position:absolute;top:0}.yellow:after,.yellow:before{background:transparent;border:50px solid #f9a541;box-sizing:content-box;width:50px}.yellow:before{border-radius:75px 75px 0 0;border-width:50px 50px 0;height:35px;margin:60px 0 0 -30px}.yellow:after{border-width:0 0 0 50px;height:105px;margin:140px 0 0 -30px}.red{background:#f44321;border-radius:90px;height:90px;width:90px}.red,.red:after,.red:before{content:"";left:0;position:absolute;top:0}.red:after,.red:before{background:transparent;border:50px solid #f44321;box-sizing:content-box;width:50px}.red:before{border-radius:75px 75px 0 0;border-width:50px 50px 0;height:35px;margin:60px 0 0 -30px}.red:after{border-width:0 0 0 50px;height:105px;margin:140px 0 0 -30px}.blue{background:#5091cd;border-radius:90px;height:90px;width:90px}.blue,.blue:after,.blue:before{content:"";left:0;position:absolute;top:0}.blue:after,.blue:before{background:transparent;border:50px solid #5091cd;box-sizing:content-box;width:50px}.blue:before{border-radius:75px 75px 0 0;border-width:50px 50px 0;height:35px;margin:60px 0 0 -30px}.blue:after{border-width:0 0 0 50px;height:105px;margin:140px 0 0 -30px}.green{background:#7ac143;border-radius:90px;height:90px;width:90px}.green,.green:after,.green:before{content:"";left:0;position:absolute;top:0}.green:after,.green:before{background:transparent;border:50px solid #7ac143;box-sizing:content-box;width:50px}.green:before{border-radius:75px 75px 0 0;border-width:50px 50px 0;height:35px;margin:60px 0 0 -30px}.green:after{border-width:0 0 0 50px;height:105px;margin:140px 0 0 -30px}.yellow{margin:0 0 0 255px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.red{margin:255px 0 0 255px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.blue{margin:255px 0 0;-webkit-transform:rotate(225deg);transform:rotate(225deg)}.green{-webkit-transform:rotate(315deg);transform:rotate(315deg)}@-webkit-keyframes jspinner{0%,40%,to{opacity:.3}20%{opacity:1}}@keyframes jspinner{0%,40%,to{opacity:.3}20%{opacity:1}}@media (prefers-reduced-motion:reduce){.box>span{-webkit-animation:none;animation:none}}</style> 12 <div> 13 <span class="yellow"></span> 14 <span class="red"></span> 15 <span class="blue"></span> 16 <span class="green"></span> 17 <p>™</p> 18 </div>`; // Patch the shadow DOM 19 20 if (window.ShadyCSS) { 21 window.ShadyCSS.prepareTemplate(template, 'joomla-core-loader'); 22 } 23 24 this.attachShadow({ 25 mode: 'open' 26 }); 27 this.shadowRoot.appendChild(template.content.cloneNode(true)); // Patch the shadow DOM 28 29 if (window.ShadyCSS) { 30 window.ShadyCSS.styleElement(this); 31 } 32 } 33 34 connectedCallback() { 35 this.style.backgroundColor = this.color; 36 this.style.opacity = 0.8; 37 this.shadowRoot.querySelector('div').classList.add('box'); 38 } 39 40 static get observedAttributes() { 41 return ['color']; 42 } 43 44 get color() { 45 return this.getAttribute('color') || '#fff'; 46 } 47 48 set color(value) { 49 this.setAttribute('color', value); 50 } 51 52 attributeChangedCallback(attr, oldValue, newValue) { 53 switch (attr) { 54 case 'color': 55 if (newValue && newValue !== oldValue) { 56 this.style.backgroundColor = this.color; 57 } 58 59 break; 60 61 } 62 } 63 64 } 65 66 if (!customElements.get('joomla-core-loader')) { 67 customElements.define('joomla-core-loader', JoomlaCoreLoader); 68 } 69 })(customElements);
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Wed Sep 7 05:41:13 2022 | Chilli.vc Blog - For Webmaster,Blog-Writer,System Admin and Domainer |