Skip to content

Instantly share code, notes, and snippets.

@Cacodaimon
Created November 23, 2012 14:43

Revisions

  1. Cacodaimon revised this gist Nov 25, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion app.html
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,6 @@
    <script src="jQuery/jquery.min.js"></script>
    <script src="jQuery/jquery.mobile-1.1.1.min.js"></script>
    <script src="jQuery/jquery.validate.min.js"></script>
    <script src="jQuery/jquery.jsonp-2.4.0.min.js"></script>
    <script src="my.js"></script>
    <script src="FakeRequire.js"></script>
    <script src="jQueryMobileChatClient.js"></script>
  2. Cacodaimon revised this gist Nov 25, 2012. 1 changed file with 109 additions and 109 deletions.
    218 changes: 109 additions & 109 deletions app.html
    Original file line number Diff line number Diff line change
    @@ -1,112 +1,112 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Caco's Chat</title>
    <link rel="stylesheet" type="text/css" href="jQuery/jquery.mobile-1.1.1.min.css" />
    <link rel="stylesheet" type="text/css" href="my.css" />
    <script src="jQuery/jquery.min.js"></script>
    <script src="jQuery/jquery.mobile-1.1.1.min.js"></script>
    <script src="jQuery/jquery.validate.min.js"></script>
    <script src="jQuery/jquery.jsonp-2.4.0.min.js"></script>
    <script src="my.js"></script>
    <script src="FakeRequire.js"></script>
    <script src="jQueryMobileChatClient.js"></script>
    </head>
    <body>
    <!-- Chat login -->
    <div data-role="page" id="page_login">
    <div data-theme="a" data-role="header">
    <h3>Caco's Chat</h3>
    </div>
    <div data-role="content">
    <form id="login_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="chatHost">Server</label>
    <input name="server" id="chatHost" placeholder="http://127.0.0.1" value="http://127.0.0.1" type="text" class="required url"/>
    </fieldset>
    </div>
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="chatPort">Port</label>
    <input name="port" id="chatPort" placeholder="8888" value="8888" type="text" class="required digits"/>
    </fieldset>
    </div>
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="nickname">Nickname</label>
    <input name="nickname" id="nickname" placeholder="" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-theme="b" data-icon="check" data-iconpos="left" value="Login" type="submit" />
    </form>
    </div>
    </div>
    <!-- Chat -->
    <div data-role="page" id="page_chat">
    <div data-theme="a" data-role="header">
    <a data-role="button" data-theme="b" href="#page_login" data-icon="back" data-iconpos="left" class="ui-btn-left" id="btn_logout">Logout</a>
    <h3>Chat</h3>
    <a data-role="button" data-theme="b" href="#page_users" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog" id="btn_users">Users</a>
    </div>
    <div data-role="content">
    <ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_area" />
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
    <form id="chat_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="chat_message">Message</label>
    <input name="chat_message" id="chat_message" placeholder="Insert message here" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-theme="b" value="Send" type="submit" />
    </form>
    <a data-role="button" data-theme="b" href="#page_nickname" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog">Change name</a>
    </div>
    </div>
    <!-- Chat users -->
    <div data-role="page" id="page_users">
    <div data-theme="a" data-role="header">
    <h3>Users</h3>
    </div>
    <div data-role="content" id="chat_area" data-theme="b">
    <ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_users" />
    </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_nickname">
    <div data-theme="a" data-role="header">
    <h3>Change name</h3>
    </div>
    <div data-role="content" data-theme="b">
    <form id="change_name_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="new_nickname" id="new_nickname" placeholder="Nickname" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Save" type="submit" />
    </form>
    </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_private_message">
    <div data-theme="a" data-role="header">
    <h3>Private Message</h3>
    </div>
    <div data-role="content" data-theme="b">
    <form id="private_message_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="private_message" id="private_message" placeholder="Private Message" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Send" type="submit" />
    </form>
    </div>
    </div>
    </body>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Caco's Chat</title>
    <link rel="stylesheet" type="text/css" href="jQuery/jquery.mobile-1.1.1.min.css" />
    <link rel="stylesheet" type="text/css" href="my.css" />
    <script src="jQuery/jquery.min.js"></script>
    <script src="jQuery/jquery.mobile-1.1.1.min.js"></script>
    <script src="jQuery/jquery.validate.min.js"></script>
    <script src="jQuery/jquery.jsonp-2.4.0.min.js"></script>
    <script src="my.js"></script>
    <script src="FakeRequire.js"></script>
    <script src="jQueryMobileChatClient.js"></script>
    </head>
    <body>
    <!-- Chat login -->
    <div data-role="page" id="page_login">
    <div data-theme="a" data-role="header">
    <h3>Caco's Chat</h3>
    </div>
    <div data-role="content">
    <form id="login_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="chatHost">Server</label>
    <input name="server" id="chatHost" placeholder="http://127.0.0.1" value="http://127.0.0.1" type="text" class="required url"/>
    </fieldset>
    </div>
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="chatPort">Port</label>
    <input name="port" id="chatPort" placeholder="8888" value="8888" type="text" class="required digits"/>
    </fieldset>
    </div>
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="nickname">Nickname</label>
    <input name="nickname" id="nickname" placeholder="" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-theme="b" data-icon="check" data-iconpos="left" value="Login" type="submit" />
    </form>
    </div>
    </div>
    <!-- Chat -->
    <div data-role="page" id="page_chat">
    <div data-theme="a" data-role="header">
    <a data-role="button" data-theme="b" href="#page_login" data-icon="back" data-iconpos="left" class="ui-btn-left" id="btn_logout">Logout</a>
    <h3>Chat</h3>
    <a data-role="button" data-theme="b" href="#page_users" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog" id="btn_users">Users</a>
    </div>
    <div data-role="content">
    <ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_area" />
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
    <form id="chat_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="chat_message">Message</label>
    <input name="chat_message" id="chat_message" placeholder="Insert message here" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-theme="b" value="Send" type="submit" />
    </form>
    <a data-role="button" data-theme="b" href="#page_nickname" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog">Change name</a>
    </div>
    </div>
    <!-- Chat users -->
    <div data-role="page" id="page_users">
    <div data-theme="a" data-role="header">
    <h3>Users</h3>
    </div>
    <div data-role="content" id="chat_area" data-theme="b">
    <ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_users" />
    </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_nickname">
    <div data-theme="a" data-role="header">
    <h3>Change name</h3>
    </div>
    <div data-role="content" data-theme="b">
    <form id="change_name_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="new_nickname" id="new_nickname" placeholder="Nickname" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Save" type="submit" />
    </form>
    </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_private_message">
    <div data-theme="a" data-role="header">
    <h3>Private Message</h3>
    </div>
    <div data-role="content" data-theme="b">
    <form id="private_message_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="private_message" id="private_message" placeholder="Private Message" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Send" type="submit" />
    </form>
    </div>
    </div>
    </body>
    </html>
  3. Cacodaimon revised this gist Nov 25, 2012. 1 changed file with 29 additions and 29 deletions.
    58 changes: 29 additions & 29 deletions app.html
    Original file line number Diff line number Diff line change
    @@ -64,7 +64,7 @@ <h3>Chat</h3>
    </div>
    <input data-theme="b" value="Send" type="submit" />
    </form>
    <a data-role="button" data-theme="b" href="#page_nickname" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog">Change name</a>
    <a data-role="button" data-theme="b" href="#page_nickname" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog">Change name</a>
    </div>
    </div>
    <!-- Chat users -->
    @@ -76,37 +76,37 @@ <h3>Users</h3>
    <ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_users" />
    </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_nickname">
    <div data-theme="a" data-role="header">
    <h3>Change name</h3>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_nickname">
    <div data-theme="a" data-role="header">
    <h3>Change name</h3>
    </div>
    <div data-role="content" data-theme="b">
    <form id="change_name_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="new_nickname" id="new_nickname" placeholder="Nickname" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Save" type="submit" />
    </form>
    <form id="change_name_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="new_nickname" id="new_nickname" placeholder="Nickname" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Save" type="submit" />
    </form>
    </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_private_message">
    <div data-theme="a" data-role="header">
    <h3>Private Message</h3>
    </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_private_message">
    <div data-theme="a" data-role="header">
    <h3>Private Message</h3>
    </div>
    <div data-role="content" data-theme="b">
    <form id="private_message_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="private_message" id="private_message" placeholder="Private Message" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Send" type="submit" />
    </form>
    <form id="private_message_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="private_message" id="private_message" placeholder="Private Message" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Send" type="submit" />
    </form>
    </div>
    </div>
    </div>
    </body>
    </html>
  4. Cacodaimon revised this gist Nov 23, 2012. 2 changed files with 140 additions and 147 deletions.
    149 changes: 2 additions & 147 deletions app.html
    Original file line number Diff line number Diff line change
    @@ -3,158 +3,16 @@
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <title>Caco's Chat</title>
    <link rel="stylesheet" type="text/css" href="jQuery/jquery.mobile-1.1.1.min.css" />
    <link rel="stylesheet" type="text/css" href="my.css" />
    <script src="jQuery/jquery.min.js"></script>
    <script src="jQuery/jquery.mobile-1.1.1.min.js"></script>
    <script src="jQuery/jquery.validate.min.js"></script>
    <script src="jQuery/jquery.jsonp-2.4.0.min.js"></script>
    <script src="my.js"></script>
    <script type="text/javascript">

    </script>
    <script src="FakeRequire.js"></script>
    <script type="text/javascript">
    Date.prototype.prettyTime = function () {
    var hours = this.getHours();
    var minutes = this.getMinutes();
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    return hours + ':' + minutes;
    };

    String.prototype.sprintf = function () {
    var string = this;
    for (var i = 0; i < arguments.length; i++) {
    string = string.replace('%', arguments[i]);
    }
    return string;
    };

    function initChat() {
    var chatClient = new module.exports.ChatClient();
    var privateMessageReciever = null;

    chatClient.onLogin = function () {
    $.mobile.changePage('#page_chat');
    }

    $('#btn_logout').click(function() {
    chatClient.sendMessage(new module.exports.Command('logout'));
    })

    $('#btn_users').click(function() {
    chatClient.sendMessage(new module.exports.Command('users'));
    });

    chatClient.onError = function () {
    alert('Connection error!');
    $.mobile.changePage('#page_login');
    }

    chatClient.onPrivateMessage = chatClient.onMessage = function (msg) {
    var msgTemplate = '<li data-theme="%"><p class="ui-li-aside ui-li-desc"><strong>%</strong></p><p><strong class="user_%">%:</strong> %</p></li>';

    $('#chat_area').append( msgTemplate.sprintf(
    msg.type == 'normal' ? 'c' : 'b',
    new Date(msg.time).prettyTime(),
    msg.user.id,
    msg.user.name,
    msg.text));
    $('#chat_area').listview('refresh');
    $(document).scrollTop($(document).height());
    }

    chatClient.onSend = function () {
    if (!$('#chat_form').valid()) {
    return false;
    }

    chatClient.sendMessage(new module.exports.Message($('#chat_message').val()))
    $('#chat_message').val('');
    return false;
    }

    chatClient.onUsers = function (users) {
    var userTemplate = '<li id="user_list_%"><strong>%</strong></li>';

    $('#chat_users').empty();
    for (var i = users.length - 1; i >= 0; i--) {
    $('#chat_users').append(userTemplate.sprintf(
    users[i].id,
    users[i].name));
    $('#user_list_' + users[i].id).click(function() {
    privateMessageReciever = $(this).text();
    $.mobile.changePage('#page_private_message');
    })
    }
    $("#chat_users").listview('refresh');
    }

    chatClient.onDoLogin = function () {
    $.mobile.changePage('#page_login');
    }

    chatClient.onNewUser = function (params) {
    $('#chat_area').append('<li><p>User: <strong>' + params.user.name + '</strong> logged in.</p></li>');
    $('#chat_area').listview('refresh');
    }

    chatClient.onNameChange = function (params) {
    $('.user_' + params.user.id).text(params.to)

    $('#chat_area').append('<li><p><strong>User: % changed his/her name to: %</strong></p></li>'.sprintf(params.from, params.to));
    $('#chat_area').listview('refresh');
    }

    $('#login_form').submit(function() {
    if (!$('#login_form').valid()) {
    return false;
    }

    chatClient.host = '%:%'.sprintf($('#chatHost').val(), $('#chatPort').val());
    chatClient.sendMessage(new module.exports.Command('login', {name: $('#nickname').val()}));

    return false;
    });

    $('#chat_form').submit(chatClient.onSend);

    $('#change_name_form').submit(function () {
    if (!$('#change_name_form').valid()) {
    return false;
    }

    chatClient.sendMessage(new module.exports.Command('change_name', {
    newName: $('#new_nickname').val()
    }))

    $.mobile.changePage('#page_chat');

    return false;
    });

    $('#private_message_form').submit(function () {
    if (!$('#private_message_form').valid()) {
    return false;
    }

    chatClient.sendMessage(new module.exports.PrivateMessage($('#private_message').val() ,null, privateMessageReciever))

    $.mobile.changePage('#page_chat');
    return false;
    });
    }

    $(document).ready(function() {
    require('ChatClient.js', function() {
    require('Message.js', function() {
    initChat();
    });
    });
    });
    </script>
    <script src="jQueryMobileChatClient.js"></script>
    </head>
    <body>
    <!-- Chat login -->
    @@ -250,8 +108,5 @@ <h3>Private Message</h3>
    </form>
    </div>
    </div>
    <script>
    //App custom javascript
    </script>
    </body>
    </html>
    138 changes: 138 additions & 0 deletions jQueryMobileChatClient.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,138 @@
    Date.prototype.prettyTime = function () {
    var hours = this.getHours();
    var minutes = this.getMinutes();
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    return hours + ':' + minutes;
    };

    String.prototype.sprintf = function () {
    var string = this;
    for (var i = 0; i < arguments.length; i++) {
    string = string.replace('%', arguments[i]);
    }
    return string;
    };

    function initChat() {
    var chatClient = new module.exports.ChatClient();
    var privateMessageReciever = null;
    var msgTemplate = '<li data-theme="%"><p class="ui-li-aside ui-li-desc"><strong>%</strong></p><p><strong class="user_%">%:</strong> %</p></li>';
    var userTemplate = '<li id="user_list_%"><strong>%</strong></li>';
    var newUserTemplate = '<li><p>User: <strong>%</strong> logged in.</p></li>';
    var userChangedNameTemplate = '<li><p><strong>User: % changed his/her name to: %</strong></p></li>';

    chatClient.onLogin = function () {
    $.mobile.changePage('#page_chat');
    }

    $('#btn_logout').click(function() {
    chatClient.sendMessage(new module.exports.Command('logout'));
    })

    $('#btn_users').click(function() {
    chatClient.sendMessage(new module.exports.Command('users'));
    });

    chatClient.onError = function () {
    alert('Connection error!');
    $.mobile.changePage('#page_login');
    }

    chatClient.onPrivateMessage = chatClient.onMessage = function (msg) {
    $('#chat_area').append( msgTemplate.sprintf(
    msg.type == 'normal' ? 'c' : 'b',
    new Date(msg.time).prettyTime(),
    msg.user.id,
    msg.user.name,
    msg.text));
    $('#chat_area').listview('refresh');
    $(document).scrollTop($(document).height());
    }

    chatClient.onSend = function () {
    if (!$('#chat_form').valid()) {
    return false;
    }

    chatClient.sendMessage(new module.exports.Message($('#chat_message').val()))
    $('#chat_message').val('');
    return false;
    }

    chatClient.onUsers = function (users) {
    $('#chat_users').empty();
    for (var i = users.length - 1; i >= 0; i--) {
    $('#chat_users').append(userTemplate.sprintf(
    users[i].id,
    users[i].name));
    $('#user_list_' + users[i].id).click(function() {
    privateMessageReciever = $(this).text();
    $.mobile.changePage('#page_private_message');
    })
    }
    $("#chat_users").listview('refresh');
    }

    chatClient.onDoLogin = function () {
    $.mobile.changePage('#page_login');
    }

    chatClient.onNewUser = function (params) {
    $('#chat_area').append(newUserTemplate.sprintf(params.user.name));
    $('#chat_area').listview('refresh');
    }

    chatClient.onNameChange = function (params) {
    $('.user_' + params.user.id).text(params.to)

    $('#chat_area').append(userChangedNameTemplate.sprintf(params.from, params.to));
    $('#chat_area').listview('refresh');
    }

    $('#login_form').submit(function() {
    if (!$('#login_form').valid()) {
    return false;
    }

    chatClient.host = '%:%'.sprintf($('#chatHost').val(), $('#chatPort').val());
    chatClient.sendMessage(new module.exports.Command('login', {name: $('#nickname').val()}));

    return false;
    });

    $('#chat_form').submit(chatClient.onSend);

    $('#change_name_form').submit(function () {
    if (!$('#change_name_form').valid()) {
    return false;
    }

    chatClient.sendMessage(new module.exports.Command('change_name', {
    newName: $('#new_nickname').val()
    }))

    $.mobile.changePage('#page_chat');

    return false;
    });

    $('#private_message_form').submit(function () {
    if (!$('#private_message_form').valid()) {
    return false;
    }

    chatClient.sendMessage(new module.exports.PrivateMessage($('#private_message').val() ,null, privateMessageReciever))
    $('#private_message').val('');
    $.mobile.changePage('#page_chat');
    return false;
    });
    }

    $(document).ready(function() {
    require('ChatClient.js', function() {
    require('Message.js', function() {
    initChat();
    });
    });
    });
  5. Cacodaimon created this gist Nov 23, 2012.
    120 changes: 120 additions & 0 deletions ChatClient.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,120 @@
    module.exports.ChatClient = function () {
    if (module.exports.ChatClient.instance) {
    return module.exports.ChatClient.instance;
    }

    module.exports.ChatClient.instance = this;

    this.host = null;
    this.welcomeTime = 0;
    var interval = null;

    var request = function (msg) {
    var timeoutId = setTimeout(function () {
    new module.exports.ChatClient().stopInterval();
    new module.exports.ChatClient().onError();
    }, 1000);

    var jsonpRequest = {
    url: new module.exports.ChatClient().host,
    cache: false,
    dataType: 'jsonp',
    jsonp: 'ChatResponse',
    async: false,
    success: function(jsonp){
    clearTimeout(timeoutId)
    processResponse(jsonp)
    },
    };

    if (msg) {
    jsonpRequest.data = {q: encodeURIComponent(JSON.stringify(msg).toString())};
    }

    $.ajax(jsonpRequest);
    };

    var processResponse = function (response) {
    var chatClient = new module.exports.ChatClient();

    var thath = this;
    for (var i = response.length - 1; i >= 0; i--) {
    if (!response[i]) {
    continue
    }

    switch(response[i].type) {
    case 'command':
    processCommand(response[i]);
    break;
    case 'normal':
    chatClient.onMessage(response[i]);
    break;
    case 'private':
    chatClient.onPrivateMessage(response[i]);
    break;
    }
    };
    };

    var processCommand = function (command) {
    var chatClient = new module.exports.ChatClient();

    switch (command.name) {
    case 'welcome':
    chatClient.welcomeTime = command.time;
    chatClient.onLogin();
    chatClient.startInterval();
    return;
    case 'users':
    chatClient.onUsers(command.params);
    return;
    case 'name_changed':
    chatClient.onNameChange(command.params);
    return;
    case 'do_login':
    var delta = command.time - chatClient.welcomeTime
    if (delta < 5000) { //skip dologin if delta < 5 sec.
    chatClient.onDoLogin();
    chatClient.stopInterval();
    }
    return;
    case 'new_user':
    chatClient.onNewUser(command.params);
    return;
    }
    };

    this.sendMessage = function (msg) {
    request(msg);
    };

    this.getMessages = function () {
    request();
    };

    this.startInterval = function(time) {
    var time = time ? time : 333;

    this.stopInterval();

    interval = setInterval(this.getMessages, time);
    };

    this.stopInterval = function(time) {
    if (interval) {
    clearInterval(interval);
    interval = null;
    }
    };

    this.onLogin = function() {};
    this.onMessage = function(msg) {};
    this.onPrivateMessage = function(msg) {};
    this.onSend = function() {};
    this.onDoLogin = function() {};
    this.onUsers = function(users) {};
    this.onNameChange = function(params) {};
    this.onNewUser = function(params) {};
    this.onError = function() {};
    }
    18 changes: 18 additions & 0 deletions FakeRequire.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    "use strict";
    if (!module) {
    var module = {};
    }
    if (!module.exports) {
    module.exports = {};
    }

    function require (src, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    if (callback) {
    script.onload = callback;
    }
    document.getElementsByTagName('head')[0].appendChild(script);
    return module.exports;
    }
    257 changes: 257 additions & 0 deletions app.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,257 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="jQuery/jquery.mobile-1.1.1.min.css" />
    <link rel="stylesheet" type="text/css" href="my.css" />
    <script src="jQuery/jquery.min.js"></script>
    <script src="jQuery/jquery.mobile-1.1.1.min.js"></script>
    <script src="jQuery/jquery.validate.min.js"></script>
    <script src="jQuery/jquery.jsonp-2.4.0.min.js"></script>
    <script src="my.js"></script>
    <script type="text/javascript">

    </script>
    <script src="FakeRequire.js"></script>
    <script type="text/javascript">
    Date.prototype.prettyTime = function () {
    var hours = this.getHours();
    var minutes = this.getMinutes();
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    return hours + ':' + minutes;
    };

    String.prototype.sprintf = function () {
    var string = this;
    for (var i = 0; i < arguments.length; i++) {
    string = string.replace('%', arguments[i]);
    }
    return string;
    };

    function initChat() {
    var chatClient = new module.exports.ChatClient();
    var privateMessageReciever = null;

    chatClient.onLogin = function () {
    $.mobile.changePage('#page_chat');
    }

    $('#btn_logout').click(function() {
    chatClient.sendMessage(new module.exports.Command('logout'));
    })

    $('#btn_users').click(function() {
    chatClient.sendMessage(new module.exports.Command('users'));
    });

    chatClient.onError = function () {
    alert('Connection error!');
    $.mobile.changePage('#page_login');
    }

    chatClient.onPrivateMessage = chatClient.onMessage = function (msg) {
    var msgTemplate = '<li data-theme="%"><p class="ui-li-aside ui-li-desc"><strong>%</strong></p><p><strong class="user_%">%:</strong> %</p></li>';

    $('#chat_area').append( msgTemplate.sprintf(
    msg.type == 'normal' ? 'c' : 'b',
    new Date(msg.time).prettyTime(),
    msg.user.id,
    msg.user.name,
    msg.text));
    $('#chat_area').listview('refresh');
    $(document).scrollTop($(document).height());
    }

    chatClient.onSend = function () {
    if (!$('#chat_form').valid()) {
    return false;
    }

    chatClient.sendMessage(new module.exports.Message($('#chat_message').val()))
    $('#chat_message').val('');
    return false;
    }

    chatClient.onUsers = function (users) {
    var userTemplate = '<li id="user_list_%"><strong>%</strong></li>';

    $('#chat_users').empty();
    for (var i = users.length - 1; i >= 0; i--) {
    $('#chat_users').append(userTemplate.sprintf(
    users[i].id,
    users[i].name));
    $('#user_list_' + users[i].id).click(function() {
    privateMessageReciever = $(this).text();
    $.mobile.changePage('#page_private_message');
    })
    }
    $("#chat_users").listview('refresh');
    }

    chatClient.onDoLogin = function () {
    $.mobile.changePage('#page_login');
    }

    chatClient.onNewUser = function (params) {
    $('#chat_area').append('<li><p>User: <strong>' + params.user.name + '</strong> logged in.</p></li>');
    $('#chat_area').listview('refresh');
    }

    chatClient.onNameChange = function (params) {
    $('.user_' + params.user.id).text(params.to)

    $('#chat_area').append('<li><p><strong>User: % changed his/her name to: %</strong></p></li>'.sprintf(params.from, params.to));
    $('#chat_area').listview('refresh');
    }

    $('#login_form').submit(function() {
    if (!$('#login_form').valid()) {
    return false;
    }

    chatClient.host = '%:%'.sprintf($('#chatHost').val(), $('#chatPort').val());
    chatClient.sendMessage(new module.exports.Command('login', {name: $('#nickname').val()}));

    return false;
    });

    $('#chat_form').submit(chatClient.onSend);

    $('#change_name_form').submit(function () {
    if (!$('#change_name_form').valid()) {
    return false;
    }

    chatClient.sendMessage(new module.exports.Command('change_name', {
    newName: $('#new_nickname').val()
    }))

    $.mobile.changePage('#page_chat');

    return false;
    });

    $('#private_message_form').submit(function () {
    if (!$('#private_message_form').valid()) {
    return false;
    }

    chatClient.sendMessage(new module.exports.PrivateMessage($('#private_message').val() ,null, privateMessageReciever))

    $.mobile.changePage('#page_chat');
    return false;
    });
    }

    $(document).ready(function() {
    require('ChatClient.js', function() {
    require('Message.js', function() {
    initChat();
    });
    });
    });
    </script>
    </head>
    <body>
    <!-- Chat login -->
    <div data-role="page" id="page_login">
    <div data-theme="a" data-role="header">
    <h3>Caco's Chat</h3>
    </div>
    <div data-role="content">
    <form id="login_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="chatHost">Server</label>
    <input name="server" id="chatHost" placeholder="http://127.0.0.1" value="http://127.0.0.1" type="text" class="required url"/>
    </fieldset>
    </div>
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="chatPort">Port</label>
    <input name="port" id="chatPort" placeholder="8888" value="8888" type="text" class="required digits"/>
    </fieldset>
    </div>
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="nickname">Nickname</label>
    <input name="nickname" id="nickname" placeholder="" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-theme="b" data-icon="check" data-iconpos="left" value="Login" type="submit" />
    </form>
    </div>
    </div>
    <!-- Chat -->
    <div data-role="page" id="page_chat">
    <div data-theme="a" data-role="header">
    <a data-role="button" data-theme="b" href="#page_login" data-icon="back" data-iconpos="left" class="ui-btn-left" id="btn_logout">Logout</a>
    <h3>Chat</h3>
    <a data-role="button" data-theme="b" href="#page_users" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog" id="btn_users">Users</a>
    </div>
    <div data-role="content">
    <ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_area" />
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
    <form id="chat_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <label for="chat_message">Message</label>
    <input name="chat_message" id="chat_message" placeholder="Insert message here" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-theme="b" value="Send" type="submit" />
    </form>
    <a data-role="button" data-theme="b" href="#page_nickname" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog">Change name</a>
    </div>
    </div>
    <!-- Chat users -->
    <div data-role="page" id="page_users">
    <div data-theme="a" data-role="header">
    <h3>Users</h3>
    </div>
    <div data-role="content" id="chat_area" data-theme="b">
    <ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_users" />
    </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_nickname">
    <div data-theme="a" data-role="header">
    <h3>Change name</h3>
    </div>
    <div data-role="content" data-theme="b">
    <form id="change_name_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="new_nickname" id="new_nickname" placeholder="Nickname" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Save" type="submit" />
    </form>
    </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_private_message">
    <div data-theme="a" data-role="header">
    <h3>Private Message</h3>
    </div>
    <div data-role="content" data-theme="b">
    <form id="private_message_form" class="validate">
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <input name="private_message" id="private_message" placeholder="Private Message" value="" type="text" class="required"/>
    </fieldset>
    </div>
    <input data-icon="check" data-iconpos="left" value="Send" type="submit" />
    </form>
    </div>
    </div>
    <script>
    //App custom javascript
    </script>
    </body>
    </html>