74aa6021f4
Only leftward resizing is allowed since there's no space for boxes to expand on the right. Text area of chat boxes don't yet resize properly. Didn't test at all on chat rooms.
222 lines
8.3 KiB
HTML
222 lines
8.3 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">Toggle Chat</span>
|
|
<span id="online-count">(0)</span>
|
|
</a>
|
|
|
|
<div id="controlbox" class="chatbox" style="display: none;">
|
|
<div class="flyout box-flyout">
|
|
<div class="dragresize"></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="minimized-chats" style="display: block">
|
|
<a id="toggle-minimized-chats" href="#">
|
|
<span>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="#">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="#">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="#">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 () {
|
|
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-flyout').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>
|