i18n-element

<html><head></head><body><encoded-original>CiAgICA8c3R5bGU+CiAgICBoMiB7CiAgICAgIGZvbnQtc2l6ZTogMTRweDsKICAgIH0KICAgIC50ZXh0IHsKICAgICAgZm9udC1zaXplOiAxMnB4OwogICAgfQogICAgLmNvZGUgewogICAgICBmb250LXNpemU6IDEycHg7CiAgICAgIGZvbnQtZmFtaWx5OiAnUm9ib3RvIE1vbm8nLCAnQ29uc29sYXMnLCAnTWVubG8nLCBtb25vc3BhY2U7CiAgICB9CiAgICA8L3N0eWxlPgoKICAgIDxoMj5TaW1wbGUgU3RyaW5nPC9oMj4KICAgIDxzcGFuIGlkPSJzaW1wbGUiIGNsYXNzPSJ0ZXh0Ij5VSSBUZXh0IFN0cmluZzwvc3Bhbj4KCiAgICA8aDI+U2ltcGxlIEF0dHJpYnV0ZTwvaDI+CiAgICA8aW5wdXQgaWQ9InNpbXBsZS1pbnB1dCIgcGxhY2Vob2xkZXI9IlBsYWNlaG9sZGVyIFN0cmluZyI+CgogICAgPGgyPkF1dG9tYXRpYyBGb3JtYXQ8L2gyPgogICAgPHAgaWQ9ImV4YW1wbGUtc2VudGVuY2UiIGNsYXNzPSJ0ZXh0Ij5UaGlzIDxpPmV4YW1wbGUgc2VudGVuY2U8L2k+IHdpdGggPGI+c29tZSBwYXJhbWV0ZXJzIG9yIGVtYmVkZGVkIHRhZ3M8L2I+IGlzIGF1dG9tYXRpY2FsbHkgY29udmVydGVkIHRvIDxhIGNsYXNzPSJjb2RlIiBocmVmPSJodHRwczovL2dpdGh1Yi5jb20vdDJ5bS9pMThuLWZvcm1hdCI+Jmx0O2kxOG4tZm9ybWF0Jmd0OzwvYT4gdG8gdHJhbnNsYXRlIGl0IGFzIGEgd2hvbGUgd2l0aCBhbnkgcGFyYW1ldGVyIG9yZGVyLjwvcD4KCiAgICA8aDI+Q29tcG91bmQgRm9ybWF0IHdpdGggJmx0O2kxOG4tZm9ybWF0Jmd0OzwvaDI+CiAgICA8cD4KICAgICAgPGkxOG4tZm9ybWF0IGlkPSJjb21wb3VuZC1mb3JtYXQtdGV4dCIgY2xhc3M9InRleHQiPgogICAgICAgIDxqc29uLWRhdGE+ewogICAgICAgICAgIjAiOiAiWW91ICh7M30pIGdhdmUgbm8gZ2lmdHMuIiwKICAgICAgICAgICIxIjogewogICAgICAgICAgICAibWFsZSI6ICJZb3UgKHszfSkgZ2F2ZSBoaW0gKHs0fSkgezV9LiIsCiAgICAgICAgICAgICJmZW1hbGUiOiAiWW91ICh7M30pIGdhdmUgaGVyICh7NH0pIHs1fS4iLAogICAgICAgICAgICAib3RoZXIiOiAiWW91ICh7M30pIGdhdmUgdGhlbSAoezR9KSB7NX0uIgogICAgICAgICAgfSwKICAgICAgICAgICJvbmUiOiB7CiAgICAgICAgICAgICJtYWxlIjogIllvdSAoezN9KSBnYXZlIGhpbSAoezR9KSBhbmQgb25lIG90aGVyIHBlcnNvbiB7NX0uIiwKICAgICAgICAgICAgImZlbWFsZSI6ICJZb3UgKHszfSkgZ2F2ZSBoZXIgKHs0fSkgYW5kIG9uZSBvdGhlciBwZXJzb24gezV9LiIsCiAgICAgICAgICAgICJvdGhlciI6ICJZb3UgKHszfSkgZ2F2ZSB0aGVtICh7NH0pIGFuZCBvbmUgb3RoZXIgcGVyc29uIHs1fS4iCiAgICAgICAgICB9LAogICAgICAgICAgIm90aGVyIjogIllvdSAoezN9KSBnYXZlIHRoZW0gKHs0fSkgYW5kIHsxfSBvdGhlciBwZW9wbGUgZ2lmdHMuIgogICAgICAgIH08L2pzb24tZGF0YT4KICAgICAgICA8aTE4bi1udW1iZXIgb2Zmc2V0PSIxIj57e3JlY2lwaWVudHMubGVuZ3RofX08L2kxOG4tbnVtYmVyPgogICAgICAgIDxzcGFuPnt7cmVjaXBpZW50cy4wLmdlbmRlcn19PC9zcGFuPgogICAgICAgIDxzcGFuPnt7bW9kZWwuZGF0YS5zZW5kZXIubmFtZX19PC9zcGFuPgogICAgICAgIDxzcGFuPnt7cmVjaXBpZW50cy4wLm5hbWV9fTwvc3Bhbj4KICAgICAgICA8c3Bhbj5hIGdpZnQ8L3NwYW4+CiAgICAgIDwvaTE4bi1mb3JtYXQ+CiAgICA8L3A+CgogICAgPGgyPlBhcmFtZXRlcnM8L2gyPgogICAgPHByZSBjbGFzcz0iY29kZSI+bGFuZyA9IHt7ZWZmZWN0aXZlTGFuZ319ICh7e2xhbmdOYW1lfX0pPC9wcmU+CiAgICA8cHJlIGNsYXNzPSJjb2RlIj5zZW5kZXIgPSB7e3N0cmluZ2lmaWVkVXNlcn19PC9wcmU+CiAgICA8cHJlIGNsYXNzPSJjb2RlIj5yZWNpcGllbnRzID0ge3tzdHJpbmdpZmllZFJlY2lwaWVudHN9fTwvcHJlPgoKICAgIDx0ZW1wbGF0ZT4KICAgICAgPCEtLSBtYW51YWxseSBkZWZpbmUgbW9kZWwgZGF0YSAtLT4KICAgICAgPGpzb24tZGF0YSBpZD0iZGF0YSIgc2VuZGVyPSJ7ICZxdW90O25hbWUmcXVvdDs6ICZxdW90O0pvZSZxdW90OywgJnF1b3Q7Z2VuZGVyJnF1b3Q7OiAmcXVvdDttYWxlJnF1b3Q7IH0iIHJlY2lwaWVudHM9IlsKICAgICAgICAgIHsgJnF1b3Q7bmFtZSZxdW90OzogJnF1b3Q7QWxpY2UmcXVvdDssICZxdW90O2dlbmRlciZxdW90OzogJnF1b3Q7ZmVtYWxlJnF1b3Q7IH0sCiAgICAgICAgICB7ICZxdW90O25hbWUmcXVvdDs6ICZxdW90O0JvYiZxdW90OywgJnF1b3Q7Z2VuZGVyJnF1b3Q7OiAmcXVvdDttYWxlJnF1b3Q7IH0sCiAgICAgICAgICB7ICZxdW90O25hbWUmcXVvdDs6ICZxdW90O1lvZGEmcXVvdDssICZxdW90O2dlbmRlciZxdW90OzogJnF1b3Q7b3RoZXImcXVvdDsgfQogICAgICAgIF0iPjwvanNvbi1kYXRhPgogICAgICA8IS0tIGRlZmluZSBVSSBkYXRhIC0tPgogICAgICA8anNvbi1kYXRhIGlkPSJsYW5nTmFtZXMiPnsKICAgICAgICAiZW4iOiAiRW5nbGlzaCIsCiAgICAgICAgImphIjogIkphcGFuZXNlIiwKICAgICAgICAiZnIiOiAiRnJlbmNoIgogICAgICB9PC9qc29uLWRhdGE+CiAgICA8L3RlbXBsYXRlPgo=</encoded-original><link rel="import" href="../../../i18n-element.html"><dom-module id="i18n-behavior-demo"><template localizable-text="embedded"> <style> h2 { font-size: 14px; } .text { font-size: 12px; } .code { font-size: 12px; font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; } </style> <h2>{{text.h2_1}}</h2> <span id="simple" class="text">{{text.simple}}</span> <h2>{{text.h2_3}}</h2> <input id="simple-input" placeholder="{{model.simple-input.placeholder}}"> <h2>{{text.h2_5}}</h2> <p id="example-sentence" class="text"><i18n-format lang="{{effectiveLang}}"><span>{{text.example-sentence.0}}</span><i slot="1">{{text.example-sentence.1}}</i><b slot="2">{{text.example-sentence.2}}</b><a class="code" href="https://github.com/t2ym/i18n-format" slot="3">{{text.example-sentence.3}}</a></i18n-format></p> <h2>{{text.h2_7}}</h2> <p> <i18n-format id="compound-format-text" class="text" lang="{{effectiveLang}}"> <json-data>{{serialize(text.compound-format-text.0)}}</json-data> <i18n-number offset="1" slot="1" lang="{{effectiveLang}}">{{recipients.length}}</i18n-number> <span slot="2">{{recipients.0.gender}}</span> <span slot="3">{{model.data.sender.name}}</span> <span slot="4">{{recipients.0.name}}</span> <span slot="5">{{text.compound-format-text.5}}</span> </i18n-format> </p> <h2>{{text.h2_9}}</h2> <pre class="code"><i18n-format lang="{{effectiveLang}}"><span>{{text.pre_10.0}}</span><span slot="1">{{effectiveLang}}</span><span slot="2">{{langName}}</span></i18n-format></pre> <pre class="code"><i18n-format lang="{{effectiveLang}}"><span>{{text.pre_11.0}}</span><span slot="1">{{stringifiedUser}}</span></i18n-format></pre> <pre class="code"><i18n-format lang="{{effectiveLang}}"><span>{{text.pre_12.0}}</span><span slot="1">{{stringifiedRecipients}}</span></i18n-format></pre> <template>  <json-data id="data" sender="{{model.data.sender}}" recipients="{{model.data.recipients}}"></json-data>  <json-data id="langNames">{{text.langNames}}</json-data> </template> <template id="localizable-text"> <json-data> { "meta": {}, "model": { "simple-input": { "placeholder": "Placeholder String" }, "data": { "sender": { "name": "Joe", "gender": "male" }, "recipients": [ { "name": "Alice", "gender": "female" }, { "name": "Bob", "gender": "male" }, { "name": "Yoda", "gender": "other" } ] } }, "h2_1": "Simple String", "simple": "UI Text String", "h2_3": "Simple Attribute", "h2_5": "Automatic Format", "example-sentence": [ "This {1} with {2} is automatically converted to {3} to translate it as a whole with any parameter order.", "example sentence", "some parameters or embedded tags", "<i18n-format>" ], "h2_7": "Compound Format with <i18n-format>", "compound-format-text": [ { "0": "You ({3}) gave no gifts.", "1": { "male": "You ({3}) gave him ({4}) {5}.", "female": "You ({3}) gave her ({4}) {5}.", "other": "You ({3}) gave them ({4}) {5}." }, "one": { "male": "You ({3}) gave him ({4}) and one other person {5}.", "female": "You ({3}) gave her ({4}) and one other person {5}.", "other": "You ({3}) gave them ({4}) and one other person {5}." }, "other": "You ({3}) gave them ({4}) and {1} other people gifts." }, "{{recipients.length - 1}}", "{{recipients.0.gender}}", "{{model.data.sender.name}}", "{{recipients.0.name}}", "a gift" ], "h2_9": "Parameters", "pre_10": [ "lang = {1} ({2})", "{{effectiveLang}}", "{{langName}}" ], "pre_11": [ "sender = {1}", "{{stringifiedUser}}" ], "pre_12": [ "recipients = {1}", "{{stringifiedRecipients}}" ], "langNames": { "en": "English", "ja": "Japanese", "fr": "French" } } </json-data> </template> </template></dom-module> </body></html>