b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
123 lines
No EOL
4.8 KiB
JavaScript
123 lines
No EOL
4.8 KiB
JavaScript
;;(function(window){'use strict';var proto=Object.create(HTMLElement.prototype);proto.createdCallback=function(){var buttons=document.createDocumentFragment();[].forEach.call(this.querySelectorAll('button'),(button)=>{buttons.appendChild(button);});var shadowRoot=this.createShadowRoot();shadowRoot.innerHTML=`<style>
|
|
#heading:empty,
|
|
#message:empty,
|
|
#menu:empty {
|
|
display: none;
|
|
}
|
|
#container {
|
|
background-color: #2d2d2d;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
overflow: hidden;
|
|
-moz-user-select: none;
|
|
}
|
|
#content {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
flex: 1 0 auto;
|
|
padding: 1rem 1.5rem;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
vertical-align: middle;
|
|
word-wrap: break-word;
|
|
}
|
|
#heading {
|
|
color: #fff;
|
|
font-size: 1.6rem;
|
|
line-height: 1.6rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#message {
|
|
border-top: 0.1rem solid #686868;
|
|
color: #fafafa;
|
|
font-size: 2.2rem;
|
|
font-weight: 300;
|
|
line-height: 3rem;
|
|
margin: 1rem 0 0;
|
|
padding: 1rem 0 0;
|
|
}
|
|
#heading:empty + #message {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
#menu {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
flex: 0 0 auto;
|
|
margin: 0;
|
|
padding: 1.5rem;
|
|
width: 100%;
|
|
}
|
|
#menu > button {
|
|
background: #d8d8d8;
|
|
border: none;
|
|
border-radius: 2rem;
|
|
color: #333;
|
|
outline: none;
|
|
font-family: sans-serif;
|
|
font-size: 1.6rem;
|
|
font-style: italic;
|
|
line-height: 4rem;
|
|
box-sizing: border-box;
|
|
flex: 1 1 auto;
|
|
padding: 0 0.2rem;
|
|
height: 4rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
transition: background 200ms 280ms, color 200ms 280ms;
|
|
}
|
|
#menu > button:active {
|
|
background: #00aacc;
|
|
color: #fff;
|
|
transition: none;
|
|
}
|
|
#menu > button.primary {
|
|
background: #00caf2;
|
|
color: #fff;
|
|
}
|
|
#menu > button.danger {
|
|
background: #e51e1e;
|
|
color: #fff;
|
|
}
|
|
#menu > button.primary:active {
|
|
background: #006579;
|
|
color: #c8c8c8;
|
|
}
|
|
#menu > button.danger:active {
|
|
background: #730f0f;
|
|
color: #c8c8c8;
|
|
}
|
|
#menu > button[disabled] {
|
|
background: #565656;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
pointer-events: none;
|
|
}
|
|
#menu > button.primary[disabled] {
|
|
background: #006579;
|
|
}
|
|
#menu > button.danger[disabled] {
|
|
background: #730f0f;
|
|
}
|
|
#menu > button + button {
|
|
margin-left: 1rem;
|
|
}
|
|
</style>
|
|
<form id="container" role="dialog">
|
|
<section id="content">
|
|
<h1 id="heading"></h1>
|
|
<p id="message"></p>
|
|
</section>
|
|
<menu id="menu"></menu>
|
|
</form>`;var $id=shadowRoot.getElementById.bind(shadowRoot);this.els={container:$id('container'),content:$id('content'),heading:$id('heading'),message:$id('message'),menu:$id('menu')};this.els.menu.appendChild(buttons);this.els.menu.addEventListener('click',(evt)=>{var button=evt.target.closest('button[data-action]');if(button){this.dispatchEvent(new CustomEvent('action',{detail:button.dataset.action}));}});this.els.heading.textContent=this.getAttribute('heading');this.els.message.textContent=this.getAttribute('message');this.els.heading.dataset.l10nId=this.getAttribute('heading-l10n-id');this.els.message.dataset.l10nId=this.getAttribute('message-l10n-id');this.onDOMRetranslated=()=>{document.l10n.translateFragment(shadowRoot);};};proto.attachedCallback=function(){document.addEventListener('DOMRetranslated',this.onDOMRetranslated);this.onDOMRetranslated();};proto.detachedCallback=function(){document.removeEventListener('DOMRetranslated',this.onDOMRetranslated);};proto.attributeChangedCallback=function(attr,oldVal,newVal){switch(attr){case'heading':this.els.heading.textContent=newVal;break;case'message':this.els.message.textContent=newVal;break;case'heading-l10n-id':this.els.heading.dataset.l10nId=newVal;this.onDOMRetranslated();break;case'message-l10n-id':this.els.message.dataset.l10nId=newVal;this.onDOMRetranslated();break;}};proto.addActionButton=function(title,action,className=''){var button=document.createElement('button');button.type='button';button.textContent=title;button.dataset.action=action;button.className=className;this.els.menu.appendChild(button);};proto.removeActionButton=function(action){var buttons=this.els.menu.querySelectorAll(`[data-action="${action}"]`);[].forEach.call(buttons,button=>this.els.menu.removeChild(button));};['heading','message'].forEach((prop)=>{Object.defineProperty(proto,prop,{get:function(){return this.getAttribute(prop);},set:function(value){this.setAttribute(prop,value||'');}});});try{window.MusicOverlay=document.registerElement('music-overlay',{prototype:proto});}catch(e){if(e.name!=='NotSupportedError'){throw e;}}})(window); |