i18n-behavior

<html><head></head><body><encoded-original>CiAgICA8c3R5bGU+CiAgICAudGV4dCB7CiAgICAgIGZvbnQtc2l6ZTogMThweDsKICAgIH0KICAgIC5jb2RlIHsKICAgICAgZm9udC1mYW1pbHk6ICdSb2JvdG8gTW9ubycsICdDb25zb2xhcycsICdNZW5sbycsIG1vbm9zcGFjZTsKICAgIH0KICAgIDwvc3R5bGU+CgogICAgPGgyPlNpbXBsZSBTdHJpbmc8L2gyPgogICAgPHNwYW4gaWQ9InNpbXBsZSIgY2xhc3M9InRleHQiPlVJIFRleHQgU3RyaW5nPC9zcGFuPgoKICAgIDxoMj5TaW1wbGUgQXR0cmlidXRlPC9oMj4KICAgIDxpbnB1dCBpZD0ic2ltcGxlLWlucHV0IiBwbGFjZWhvbGRlcj0iUGxhY2Vob2xkZXIgU3RyaW5nIiBpMThuLXRhcmdldC1hdHRyPSJDdXN0b20gSTE4biBUYXJnZXQgQXR0cmlidXRlIFN0cmluZyI+CgogICAgPGgyPkF1dG9tYXRpYyBGb3JtYXQ8L2gyPgogICAgPHAgaWQ9ImV4YW1wbGUtc2VudGVuY2UiIGNsYXNzPSJ0ZXh0Ij5UaGlzIDxpPmV4YW1wbGUgc2VudGVuY2U8L2k+IHdpdGggPGI+c29tZSBwYXJhbWV0ZXJzIG9yIGVtYmVkZGVkIHRhZ3M8L2I+IGlzIGF1dG9tYXRpY2FsbHkgY29udmVydGVkIHRvIDxhIGNsYXNzPSJjb2RlIiBocmVmPSJodHRwczovL2dpdGh1Yi5jb20vdDJ5bS9pMThuLWZvcm1hdCI+Jmx0O2kxOG4tZm9ybWF0Jmd0OzwvYT4gdG8gdHJhbnNsYXRlIGl0IGFzIGEgd2hvbGUgd2l0aCBhbnkgcGFyYW1ldGVyIG9yZGVyLjwvcD4KCiAgICA8aDI+Q29tcG91bmQgRm9ybWF0IHdpdGggJmx0O2kxOG4tZm9ybWF0Jmd0OzwvaDI+CiAgICA8cD4KICAgICAgPGkxOG4tZm9ybWF0IGlkPSJjb21wb3VuZC1mb3JtYXQtdGV4dCIgY2xhc3M9InRleHQiPgogICAgICAgIDxqc29uLWRhdGE+ewogICAgICAgICAgIjAiOiAiWW91ICh7M30pIGdhdmUgbm8gZ2lmdHMuIiwKICAgICAgICAgICIxIjogewogICAgICAgICAgICAibWFsZSI6ICJZb3UgKHszfSkgZ2F2ZSBoaW0gKHs0fSkgezV9LiIsCiAgICAgICAgICAgICJmZW1hbGUiOiAiWW91ICh7M30pIGdhdmUgaGVyICh7NH0pIHs1fS4iLAogICAgICAgICAgICAib3RoZXIiOiAiWW91ICh7M30pIGdhdmUgdGhlbSAoezR9KSB7NX0uIgogICAgICAgICAgfSwKICAgICAgICAgICJvbmUiOiB7CiAgICAgICAgICAgICJtYWxlIjogIllvdSAoezN9KSBnYXZlIGhpbSAoezR9KSBhbmQgb25lIG90aGVyIHBlcnNvbiB7NX0uIiwKICAgICAgICAgICAgImZlbWFsZSI6ICJZb3UgKHszfSkgZ2F2ZSBoZXIgKHs0fSkgYW5kIG9uZSBvdGhlciBwZXJzb24gezV9LiIsCiAgICAgICAgICAgICJvdGhlciI6ICJZb3UgKHszfSkgZ2F2ZSB0aGVtICh7NH0pIGFuZCBvbmUgb3RoZXIgcGVyc29uIHs1fS4iCiAgICAgICAgICB9LAogICAgICAgICAgIm90aGVyIjogIllvdSAoezN9KSBnYXZlIHRoZW0gKHs0fSkgYW5kIHsxfSBvdGhlciBwZW9wbGUgZ2lmdHMuIgogICAgICAgIH08L2pzb24tZGF0YT4KICAgICAgICA8aTE4bi1udW1iZXIgb2Zmc2V0PSIxIj57e3JlY2lwaWVudHMubGVuZ3RofX08L2kxOG4tbnVtYmVyPgogICAgICAgIDxzcGFuPnt7cmVjaXBpZW50cy4wLmdlbmRlcn19PC9zcGFuPgogICAgICAgIDxzcGFuPnt7bW9kZWwuZGF0YS5zZW5kZXIubmFtZX19PC9zcGFuPgogICAgICAgIDxzcGFuPnt7cmVjaXBpZW50cy4wLm5hbWV9fTwvc3Bhbj4KICAgICAgICA8c3Bhbj5hIGdpZnQ8L3NwYW4+CiAgICAgIDwvaTE4bi1mb3JtYXQ+CiAgICA8L3A+CgogICAgPGgyPlBhcmFtZXRlcnM8L2gyPgogICAgPHByZSBjbGFzcz0iY29kZSI+bGFuZyA9IHt7ZWZmZWN0aXZlTGFuZ319ICh7e19nZXRMYW5nTmFtZShlZmZlY3RpdmVMYW5nLHRleHQubGFuZ05hbWVzKX19KTwvcHJlPgogICAgPHByZSBjbGFzcz0iY29kZSI+c2VuZGVyID0ge3tfZ2V0U3RyaW5naWZpZWRVc2VyKG1vZGVsLmRhdGEuc2VuZGVyKX19PC9wcmU+CiAgICA8cHJlIGNsYXNzPSJjb2RlIj5yZWNpcGllbnRzID0ge3tfZ2V0U3RyaW5naWZpZWRSZWNpcGllbnRzKHJlY2lwaWVudHMpfX08L3ByZT4KCiAgICA8dGVtcGxhdGU+CiAgICAgIDwhLS0gbWFudWFsbHkgZGVmaW5lIG1vZGVsIGRhdGEgLS0+CiAgICAgIDxqc29uLWRhdGEgaWQ9ImRhdGEiIHNlbmRlcj0ieyAmcXVvdDtuYW1lJnF1b3Q7OiAmcXVvdDtKb2UmcXVvdDssICZxdW90O2dlbmRlciZxdW90OzogJnF1b3Q7bWFsZSZxdW90OyB9IiByZWNpcGllbnRzPSJbCiAgICAgICAgICB7ICZxdW90O25hbWUmcXVvdDs6ICZxdW90O0FsaWNlJnF1b3Q7LCAmcXVvdDtnZW5kZXImcXVvdDs6ICZxdW90O2ZlbWFsZSZxdW90OyB9LAogICAgICAgICAgeyAmcXVvdDtuYW1lJnF1b3Q7OiAmcXVvdDtCb2ImcXVvdDssICZxdW90O2dlbmRlciZxdW90OzogJnF1b3Q7bWFsZSZxdW90OyB9LAogICAgICAgICAgeyAmcXVvdDtuYW1lJnF1b3Q7OiAmcXVvdDtZb2RhJnF1b3Q7LCAmcXVvdDtnZW5kZXImcXVvdDs6ICZxdW90O290aGVyJnF1b3Q7IH0KICAgICAgICBdIj48L2pzb24tZGF0YT4KICAgICAgPCEtLSBkZWZpbmUgVUkgZGF0YSAtLT4KICAgICAgPGpzb24tZGF0YSBpZD0ibGFuZ05hbWVzIj57CiAgICAgICAgImVuIjogIkVuZ2xpc2giLAogICAgICAgICJqYSI6ICJKYXBhbmVzZSIsCiAgICAgICAgImZyIjogIkZyZW5jaCIKICAgICAgfTwvanNvbi1kYXRhPgogICAgPC90ZW1wbGF0ZT4K</encoded-original><encoded-original2>PGkxOG4tYXR0ci1yZXBvPgogIDx0ZW1wbGF0ZSBpZD0iY3VzdG9tIj4KICAgIDxpbnB1dCBpMThuLXRhcmdldC1hdHRyPSIkIj4KICA8L3RlbXBsYXRlPgo8L2kxOG4tYXR0ci1yZXBvPg==</encoded-original2><link rel="import" href="../../../i18n-element.html"><i18n-attr-repo> <template id="custom"> <input i18n-target-attr="$"> </template> </i18n-attr-repo><dom-module id="i18n-behavior-demo"><template localizable-text="embedded"> <style> .text { font-size: 18px; } .code { 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}}" i18n-target-attr$="{{model.simple-input.i18n-target-attr}}"> <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">{{_getLangName(effectiveLang,text.langNames)}}</span></i18n-format></pre> <pre class="code"><i18n-format lang="{{effectiveLang}}"><span>{{text.pre_11.0}}</span><span slot="1">{{_getStringifiedUser(model.data.sender)}}</span></i18n-format></pre> <pre class="code"><i18n-format lang="{{effectiveLang}}"><span>{{text.pre_12.0}}</span><span slot="1">{{_getStringifiedRecipients(recipients)}}</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", "i18n-target-attr": "Custom I18n Target Attribute 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}}", "{{_getLangName(effectiveLang,text.langNames)}}" ], "pre_11": [ "sender = {1}", "{{_getStringifiedUser(model.data.sender)}}" ], "pre_12": [ "recipients = {1}", "{{_getStringifiedRecipients(recipients)}}" ], "langNames": { "en": "English", "ja": "Japanese", "fr": "French" } } </json-data> </template> </template></dom-module> </body></html>