Commit 36c435bf authored by Thibaut Frain's avatar Thibaut Frain

Basic version:

 - contact list view with different status update
 - chatbox working
 - connection datas stored in localStorage

works with renderjs url management methods
parent 0008aed7
...@@ -102,8 +102,8 @@ module.exports = function (grunt) { ...@@ -102,8 +102,8 @@ module.exports = function (grunt) {
"<%= global_config.src %>/presentation_viewer/presentation_viewer.css", "<%= global_config.src %>/presentation_viewer/presentation_viewer.css",
"<%= global_config.dest %>/jabberclient/jabberclient.css": "<%= global_config.dest %>/jabberclient/jabberclient.css":
"<%= global_config.src %>/jabberclient/jabberclient.css", "<%= global_config.src %>/jabberclient/jabberclient.css",
"<%= global_config.dest %>/jabberclient_login/jabberclient_login.css": "<%= global_config.dest %>/jabberclient_connection/jabberclient_connection.css":
"<%= global_config.src %>/jabberclient_login/jabberclient_login.css", "<%= global_config.src %>/jabberclient_connection/jabberclient_connection.css",
"<%= global_config.dest %>/jabberclient_contactlist/jabberclient_contactlist.css": "<%= global_config.dest %>/jabberclient_contactlist/jabberclient_contactlist.css":
"<%= global_config.src %>/jabberclient_contactlist/jabberclient_contactlist.css", "<%= global_config.src %>/jabberclient_contactlist/jabberclient_contactlist.css",
"<%= global_config.dest %>/jabberclient_chatbox/jabberclient_chatbox.css": "<%= global_config.dest %>/jabberclient_chatbox/jabberclient_chatbox.css":
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jabber Client</title> <title>Jabber Client</title>
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>"> <link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
<link rel="stylesheet" href="jabberclient.css"> <link rel="stylesheet" href="jabberclient.css">
...@@ -18,15 +18,13 @@ ...@@ -18,15 +18,13 @@
<script src="jabberclient.js"></script> <script src="jabberclient.js"></script>
</head> </head>
<body> <body>
<div data-role="header" data-position="fixed" data-theme="a"><h1>Jabber Client</h1></div> <div class="jio_gadget"
<div data-role="page" class="login-page"> data-gadget-url="../jabberclient_jio/index.html"
<div role="main" class="ui-content"></div> data-gadget-scope="jio">
</div> </div>
<div data-role="page" class="contactlist-page"> <div data-role="header" data-position="fixed" data-theme="a"><h1>Jabber Client</h1></div>
<div role="main" class="ui-content"></div> <div data-role="page" overflow="hidden">
</div> <div role="main" class="ui-content gadget-container" overflow="hidden"></div>
<div data-role="page" class="chatboxes-page">
<div role="main" class="ui-content"></div>
</div> </div>
</body> </body>
</html> </html>
This diff is collapsed.
...@@ -8,15 +8,20 @@ ...@@ -8,15 +8,20 @@
<script src="../<%= curl.jquery.relative_dest %>"></script> <script src="../<%= curl.jquery.relative_dest %>"></script>
<script src="../<%= curl.strophejs.relative_dest %>"></script> <script src="../<%= curl.strophejs.relative_dest %>"></script>
<script src="../<%= copy.handlebars.relative_dest %>"</script>
<script src="../<%= copy.rsvp.relative_dest %>"></script> <script src="../<%= copy.rsvp.relative_dest %>"></script>
<script src="../<%= copy.renderjs.relative_dest %>"></script> <script src="../<%= copy.renderjs.relative_dest %>"></script>
<script class="message-template" type="text/x-handlebars-template">
<p>[{{time}}]&nbsp<strong>{{jid}}:&nbsp</strong>{{content}}</p>
</script>
<script src="jabberclient_chatbox.js"></script> <script src="jabberclient_chatbox.js"></script>
</head> </head>
<body> <body>
<div id="contact"></div> <div class="contact"></div>
<div id="talk"></div> <div class="talk-box ui-corner-all"></div>
<textarea id="talk-input"></textarea> <textarea class="talk-input ui-corner-all"></textarea>
<button id="send-button">Send</button> <button class="send-button ui-btn ui-btn-inline ui-mini ui-corner-all">Send</button>
</body> </body>
</html> </html>
...@@ -4,24 +4,28 @@ html { ...@@ -4,24 +4,28 @@ html {
body { body {
height: 100%; height: 100%;
} }
#talk {
[data-gadget-scope="chatbox"] {
height: 95%;
}
.talk-box {
padding: 10px; padding: 10px;
height: 82%; height: 80%;
border: solid 1px #aaa; border: solid 1px;
font-family: monospace; font-family: monospace;
overflow: auto; overflow: auto;
} }
#talk-input { .talk-input {
width: 80%; width: 80%;
height: 5%; height: 5%;
border: solid 1px #aaa;
font-family: monospace; font-family: monospace;
overflow: auto; overflow: auto;
float: left; float: left;
} }
#send-button { .send-button {
width: 10%; width: 10%;
height: 5%; height: 5%;
float: left; float: left;
......
/*globals window, document, RSVP, XMLSerializer, DOMParser, /*globals window, document, RSVP, XMLSerializer, DOMParser,
rJS, $, DOMParser, Strophe, $msg*/ rJS, $, DOMParser, Handlebars, Strophe, $msg*/
/*jslint nomen: true*/
(function ($, gadget) { (function ($, rJS, Handlebars) {
"use strict"; "use strict";
var main, var gadget_klass = rJS(window),
parseXML = function (xmlString) { message_template_source = gadget_klass.__template_element
return new DOMParser() .querySelector(".message-template").innerHTML,
.parseFromString(xmlString, 'text/xml') message_template = Handlebars.compile(message_template_source);
.children[0];
};
function Chat(jid, name) { function displayMessage(message) {
this.jid = jid; var html_message = message_template({
this.name = name; time: message.time,
jid: message.from,
content: message.content
});
$('.talk-box').append(html_message);
} }
Chat.prototype.sendInput = function () { function Message(from, to, time, content) {
var message = $('#talk-input').val(), this.from = from;
messageStanzas; this.to = to;
$('#talk-input').val(""); this.time = time;
if (message) { this.content = content;
$('#talk').append('<p>Me: ' + message + '</p>'); }
messageStanzas = this.getMessageStanzas(message);
main.send(messageStanzas);
}
};
Chat.prototype.getMessageStanzas = function (message) { function Talk(jid) {
return $msg({to: this.jid, type: "chat"}).c('body').t(message).toString(); this.jid = jid;
}; this.messages = [];
}
gadget function getTime() {
.declareAcquiredMethod('send', 'send') var date = new Date(),
timestamp = date.getFullYear() +
"-" + (date.getMonth() + 1) + "-" + date.getDate() + " ";
return timestamp + date.toTimeString();
}
.declareMethod('initContact', function (jid, name) { function parseXML(xmlString) {
this.chat = new Chat(jid, name); return new DOMParser()
$('#contact').html(jid); .parseFromString(xmlString, 'text/xml')
return this.chat; .children[0];
}) }
.declareMethod('receive', function (message) { function sendInput(gadget) {
var xmlMessage = parseXML(message); var content = $('.talk-input').val(),
$('#talk').append( from,
'<p>' + Strophe.getBareJidFromJid($(xmlMessage).attr('from')) + to,
': ' + time,
$(xmlMessage).find('body').text() + message;
'</p>' $('.talk-input').val("");
if (content) {
from = gadget.props.jid;
to = gadget.props.current_contact_jid;
time = getTime();
message = new Message(from, to, time, content);
if (!gadget.props.talks[to]) {
gadget.props.talks[to] = new Talk(to);
}
gadget.props.talks[to].messages.push(message);
displayMessage(message);
gadget.send(
$msg({to: to, type: "chat"}).c('body').t(content).toString()
); );
}) }
}
gadget_klass
.ready(function (g) { .ready(function (g) {
main = g; g.props = {
talks: {}
};
})
.declareMethod('render', function (options) {
var gadget = this;
this.props.jid = options.jid;
this.props.current_contact_jid = options.current_contact_jid;
$('[data-role="page"]').height("100%");
$('.gadget-container').height("93%");
$('#send-button').click(function () { $(this.__element).find(".send-button").click(function (e) {
g.chat.sendInput(); e.preventDefault();
sendInput(gadget);
}); });
$("#talk-input").keypress(function (e) { $(this.__element).find(".talk-input").keypress(function (e) {
if (e.charCode === 13) { var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
e.preventDefault(); if (charCode === 13) {
g.chat.sendInput(); if (!e.shiftKey) {
sendInput(gadget);
} else {
e.preventDefault();
$(gadget.__element).find(".talk-input").val(
$(gadget.__element).find(".talk-input").val() + "\n"
);
}
} }
}); });
})
.declareAcquiredMethod('send', 'send')
.declareMethod('receive', function (datas) {
var xmlMessage = parseXML(datas),
from = Strophe.getBareJidFromJid($(xmlMessage).attr('from')),
to = Strophe.getBareJidFromJid($(xmlMessage).attr('to')),
time = getTime(),
content = $(xmlMessage).find('body').text(),
message = new Message(from, to, time, content);
if (!this.props.talks[from]) {
this.props.talks[from] = new Talk(from);
}
this.props.talks[from].messages.push(message);
displayMessage(message);
}); });
}($, rJS(window))); }($, rJS, Handlebars));
...@@ -5,16 +5,17 @@ ...@@ -5,16 +5,17 @@
<title>Jabber login gadget</title> <title>Jabber login gadget</title>
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>"> <link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
<link rel="stylesheet" href="jabberclient_login.css"> <link rel="stylesheet" href="jabberclient_connection.css">
<script src="../<%= curl.jquery.relative_dest %>"></script> <script src="../<%= curl.jquery.relative_dest %>"></script>
<script src="../<%= curl.jquerymobilejs.relative_dest %>"></script> <script src="../<%= curl.jquerymobilejs.relative_dest %>"></script>
<script src="../<%= copy.rsvp.relative_dest %>"></script> <script src="../<%= copy.rsvp.relative_dest %>"></script>
<script src="../<%= copy.renderjs.relative_dest %>"></script> <script src="../<%= copy.renderjs.relative_dest %>"></script>
<script src="../<%= curl.strophejs.relative_dest %>"></script> <script src="../<%= curl.strophejs.relative_dest %>"></script>
<script src="../<%= copy.handlebars.relative_dest %>"></script> <script src="../<%= copy.handlebars.relative_dest %>"></script>
<script src="../mixin_promise/mixin_promise.js" ></script>
<script src="jabberclient_login.js"></script>
<script src="jabberclient_connection.js"></script>
</head> </head>
<body> <body>
<div class="login-box ui-corner-all ui-shadow"> <div class="login-box ui-corner-all ui-shadow">
...@@ -24,10 +25,10 @@ ...@@ -24,10 +25,10 @@
<input type="url" name="server" placeholder="Jabber server url" value="https://mail.tiolive.com/chat/http-bind/" required> <input type="url" name="server" placeholder="Jabber server url" value="https://mail.tiolive.com/chat/http-bind/" required>
</div> </div>
<div class="ui-field-contain"> <div class="ui-field-contain">
<input type="text" name="jid" placeholder="Jabber ID" value="thibaut.frain@tiolive.com" required> <input type="text" name="jid" placeholder="Jabber ID" required>
</div> </div>
<div class="ui-field-contain"> <div class="ui-field-contain">
<input type="password" name="passwd" placeholder="Password" value="&Cg8)Rl9" required> <input type="password" name="passwd" placeholder="Password" required>
</div> </div>
<fieldset class="ui-btn-inline"> <fieldset class="ui-btn-inline">
<input type="submit" value="Log In"> <input type="submit" value="Log In">
......
/*global window, rJS, Strophe, $, $iq,
XMLSerializer, DOMParser, RSVP, localStorage*/
/*jslint nomen: true*/
(function ($, Strophe, rJS) {
"use strict";
function parseXML(xmlString) {
return new DOMParser()
.parseFromString(xmlString, 'text/xml')
.children[0];
}
function serializeXML(xml) {
return new XMLSerializer().serializeToString(xml);
}
function showLogin(gadget, params) {
var login_box = gadget.props.login_box,
logout_box = gadget.props.logout_box;
$(login_box).find('input[name="server"]').val(params.server);
$(login_box).find('input[name="jid"]').val(params.jid);
$(login_box).find('input[name="passwd"]').val(params.passwd);
$(logout_box).hide();
$(login_box).show();
}
function showLogout(gadget, params) {
var login_box = gadget.props.login_box,
logout_box = gadget.props.logout_box;
$(logout_box).find('.server').html(params.server);
$(logout_box).find('.jid').html(params.jid);
$(login_box).hide();
$(logout_box).show();
}
function loopConnectionListener(gadget, params) {
var connection = new Strophe.Connection(params.server),
connection_callback;
function canceller() {
if (connection_callback !== undefined) {
connection.disconnect();
}
}
function resolver(resolve, reject) {
connection_callback = function (status) {
if (status === Strophe.Status.CONNECTED) {
// init jabber inputs
connection.xmlInput = function (domElement) {
[].forEach.call(domElement.children, function (child) {
gadget.receive(serializeXML(child));
});
};
connection.send(
$iq({type: 'get'}).c('query', {xmlns: 'jabber:iq:roster'}).tree()
);
// inform parent gadget
gadget.publishConnectionState('connected');
// show logout box
showLogout(gadget, params);
// register params in localStorage
localStorage.setItem('jabberclient_login', JSON.stringify(params));
} else if (status === Strophe.Status.DISCONNECTED) {
// Destroy connection object
gadget.props.connection = null;
// Inform parent gadget
gadget.publishConnectionState('disconnected');
// Show login box
showLogin(gadget, params);
// remove params in localStorage
localStorage.removeItem('jabberclient_login');
}
};
connection.connect(params.jid, params.passwd, connection_callback);
gadget.props.connection = connection;
}
return new RSVP.Promise(resolver, canceller);
}
rJS(window)
.declareAcquiredMethod('pleaseRedirectMyHash', 'pleaseRedirectMyHash')
.declareAcquiredMethod('publishConnectionState', 'publishConnectionState')
.declareMethod("isConnected", function () {
if (this.props.connection) {
return this.props.connection.connected;
}
return false;
})
.declareAcquiredMethod('receive', 'receive')
.declareMethod('getJID', function () {
return Strophe.getBareJidFromJid(this.props.connection.jid);
})
.declareMethod('send', function (xmlString) {
return this.props.connection.send(parseXML(xmlString));
})
.declareMethod('disconnect', function () {
if (this.connection && this.connection.connected) {
return this.connection.disconnect();
}
})
.declareMethod("pleaseConnectMe", function () {
var params = JSON.parse(localStorage.getItem('jabberclient_login'));
if (params !== null &&
typeof params === 'object' &&
Object.keys(params).length === 3) {
return loopConnectionListener(this, params);
}
return this.pleaseRedirectMyHash("#page=connection");
})
.ready(function (g) {
g.props = {
login_box: g.__element.querySelector('.login-box'),
logout_box: g.__element.querySelector('.logout_box')
};
g.submitLoginCallback = function (e) {
e.preventDefault();
g.props.params = {};
$(this).serializeArray().forEach(function (elem) {
g.props.params[elem.name] = elem.value;
});
loopConnectionListener(g, g.props.params);
return false;
};
g.submitLogoutCallback = function (e) {
g.connection.disconnect();
g.publishConnectionState('disconnected');
};
window.g = g;
return new RSVP.Promise(function (resolve) {
$(document).on('submit', 'form.login-form', g.submitLoginCallback);
$(document).on('click', '.logout-box button', g.submitLogoutCallback);
resolve();
}, function () {
$(document).off('submit', 'form.login-form', g.submitLoginCallback);
$(document).off('click', '.logout-box button', g.submitLogoutCallback);
});
});
}($, Strophe, rJS));
...@@ -13,25 +13,32 @@ ...@@ -13,25 +13,32 @@
<script src="../<%= copy.renderjs.relative_dest %>"></script> <script src="../<%= copy.renderjs.relative_dest %>"></script>
<script src="../<%= curl.strophejs.relative_dest %>"></script> <script src="../<%= curl.strophejs.relative_dest %>"></script>
<script src="../<%= copy.handlebars.relative_dest %>"></script> <script src="../<%= copy.handlebars.relative_dest %>"></script>
<script src="jabberclient_contactlist.js"></script> <script src="jabberclient_contactlist.js"></script>
</head> <script class="offline-contact-template" type="text/x-handlebars-template">
<body>
<div id=contact-list><ul data-role="listview" data-inset="true"></ul></div>
<script id="contact-template" type="text/x-handlebars-template">
<li> <li>
{{#if offline}}
<img src="../jabberclient_contactlist/images/offline.png"> <img src="../jabberclient_contactlist/images/offline.png">
{{else}} <h2>{{name}}&nbsp&nbsp{{jid}}</h2>
{{#if status}} </li>
<img src="../jabberclient_contactlist/images/misc.png"> </script>
{{else}}
<script class="online-contact-template" type="text/x-handlebars-template">
<li>
<img src="../jabberclient_contactlist/images/online.png"> <img src="../jabberclient_contactlist/images/online.png">
{{/if}} <h2>{{name}}&nbsp&nbsp{{jid}}</h2>
{{/if}}
<h2>{{name}}&nbsp&nbsp{{#if status}}({{status}}){{/if}}</h2>
</li> </li>
</script> </script>
<script class="status-contact-template" type="text/x-handlebars-template">
<li>
<img src="../jabberclient_contactlist/images/status.png">
<h2>{{name}}&nbsp&nbsp{{jid}}&nbsp&nbsp({{status}})</h2>
</li>
</script>
</head>
<body>
<div id=contact-list><ul data-role="listview" data-inset="true"></ul></div>
</body> </body>
</html> </html>
...@@ -7,6 +7,10 @@ ...@@ -7,6 +7,10 @@
padding-left: 3.25em; padding-left: 3.25em;
} }
#contact-list li > * {
cursor: pointer;
}
#contact-list h2 { #contact-list h2 {
margin: -0.6em 0; margin: -0.6em 0;
margin-top: -0.3em; margin-top: -0.3em;
......
/*global window, rJS, Strophe, $, DOMParser, /*global window, rJS, Strophe, $, DOMParser,
XMLSerializer, Handlebars, $iq, $pres*/ XMLSerializer, Handlebars, $iq, $pres*/
/*jslint nomen: true*/
(function ($, Strophe, gadget) { (function ($, Strophe, gadget) {
"use strict"; "use strict";
var contactTemplate, main; var gadget_klass = rJS(window),
offline_contact_source = gadget_klass.__template_element
.querySelector(".offline-contact-template").innerHTML,
offline_contact_template = Handlebars.compile(offline_contact_source),
online_contact_source = gadget_klass.__template_element
.querySelector(".online-contact-template").innerHTML,
online_contact_template = Handlebars.compile(online_contact_source),
status_contact_source = gadget_klass.__template_element
.querySelector(".status-contact-template").innerHTML,
status_contact_template = Handlebars.compile(status_contact_source);
function parseXML(xmlString) { function parseXML(xmlString) {
return new DOMParser() return new DOMParser()
...@@ -12,45 +22,52 @@ ...@@ -12,45 +22,52 @@
.children[0]; .children[0];
} }
function Contact(jid, options) { function updateContactElement(gadget, contact) {
this.jid = jid; var template,
this.offline = true; options = {};
this.status = null;
if (typeof options === 'object') { if (contact.el) { contact.el.remove(); }
$.extend(this, options); if (contact.offline) {
template = offline_contact_template;
} else if (contact.status) {
template = status_contact_template;
options.status = contact.status;
} else {
template = online_contact_template;
} }
this.updateElement(); options.jid = contact.jid;
options.name = contact.name;
contact.el = $(template(options));
contact.el.click(function () {
gadget.openChat(contact.jid);
});
} }
Contact.prototype.update = function (presence) { function updateContact(gadget, contact, presence) {
this.status = null; contact.status = null;
if (presence.getAttribute('type') === 'unavailable') { if (presence.getAttribute('type') === 'unavailable') {
this.offline = true; contact.offline = true;
} else { } else {
var show = $(presence).find('show'); var show = $(presence).find('show');
this.offline = false; contact.offline = false;
if (show.length !== 0 && show.text() !== "online") { if (show.length !== 0 && show.text() !== "online") {
this.status = show.text(); contact.status = show.text();
} }
} }
this.updateElement(); updateContactElement(gadget, contact);
}; }
Contact.prototype.updateElement = function () { function Contact(gadget, jid, options) {
var that = this; this.jid = jid;
if (this.el) { this.el.remove(); } this.offline = true;
this.el = $(contactTemplate({ this.status = null;
jid: this.jid, if (typeof options === 'object') {
name: this.name, $.extend(this, options);
offline: this.offline, }
status: this.status updateContactElement(gadget, this);
})); }
this.el.click(function () {
main.openChat(that.jid);
});
};
function ContactList(rosterIq) { function ContactList(gadget, rosterIq) {
var that = this, var that = this,
contactItems = rosterIq.childNodes[0].childNodes, contactItems = rosterIq.childNodes[0].childNodes,
jid, jid,
...@@ -63,25 +80,27 @@ ...@@ -63,25 +80,27 @@
[].forEach.call(item.attributes, function (attr) { [].forEach.call(item.attributes, function (attr) {
options[attr.name] = attr.value; options[attr.name] = attr.value;
}); });
that.list[jid] = new Contact(jid, options); that.list[jid] = new Contact(gadget, jid, options);
that.el.append(that.list[jid].el); that.el.append(that.list[jid].el);
that.el.listview('refresh');
}); });
main.send($pres().toString()); this.el.listview();
gadget.send($pres().toString());
} }
ContactList.prototype.update = function (presence) {
function updateContactList(gadget, presence) {
var jid = Strophe.getBareJidFromJid($(presence).attr('from')), var jid = Strophe.getBareJidFromJid($(presence).attr('from')),
contact = this.list[jid]; contact = gadget.contactList.list[jid];
if (contact) { if (contact) {
contact.update(presence); updateContact(gadget, contact, presence);
if (contact.offline) { if (contact.offline) {
this.el.append(contact.el); gadget.contactList.el.append(contact.el);
} else { } else {
this.el.prepend(contact.el); gadget.contactList.el.prepend(contact.el);
} }
this.el.listview('refresh'); gadget.contactList.el.listview('refresh');
} }
}; }
gadget gadget
...@@ -89,11 +108,11 @@ ...@@ -89,11 +108,11 @@
.declareAcquiredMethod('openChat', 'openChat') .declareAcquiredMethod('openChat', 'openChat')
.declareMethod('receiveRoster', function (roster) { .declareMethod('receiveRoster', function (roster) {
this.contactList = new ContactList(parseXML(roster)); this.contactList = new ContactList(this, parseXML(roster));
}) })
.declareMethod('receivePresence', function (presence) { .declareMethod('receivePresence', function (presence) {
this.contactList.update(parseXML(presence)); updateContactList(this, parseXML(presence));
}) })
.declareMethod('receive', function (message) { .declareMethod('receive', function (message) {
...@@ -105,24 +124,14 @@ ...@@ -105,24 +124,14 @@
this.contactList = new ContactList($(body).find('iq')[0]); this.contactList = new ContactList($(body).find('iq')[0]);
} else if ($(body).find('presence')) { } else if ($(body).find('presence')) {
$(body).find('presence').each(function (index, elem) { $(body).find('presence').each(function (index, elem) {
that.contactList.update(elem); updateContactList(that, elem);
}); });
} }
}) })
.declareMethod('updatePresence', function (presence) { .declareMethod('updatePresence', function (presence) {
presence = parseXML(presence); presence = parseXML(presence);
this.contactList.update(presence); updateContactList(this, presence);
})
.ready(function (g) {
main = g;
g.getElement()
.then(function (element) {
contactTemplate = Handlebars.compile(
$(element).find('#contact-template').html()
);
});
}); });
}($, Strophe, rJS(window))); }($, Strophe, rJS(window)));
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Jio Gadget</title>
<!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
<script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>
<!-- custom script -->
<script src="jabberclient_jio.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
/*global rJS, jIO, RSVP, encodeURI */
/*jslint nomen: true*/
(function (rJS, jIO) {
"use strict";
rJS(window)
.ready(function (gadget) {
// Initialize the gadget local parameters
gadget.state_parameter_dict = {};
gadget.save = {};
})
.declareMethod('createJio', function (jio_options) {
this.state_parameter_dict.jio_storage = jIO.createJIO(jio_options);
this.save = {};
})
.declareMethod('allDocs', function (options) {
var storage = this.state_parameter_dict.jio_storage,
that = this;
if (that.save.data !== undefined) {
return that.save;
}
return storage.allDocs(options)
.then(function (result) {
if (options.save) {
that.save = result;
}
return result;
});
})
.declareMethod('get', function (param) {
var storage = this.state_parameter_dict.jio_storage,
result = this.save,
length,
i;
if (result.data !== undefined) {
length = result.data.rows.length;
for (i = 0; i < length; i += 1) {
if ((result.data.rows[i].id === encodeURI(param._id))
|| (result.data.rows[i].id === param._id)) {
return ({"data": {"title" : result.data.rows[i].doc.title,
"type" : result.data.rows[i].doc.type}});
}
}
}
return storage.get.apply(storage, arguments);
})
.declareMethod('getAttachment', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.getAttachment.apply(storage, arguments)
.then(function (response) {
return response.data;
});
})
.declareMethod('putAttachment', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.putAttachment.apply(storage, arguments);
})
.declareMethod('post', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.post.apply(storage, arguments);
})
.declareMethod('remove', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.remove.apply(storage, arguments);
})
.declareMethod('removeAttachment', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.removeAttachment.apply(storage, arguments);
})
.declareMethod('put', function () {
var storage = this.state_parameter_dict.jio_storage;
return storage.put.apply(storage, arguments);
});
}(rJS, jIO));
/*global window, rJS, Strophe, $, $iq,
XMLSerializer, DOMParser, RSVP, localStorage*/
(function ($, Strophe, rJS) {
"use strict";
rJS(window)
.declareAcquiredMethod('connected', 'connected')
.declareAcquiredMethod('disconnected', 'disconnected')
.declareAcquiredMethod('receive', 'receive')
.declareMethod('getJID', function () {
return Strophe.getBareJidFromJid(this.connection.jid);
})
.declareMethod('send', function (xmlString) {
return this.connection.send(this.parseXML(xmlString));
})
.declareMethod('disconnect', function () {
if (this.connection && this.connection.connected) {
return this.connection.disconnect();
}
this.disconnected();
})
.ready(function (g) {
g.serializeXML = function (domElement) {
return new XMLSerializer()
.serializeToString(domElement);
};
g.parseXML = function (xmlString) {
return new DOMParser()
.parseFromString(xmlString, 'text/xml')
.children[0];
};
g.showLogin = function (params) {
$(document).find('.login-box input[name="server"]').val(params.server);
$(document).find('.login-box input[name="jid"]').val(params.jid);
$(document).find('.login-box input[name="passwd"]').val(params.passwd);
$(document).find('.logout-box').hide();
$(document).find('.login-box').show();
};
g.showLogout = function (params) {
$(document).find('.logout-box .server').html(params.server);
$(document).find('.logout-box .jid').html(params.jid);
$(document).find('.login-box').hide();
$(document).find('.logout-box').show();
};
g.login = function (params) {
g.connection = new Strophe.Connection(params.server);
g.connection.connect(params.jid, params.passwd, function (status) {
if (status === Strophe.Status.CONNECTED) {
// init jabber inputs
g.connection.xmlInput = function (domElement) {
[].forEach.call(domElement.children, function (child) {
g.receive(g.serializeXML(child));
});
};
// inform parent gadget
g.connected();
// show logout box
g.showLogout(params);
// register params in localStorage
localStorage.setItem('jabberclient_login', JSON.stringify(params));
} else if (status === Strophe.Status.DISCONNECTED) {
// Destroy connection object
g.connection = null;
// Inform parent gadget
g.disconnected();
// Show login box
g.showLogin(params);
// remove params in localStorage
g.params = null;
localStorage.removeItem('jabberclient_login');
}
});
};
g.submitLoginCallback = function (e) {
g.params = {};
$(this).serializeArray().forEach(function (elem) {
g.params[elem.name] = elem.value;
});
g.login(g.params);
return false;
};
g.submitLogoutCallback = function (e) {
g.connection.disconnect();
g.disconnected();
};
g.params = JSON.parse(localStorage.getItem('jabberclient_login'));
if (g.params !== null &&
typeof g.params === 'object' &&
Object.keys(g.params).length === 3) {
g.login(g.params);
}
// DEBUG
window.g = g;
return new RSVP.Promise(function (resolve) {
$(document).on('submit', 'form.login-form', g.submitLoginCallback);
$(document).on('click', '.logout-box button', g.submitLogoutCallback);
resolve();
}, function () {
$(document).off('submit', 'form.login-form', g.submitLoginCallback);
$(document).off('click', '.logout-box button', g.submitLogoutCallback);
});
});
}($, Strophe, rJS));
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