diff options
| -rw-r--r-- | index.html | 121 | ||||
| -rw-r--r-- | lang/en.json | 21 | ||||
| -rw-r--r-- | stylesheets/i.css | 20 |
3 files changed, 162 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..f8b9baf --- /dev/null +++ b/index.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta content="IE=edge" http-equiv="X-UA-Compatible"> + <meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport"> + <script src="./i18n-text.min.js"></script> + + <title>XMPP Invitation</title> + <script> +// load i18n and perform translation +var i18n = new I18nText({path: 'lang'}) +i18n.once(I18nText.EVT_LOCALE_CHANGE, function (data) { + translate_ui(); +}) +i18n.setLocale('en'); + +// i18n key prefix for MUC ("muc.") or 1:1 chat ("chat.") +var key_prefix; +var display_data = null; + +function show_clients(client_array) { + var list = document.getElementById('client_list'); + for (var id = 0; id < client_array.length; id++) { + var item = document.createElement('li'); + item.innerHTML = client_array[id]; + list.appendChild(item); + } +} + +function load_clients() { + url = "clients.json"; + var request = new XMLHttpRequest() + request.open('GET', url) + request.onreadystatechange = function () { + if (request.readyState === 4) { + if (request.status == 200 || (isLocalFileRequest(url) && request.responseText.length > 0)) { + show_clients(JSON.parse(request.responseText)) + } + } + } + request.send(null) +} + +function load_hash() { + var muc = false; + key_prefix = "chat."; + var jid = window.location.search || window.location.hash; + jid = decodeURIComponent(jid.substring(jid.indexOf('#') + 1, jid.length)); + if (jid.search("\\?join") >= 0) { + muc = true; + key_prefix = "muc."; + } + + // TODO: proper error checking / display / Creation of invitations + if (jid.search("@") <= 0) return {jid:"", name: "Somebody"}; + + var name = jid.split("@")[0]; + name = name.charAt(0).toUpperCase() + name.slice(1); + return {jid: jid, name: name}; +} + +function translate_ui() { + // translation + document.title = i18n.text(key_prefix + 'title', display_data); + // MUC/chat specific + ['heading', 'intro', 'button'].forEach(function(id) { + document.getElementById(id).innerHTML = i18n.text(key_prefix + id, display_data); + }); + // and agnostic + ['clients', 'recommend', 'checkfulllist', 'xmppis'].forEach(function(id) { + document.getElementById(id).innerHTML = i18n.text(id, display_data); + }); +} + +function rehash() { + display_data = load_hash(); + document.getElementById('button').href = "xmpp:" + display_data.jid; + document.getElementById('url_in').value = "xmpp:" + display_data.jid; + translate_ui(); +} + +function load_done() { + // functionality + load_clients(); + rehash(); + window.addEventListener("hashchange", rehash, false); +} + </script> + <link href="stylesheets/bootstrap.min.css" rel="stylesheet"> + <link href="stylesheets/i.css" rel="stylesheet"> + <style> + .main { + padding-top: 0px; + max-width: 600px; + width: 90%; + margin: 0 auto; + } + </style> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> +</head> +<body onload="load_done();"> + <div class="main"> + <noscript><h3>You need JavaScript to follow the invitation.</h3></noscript> + <h3 class="text-center" id="heading"></h3> + <p class="lead text-center" id="intro"></p> + <p class="text-center"><a class="btn btn-primary" id="button"></a></p> + <input type="url" class="form-control text-center" id="url_in" size=50 onfocus="this.select();"></input> + <p class="lead text-center" id="clients"></p> + <p class="lead" id="recommend"></p> + + <ul class="lead" id="client_list"></ul> + + <p class="lead" id="checkfulllist"></p> + <p id="xmppis"></p> + </div> +</body> +</html> diff --git a/lang/en.json b/lang/en.json new file mode 100644 index 0000000..41d7305 --- /dev/null +++ b/lang/en.json @@ -0,0 +1,21 @@ +{ + "chat": { + "title": "Invitation from {{name}}", + "heading": "{{name}} has invited you to chat", + "intro": "Add {{name}} to your contact list by clicking the following link:", + "button": "Add {{name}}", + "":"" + }, + "muc": { + "title": "Invitation to {{name}}", + "heading": "You have been invited to {{name}}", + "intro": "Join the chat room {{name}} by clicking the following link:", + "button": "Join {{name}}", + "":"" + }, + "clients": "If this link does not work, you need to install and configure an XMPP client, and visit this page again afterwards.", + "recommend": "On Android we recommend one of:", + "checkfulllist": "Check the <a href='http://xmpp.org/software/clients.html'>full list of XMPP clients</a> for other platforms.", + "xmppis": "XMPP is a provider independent form of instant messaging. You can pick from many different clients and have a free choice of server operators to participate.", + "":"" +} diff --git a/stylesheets/i.css b/stylesheets/i.css new file mode 100644 index 0000000..574cf79 --- /dev/null +++ b/stylesheets/i.css @@ -0,0 +1,20 @@ +body { + background: #f8f8f8; + color: #000000; +} +a { + color: #1863a1; +} +.btn-primary { + background: #252e3f; + color: #f2f2f2; +} +.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { + background: #353e5f; + color: #b7c1d5; + box-shadow: none; +} +.btn-primary:active, .btn-primary.active { + background: #353e5f; + box-shadow: none; +} |