223 lines
8.6 KiB
HTML
223 lines
8.6 KiB
HTML
<!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>
|