|
|
@@ -0,0 +1,222 @@
|
|
|
+<!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">Friends Online</span>
|
|
|
+ <span id="online-count">(0)</span>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div id="controlbox" class="chatbox" style="display: none;">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div id="trimmed-chatboxes">
|
|
|
+ <div class="box-flyout">
|
|
|
+ <div class="minimized-chats">
|
|
|
+ <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">
|
|
|
+ <div class="chat-head-message-count" style="display:block">3</div>
|
|
|
+ Restricted 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">
|
|
|
+ <div class="chat-head-message-count" style="display:block">42</div>
|
|
|
+ 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>
|
|
|
+ <div class="chat-title">
|
|
|
+ <a href="#" class="restore-chat" title="Click to maximize this chat">
|
|
|
+ <div class="chat-head-message-count" style="display:block">842</div>
|
|
|
+ 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 href="#" class="toggle-minimized-chats">
|
|
|
+ <span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
|
|
|
+ <a class="icon-close"></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+$(document).ready(function () {
|
|
|
+ var refreshWebkit = function () {
|
|
|
+ /* This works around a webkit bug. Refresh the browser's viewport,
|
|
|
+ * otherwise chatboxes are not moved along when one is closed.
|
|
|
+ */
|
|
|
+ var conversejs = document.getElementById('conversejs');
|
|
|
+ conversejs.style.display = 'none';
|
|
|
+ conversejs.offsetHeight = conversejs.offsetHeight; // no need to store this anywhere, the reference is enough
|
|
|
+ conversejs.style.display = 'block';
|
|
|
+ }
|
|
|
+
|
|
|
+ $('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() {
|
|
|
+ $('.close-chatbox-button').click(function(ev) {
|
|
|
+ var $grandparent = $(ev.target).parent().parent().parent();
|
|
|
+ $('#toggle-controlbox').toggle();
|
|
|
+ $grandparent.hide(300, function () {
|
|
|
+ refreshWebkit();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ $('#toggle-controlbox').click(function(ev) {
|
|
|
+ $('#toggle-controlbox').toggle('fast', function () {
|
|
|
+ refreshWebkit();
|
|
|
+ });
|
|
|
+ $('#controlbox').toggle();
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.toggle-minimized-chats').click(function(ev) {
|
|
|
+ $('.minimized-chats').toggle();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 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