i18n-behavior
Version:
Instant and Modular I18N engine for lit-html and Polymer
138 lines (132 loc) • 4.78 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"><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="./preference-test-imports.js"></script>
<script type="module">
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
let t = document.createElement('template');
t.innerHTML = `
<i18n-attr-repo id="orphaned-i18n-attr-repo" processed>
<template id="custom">
<text-attribute-element custom-text-attrXX=""></text-attribute-element>
</template>
</i18n-attr-repo>
`;
document.body.appendChild(t.content);
document.body.querySelector('#orphaned-i18n-attr-repo').removeAttribute('processed');
try {
let brokenDomModule1 = document.querySelector('#broken-dom-module1');
BehaviorsStore._I18nBehavior._constructDefaultBundle(brokenDomModule1.querySelector('template'), brokenDomModule1.id);
}
catch (e) {
console.log(e);
}
try {
let brokenDomModule2 = document.querySelector('#broken-dom-module2');
BehaviorsStore._I18nBehavior._constructDefaultBundle(brokenDomModule2.querySelector('template'), brokenDomModule2.id);
}
catch (e) {
console.log(e);
}
Polymer({
importMeta: import.meta,
is: 'utility-directives',
behaviors: [ BehaviorsStore.I18nBehavior, BehaviorsStore.I18nControllerBehavior ],
_template: html`
<span>{{tr('',1)}}</span><span>{{tr("key1")}}</span><span>{{tr('')}}</span>
<template>
<span id="key1">keyA</span>
</template>
`,
});
</script>
<style>
.test-container.running-test {
display: block;
}
.test-container:not(.running-test) {
display: none;
}
</style>
<i18n-attr-repo>
<template id="custom">
<text-attribute-element custom-text-attrX=""></text-attribute-element>
</template>
</i18n-attr-repo>
<dom-module id="dummy-component" legacy>
<template>
<span>dummy component</span>
<span>format <span>abc</span> <template><!-- comment -->text in template</template> text</span>
<span>format2 <span>abc2</span> <span></span> <span> </span> <template><!-- comment --></template> <template> </template> <template>{{text}}</template> text2</span>
<span aria-label="{ invalid: json }"></span>
<i18n-format>
<json-data>{{serialize(text.dummy)}}</json-data>
<span>dummy</span>
</i18n-format>
<i18n-format>
<json-data>{{text.dummy}}</json-data>
<span>dummy</span>
</i18n-format>
<i18n-format>
<json-data>[[serialize(text.dummy)]]</json-data>
<span>dummy</span>
</i18n-format>
<i18n-format>
<json-data>[[text.dummy]]</json-data>
<span>dummy</span>
</i18n-format>
<i18n-format>
<span>format {1}</span>
<span>param</span>
</i18n-format>
<i18n-format>
<span>number param {1}</span>
<i18n-number>1</i18n-number>
</i18n-format>
<i18n-number>1</i18n-number>
</template>
</dom-module>
<dom-module id="broken-dom-module1">
<template localizable-text="embedded">
<span id="oldLang"></span>
<template id="broken-localizable-text">
<json-data>
{
"meta": {},
"model": {}
}
</json-data>
</template>
</template>
</dom-module>
<dom-module id="broken-dom-module2">
<template localizable-text="embedded">
<span id="oldLang"></span>
<template id="localizable-text">
<broken-json-data>
{
"meta": {},
"model": {}
}
</broken-json-data>
</template>
</template>
</dom-module>
</head>
<body>
<h2 id="test-name"></h2>
<test-fixture class="test-container" id="preference-element-fixture">
<template>
<preference-element></preference-element>
</template>
</test-fixture>
<utility-directives></utility-directives>
<i18n-preference persist=""></i18n-preference>
</body></html>