|
@@ -0,0 +1,309 @@
|
|
|
+<!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 class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
|
|
+ <div class="flyout box-flyout">
|
|
|
+ <div class="dragresize dragresize-top"></div>
|
|
|
+ <div class="dragresize dragresize-topleft"></div>
|
|
|
+ <div class="dragresize dragresize-left"></div>
|
|
|
+ <div class="chat-head chat-head-chatroom">
|
|
|
+ <a class="close-chatbox-button icon-close"></a>
|
|
|
+ <a class="toggle-chatbox-button icon-minus"></a>
|
|
|
+ <a class="configure-chatroom-button icon-wrench" style=""></a>
|
|
|
+ <div class="chat-title"> Chatroom </div>
|
|
|
+ <p class="chatroom-topic">May the force be with you</p>
|
|
|
+ </div>
|
|
|
+ <div class="chatroom-body">
|
|
|
+ <div class="chat-area">
|
|
|
+ <div class="chat-content">
|
|
|
+ <div class="chat-message ">
|
|
|
+ <span class="chat-message-room">18:50 luke: </span>
|
|
|
+ <span class="chat-message-content">leia: hi :)</span>
|
|
|
+ </div>
|
|
|
+ <div class="chat-message ">
|
|
|
+ <span class="chat-message-room">19:40 leia: </span>
|
|
|
+ <span class="chat-message-content">
|
|
|
+ I'll be gone for a while, will be back in about an hour</span>
|
|
|
+ </div>
|
|
|
+ <time class="chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
|
|
+ <div class="chat-message ">
|
|
|
+ <span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master: </span>
|
|
|
+ <span class="chat-message-content">
|
|
|
+ I'll be gone for a while, will be back in about an hour</span>
|
|
|
+ </div>
|
|
|
+ <div class="chat-message">
|
|
|
+ <span class="chat-message-me">19:42 me: </span>
|
|
|
+ <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
|
|
+ </div>
|
|
|
+ <div class="chat-message ">
|
|
|
+ <span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master: </span>
|
|
|
+ <span class="chat-message-content">Another message to check that scrolling works.</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <form class="sendXMPPMessage" action="" method="post">
|
|
|
+ <ul class="chat-toolbar no-text-select">
|
|
|
+ <li class="toggle-smiley icon-happy" title="Insert a smiley">
|
|
|
+ <ul>
|
|
|
+ <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
|
|
|
+ <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
|
|
|
+ <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
|
|
|
+ <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
|
|
|
+ <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
|
|
|
+ <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
|
|
|
+ <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
|
|
|
+ <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
|
|
|
+ <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
|
|
|
+ <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
|
|
|
+ <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
|
|
|
+ <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
|
|
|
+ <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li class="toggle-participants"><a class="icon-hide-users" title="Hide the list of participants"></a></li>
|
|
|
+ <li class="toggle-clear"><a class="icon-remove" title="Clear all messages"></a></li>
|
|
|
+ </ul>
|
|
|
+ <textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div class="participants">
|
|
|
+ <form class="room-invite">
|
|
|
+ <span class="twitter-typeahead" style="position: relative; display: inline-block; direction: ltr;"><input class="invited-contact tt-hint" type="text" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1;"><input class="invited-contact tt-input" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre><span class="tt-dropdown-menu" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;"><div class="tt-dataset-contacts-dataset"></div></span></span>
|
|
|
+ </form>
|
|
|
+ <label>Occupants:</label>
|
|
|
+ <ul class="participant-list">
|
|
|
+ <li class="participant" title="This user can send messages in this room">Obi-wan Kenobi, Jedi Master</li>
|
|
|
+ <li class="participant" title="This user can send messages in this room">jabber the hut</li>
|
|
|
+ <li class="participant" title="This user can send messages in this room">leia</li>
|
|
|
+ <li class="moderator" title="This user is a moderator">luke</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
|
|
|
+ <div class="flyout box-flyout">
|
|
|
+ <div class="dragresize"></div>
|
|
|
+ <div class="chat-head chat-head-chatroom">
|
|
|
+ <a class="close-chatbox-button icon-close"></a>
|
|
|
+ <a class="toggle-chatbox-button icon-minus"></a>
|
|
|
+ <a class="configure-chatroom-button" style="display:none"> </a>
|
|
|
+ <div class="chat-title"> Restricted Chatroom</div>
|
|
|
+ <p class="chatroom-topic"></p>
|
|
|
+ <p></p>
|
|
|
+ </div>
|
|
|
+ <div class="chat-body">
|
|
|
+ <div class="chatroom-form-container">
|
|
|
+ <form class="chatroom-form">
|
|
|
+ <!-- TODO: Make this a long form that scrolls -->
|
|
|
+ <legend>This chatroom requires a password</legend>
|
|
|
+ <label>Password:</label>
|
|
|
+ <input type="password" name="password">
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="minimized-chats">
|
|
|
+ <a id="toggle-minimized-chats" href="#">
|
|
|
+ Minimized <span id="minimized-count">(0)</span>
|
|
|
+ <span class="unread-message-count" href="#" style="display:block">322</span>
|
|
|
+ </a>
|
|
|
+ <div class="flyout minimized-chats-flyout">
|
|
|
+ <div class="chat-head chat-head-chatroom">
|
|
|
+ <a class="close-chatbox-button icon-close"></a>
|
|
|
+ <a class="chat-head-message-count" href="#" style="display:block">3</a>
|
|
|
+ <div class="chat-title">
|
|
|
+ <a href="#" class="restore-chat" title="Click to maximize this chat">
|
|
|
+ Restricted Chatroom
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-head chat-head-chatbox">
|
|
|
+ <a class="close-chatbox-button icon-close"></a>
|
|
|
+ <a class="chat-head-message-count" href="#" style="display:block">42</a>
|
|
|
+ <div class="chat-title">
|
|
|
+ <a href="#" class="restore-chat" title="Click to maximize this chat">
|
|
|
+ JC Brand
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-head chat-head-chatroom">
|
|
|
+ <a class="close-chatbox-button icon-close"></a>
|
|
|
+ <div class="chat-title">
|
|
|
+ <a href="#" class="restore-chat" title="Click to maximize this chat">
|
|
|
+ My Chatroom
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
|
|
+ <div class="chat-title">
|
|
|
+ <a href="#" class="restore-chat" title="Click to maximize this chat">
|
|
|
+ Annegreet Gomez
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-head chat-head-chatbox">
|
|
|
+ <a class="close-chatbox-button icon-close"></a>
|
|
|
+ <a class="chat-head-message-count" href="#" style="display:block">842</a>
|
|
|
+ <div class="chat-title">
|
|
|
+ <a href="#" class="restore-chat" title="Click to maximize this chat">
|
|
|
+ Asmaa Haakman
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
|
|
+ <div class="chat-title">
|
|
|
+ <a href="#" class="restore-chat" title="Click to maximize this chat">
|
|
|
+ Candice van der Knijff
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
|
|
+ <div class="chat-title">
|
|
|
+ <a href="#" class="restore-chat" title="Click to maximize this chat">
|
|
|
+ Laura Grunewald
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
|
|
+ <div class="chat-title">
|
|
|
+ <a href="#" class="restore-chat">
|
|
|
+ Lena Grunewald
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </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[href=#register]').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" placeholder="Custom status"/>' +
|
|
|
+ '<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() {
|
|
|
+ $('.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-participants a').click(function (ev) {
|
|
|
+ var $el = $(ev.target);
|
|
|
+ if ($el.hasClass("icon-hide-users")) {
|
|
|
+ $el.removeClass('icon-hide-users').addClass('icon-show-users');
|
|
|
+ $('div.participants').animate({width: 0}).hide();
|
|
|
+ $el.closest('.chat-area').animate({width: '100%'});
|
|
|
+ $el.closest('form.sendXMPPMessage').animate({width: '100%'});
|
|
|
+ } else {
|
|
|
+ $el.removeClass('icon-show-users').addClass('icon-hide-users');
|
|
|
+ $el.closest('.chat-area').animate({width: '200px'}, function () {
|
|
|
+ $('div.participants').css({width: '100px'}).show();
|
|
|
+ });
|
|
|
+ $el.closest('form.sendXMPPMessage').animate({width: '200px'});
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.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>
|