2014-12-07 12:24:16 +01: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>
|
|
|
|
|
<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 Chat Room Mockup</h2>
|
|
|
|
|
</header>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="conversejs">
|
2015-10-27 11:17:55 +01:00
|
|
|
<div class="chatbox chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
|
2015-09-24 19:41:35 +02:00
|
|
|
<div class="flyout box-flyout">
|
2014-12-07 12:24:16 +01:00
|
|
|
<div class="dragresize dragresize-tm"></div>
|
|
|
|
|
<div class="chat-head chat-head-chatroom">
|
2015-10-27 11:17:55 +01:00
|
|
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
|
|
|
|
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
|
|
|
|
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
|
2014-12-07 12:24:16 +01:00
|
|
|
<div class="chat-title"> discuss</div>
|
|
|
|
|
<p class="chatroom-topic"></p>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
2015-10-28 09:49:28 +01:00
|
|
|
<div class="chat-body chatroom-body">
|
2014-12-07 12:24:16 +01:00
|
|
|
<div class="chatroom-form-container">
|
2015-10-28 22:07:29 +01:00
|
|
|
<form class="pure-form pure-form-stacked converse-form chatroom-form">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Configuration for discuss@conference.conversejs.com</legend>
|
|
|
|
|
<p class="form-help">Complete and submit this form to configure the room.</p>
|
2014-12-07 12:24:16 +01:00
|
|
|
|
2015-10-28 22:07:29 +01:00
|
|
|
<input name="FORM_TYPE" type="hidden" value="http://jabber.org/protocol/muc#roomconfig">
|
|
|
|
|
|
|
|
|
|
<label>Name</label>
|
|
|
|
|
<input name="muc#roomconfig_roomname" type="text" value="xxx">
|
|
|
|
|
|
|
|
|
|
<label>Description</label>
|
|
|
|
|
<input name="muc#roomconfig_roomdesc" type="text">
|
|
|
|
|
|
|
|
|
|
<label for="foo" class="pure-checkbox">
|
|
|
|
|
Make Room Persistent?
|
|
|
|
|
<input id="foo" name="muc#roomconfig_persistentroom" type="checkbox">
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<label for="bar" class="pure-checkbox">
|
|
|
|
|
Make Room Publicly Searchable?
|
|
|
|
|
<input id="bar" name="muc#roomconfig_publicroom" type="checkbox" checked="1">
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<label for="baz" class="pure-checkbox">
|
|
|
|
|
Allow Occupants to Change Subject?
|
|
|
|
|
<input id="baz" name="muc#roomconfig_changesubject" type="checkbox">
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<label>Who May Discover Real JIDs?</label>
|
|
|
|
|
<select name="muc#roomconfig_whois"><option value="moderators" selected="selected">Moderators Only</option>
|
|
|
|
|
<option value="anyone">Anyone</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<label>Password</label>
|
|
|
|
|
<input name="muc#roomconfig_roomsecret" type="password">
|
|
|
|
|
|
|
|
|
|
<label for="buz" class="pure-checkbox">
|
|
|
|
|
Make Room Moderated?
|
|
|
|
|
<input id="buz" name="muc#roomconfig_moderatedroom" type="checkbox">
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<label for="blah" class="pure-checkbox">
|
|
|
|
|
Make Room Members-Only?
|
|
|
|
|
<input id="blah" name="muc#roomconfig_membersonly" type="checkbox">
|
|
|
|
|
</label>
|
2014-12-07 12:24:16 +01:00
|
|
|
|
|
|
|
|
<label>Maximum Number of History Messages Returned by Room</label>
|
2015-10-28 22:07:29 +01:00
|
|
|
<input name="muc#roomconfig_historylength" type="number" value="20">
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
2015-10-29 10:55:34 +01:00
|
|
|
<input type="submit" class="pure-button button-primary" value="Save">
|
2015-10-31 17:18:31 +01:00
|
|
|
<input type="button" class="pure-button button-cancel" value="Cancel">
|
2015-10-28 22:07:29 +01:00
|
|
|
</fieldset>
|
2015-10-31 17:18:31 +01:00
|
|
|
</form>
|
2014-12-07 12:24:16 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
$('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();
|
|
|
|
|
$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';
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2015-10-31 17:30:06 +01:00
|
|
|
$('.toggle-occupants a').click(function (ev) {
|
2014-12-07 12:24:16 +01:00
|
|
|
var $el = $(ev.target);
|
|
|
|
|
if ($el.hasClass("icon-hide-users")) {
|
|
|
|
|
$el.removeClass('icon-hide-users').addClass('icon-show-users');
|
2015-10-31 17:30:06 +01:00
|
|
|
$('div.occupants').animate({width: 0}).hide();
|
2014-12-07 12:24:16 +01:00
|
|
|
$el.closest('.chat-area').animate({width: '100%'});
|
|
|
|
|
$el.closest('form.sendXMPPMessage').animate({width: '100%'});
|
|
|
|
|
} else {
|
|
|
|
|
$el.removeClass('icon-show-users').addClass('icon-hide-users');
|
|
|
|
|
$el.closest('.chat-area').animate({width: '200px'}, function () {
|
2015-10-31 17:30:06 +01:00
|
|
|
$('div.occupants').css({width: '100px'}).show();
|
2014-12-07 12:24:16 +01:00
|
|
|
});
|
|
|
|
|
$el.closest('form.sendXMPPMessage').animate({width: '200px'});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('.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>
|
