2014-07-19 16:26:44 +02:00
|
|
|
<!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>
|
2015-10-29 08:51:55 +01:00
|
|
|
<body id="page-top" data-spy="scroll" data-target=".navbar-custom" style="background-color: white">
|
2014-07-19 16:26:44 +02:00
|
|
|
|
|
|
|
|
<!-- 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 id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
2015-09-24 19:41:35 +02:00
|
|
|
<div class="flyout box-flyout">
|
2015-10-29 08:12:13 +01:00
|
|
|
<div class="dragresize dragresize-top"></div>
|
|
|
|
|
<div class="dragresize dragresize-topleft"></div>
|
|
|
|
|
<div class="dragresize dragresize-left"></div>
|
2014-07-19 16:26:44 +02:00
|
|
|
<div class="chat-head controlbox-head">
|
|
|
|
|
<ul id="controlbox-tabs">
|
2015-10-29 08:12:13 +01:00
|
|
|
<li><a class="current" href="#login-dialog">Sign in</a></li>
|
|
|
|
|
<li><a class="s" href="#register">Register</a></li>
|
2014-07-19 16:26:44 +02:00
|
|
|
</ul>
|
2015-10-29 08:12:13 +01:00
|
|
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
2014-07-19 16:26:44 +02:00
|
|
|
</div>
|
2015-10-29 08:12:13 +01:00
|
|
|
<div class="controlbox-panes">
|
|
|
|
|
<div id="login-dialog" class="controlbox-pane">
|
|
|
|
|
<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
|
|
|
|
|
<label>XMPP Username:</label>
|
|
|
|
|
<input type="text" name="jid" placeholder="user@server">
|
|
|
|
|
<label>Password:</label>
|
|
|
|
|
<input type="password" name="password" placeholder="password">
|
2015-10-29 10:55:34 +01:00
|
|
|
<input class="pure-button button-primary" type="submit" value="Log In">
|
2014-11-16 12:47:30 +01:00
|
|
|
<span class="conn-feedback"></span>
|
2014-07-19 16:26:44 +02:00
|
|
|
</form>
|
2015-10-29 08:12:13 +01:00
|
|
|
</div>
|
|
|
|
|
<div id="register" class="controlbox-pane" style="display: none;">
|
|
|
|
|
<form id="converse-register" class="pure-form converse-form">
|
|
|
|
|
<span class="reg-feedback"></span>
|
|
|
|
|
<label>Your XMPP provider's domain name:</label>
|
|
|
|
|
<input type="text" name="domain" placeholder=" e.g. conversejs.org">
|
|
|
|
|
<p class="form-help">
|
|
|
|
|
Tip: A list of public XMPP providers is available
|
|
|
|
|
<a href="https://xmpp.net/directory.php" class="url" target="_blank">here</a>.
|
|
|
|
|
</p>
|
2015-10-29 10:55:34 +01:00
|
|
|
<input class="pure-button button-primary" type="submit" value="Fetch registration form">
|
2015-10-29 08:12:13 +01:00
|
|
|
</form>
|
|
|
|
|
</div>
|
2014-07-19 16:26:44 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
2015-09-24 19:41:35 +02:00
|
|
|
<div class="flyout box-flyout">
|
2015-10-29 08:12:13 +01:00
|
|
|
<div class="dragresize dragresize-top"></div>
|
|
|
|
|
<div class="dragresize dragresize-topleft"></div>
|
|
|
|
|
<div class="dragresize dragresize-left"></div>
|
2014-07-19 16:26:44 +02:00
|
|
|
<div class="chat-head controlbox-head">
|
|
|
|
|
<ul id="controlbox-tabs">
|
|
|
|
|
<li><a class="s current" href="#users">Contacts</a></li>
|
|
|
|
|
<li><a class="s" href="#chatrooms">Rooms</a></li>
|
|
|
|
|
</ul>
|
2015-10-29 08:12:13 +01:00
|
|
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
2014-07-19 16:26:44 +02:00
|
|
|
</div>
|
|
|
|
|
<div id="users" class="controlbox-pane" style="display: block;">
|
|
|
|
|
<form class="set-xmpp-status" action="" method="post">
|
|
|
|
|
<span id="xmpp-status-holder">
|
2015-11-02 01:10:34 +01:00
|
|
|
<dl id="target" class="dropdown">
|
|
|
|
|
<dt id="fancy-xmpp-status-select" class="fancy-dropdown">
|
|
|
|
|
<div class="xmpp-status">
|
|
|
|
|
<a class="choose-xmpp-status online icon-online" data-value="I am online" href="#" title="Click to change your chat status">
|
|
|
|
|
I am online
|
|
|
|
|
</a>
|
|
|
|
|
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</dt>
|
|
|
|
|
<dd>
|
|
|
|
|
<ul style="display: none;" class="xmpp-status-menu">
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#" class="online icon-online" data-value="online">Online</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#" class="dnd icon-dnd" data-value="dnd">Busy</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#" class="away icon-away" data-value="away">Away</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#" class="offline icon-offline" data-value="offline">Offline</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</dd>
|
|
|
|
|
</dl>
|
2014-07-19 16:26:44 +02:00
|
|
|
</span>
|
|
|
|
|
</form>
|
|
|
|
|
<dl class="add-converse-contact dropdown">
|
|
|
|
|
<dt id="xmpp-contact-search" class="fancy-dropdown">
|
2015-11-02 01:10:34 +01:00
|
|
|
<a class="toggle-xmpp-contact-form icon-plus" href="#" title="Click to add new chat contacts">
|
2014-07-19 16:26:44 +02:00
|
|
|
Add a contact
|
|
|
|
|
</a>
|
|
|
|
|
</dt>
|
|
|
|
|
<dd class="search-xmpp" style="display:none">
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
2015-10-30 18:40:11 +01:00
|
|
|
<form class="pure-form add-xmpp-contact">
|
2015-11-02 01:10:34 +01:00
|
|
|
<input type="text" name="identifier" class="username" placeholder="e.g. user@example">
|
2015-10-30 18:40:11 +01:00
|
|
|
<button class="pure-button button-primary" type="submit">Add</button>
|
2014-07-19 16:26:44 +02:00
|
|
|
</form>
|
|
|
|
|
</li>
|
|
|
|
|
<li></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</dd>
|
|
|
|
|
</dl>
|
2014-08-07 21:27:42 +02:00
|
|
|
<div id="converse-roster">
|
2015-10-30 19:47:13 +01:00
|
|
|
<form class="pure-form roster-filter-group input-button-group">
|
2015-10-29 08:12:13 +01:00
|
|
|
<input class="roster-filter" placeholder="Type to filter">
|
|
|
|
|
<select class="filter-type">
|
|
|
|
|
<option value="contacts">Contacts</option>
|
|
|
|
|
<option value="groups">Groups</option>
|
|
|
|
|
</select>
|
2015-10-30 19:47:13 +01:00
|
|
|
</form>
|
2015-10-29 08:12:13 +01:00
|
|
|
|
2014-08-07 21:27:42 +02:00
|
|
|
<dl class="roster-contacts" style="display: block;">
|
|
|
|
|
<dt class="roster-group" style="display: block;">
|
2015-11-02 01:10:34 +01:00
|
|
|
<a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Colleagues</a>
|
2014-08-07 21:27:42 +02:00
|
|
|
</dt>
|
|
|
|
|
<dd class="online current-xmpp-contact">
|
2015-10-29 08:12:13 +01:00
|
|
|
<a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
|
2014-08-07 21:27:42 +02:00
|
|
|
<span class="icon-online" title="This contact is online"></span>
|
|
|
|
|
Victor Matfield
|
|
|
|
|
</a>
|
|
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="away current-xmpp-contact">
|
|
|
|
|
<a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
<span class="icon-away" title="this contact is away"></span>
|
|
|
|
|
William Winterbottom
|
|
|
|
|
</a>
|
|
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="dnd current-xmpp-contact">
|
|
|
|
|
<a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
<span class="icon-dnd" title="This contact is busy"></span>
|
|
|
|
|
Gary Teichmann
|
|
|
|
|
</a>
|
|
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dt class="roster-group" style="display: block;">
|
2015-11-02 01:10:34 +01:00
|
|
|
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Family</a>
|
2014-08-07 21:27:42 +02:00
|
|
|
</dt>
|
|
|
|
|
<dd class="away current-xmpp-contact">
|
|
|
|
|
<a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
<span class="icon-away" title="this contact is away"></span>
|
|
|
|
|
Allan Donald
|
|
|
|
|
</a>
|
|
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="offline current-xmpp-contact">
|
|
|
|
|
<a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
<span class="icon-offline" title="This contact is offline"></span>
|
|
|
|
|
Corné Krige
|
|
|
|
|
</a>
|
|
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dt class="roster-group" style="display: block;">
|
2015-11-02 01:10:34 +01:00
|
|
|
<a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Friends</a>
|
2014-08-07 21:27:42 +02:00
|
|
|
</dt>
|
|
|
|
|
<dd class="online current-xmpp-contact">
|
|
|
|
|
<a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
<span class="icon-online" title="This contact is online"></span>
|
|
|
|
|
John Smit
|
|
|
|
|
</a>
|
|
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="online current-xmpp-contact">
|
|
|
|
|
<a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
<span class="icon-online" title="This contact is online"></span>
|
|
|
|
|
Bakkies Botha
|
|
|
|
|
</a>
|
|
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dt class="roster-group" style="display: block;">
|
2015-11-02 01:10:34 +01:00
|
|
|
<a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Ungrouped</a>
|
2014-08-07 21:27:42 +02:00
|
|
|
</dt>
|
|
|
|
|
<dd class="online current-xmpp-contact">
|
|
|
|
|
<a class="open-chat" title="Click to chat with this contact" href="#">
|
|
|
|
|
<span class="icon-online" title="This contact is online"></span>
|
|
|
|
|
James Small
|
|
|
|
|
</a>
|
|
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
2015-10-29 08:12:13 +01:00
|
|
|
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
|
2015-11-02 01:10:34 +01:00
|
|
|
<a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Contact Requests</a>
|
2014-08-07 21:27:42 +02:00
|
|
|
</dt>
|
|
|
|
|
<dd class="offline requesting-xmpp-contact">
|
2015-10-29 08:12:13 +01:00
|
|
|
<span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
|
2014-08-07 21:27:42 +02:00
|
|
|
<span class="request-actions">
|
|
|
|
|
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
|
|
|
|
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
|
|
|
|
</span>
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="offline requesting-xmpp-contact">
|
|
|
|
|
<span class="req-contact-name">André Vos</span>
|
|
|
|
|
<span class="request-actions">
|
|
|
|
|
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
|
|
|
|
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
|
|
|
|
</span>
|
|
|
|
|
</dd>
|
2014-07-19 16:26:44 +02:00
|
|
|
|
2015-10-29 08:12:13 +01:00
|
|
|
<dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
|
2014-08-07 21:27:42 +02:00
|
|
|
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
|
|
|
|
|
</dt>
|
2015-10-29 08:12:13 +01:00
|
|
|
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
2014-08-07 21:27:42 +02:00
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
|
|
|
|
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
|
|
|
|
</dd>
|
|
|
|
|
</dl>
|
|
|
|
|
</div>
|
2015-10-29 08:12:13 +01:00
|
|
|
</div>
|
2014-11-16 12:47:30 +01:00
|
|
|
|
2015-10-30 19:08:25 +01:00
|
|
|
<div id="chatrooms" class="controlbox-pane" style="display: none">
|
2015-10-29 08:12:13 +01:00
|
|
|
<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Join an existing room or create a new one</legend>
|
|
|
|
|
<label>Room name</label>
|
|
|
|
|
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
|
|
|
|
|
<label>Nickname</label>
|
|
|
|
|
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
|
2015-10-29 10:55:34 +01:00
|
|
|
<input type="submit" class="pure-button button-primary" name="join" value="Open Room">
|
2015-10-29 08:12:13 +01:00
|
|
|
</fieldset>
|
2014-11-16 12:47:30 +01:00
|
|
|
|
2015-10-29 08:12:13 +01:00
|
|
|
<fieldset>
|
|
|
|
|
<label>Server</label>
|
|
|
|
|
<!-- TODO: this must be a tooltip
|
|
|
|
|
<p class="form-help">Rooms are hosted on XMPP servers. You need to specify a server on which the room you want to join is hosted. </p>
|
|
|
|
|
-->
|
|
|
|
|
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
|
2015-10-29 10:55:34 +01:00
|
|
|
<input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="Show rooms">
|
2015-10-29 08:12:13 +01:00
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
<dl id="available-chatrooms">
|
|
|
|
|
<dt>Rooms on conference.myserver.com</dt>
|
|
|
|
|
<dd class="available-chatroom">
|
|
|
|
|
<a class="open-room" data-room-jid="eee@conference.opkode.com" title="Click to open this room" href="#">Current Events</a>
|
|
|
|
|
<a class="room-info icon-room-info" data-room-jid="eee@conference.opkode.com" title="Show more information on this room" href="#"> </a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="available-chatroom">
|
2015-10-30 18:33:14 +01:00
|
|
|
<a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Software Development Techniques</a>
|
|
|
|
|
<a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#"> </a>
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="available-chatroom">
|
|
|
|
|
<a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Support</a>
|
2015-10-29 08:12:13 +01:00
|
|
|
<a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#"> </a>
|
|
|
|
|
</dd>
|
|
|
|
|
</dl>
|
|
|
|
|
</dl>
|
|
|
|
|
</div>
|
2014-07-19 16:26:44 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
$('a[href=#chatrooms]').click(function (ev) {
|
|
|
|
|
switchTab(ev);
|
|
|
|
|
});
|
|
|
|
|
$('a[href=#users]').click(function (ev) {
|
|
|
|
|
switchTab(ev);
|
|
|
|
|
});
|
2014-11-16 12:47:30 +01:00
|
|
|
$('a[href=#register]').click(function (ev) {
|
|
|
|
|
switchTab(ev);
|
|
|
|
|
});
|
|
|
|
|
$('a[href=#login]').click(function (ev) {
|
|
|
|
|
switchTab(ev);
|
|
|
|
|
});
|
2014-07-19 16:26:44 +02:00
|
|
|
|
|
|
|
|
$("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() {
|
2014-07-19 19:14:29 +02:00
|
|
|
$('.group-toggle').click(function(ev) {
|
2014-07-19 16:26:44 +02:00
|
|
|
ev.preventDefault();
|
|
|
|
|
var $el = $(ev.target);
|
|
|
|
|
$el.parent().nextUntil('dt').slideToggle();
|
|
|
|
|
if ($el.hasClass("icon-opened")) {
|
|
|
|
|
$el.removeClass("icon-opened").addClass("icon-closed");
|
|
|
|
|
} else {
|
|
|
|
|
$el.removeClass("icon-closed").addClass("icon-opened");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('.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-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>
|
