205 lines
7.7 KiB
HTML
205 lines
7.7 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" style="background-color: white">
|
|
|
|
<!-- 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="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="chatbox-btn 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="chatbox-btn 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="chatbox-btn 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="chatbox-btn 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="chatbox-btn 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="chatbox-btn 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="chatbox-btn 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="chatbox-btn 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>
|