Skip to content

C
converse.js
Commit e2e2a80a authored by JC Brand's avatar JC Brand
Browse files
Options

Add the dragresize code to the static mockup and tweak it a bit 

Removed unused css and html files.
parent c46b5cc7
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 302 deletions
converse.css
View file @ e2e2a80a
......@@ -447,12 +447,18 @@ ul.participant-list li.moderator {
padding: 4px;
font-size: 13px;
color: rgb(79, 79, 79);
height:190px;
width: 192px;
overflow-y:auto;
border: 0;
background-color: #ffffff;
line-height: 1.3em;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* FIXME */
height: -webkit-calc(100% - 125px);
height: -moz-calc(100% - 125px);
height: -o-calc(100% - 125px);
height: calc(100% - 125px);
}
.chat-info {
......@@ -1263,7 +1269,7 @@ form.add-xmpp-contact input {
display: block;
}
.nub-flyout {
.box-flyout {
position: absolute;
display: block;
bottom: 0;
......@@ -1271,10 +1277,22 @@ form.add-xmpp-contact input {
border-radius: 4px;
}
.chatbox .nub-flyout {
.chatbox .box-flyout {
width: 200px;
}
.chatroom .nub-flyout {
.chatroom .box-flyout {
width: 300px;
}
.dragresize {
position: absolute;
width: 200px;
height: 5px;
background: transparent;
border: 0;
top: 0;
margin-left: 0;
cursor: n-resize;
z-index: 20;
}
dragresize.html deleted 100644 → 0
View file @ c46b5cc7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Converse.js Drag/Resize Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
<link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
<link type="text/css" rel="stylesheet" href="converse.css">
<link rel="stylesheet" type="text/css" href="dragresize/dragresize.css">
<script src="components/jquery/jquery.min.js"></script>
<script data-main="main" src="components/requirejs/require.js"></script>
<script type="text/javascript" src="dragresize/dragresize.js"></script>
<style type="text/css">
/* converse.css overrides */
#chatpanel {
height: 320px;
}
.chatbox {
height: 100%;
}
.chat-content {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
height: -webkit-calc(100% - 125px);
height: -moz-calc(100% - 125px);
height: -o-calc(100% - 125px);
height: calc(100% - 125px);
}
form.sendXMPPMessage {
width: 100%;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Using DragResize is simple!
// You first declare a new DragResize() object, passing its own name and an object
// whose keys constitute optional parameters/settings:
var dragresize = new DragResize('dragresize',
{ minWidth: 50, minHeight: 50, minLeft: 20, minTop: 20, maxLeft: 600, maxTop: 600 });
// Optional settings/properties of the DragResize object are:
// enabled: Toggle whether the object is active.
// handles[]: An array of drag handles to use (see the .JS file).
// minWidth, minHeight: Minimum size to which elements are resized (in pixels).
// minLeft, maxLeft, minTop, maxTop: Bounding box (in pixels).
// Next, you must define two functions, isElement and isHandle. These are passed
// a given DOM element, and must "return true" if the element in question is a
// draggable element or draggable handle. Here, I'm checking for the CSS classname
// of the elements, but you have have any combination of conditions you like:
dragresize.isElement = function(elm) {
if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
};
dragresize.isHandle = function(elm) {
if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
};
// You can define optional functions that are called as elements are dragged/resized.
// Some are passed true if the source event was a resize, or false if it's a drag.
// The focus/blur events are called as handles are added/removed from an object,
// and the others are called as users drag, move and release the object's handles.
// You might use these to examine the properties of the DragResize object to sync
// other page elements, etc.
dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) { };
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };
// Finally, you must apply() your DragResize object to a DOM node; all children of this
// node will then be made draggable. Here, I'm applying to the entire document.
dragresize.apply(document);
//]]>
</script>
</head>
<body>
<!-- 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">Drag and drop</h2>
</header>
</div>
<div id="conversejs">
<div id="controlbox" class="chatbox">
<div class="nub-flyout drsElement">
<div class="chat-head oc-chat-head drsMoveHandle">
<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 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>
</div>
</div>
</div>
</div>
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="nub-flyout drsElement">
<div class="chat-head chat-head-chatbox drsMoveHandle">
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
<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>
</div>
<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>
</div>
</div>
</div>
</body>
</html>
dragresize/dragresize.css deleted 100644 → 0
View file @ c46b5cc7
/* Required CSS classes: must be included in all pages using this script */
/* Apply the element you want to drag/resize
.drsElement {
position: relative;
}
*/
/*
The main mouse handle that moves the whole element.
You can apply to the same tag as drsElement if you want.
*/
.drsMoveHandle {
cursor: move;
}
/*
The DragResize object name is automatically applied to all generated
corner resize handles, as well as one of the individual classes below.
*/
.dragresize {
position: absolute;
width: 5px;
height: 5px;
font-size: 1px;
background: #EEE;
border: 1px solid #333;
}
/*
Individual corner classes - required for resize support.
These are based on the object name plus the handle ID.
*/
.dragresize-tl {
top: -8px;
left: -8px;
cursor: nw-resize;
}
.dragresize-tm {
top: -8px;
left: 50%;
margin-left: -4px;
cursor: n-resize;
}
.dragresize-tr {
top: -8px;
right: -8px;
cursor: ne-resize;
}
.dragresize-ml {
top: 50%;
margin-top: -4px;
left: -8px;
cursor: w-resize;
}
.dragresize-mr {
top: 50%;
margin-top: -4px;
right: -8px;
cursor: e-resize;
}
dragresize/dragresize_commented.js
View file @ e2e2a80a
......@@ -112,9 +112,8 @@ DragResize.prototype.select = function(newElement) {
// Activate and record our new dragging element.
if (newElement && (newElement != element) && enabled) {
element = newElement;
// Elevate it and give it resize handles.
// Elevate it
element.style.zIndex = ++zIndex;
if (this.resizeHandleSet) this.resizeHandleSet(element, true);
// Record element attributes for mouseMove().
elmX = parseInt(element.style.left);
elmY = parseInt(element.style.top);
......@@ -134,7 +133,6 @@ DragResize.prototype.deselect = function(delHandles) {
if (delHandles) {
if (ondragblur) this.ondragblur();
if (this.resizeHandleSet) this.resizeHandleSet(element, false);
element = null;
}
handle = null;
......@@ -238,7 +236,6 @@ DragResize.prototype.mouseMove = function(e) { with (this) {
}
if (ondragmove) this.ondragmove(isResize);
// Stop a normal drag event.
cancelEvent(e);
}};
......@@ -253,27 +250,6 @@ DragResize.prototype.mouseUp = function(e) { with (this) {
deselect(false);
}};
/* Resize Code -- can be deleted if you're not using it. */
DragResize.prototype.resizeHandleSet = function(elm, show) { with (this) {
// Either creates, shows or hides the resize handles within an element.
// If we're showing them, and no handles have been created, create 4 new ones.
if (!elm._handle_tr) {
for (var h = 0; h < handles.length; h++) {
// Create 4 news divs, assign each a generic + specific class.
var hDiv = document.createElement('div');
hDiv.className = myName + ' ' + myName + '-' + handles[h];
elm['_handle_' + handles[h]] = elm.appendChild(hDiv);
}
}
// We now have handles. Find them all and show/hide.
for (var h = 0; h < handles.length; h++) {
elm['_handle_' + handles[h]].style.visibility = show ? 'inherit' : 'hidden';
}
}};
DragResize.prototype.resizeHandleDrag = function(diffX, diffY) { with (this) {
// Passed the mouse movement amounts. This function checks to see whether the
// drag is from a resize handle created above; if so, it changes the stored
......
mockup.html
View file @ e2e2a80a
<!DOCTYPE html>
<html lang="en" id="facebook">
<head>
<title id="pageTitle">Converse</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title id="pageTitle">Converse: Mockup</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
<link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
<link type="text/css" rel="stylesheet" href="converse.css">
<script src="components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="dragresize/dragresize_commented.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//<![CDATA[
// Using DragResize is simple!
// You first declare a new DragResize() object, passing its own name and an object
// whose keys constitute optional parameters/settings:
var dragresize = new DragResize('dragresize', {
minWidth: 200,
minHeight: 250,
minLeft: 20,
minTop: 20,
maxLeft: 0,
maxTop: 600,
handles: ['tm'],
});
// Next, you must define two functions, isElement and isHandle. These are passed
// a given DOM element, and must "return true" if the element in question is a
// draggable element or draggable handle. Here, I'm checking for the CSS classname
// of the elements, but you have have any combination of conditions you like:
dragresize.isElement = function(elm) {
if (elm.className && elm.className.indexOf('box-flyout') > -1) return true;
};
// You can define optional functions that are called as elements are dragged/resized.
// Some are passed true if the source event was a resize, or false if it's a drag.
// The focus/blur events are called as handles are added/removed from an object,
// and the others are called as users drag, move and release the object's handles.
// You might use these to examine the properties of the DragResize object to sync
// other page elements, etc.
dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) { };
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };
// Finally, you must apply() your DragResize object to a DOM node; all children of this
// node will then be made draggable. Here, I'm applying to the entire document.
dragresize.apply(document);
//]]>
});
</script>
</head>
<body>
<!-- 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">
<div id="controlbox" class="chatbox">
<div class="nub-flyout">
<div class="box-flyout">
<div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
<div class="chat-head oc-chat-head">
<ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li>
......@@ -34,7 +87,8 @@
</div>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="nub-flyout">
<div class="box-flyout">
<div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
<div class="chat-head oc-chat-head">
<ul id="controlbox-tabs">
<li><a class="s current" href="#users">Contacts</a></li>
......@@ -188,7 +242,8 @@
</div>
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="nub-flyout">
<div class="box-flyout">
<div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
......@@ -264,7 +319,8 @@
</div>
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="nub-flyout">
<div class="box-flyout">
<div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
......@@ -338,7 +394,8 @@
</div>
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
<div class="nub-flyout">
<div class="box-flyout">
<div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
......@@ -363,7 +420,6 @@
<strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
</a>
</div>
</div>
<script>
......@@ -418,7 +474,6 @@ $(document).ready(function () {
}
$(function() {
$('.close-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent().parent();
$grandparent.hide(300, function () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7