51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
/*
|
|
<style lang="eo,en,fr">
|
|
[_lang_] { display: none; }
|
|
:root[lang=_lang_] [_lang_] { display: inherit; }
|
|
|
|
:root[lang=_lang_] [_lang_\:title]:hover::after { display: inherit }
|
|
|
|
/* [_lang_\:title]:after {
|
|
display: none;
|
|
position: absolute;
|
|
background: grey;
|
|
border: 1px solid black;
|
|
color: white;
|
|
padding: .1em .3em;
|
|
margin-left: -5%;
|
|
}
|
|
:root[lang=_lang_] [_lang_\:title]:after { content: attr(_lang_\:title) } * /
|
|
</style>
|
|
*/
|
|
|
|
// lang support
|
|
Object.defineProperty( window, 'lang', {
|
|
get: ()=> $`:root`.getAttribute('lang')
|
|
, set: v=> $`:root`.setAttribute( 'lang', v )
|
|
})
|
|
|
|
new MutationObserver( changes=>
|
|
changes.map( ch=> ch.attributeName == 'lang' && $`:root`.dispatchEvent(new Event('lang')) )
|
|
)
|
|
.observe( $`:root`, { attributes: true } )
|
|
|
|
const lgAttReg = new RegExp( '^('+$`style[lang]`.attributes.lang.value.split(',').join('|')+'):')
|
|
$`:root`.on`lang`( e=>
|
|
$`*`.map( node=> [...node.attributes]
|
|
.filter( att=> lgAttReg.test(att.name) )
|
|
)
|
|
.filter( arr=> arr.length )
|
|
.map( atts=> atts.filter(att=>new RegExp('^'+lang+':').test(att.name))
|
|
.map(att=> att.ownerElement.setAttribute(att.name.split(':').pop(),att.value) ))
|
|
)
|
|
// compile lang styles
|
|
Q`style[lang]`.map( style=>
|
|
style.innerHTML = [...style.sheet.cssRules]
|
|
.map( r=> style.attributes.lang.value.split(',')
|
|
.map( lg=> r.cssText.replace(/_lang_/g, lg) )
|
|
.join('\n')
|
|
)
|
|
.join('\n')
|
|
)
|
|
lang = navigator.language.split(/[-_]/)[0]
|