i18n-behavior
Version:
Instant and Modular I18N engine for lit-html and Polymer
570 lines (544 loc) • 23.4 kB
HTML
<!--
@license https://github.com/t2ym/i18n-behavior/blob/master/LICENSE.md
Copyright (c) 2016, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserved.
--><html lang="en" preferred=""><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<!-- <script src="../../../custom-elements/src/native-shim.js"></script> -->
<script src="../../../wct-browser-legacy/browser.js"></script>
<script type="module" src="./basic-test-imports.js"></script>
<style>
.test-container.running-test {
display: block;
}
.test-container:not(.running-test) {
display: none;
}
</style>
</head>
<body>
<h2 id="test-name"></h2><!-- <simple-text-id-element hidden></simple-text-id-element> -->
<test-fixture class="test-container" id="simple-text-element-default-fixture">
<template>
<simple-text-element></simple-text-element>
</template>
</test-fixture>
<test-fixture class="test-container" id="commented-simple-text-element-default-fixture">
<template>
<commented-simple-text-element></commented-simple-text-element>
</template>
</test-fixture>
<test-fixture class="test-container" id="simple-text-element-fixture">
<template is="dom-template" id="bound-simple-text-element-fixture">
<simple-text-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}">
</simple-text-element>
</template>
</test-fixture>
<test-fixture class="test-container" id="commented-simple-text-element-fixture">
<template is="dom-template" id="bound-commented-simple-text-element">
<commented-simple-text-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}">
</commented-simple-text-element>
</template>
</test-fixture>
<test-fixture class="test-container" id="simple-text-id-element-fixture">
<template is="dom-template" id="bound-simple-text-id-element">
<simple-text-id-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}">
</simple-text-id-element>
</template>
</test-fixture>
<test-fixture class="test-container" id="plural-gender-element-fixture">
<template is="dom-template">
<plural-gender-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}" sender="{{sender}}" recipients="{{recipients}}">
</plural-gender-element>
</template>
</test-fixture>
<test-fixture class="test-container" id="simple-attribute-element-fixture">
<template is="dom-template">
<simple-attribute-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}">
</simple-attribute-element>
</template>
</test-fixture>
<test-fixture class="test-container" id="fallback-text-element-fixture">
<template is="dom-template">
<fallback-text-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}">
</fallback-text-element>
</template>
</test-fixture>
<test-fixture class="test-container" id="compound-binding-element-fixture">
<template is="dom-template">
<compound-binding-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}" param1="{{param1}}" param2="{{param2}}">
</compound-binding-element>
</template>
</test-fixture>
<div class="test-container">
<i18n-dom-bind id="simple-text-dom-bind">
<template localizable-text="embedded">{{text.text}}<div><div></div></div><!-- nested empty div -->
<span id="whitespace"> </span>
<h1>{{text.h1_3}}</h1>{{text.text_4}}<span>{{text.span_5}}</span>
<span>{{text.span_6}}</span>
<span id="label-1">{{text.label-1}}</span>
<span id="label-2">{{text.label-2}}</span>
<div>
<span>{{text.div_9:span}}</span>
<span>{{text.div_9:span_1}}</span>
<div><div>{{text.div_9:div_2:div}}</div></div>
</div>
<div>{{text.div_10:text}}<span>{{text.div_10:span_1}}</span>{{text.div_10:text_2}}<span>{{text.div_10:span_3}}</span>
<div><div>{{text.div_10:div_4:div}}</div></div>{{text.div_10:text_5}}</div>
<div id="toplevel-div">
<span>{{text.toplevel-div:span}}</span>
<span>{{text.toplevel-div:span_1}}</span>
<div id="second-level-div">
<div id="third-level-div">{{text.third-level-div}}</div>
<div>{{text.second-level-div:div_1}}</div>
</div>
</div>
<div>
<ul>
<li>{{text.div_12:ul:li}}</li>
<li>{{text.div_12:ul:li_1}}</li>
<li>{{text.div_12:ul:li_2}}</li>
</ul>
<ul id="line-items">
<li>{{text.line-items:li}}</li>
<li>{{text.line-items:li_1}}</li>
<li>{{text.line-items:li_2}}</li>
</ul>
</div>
<p><i18n-format lang="{{effectiveLang}}"><span>{{text.p_13.0}}</span><b slot="1">{{text.p_13.1}}</b><code slot="2">{{text.p_13.2}}</code></i18n-format></p>
<p id="paragraph"><i18n-format lang="{{effectiveLang}}"><span>{{text.paragraph.0}}</span><b slot="1">{{text.paragraph.1}}</b><code slot="2">{{text.paragraph.2}}</code></i18n-format></p>{{text.text_15}}<template id="localizable-text">
<json-data>
{
"meta": {},
"model": {},
"text": " outermost text at the beginning ",
"h1_3": "outermost header 1",
"text_4": " outermost text in the middle ",
"span_5": "simple text without id",
"span_6": "simple text without id 2",
"label-1": "simple text with id",
"label-2": "simple text with id 2",
"div_9:span": "simple text within div",
"div_9:span_1": "simple text within div 2",
"div_9:div_2:div": "great grandchild text within div",
"div_10:text": " simple text as the first element in div ",
"div_10:span_1": "simple text within div",
"div_10:text_2": " simple text in the middle of div ",
"div_10:span_3": "simple text within div 2",
"div_10:div_4:div": "great grandchild text within div",
"div_10:text_5": " simple text at the last element in div ",
"toplevel-div:span": "simple text within div",
"toplevel-div:span_1": "simple text within div 2",
"third-level-div": "great grandchild text within div",
"second-level-div:div_1": "great grandchild text within div without id",
"div_12:ul:li": "line item without id 1",
"div_12:ul:li_1": "line item without id 2",
"div_12:ul:li_2": "line item without id 3",
"line-items:li": "line item with id 1",
"line-items:li_1": "line item with id 2",
"line-items:li_2": "line item with id 3",
"p_13": [
"A paragraph with {1} is converted to {2}.",
"parameters",
"<i18n-format>"
],
"paragraph": [
"A paragraph with {1} is converted to {2}.",
"id",
"<i18n-format>"
],
"text_15": " outermost text at the end "
}
</json-data>
</template>
</template>
</i18n-dom-bind>
</div>
<div class="test-container">
<i18n-dom-bind id="simple-attribute-dom-bind">
<template localizable-text="embedded">
<style attr="This is not extracted">
google-chart {
width: 300px;
}
</style>
<div id="outer-div">
<div id="ordinary-div" attr="This is not targeted for extraction">{{text.ordinary-div}}</div>
<input id="standard-input" placeholder="{{model.standard-input.placeholder}}">
<input placeholder="{{model.outer-div:input_2.placeholder}}">
<paper-input id="paper-input-element" label="{{model.paper-input-element.label}}" error-message="{{model.paper-input-element.error-message}}" placeholder="{{model.paper-input-element.placeholder}}" value="this is not a target">
</paper-input>
<paper-input label="{{model.outer-div:paper-input_4.label}}" error-message="{{model.outer-div:paper-input_4.error-message}}" placeholder="{{model.outer-div:paper-input_4.placeholder}}" value="this is not a target">
</paper-input>
<google-chart type="pie" id="pie-chart" options="{{model.pie-chart.options}}" cols="{{model.pie-chart.cols}}" rows="{{model.pie-chart.rows}}">
</google-chart>
<google-chart id="column-chart" type="column" options="{{model.column-chart.options}}" data="{{model.column-chart.data}}">
</google-chart>
<text-attribute-element id="custom-attr" custom-text-attr1="{{model.custom-attr.custom-text-attr1}}" custom-text-attr2="{{model.custom-attr.custom-text-attr2}}" custom-text-attr3="{{model.custom-attr.custom-text-attr3}}" out-of-scope-attr="out of scope attr">
</text-attribute-element>
<text-attribute-element id="selective-attr" boolean-attr="" empty-attr="" string-attr="abc" custom-text-attr4$="{{i18nFormat(model.selective-attr.custom-text-attr4.0,text.ordinary-div,text.ordinary-div,text.ordinary-div,text.ordinary-div)}}" custom-text-attr5$="[[text.ordinary-div]]{{model.selective-attr.custom-text-attr5.1}}{{or('',text.ordinary-div)}}{{model.selective-attr.custom-text-attr5.3}}[[text.ordinary-div]]" i18n-target="{{i18nFormat(model.selective-attr.i18n-target.0,text.ordinary-div,text.ordinary-div)}}" i18n-target2="{{model.selective-attr.i18n-target2.0}}{{or('',text.ordinary-div)}}{{model.selective-attr.i18n-target2.2}}[[text.ordinary-div]]">
</text-attribute-element>
<text-attribute-element id="selective-attr2" boolean-attr="" boolean-attr2="" string-attr="aaa" i18n-target="{{model.selective-attr2.i18n-target}}">
</text-attribute-element>
<text-attribute-element id="selective-attr3" i18n-target6="{{model.selective-attr3.i18n-target6}}">
</text-attribute-element>
<text-attribute-element id="selective-attr4" boolean-attr="" i18n-target6="{{model.selective-attr4.i18n-target6}}" i18n-target7="unmatching i18n-target4 attribute">
</text-attribute-element>
<text-attribute-element id="selective-attr5" string-attr="xxx" i18n-target7="unmatching i18n-target7 attribute">
</text-attribute-element>
<span id="test-json-data-1">{{model.json-data-id.attr1}}</span>
<span id="test-json-data-2">{{model.json-data-id.i18n-target-attr}}</span>
<span id="test-json-data-3">{{model.template_2:json-data_1.attr1}}</span>
<span id="test-json-data-4">{{model.template_2:json-data_1.i18n-target-attr}}</span>
</div>
<template>
<json-data id="json-data-id" attr1="{{model.json-data-id.attr1}}" i18n-target-attr="{{model.json-data-id.i18n-target-attr}}"></json-data>
<json-data attr1="{{model.template_2:json-data_1.attr1}}" i18n-target-attr="{{model.template_2:json-data_1.i18n-target-attr}}"></json-data>
</template>
<template id="localizable-text">
<json-data>
{
"meta": {},
"model": {
"standard-input": {
"placeholder": "standard HTML5 attribute"
},
"outer-div:input_2": {
"placeholder": "standard HTML5 attribute without id"
},
"paper-input-element": {
"label": "paper-input label",
"error-message": "paper-input error message",
"placeholder": "paper-input placeholder"
},
"outer-div:paper-input_4": {
"label": "paper-input label without id",
"error-message": "paper-input error message without id",
"placeholder": "paper-input placeholder without id"
},
"pie-chart": {
"options": {
"title": "Distribution of days in 2001H1"
},
"cols": [
{
"label": "Month",
"type": "string"
},
{
"label": "Days",
"type": "number"
}
],
"rows": [
[
"Jan",
31
],
[
"Feb",
28
],
[
"Mar",
31
],
[
"Apr",
30
],
[
"May",
31
],
[
"Jun",
30
]
]
},
"column-chart": {
"options": {
"title": "Inventory"
},
"data": [
[
"Year",
"Things",
"Stuff"
],
[
"2004",
1000,
400
],
[
"2005",
1170,
460
],
[
"2006",
660,
1120
],
[
"2007",
1030,
540
]
]
},
"custom-attr": {
"custom-text-attr1": "custom text attribute 1",
"custom-text-attr2": "custom text attribute 2",
"custom-text-attr3": "custom text attribute 3"
},
"selective-attr": {
"custom-text-attr4": [
"{1} custom-text-attr4 attribute with param {2} and param {3} {4}",
"{{text.ordinary-div}}",
"{{text.ordinary-div}}",
"[[text.ordinary-div]]",
"{{text.ordinary-div}}"
],
"custom-text-attr5": [
"[[text.ordinary-div]]",
" custom-text-attr5 attribute with param ",
"{{or('',text.ordinary-div)}}",
" and param ",
"[[text.ordinary-div]]"
],
"i18n-target": [
"i18n-target attribute with param {1} and param {2}",
"{{text.ordinary-div}}",
"[[text.ordinary-div]]"
],
"i18n-target2": [
"i18n-target2 attribute with param ",
"{{or('',text.ordinary-div)}}",
" and param ",
"[[text.ordinary-div]]"
]
},
"selective-attr2": {
"i18n-target": "i18n-target attribute 2"
},
"selective-attr3": {
"i18n-target6": "i18n-target6 attribute 2"
},
"selective-attr4": {
"i18n-target6": "i18n-target6 attribute 3"
},
"json-data-id": {
"attr1": "this attr1 is extracted",
"i18n-target-attr": "this attribute is also extracted"
},
"template_2:json-data_1": {
"attr1": "this attr1 without id is extracted",
"i18n-target-attr": "this attribute without id is also extracted"
}
},
"ordinary-div": "text 1"
}
</json-data>
</template>
</template>
</i18n-dom-bind>
</div>
<div class="test-container">
<i18n-dom-bind id="compound-binding-dom-bind">
<template localizable-text="embedded"><i18n-format lang="{{effectiveLang}}"><span>{{text.text.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format><div><div></div></div><!-- nested empty div -->
<span id="whitespace"> </span>
<h1><i18n-format lang="{{effectiveLang}}"><span>{{text.h1_3.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></h1><i18n-format lang="{{effectiveLang}}"><span>{{text.text_4.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format><span><i18n-format lang="{{effectiveLang}}"><span>{{text.span_5.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span>
<span><i18n-format lang="{{effectiveLang}}"><span>{{text.span_6.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span>
<span id="label-1"><i18n-format lang="{{effectiveLang}}"><span>{{text.label-1.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span>
<span id="label-2"><i18n-format lang="{{effectiveLang}}"><span>{{text.label-2.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span>
<div>
<span><i18n-format lang="{{effectiveLang}}"><span>{{text.div_9:span.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span>
<span><i18n-format lang="{{effectiveLang}}"><span>{{text.div_9:span_1.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span>
<div><div><i18n-format lang="{{effectiveLang}}"><span>{{text.div_9:div_2:div.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></div></div>
</div>
<div><i18n-format lang="{{effectiveLang}}"><span>{{text.div_10:text.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format><span><i18n-format lang="{{effectiveLang}}"><span>{{text.div_10:span_1.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span><i18n-format lang="{{effectiveLang}}"><span>{{text.div_10:text_2.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format><span><i18n-format lang="{{effectiveLang}}"><span>{{text.div_10:span_3.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span>
<div><div><i18n-format lang="{{effectiveLang}}"><span>{{text.div_10:div_4:div.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></div></div><i18n-format lang="{{effectiveLang}}"><span>{{text.div_10:text_5.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></div>
<div id="toplevel-div">
<span><i18n-format lang="{{effectiveLang}}"><span>{{text.toplevel-div:span.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span>
<span><i18n-format lang="{{effectiveLang}}"><span>{{text.toplevel-div:span_1.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></span>
<div id="second-level-div">
<div id="third-level-div"><i18n-format lang="{{effectiveLang}}"><span>{{text.third-level-div.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></div>
<div><i18n-format lang="{{effectiveLang}}"><span>{{text.second-level-div:div_1.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></div>
</div>
</div>
<div>
<ul>
<li><i18n-format lang="{{effectiveLang}}"><span>{{text.div_12:ul:li.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></li>
<li><i18n-format lang="{{effectiveLang}}"><span>{{text.div_12:ul:li_1.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></li>
<li><i18n-format lang="{{effectiveLang}}"><span>{{text.div_12:ul:li_2.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></li>
</ul>
<ul id="line-items">
<li><i18n-format lang="{{effectiveLang}}"><span>{{text.line-items:li.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></li>
<li><i18n-format lang="{{effectiveLang}}"><span>{{text.line-items:li_1.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></li>
<li><i18n-format lang="{{effectiveLang}}"><span>{{text.line-items:li_2.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></li>
</ul>
</div>
<p><i18n-format lang="{{effectiveLang}}"><span>{{text.p_13.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format></p>
<p id="paragraph"><i18n-format lang="{{effectiveLang}}"><span>{{text.paragraph.0}}</span><b slot="1">{{text.paragraph.1}}</b><span slot="2">{{param1}}</span><span slot="3">{{param2}}</span><code slot="4">{{text.paragraph.4}}</code></i18n-format></p><i18n-format lang="{{effectiveLang}}"><span>{{text.text_15.0}}</span><span slot="1">{{param1}}</span><span slot="2">{{param2}}</span></i18n-format><template id="localizable-text">
<json-data>
{
"meta": {},
"model": {},
"text": [
" outermost text at the beginning with compound {1} and {2} variables ",
"{{param1}}",
"{{param2}}"
],
"h1_3": [
"outermost header 1 with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"text_4": [
" outermost text in the middle with {1} and {2} variables ",
"{{param1}}",
"{{param2}}"
],
"span_5": [
"simple text without id with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"span_6": [
"simple text without id 2 with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"label-1": [
"simple text with id and {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"label-2": [
"simple text with id and {1} and {2} variables 2",
"{{param1}}",
"{{param2}}"
],
"div_9:span": [
"simple text within div with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"div_9:span_1": [
"simple text within div with {1} and {2} variables 2",
"{{param1}}",
"{{param2}}"
],
"div_9:div_2:div": [
"great grandchild text within div with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"div_10:text": [
" simple text as the first element in div with {1} and {2} variables ",
"{{param1}}",
"{{param2}}"
],
"div_10:span_1": [
"simple text within div with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"div_10:text_2": [
" simple text in the middle of div with {1} and {2} variables ",
"{{param1}}",
"{{param2}}"
],
"div_10:span_3": [
"simple text within div with {1} and {2} variables 2",
"{{param1}}",
"{{param2}}"
],
"div_10:div_4:div": [
"great grandchild text within div with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"div_10:text_5": [
" simple text at the last element in div with {1} and {2} variables ",
"{{param1}}",
"{{param2}}"
],
"toplevel-div:span": [
"simple text within div with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"toplevel-div:span_1": [
"simple text within div 2 with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"third-level-div": [
"great grandchild text within div with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"second-level-div:div_1": [
"great grandchild text within div without id with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"div_12:ul:li": [
"line item without id 1 with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"div_12:ul:li_1": [
"line item without id 2 with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"div_12:ul:li_2": [
"line item without id 3 with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"line-items:li": [
"line item with id 1 with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"line-items:li_1": [
"line item with id 2 with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"line-items:li_2": [
"line item with id 3 with {1} and {2} variables",
"{{param1}}",
"{{param2}}"
],
"p_13": [
"A paragraph with {1} is converted to {2}.",
"{{param1}}",
"{{param2}}"
],
"paragraph": [
"A paragraph with {1}, {2}, and {3} is converted to {4}.",
"id",
"{{param1}}",
"{{param2}}",
"<i18n-format>"
],
"text_15": [
" outermost text at the end with {1} and {2} variables ",
"{{param1}}",
"{{param2}}"
]
}
</json-data>
</template>
</template>
</i18n-dom-bind>
</div>
</body></html>