|
@@ -0,0 +1,352 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="en">
|
|
|
|
|
+<head>
|
|
|
|
|
+ <title id="pageTitle">Converse.js: Mockup</title>
|
|
|
|
|
+ <meta charset="utf-8">
|
|
|
|
|
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
+ <meta name="description" content="Converse.js: Mockup" />
|
|
|
|
|
+ <link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
|
|
|
|
|
+ <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
|
|
|
|
|
+ <script src="../components/jquery/dist/jquery.min.js"></script>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
|
|
|
|
|
+
|
|
|
|
|
+<!-- HEADER -->
|
|
|
|
|
+<div id="header_wrap" class="outer">
|
|
|
|
|
+ <header class="inner">
|
|
|
|
|
+ <h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
|
|
|
|
|
+ <h2 id="project_tagline">Static Mockup</h2>
|
|
|
|
|
+ </header>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<div id="conversejs">
|
|
|
|
|
+ <a id="toggle-controlbox" href="#" class="toggle-controlbox">
|
|
|
|
|
+ <span class="conn-feedback">Toggle Chat</span>
|
|
|
|
|
+ <span style="display: none" id="online-count">(0)</span>
|
|
|
|
|
+ </a>
|
|
|
|
|
+
|
|
|
|
|
+ <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
|
|
|
|
+ <div class="box-flyout">
|
|
|
|
|
+ <div class="dragresize dragresize-tm"></div>
|
|
|
|
|
+ <div class="chat-head controlbox-head">
|
|
|
|
|
+ <ul id="controlbox-tabs">
|
|
|
|
|
+ <li><a class="current" href="#login">Sign in</a></li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <a class="close-chatbox-button icon-close"></a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="login-dialog">
|
|
|
|
|
+ <form id="converse-login">
|
|
|
|
|
+ <label>XMPP/Jabber Username:</label><input type="text" id="jid">
|
|
|
|
|
+ <label>Password:</label><input type="password" id="password">
|
|
|
|
|
+ <input class="login-submit" type="submit" value="Log In">
|
|
|
|
|
+ </form>
|
|
|
|
|
+ <span class="conn-feedback"></span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
|
|
|
|
+ <div class="box-flyout">
|
|
|
|
|
+ <div class="dragresize dragresize-tm"></div>
|
|
|
|
|
+ <div class="chat-head controlbox-head">
|
|
|
|
|
+ <ul id="controlbox-tabs">
|
|
|
|
|
+ <li><a class="s current" href="#users">Contacts</a></li>
|
|
|
|
|
+ <li><a class="s" href="#chatrooms">Rooms</a></li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <a class="close-chatbox-button icon-close"></a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="users" class="controlbox-pane" style="display: block;">
|
|
|
|
|
+ <form class="set-xmpp-status" action="" method="post">
|
|
|
|
|
+ <span id="xmpp-status-holder">
|
|
|
|
|
+ <dl id="target" class="dropdown">
|
|
|
|
|
+ <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
|
|
|
|
|
+ <div class="xmpp-status">
|
|
|
|
|
+ <a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
|
|
|
|
|
+ <span class="icon-online"></span>
|
|
|
|
|
+ I am online
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </dt>
|
|
|
|
|
+ <dd>
|
|
|
|
|
+ <ul style="display: none;" class="xmpp-status-menu">
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <a href="#" class="online" data-value="online">
|
|
|
|
|
+ <span class="icon-online"></span>
|
|
|
|
|
+ Online</a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <a href="#" class="dnd" data-value="dnd">
|
|
|
|
|
+ <span class="icon-dnd"></span>
|
|
|
|
|
+ Busy</a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <a href="#" class="away" data-value="away">
|
|
|
|
|
+ <span class="icon-away"></span>
|
|
|
|
|
+ Away</a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <a href="#" class="offline" data-value="offline">
|
|
|
|
|
+ <span class="icon-offline"></span>
|
|
|
|
|
+ Offline</a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </form>
|
|
|
|
|
+ <dl class="add-converse-contact dropdown">
|
|
|
|
|
+ <dt id="xmpp-contact-search" class="fancy-dropdown">
|
|
|
|
|
+ <a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
|
|
|
|
|
+ <span class="icon-plus"></span>
|
|
|
|
|
+ Add a contact
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </dt>
|
|
|
|
|
+ <dd class="search-xmpp" style="display:none">
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <form class="add-xmpp-contact">
|
|
|
|
|
+ <input type="text" name="identifier" class="username" placeholder="Contact username">
|
|
|
|
|
+ <button type="submit">Add</button>
|
|
|
|
|
+ </form>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li></li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ <dl id="converse-roster" style="display: block;">
|
|
|
|
|
+ <dt id="xmpp-contacts" style="display: block;">
|
|
|
|
|
+ <a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Colleagues</a>
|
|
|
|
|
+ </dt>
|
|
|
|
|
+ <dd class="online current-xmpp-contact">
|
|
|
|
|
+ <a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
+ <span class="icon-online" title="This contact is online"></span>
|
|
|
|
|
+ Victor Matfield
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ <dd class="away current-xmpp-contact">
|
|
|
|
|
+ <a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
+ <span class="icon-away" title="this contact is away"></span>
|
|
|
|
|
+ William Winterbottom
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ <dd class="dnd current-xmpp-contact">
|
|
|
|
|
+ <a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
+ <span class="icon-dnd" title="This contact is busy"></span>
|
|
|
|
|
+ Gary Teichmann
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+
|
|
|
|
|
+ <dt id="xmpp-contacts" style="display: block;">
|
|
|
|
|
+ <a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Family</a>
|
|
|
|
|
+ </dt>
|
|
|
|
|
+ <dd class="away current-xmpp-contact">
|
|
|
|
|
+ <a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
+ <span class="icon-away" title="this contact is away"></span>
|
|
|
|
|
+ Allan Donald
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ <dd class="offline current-xmpp-contact">
|
|
|
|
|
+ <a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
+ <span class="icon-offline" title="This contact is offline"></span>
|
|
|
|
|
+ Corné Krige
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+
|
|
|
|
|
+ <dt id="xmpp-contacts" style="display: block;">
|
|
|
|
|
+ <a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Friends</a>
|
|
|
|
|
+ </dt>
|
|
|
|
|
+ <dd class="online current-xmpp-contact">
|
|
|
|
|
+ <a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
+ <span class="icon-online" title="This contact is online"></span>
|
|
|
|
|
+ John Smit
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ <dd class="online current-xmpp-contact">
|
|
|
|
|
+ <a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
+ <span class="icon-online" title="This contact is online"></span>
|
|
|
|
|
+ Bakkies Botha
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+
|
|
|
|
|
+ <dt id="xmpp-contacts" style="display: block;">
|
|
|
|
|
+ <a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Ungrouped</a>
|
|
|
|
|
+ </dt>
|
|
|
|
|
+ <dd class="online current-xmpp-contact">
|
|
|
|
|
+ <a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
+ <span class="icon-online" title="This contact is online"></span>
|
|
|
|
|
+ James Small
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+
|
|
|
|
|
+ <dt id="xmpp-contact-requests" style="display: block;">
|
|
|
|
|
+ <a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Contact Requests</a>
|
|
|
|
|
+ </dt>
|
|
|
|
|
+ <dd class="offline requesting-xmpp-contact">
|
|
|
|
|
+ <span>Bob Skinstad</span>
|
|
|
|
|
+ <span class="request-actions">
|
|
|
|
|
+ <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
|
|
|
|
+ <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ <dd class="offline requesting-xmpp-contact">
|
|
|
|
|
+ <span>André Vos</span>
|
|
|
|
|
+ <span class="request-actions">
|
|
|
|
|
+ <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
|
|
|
|
+ <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+
|
|
|
|
|
+ <dt id="pending-xmpp-contacts" style="display: block;">
|
|
|
|
|
+ <a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Pending Contacts</a>
|
|
|
|
|
+ </dt>
|
|
|
|
|
+ <dd class="offline pending-xmpp-contact"><span>Rassie Erasmus</span>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ <dd class="offline pending-xmpp-contact"><span>Victor Matfield</span>
|
|
|
|
|
+ <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="chatrooms" style="display: none;">
|
|
|
|
|
+ <form class="add-chatroom" action="" method="post">
|
|
|
|
|
+ <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
|
|
|
|
|
+ <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
|
|
|
|
|
+ <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
|
|
|
|
|
+ <input type="submit" name="join" value="Join">
|
|
|
|
|
+ <input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
|
|
|
|
|
+ </form>
|
|
|
|
|
+ <dl id="available-chatrooms">
|
|
|
|
|
+ <dt>Rooms on conference.opkode.im</dt>
|
|
|
|
|
+ <dd class="available-chatroom">
|
|
|
|
|
+ <a class="open-room"
|
|
|
|
|
+ data-room-jid="converse.js@conference.opkode.im"
|
|
|
|
|
+ title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
|
|
|
|
|
+ <a class="room-info icon-room-info"
|
|
|
|
|
+ data-room-jid="converse.js@conference.opkode.im"
|
|
|
|
|
+ title="Show more information on this room" href="#"> </a>
|
|
|
|
|
+ <div class="room-info">
|
|
|
|
|
+ <p class="room-info"><strong>Description:</strong></p>
|
|
|
|
|
+ <p class="room-info"><strong>Occupants:</strong> 2</p>
|
|
|
|
|
+ <p class="room-info"><strong>Features:</strong> </p>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li class="room-info">Moderated</li><li class="room-info">Open room</li>
|
|
|
|
|
+ <li class="room-info">Permanent room</li><li class="room-info">Public</li>
|
|
|
|
|
+ <li class="room-info">Semi-anonymous</li>
|
|
|
|
|
+ <li class="room-info">Requires authentication <span class="icon-lock"></span></li>
|
|
|
|
|
+ <p></p>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+$(document).ready(function () {
|
|
|
|
|
+ $('a[href=#chatrooms]').click(function (ev) {
|
|
|
|
|
+ switchTab(ev);
|
|
|
|
|
+ });
|
|
|
|
|
+ $('a[href=#users]').click(function (ev) {
|
|
|
|
|
+ switchTab(ev);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ $("a.choose-xmpp-status").click(function (ev) {
|
|
|
|
|
+ ev.preventDefault();
|
|
|
|
|
+ $(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast');
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ $("a.change-xmpp-status-message").click(function (ev) {
|
|
|
|
|
+ ev.preventDefault();
|
|
|
|
|
+ var form = ''+
|
|
|
|
|
+ '<form id="set-custom-xmpp-status">' +
|
|
|
|
|
+ '<input type="text" class="custom-xmpp-status"I am online"'+
|
|
|
|
|
+ 'placeholder="I am online"/>' +
|
|
|
|
|
+ '<button type="submit">Save</button>' +
|
|
|
|
|
+ '</form>';
|
|
|
|
|
+
|
|
|
|
|
+ $(ev.target).closest('.xmpp-status').replaceWith(form);
|
|
|
|
|
+ $(ev.target).closest('.custom-xmpp-status').focus().focus();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ $('.toggle-xmpp-contact-form').click(function (ev) {
|
|
|
|
|
+ ev.preventDefault();
|
|
|
|
|
+ $(ev.target).parent().parent().find('.search-xmpp').toggle('fast', function () {
|
|
|
|
|
+ if ($(this).is(':visible')) {
|
|
|
|
|
+ $(this).find('input.username').focus();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ var switchTab = function (ev) {
|
|
|
|
|
+ ev.preventDefault();
|
|
|
|
|
+ var $tab = $(ev.target),
|
|
|
|
|
+ $sibling = $tab.parent().siblings('li').children('a'),
|
|
|
|
|
+ $tab_panel = $($tab.attr('href')),
|
|
|
|
|
+ $sibling_panel = $($sibling.attr('href'));
|
|
|
|
|
+
|
|
|
|
|
+ $sibling_panel.hide();
|
|
|
|
|
+ $sibling.removeClass('current');
|
|
|
|
|
+ $tab.addClass('current');
|
|
|
|
|
+ $tab_panel.show();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ $(function() {
|
|
|
|
|
+ $('.roster-group').click(function(ev) {
|
|
|
|
|
+ ev.preventDefault();
|
|
|
|
|
+ var $el = $(ev.target);
|
|
|
|
|
+ $el.parent().nextUntil('dt').slideToggle();
|
|
|
|
|
+ if ($el.hasClass("icon-opened")) {
|
|
|
|
|
+ $el.removeClass("icon-opened").addClass("icon-closed");
|
|
|
|
|
+ } else {
|
|
|
|
|
+ $el.removeClass("icon-closed").addClass("icon-opened");
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ $('.close-chatbox-button').click(function(ev) {
|
|
|
|
|
+ var $grandparent = $(ev.target).parent().parent().parent();
|
|
|
|
|
+ $grandparent.hide(300, function () {
|
|
|
|
|
+ // Webkit fix
|
|
|
|
|
+ document.getElementById('conversejs').style.display = 'none';
|
|
|
|
|
+ document.getElementById('conversejs').offsetHeight; // no need to store this anywhere, the reference is enough
|
|
|
|
|
+ document.getElementById('conversejs').style.display = 'block';
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ $('.toggle-chatbox-button').click(function(ev) {
|
|
|
|
|
+ var $grandparent = $(ev.target).parent().parent().parent();
|
|
|
|
|
+ $grandparent.fadeOut('fast');
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // Clickable Dropdown
|
|
|
|
|
+ $('.toggle-otr').click(function(e) {
|
|
|
|
|
+ $('.toggle-otr ul').slideToggle(200);
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ $('.toggle-smiley').click(function(e) {
|
|
|
|
|
+ $(e.target).find('ul').slideToggle(200);
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ });
|
|
|
|
|
+ $(document).click(function() {
|
|
|
|
|
+ if ($('.toggle-otr ul').is(':visible')) {
|
|
|
|
|
+ $('.toggle-otr ul', this).slideUp(200);
|
|
|
|
|
+ }
|
|
|
|
|
+ if ($('.toggle-smiley ul').is(':visible')) {
|
|
|
|
|
+ $('.toggle-smiley ul', this).slideUp(200);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+});
|
|
|
|
|
+</script>
|
|
|
|
|
+</html>
|
JC Brand