i18n-element
Version:
I18N Base Element for lit-html and Polymer
316 lines (291 loc) • 13.2 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>
outermost text at the beginning
<div><div></div></div><!-- nested empty div -->
<span id="whitespace"> </span>
<h1>outermost header 1</h1>
outermost text in the middle
<span>simple text without id</span>
<span>simple text without id 2</span>
<span id="label-1">simple text with id</span>
<span id="label-2">simple text with id 2</span>
<div>
<span>simple text within div</span>
<span>simple text within div 2</span>
<div><div>great grandchild text within div</div></div>
</div>
<div>
simple text as the first element in div
<span>simple text within div</span>
simple text in the middle of div
<span>simple text within div 2</span>
<div><div>great grandchild text within div</div></div>
simple text at the last element in div
</div>
<div id="toplevel-div">
<span>simple text within div</span>
<span>simple text within div 2</span>
<div id="second-level-div">
<div id="third-level-div">great grandchild text within div</div>
<div>great grandchild text within div without id</div>
</div>
</div>
<div>
<ul>
<li>line item without id 1</li>
<li>line item without id 2</li>
<li>line item without id 3</li>
</ul>
<ul id="line-items">
<li>line item with id 1</li>
<li>line item with id 2</li>
<li>line item with id 3</li>
</ul>
</div>
<p>A paragraph with <b>parameters</b> is converted to <code><i18n-format></code>.</p>
<p id="paragraph">A paragraph with <b>id</b> is converted to <code><i18n-format></code>.</p>
outermost text at the end
</template>
</i18n-dom-bind>
</div>
<div class="test-container">
<i18n-dom-bind id="simple-attribute-dom-bind">
<template>
<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 1</div>
<input id="standard-input" placeholder="standard HTML5 attribute">
<input placeholder="standard HTML5 attribute without id">
<paper-input
id="paper-input-element"
label="paper-input label"
error-message="paper-input error message"
placeholder="paper-input placeholder"
value="this is not a target">
</paper-input>
<paper-input
label="paper-input label without id"
error-message="paper-input error message without id"
placeholder="paper-input placeholder without id"
value="this is not a target">
</paper-input>
<google-chart
type="pie"
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] ]'>
</google-chart>
<google-chart
id="column-chart"
type="column"
options='{"title": "Inventory"}'
data='[ ["Year", "Things", "Stuff"],
["2004", 1000, 400],
["2005", 1170, 460],
["2006", 660, 1120],
["2007", 1030, 540] ]'>
</google-chart>
<text-attribute-element
id="custom-attr"
custom-text-attr1="custom text attribute 1"
custom-text-attr2="custom text attribute 2"
custom-text-attr3="custom text attribute 3"
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="{{text.ordinary-div}} custom-text-attr4 attribute with param {{text.ordinary-div}} and param [[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 {{text.ordinary-div}} and param [[text.ordinary-div]]"
i18n-target2="i18n-target2 attribute with param {{or('',text.ordinary-div)}} and param [[text.ordinary-div]]">
</text-attribute-element>
<text-attribute-element
id="selective-attr2"
boolean-attr boolean-attr2 string-attr="aaa"
i18n-target="i18n-target attribute 2">
</text-attribute-element>
<text-attribute-element
id="selective-attr3"
i18n-target6="i18n-target6 attribute 2">
</text-attribute-element>
<text-attribute-element
id="selective-attr4"
boolean-attr
i18n-target6="i18n-target6 attribute 3"
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="this attr1 is extracted"
i18n-target-attr="this attribute is also extracted"></json-data>
<json-data
attr1="this attr1 without id is extracted"
i18n-target-attr="this attribute without id is also extracted"></json-data>
</template>
</template>
</i18n-dom-bind>
</div>
<div class="test-container">
<i18n-dom-bind id="compound-binding-dom-bind">
<template>
outermost text at the beginning with compound {{param1}} and {{param2}} variables
<div><div></div></div><!-- nested empty div -->
<span id="whitespace"> </span>
<h1>outermost header 1 with {{param1}} and {{param2}} variables</h1>
outermost text in the middle with {{param1}} and {{param2}} variables
<span>simple text without id with {{param1}} and {{param2}} variables</span>
<span>simple text without id 2 with {{param1}} and {{param2}} variables</span>
<span id="label-1">simple text with id and {{param1}} and {{param2}} variables</span>
<span id="label-2">simple text with id and {{param1}} and {{param2}} variables 2</span>
<div>
<span>simple text within div with {{param1}} and {{param2}} variables</span>
<span>simple text within div with {{param1}} and {{param2}} variables 2</span>
<div><div>great grandchild text within div with {{param1}} and {{param2}} variables</div></div>
</div>
<div>
simple text as the first element in div with {{param1}} and {{param2}} variables
<span>simple text within div with {{param1}} and {{param2}} variables</span>
simple text in the middle of div with {{param1}} and {{param2}} variables
<span>simple text within div with {{param1}} and {{param2}} variables 2</span>
<div><div>great grandchild text within div with {{param1}} and {{param2}} variables</div></div>
simple text at the last element in div with {{param1}} and {{param2}} variables
</div>
<div id="toplevel-div">
<span>simple text within div with {{param1}} and {{param2}} variables</span>
<span>simple text within div 2 with {{param1}} and {{param2}} variables</span>
<div id="second-level-div">
<div id="third-level-div">great grandchild text within div with {{param1}} and {{param2}} variables</div>
<div>great grandchild text within div without id with {{param1}} and {{param2}} variables</div>
</div>
</div>
<div>
<ul>
<li>line item without id 1 with {{param1}} and {{param2}} variables</li>
<li>line item without id 2 with {{param1}} and {{param2}} variables</li>
<li>line item without id 3 with {{param1}} and {{param2}} variables</li>
</ul>
<ul id="line-items">
<li>line item with id 1 with {{param1}} and {{param2}} variables</li>
<li>line item with id 2 with {{param1}} and {{param2}} variables</li>
<li>line item with id 3 with {{param1}} and {{param2}} variables</li>
</ul>
</div>
<p>A paragraph with {{param1}} is converted to {{param2}}.</p>
<p id="paragraph">A paragraph with <b>id</b>, {{param1}}, and {{param2}} is converted to <code><i18n-format></code>.</p>
outermost text at the end with {{param1}} and {{param2}} variables
</template>
</i18n-dom-bind>
</div>
</body>
</html>