Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/svg-switch.html

Last active July 2, 2022 17:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/42b1cb716678aace064ca2f12e5f9131 to your computer and use it in GitHub Desktop.
Save nfreear/42b1cb716678aace064ca2f12e5f9131 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg-switch.html
<!doctype html><html lang="en"> <title> SVG switch test </title>
<style>
:root {
--my-size: 2rem;
}
body {
font: 1rem/1.5 sans-serif;
}
p {
font-size: var(--my-size, 1rem);
}
#svg-switch {
display: inline-block;
font-size: 1rem;
height: var(--my-size, 1rem);
outline: 2px solid orange;
position: relative;
top: .48rem; /* Was: .48rem */
X-max-height: 2rem;
X-max-width: 6rem;
}
.X#svg-switch text {
x: 0;
y: 0;
height: 100%;
width: 100%;
}
my-i18n-switch > * {
outline: 2px solid pink;
display: none;
}
my-i18n-switch > [ show ],
.X_my-i18n-switch [ lang ^= zh ] {
display: inline;
}
</style>
<h1> SVG switch test </h1>
<p> Hello world!
<svg viewBox="0 -11 55 15" id="svg-switch">
<!-- viewBox="0 -20 100 50" -->
<title> SVG - switch </title>
<switch>
<text systemLanguage="ar">مرحبا</text>
<text systemLanguage="de,nl">Hallo!</text>
<text systemLanguage="en-us">Howdy!</text>
<text systemLanguage="en-gb">Wotcha!</text>
<text systemLanguage="en-au">G'day!</text>
<text systemLanguage="en">Hello!</text>
<text systemLanguage="es">Hola!</text>
<text systemLanguage="fr">Bonjour!</text>
<text systemLanguage="ja">こんにちは</text>
<text systemLanguage="ru">Привет!</text>
<text>☺</text>
</switch>
</svg>
Joe. </p>
<hr>
<h2> HTML &lt;my-18n-switch> test </h2>
<p>
Hello world!
<my-i18n-switch pattern="zh-">
<text lang="en-us">Howdy!</text>
<text lang="en-gb">Wotcha!</text>
<text lang="en-au">G'day!</text>
<text lang="en">Hello!</text>
<text lang="es">Hola!</text>
<text lang="fr">Bonjour!</text>
<text lang="zh-cn">你好</text>
<text default >☺</text>
</my-i18n-switch>
Joe.
</p>
<script type="module">
const { customElements } = window;
class MyI18nSwitchElement extends HTMLElement {
connectedCallback () {
const LANG_RE = new RegExp(this.getAttribute('pattern') || 'en'); // '^zh-';
// const SWITCH = this.querySelector('slot'); // document.querySelector('my-i18n-switch');
const TEXTS = [...this.children];
const ELEM = TEXTS.find(text => LANG_RE.test(text.lang)) || TEXTS.pop();
ELEM.setAttribute('show', '');
// ELEM.setAttribute('show', true);
console.debug('my-i18n-switch:', ELEM, ELEM.lang, TEXTS);
}
}
customElements.define('my-i18n-switch', MyI18nSwitchElement);
</script>
<pre>
NDF, 30-Jun-2022.
* https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch
</pre>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment