Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity
f3ca08f165
xmpp.chapril.org-conversejs/mockup.html

209 lines
9.2 KiB
HTML
Raw Normal View History

Add mockup.html
2013-08-09 20:26:30 +02:00
<!DOCTYPE html>
Add initial support for minimizing chatboxes
2014-01-16 14:57:14 +01:00
<html lang="en" id="facebook">
Add mockup.html
2013-08-09 20:26:30 +02:00
<head>
Add initial support for minimizing chatboxes
2014-01-16 14:57:14 +01:00
<title id="pageTitle">Converse</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
<link type="text/css" rel="stylesheet" href="converse.css">
More work on the mockup. Add js to switch tabs
2013-08-11 14:38:40 +02:00
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Add mockup.html
2013-08-09 20:26:30 +02:00
</head>
<body>
Add initial support for minimizing chatboxes
2014-01-16 14:57:14 +01:00
<div id="conversejs">
Simplified the markup a bit. Also, added another chatbox and fixed reflow after closing a chatbox.
2014-01-17 03:22:57 +01:00
<div id="controlbox" class="chatbox">
<div class="nub-flyout">
<div class="chat-head oc-chat-head">
<ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
</div>
<div class="controlbox-panes">
<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>
More work on the mockup. Add js to switch tabs
2013-08-11 14:38:40 +02:00
</div>
Simplified the markup a bit. Also, added another chatbox and fixed reflow after closing a chatbox.
2014-01-17 03:22:57 +01:00
</div>
</div>
</div>
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="nub-flyout">
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
Add smiley support for chatrooms as well
2013-10-20 18:13:34 +02:00
Simplified the markup a bit. Also, added another chatbox and fixed reflow after closing a chatbox.
2014-01-17 03:22:57 +01:00
<a href="http://opkode.com" target="_blank" class="user">
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title"> JC Brand </div>
</a>
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
<p></p>
</div>
<div class="chat-content">
<div class="chat-info"><strong>/help</strong>:This is an info message</div>
<div class="chat-error">This is an error message</div>
<div class="chat-message">
<span class="chat-message-me">09:35 me:&nbsp;</span>
<span class="chat-message-content">
Hello world
<span class="icon-smiley"></span>
</span>
</div>
<div class="chat-message ">
<span class="chat-message-them">19:25 Benedict-John:&nbsp;</span>
<span class="chat-message-content">Dagsê</span>
</div>
<div class="chat-message">
<span class="chat-message-me">19:39 me:&nbsp;</span>
<span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
</div>
<div class="chat-message">
<span class="chat-message-me">19:42 me:&nbsp;</span>
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="chat-event">JC Brand is busy</div>
<div class="chat-message ">
<span class="chat-message-me">19:43 me:&nbsp;</span>
<span class="chat-message-content">Another message to check that scrolling works.</span>
</div>
Mockup: add chatroom with error, fix box heights.
2013-08-12 20:10:12 +02:00
</div>
Simplified the markup a bit. Also, added another chatbox and fixed reflow after closing a chatbox.
2014-01-17 03:22:57 +01:00
<form class="sendXMPPMessage" action="" method="post">
<ul class="chat-toolbar no-text-select">
<li class="toggle-smiley icon-happy" title="Insert a smilery">
<ul>
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
<li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
<li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
<li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
<li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
<li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
<li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
<li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
<li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
<li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
<li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
<li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
</ul>
</li>
<li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
<span class="chat-toolbar-text">unencrypted</span>
<span class="icon-unlocked"></span>
<ul>
<li><a href="#">Start private conversation</a></li>
<li><a href="#">End private conversation</a></li>
<li><a href="#">Authenticate buddy</a></li>
<li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
</ul>
</li>
</ul>
<textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
</form>
Mockup: add chatroom with error, fix box heights.
2013-08-12 20:10:12 +02:00
</div>
</div>
Simplified the markup a bit. Also, added another chatbox and fixed reflow after closing a chatbox.
2014-01-17 03:22:57 +01:00
Add mockup.html
2013-08-09 20:26:30 +02:00
</div>
Add smileys and minimize buttons to the mockup
2013-10-16 22:27:31 +02:00
Add mockup.html
2013-08-09 20:26:30 +02:00
<script>
More work on the mockup. Add js to switch tabs
2013-08-11 14:38:40 +02:00
$(document).ready(function () {
$('a[href=#chatrooms]').click(function (ev) {
switchTab(ev);
});
$('a[href=#users]').click(function (ev) {
switchTab(ev);
});
More tweaks and fixes
2013-08-12 21:32:00 +02:00
$("a.choose-xmpp-status").click(function (ev) {
ev.preventDefault();
$(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast');
});
Add custom status form to the mockup.
2013-08-27 22:24:25 +02:00
$("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();
});
More tweaks and fixes
2013-08-12 21:32:00 +02:00
$('.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();
}
});
});
More work on the mockup. Add js to switch tabs
2013-08-11 14:38:40 +02:00
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.fadeOut('fast', function () {
$sibling.removeClass('current');
$tab.addClass('current');
$tab_panel.fadeIn('fast', function () {
});
});
}
Add a dropdown menu for OTR
2013-08-25 21:42:24 +02:00
$(function() {
Add smileys and minimize buttons to the mockup
2013-10-16 22:27:31 +02:00
Simplified the markup a bit. Also, added another chatbox and fixed reflow after closing a chatbox.
2014-01-17 03:22:57 +01:00
$('.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';
});
});
Add smileys and minimize buttons to the mockup
2013-10-16 22:27:31 +02:00
$('.minimize-chatbox-button').click(function(ev) {
Add initial support for minimizing chatboxes
2014-01-16 14:57:14 +01:00
var $grandparent = $(ev.target).parent().parent();
if ($grandparent.attr('id') == 'controlbox') {
Simplified the markup a bit. Also, added another chatbox and fixed reflow after closing a chatbox.
2014-01-17 03:22:57 +01:00
$grandparent.find('div#login-dialog').slideToggle(300);
Add initial support for minimizing chatboxes
2014-01-16 14:57:14 +01:00
} else {
Simplified the markup a bit. Also, added another chatbox and fixed reflow after closing a chatbox.
2014-01-17 03:22:57 +01:00
$grandparent.find('div.chat-content').slideToggle(300);
Add initial support for minimizing chatboxes
2014-01-16 14:57:14 +01:00
}
Add smileys and minimize buttons to the mockup
2013-10-16 22:27:31 +02:00
$(ev.target).parent().parent().find('form.sendXMPPMessage').toggle();
});
Add a dropdown menu for OTR
2013-08-25 21:42:24 +02:00
// Clickable Dropdown
Add initial UI and handlers for starting OTR to converse.js
2013-08-25 22:10:32 +02:00
$('.toggle-otr').click(function(e) {
$('.toggle-otr ul').slideToggle(200);
Add a dropdown menu for OTR
2013-08-25 21:42:24 +02:00
e.stopPropagation();
});
Add smileys and minimize buttons to the mockup
2013-10-16 22:27:31 +02:00
$('.toggle-smiley').click(function(e) {
Add smiley support for chatrooms as well
2013-10-20 18:13:34 +02:00
$(e.target).find('ul').slideToggle(200);
Add smileys and minimize buttons to the mockup
2013-10-16 22:27:31 +02:00
e.stopPropagation();
});
$(document).click(function() {
Add smiley support for chatrooms as well
2013-10-20 18:13:34 +02:00
if ($('.toggle-otr ul').is(':visible')) {
$('.toggle-otr ul', this).slideUp(200);
}
Add smileys and minimize buttons to the mockup
2013-10-16 22:27:31 +02:00
if ($('.toggle-smiley ul').is(':visible')) {
$('.toggle-smiley ul', this).slideUp(200);
}
});
Add a dropdown menu for OTR
2013-08-25 21:42:24 +02:00
});
More work on the mockup. Add js to switch tabs
2013-08-11 14:38:40 +02:00
});
Add mockup.html
2013-08-09 20:26:30 +02:00
</script>
</html>
Reference in New Issue Copy Permalink