i18n-element
Version:
I18N Base Element for lit-html and Polymer
187 lines (174 loc) • 5.76 kB
HTML
<!-- temporary HTML --><html><head><link rel="import" href="../../../i18n-element.html"><!-- start of innerHTML --></head><body><i18n-attr-repo>
<template id="custom">
<div i18n-target-attr="$"></div>
<div i18n-target-attr2="$"></div>
</template>
</i18n-attr-repo><!-- end of innerHTML --><dom-module id="lit-clock"><template localizable-text="embedded">
<style>
:host {
display: block;
}
.square {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.clock-face {
stroke: #333;
fill: white;
}
.minor {
stroke: #999;
stroke-width: 0.5;
}
.major {
stroke: #333;
stroke-width: 1;
}
.hour {
stroke: #333;
}
.minute {
stroke: #666;
}
.second, .second-counterweight {
stroke: rgb(180,0,0);
}
.second-counterweight {
stroke-width: 3;
}
</style>
<div id="target" @click="{{parts.0}}" .property="{{parts.1}}" attr="{{parts.2}}" ?enabled-boolean-attr="{{parts.3}}" ?disabled-boolean-attr="{{parts.4}}" i18n-target-attr$="{{model.target.i18n-target-attr}}" i18n-target-attr2$="{{i18nFormat(model.target.i18n-target-attr2.0,parts.5,parts.6)}}"><i18n-format lang="{{effectiveLang}}"><span>{{text.target.0}}</span><span slot="1">{{parts.7}}</span><span slot="2">{{parts.8}}</span></i18n-format></div>
<div>{{parts.9}}</div>
<div class="square"> <!-- so the SVG keeps its aspect ratio -->
<svg viewBox="0 0 100 100">
<!-- first create a group and move it to 50,50 so
all co-ords are relative to the center -->
<g transform="translate(50,50)">
<circle class="clock-face" r="48"></circle>
<g>{{parts.10}}</g><!-- g tag to avoid i18n-format conversion -->
<g>{{parts.11}}</g><!-- g tag to avoid i18n-format conversion -->
<!-- hour hand -->
<line class="hour" y1="2" y2="-20" transform="rotate({{parts.12}})"></line>
<!-- minute hand -->
<line class="minute" y1="4" y2="-30" transform="rotate({{parts.13}})"></line>
<!-- second hand -->
<g transform="rotate({{parts.14}})">
<line class="second" y1="10" y2="-38"></line>
<line class="second-counterweight" y1="10" y2="2"></line>
</g>
</g>
</svg>
</div>
<template id="localizable-text">
<json-data>
{
"meta": {},
"model": {
"target": {
"i18n-target-attr": "I18N target attribute value",
"i18n-target-attr2": [
"I18N target with {1} and {2}",
"{{parts.5}}",
"{{parts.6}}"
]
}
},
"target": [
"Time: {1}:{2}",
"{{parts.7}}",
"{{parts.8}}"
]
}
</json-data>
</template>
</template></dom-module><!-- end of dom-module id="lit-clock" -->
<dom-module id="world-clock"><template localizable-text="embedded">
<style>
:host {
display: block;
width: 100%;
max-width: 350px;
padding: 2px;
}
</style>
<div><i18n-format lang="{{effectiveLang}}"><span>{{text.div_1.0}}</span><span slot="1">{{parts.0}}</span><button @click="{{parts.1}}" slot="2">{{text.div_1.2}}</button><button @click="{{parts.2}}" slot="3">{{text.div_1.3}}</button></i18n-format></div>
{{parts.3}}
<template id="localizable-text">
<json-data>
{
"meta": {},
"model": {},
"div_1": [
" Timezone: GMT{1}\n {2}\n {3} ",
"{{parts.0}}",
"-1h",
"+1h"
]
}
</json-data>
</template>
</template></dom-module><!-- end of dom-module id="world-clock" -->
<dom-module id="world-clock-container"><template localizable-text="embedded">
<style>
:host {
display: block;
width: 100%;
}
world-clock {
display: flow;
max-width: 300px;
}
</style>
<div>{{text.div_1}}</div>
<button @click="{{parts.0}}">{{parts.1}}</button>
<button @click="{{parts.2}}">{{parts.3}}</button>
<shadow-repeat .repeater="{{parts.4}}">
<!-- stock views in Light DOM and show selected views in shadow DOM via slot names -->
{{parts.5}}
</shadow-repeat>
<i18n-format id="compound-format-text" class="text" lang="{{effectiveLang}}">
<!-- <json-data> is to be preprocessed as .data property -->
<json-data>{{serialize(text.compound-format-text.0)}}</json-data>
<i18n-number offset="1" slot="1" lang="{{effectiveLang}}">{{parts.6}}</i18n-number>
<span slot="2">{{parts.7}}</span>
</i18n-format>
<template>
<json-data id="hide_labels">{{text.hide_labels}}</json-data>
<json-data id="disconnect_labels">{{text.disconnect_labels}}</json-data>
</template>
<template id="localizable-text">
<json-data>
{
"meta": {},
"model": {},
"div_1": "World Clocks",
"compound-format-text": [
{
"0": "No timezones",
"1": "Only 1 timezone for {2} is shown.",
"one": "{1} timezone other than {2} is shown.",
"other": "{1} timezones other than {2} are shown."
},
"{{parts.6 - 1}}",
"{{parts.7}}"
],
"hide_labels": [
"Hide",
"Show"
],
"disconnect_labels": [
"Disconnect",
"Redraw"
]
}
</json-data>
</template>
</template></dom-module><!-- end of dom-module id="world-clock-container" -->
</body></html>