Commit 8d3de0a0 authored by Adrien Dorsaz's avatar Adrien Dorsaz

panel: use mustache.js too to translate application.

parent 37fd576b
......@@ -62,5 +62,45 @@
"save-start": {
"description": "Label for button Save and Start",
"message": "Save and start"
},
"first-run-welcome": {
"description": "Welcome title when client not configured",
"message": "Welcome to XMPP Pane !"
},
"first-run-configure": {
"description": "First paragraph asking to configure the XMPP account",
"message": "To begin, configure your XMPP account:"
},
"disconnected-text": {
"description": "Small text announcing the disconnected state to the user",
"message": "You are disconnected."
},
"connect-back-button": {
"description": "Label for button to connect back to the network",
"message": "Connect me back!"
},
"pubsub-title": {
"description": "Title of the panel showing pub/sub communities.",
"message": "Communities"
},
"pubsub-explore-server": {
"description": "Label to ask which pubsub server to explore",
"message": "Server"
},
"pubsub-explore-placeholder": {
"description": "Example of valid input for server to explore",
"message": "pubsub.example.com"
},
"pubsub-explore-button": {
"description": "Button label to launch the explortaion of pubsub server.",
"message": "Explore"
}
}
......@@ -6,33 +6,63 @@
</head>
<body>
<div id="errorpanel" class="panel disabled" style="padding:1rem;background-color:red;">
</div>
<div id="infopanel" class="panel disabled" style="padding:1rem;background-color:orange;">
</div>
<div id="firstrunpanel" class="panel disabled">
<p>Welcome to XMPP Pane !</p>
<p>To begin, configure, your XMPP account:</p>
<object data="../options/options.html"></object>
</div>
<div id="connectpanel" class="panel disabled">
<p>You are disconnected, please <button class="connectClient browser-style">connect</button></p>
</div>
<div id="pubsubpanel" class="panel disabled">
<h1>Communities</h1>
<form id='explore' class="browser-style">
<label class="browser-style-labelh" for="exploreServer">Server:</label><input id="exploreServer" type="text"></input>
<button type="send" class="browser-style">explore</button>
<div id="errorpanel" class="panel disabled" style="padding:1rem;background-color:red;"></div>
<div id="infopanel" class="panel disabled" style="padding:1rem;background-color:orange;"></div>
<div id="firstrunpanel" class="panel disabled"></div>
<div id="connectpanel" class="panel disabled"></div>
<div id="pubsubpanel" class="panel disabled"></div>
<script id="firstrunpanel-tmpl" type="x-tmpl-mustache">
<h1>{{first-run-welcome}}</h1>
<p>{{first-run-configure}}</p>
<object
data="../options/options.html">
</object>
</script>
<script id="connectpanel-tmpl" type="x-tmpl-mustache">
<p>{{disconnected-text}}</p>
<p>
<button
class="connectClient browser-style">
{{connect-back-button}}
</button>
</p>
</script>
<script id="pubsubpanel-tmpl" type="x-tmpl-mustache">
<h1>{{pubsub-title}}</h1>
<form
id='explore'
class="browser-style">
<label
class="browser-style-label"
for="exploreServer">
{{pubsub-explore-server}}
</label>
<input
id="exploreServer"
type="text"
placeholder="{{pubsub-explore-placeholder}}">
</input>
<button
type="send"
class="browser-style">
{{pubsub-explore-button}}
</button>
</form>
<div id="xmppNet"></div>
</script>
</div>
<script src="../3rdparty/mustache.js/mustache.js"></script>
<script src="panel.js"></script>
</body>
</html>
panel = {
error: document.getElementById('errorpanel'),
info: document.getElementById('infopanel'),
connect: document.getElementById('connectpanel'),
firstrun: document.getElementById('firstrunpanel'),
pubsub: document.getElementById('pubsubpanel')
}
function panelRender(selector) {
let template = document.querySelector('#' + selector + '-tmpl').innerHTML;
Mustache.parse(template)
for (let pane in panel) {
pane.className = 'panel disabled';
document.querySelector("#" + selector).innerHTML = Mustache.render(template, panelStrings);
}
function displayFirstRun(response) {
......@@ -90,6 +85,41 @@ function exploreServer(ev) {
}, refreshNetwork);
}
// Render the page
let panelStrings = {
'first-run-welcome': '',
'first-run-configure': '',
'disconnected-text': '',
'connect-back-button': '',
'pubsub-title': '',
'pubsub-explore-server': '',
'pubsub-explore-placeholder': '',
'pubsub-explore-button': '',
}
for (const string of Object.keys(panelStrings)) {
panelStrings[string] = browser.i18n.getMessage(string);
}
panelRender('firstrunpanel');
panelRender('connectpanel');
panelRender('pubsubpanel');
// Read page and apply events
panel = {
error: document.getElementById('errorpanel'),
info: document.getElementById('infopanel'),
connect: document.getElementById('connectpanel'),
firstrun: document.getElementById('firstrunpanel'),
pubsub: document.getElementById('pubsubpanel')
}
for (let pane in panel) {
pane.className = 'panel disabled';
}
connectButtons = document.getElementsByClassName('connectClient');
for (let key = 0; key < connectButtons.length; key++) {
......@@ -119,6 +149,8 @@ let panelListener = function (message, sender, sendRepsone) {
return asynchroneResponse;
}
// External message listener
browser.runtime.onMessage.addListener(panelListener)
browser.runtime.sendMessage({
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment