Experimenting with making the chatboxes resizable.
This commit is contained in:
JC Brand
parent
9777406489
commit
67266b2df4
181
dragresize.html
Normal file
181
dragresize.html
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<!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>
|
||||||
|
<meta charset='utf-8' />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
|
||||||
|
<meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="converse.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="dragresize/dragresize.css">
|
||||||
|
<script data-main="main" src="components/requirejs/require.js"></script>
|
||||||
|
<script type="text/javascript" src="dragresize/dragresize.js"></script>
|
||||||
|
<title>Converse.js Drag/Resize Demo</title>
|
||||||
|
|
||||||
|
|
||||||
|
<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);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.controlbox-panes,
|
||||||
|
div#login-dialog {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
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="chatpanel" class="drsElement" style="width: 100%;">
|
||||||
|
<div id="controlbox" class="chatbox drsElement" style="opacity: 1; display: inline;">
|
||||||
|
<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 class="chatbox drsElement" id="37c0c87392010303765fe36b05c0967d62c6b70f" style="opacity: 1; display: inline-block;">
|
||||||
|
<div class="chat-head chat-head-chatbox drsMoveHandle">
|
||||||
|
<a class="close-chatbox-button icon-close"></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>:Show this menu</div>
|
||||||
|
<div class="chat-info"><strong>/me</strong>:Write in the third person</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-message-me">09:35 me: </span>
|
||||||
|
<span class="chat-message-content">Hello world</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message ">
|
||||||
|
<span class="chat-message-them">19:25 Benedict-John: </span>
|
||||||
|
<span class="chat-message-content">Dagsê</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-message-me">19:39 me: </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: </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: </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="icon-happy" title="Insert a smilery"></li>
|
||||||
|
<li class="icon-camera-2" title="Enable video chat"></li>
|
||||||
|
<li class="icon-newspaper" title="Fetch and show this user's vCard"></li>
|
||||||
|
-->
|
||||||
|
<li class="toggle-otr not-private" title="Turn on 'off-the-record' chat encryption">
|
||||||
|
<span class="chat-toolbar-text">Not private</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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
63
dragresize/dragresize.css
Normal file
63
dragresize/dragresize.css
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
/* 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;
|
||||||
|
}
|
||||||
234
dragresize/dragresize.html
Normal file
234
dragresize/dragresize.html
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
<!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>
|
||||||
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||||
|
<title>Div Drag/Resize Demo</title>
|
||||||
|
<script type="text/javascript" src="dragresize.js"></script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
/* Required CSS classes: must be included in all pages using this script */
|
||||||
|
|
||||||
|
/* Apply the element you want to drag/resize */
|
||||||
|
.drsElement {
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
The main mouse handle that moves the whole element.
|
||||||
|
You can apply to the same tag as drsElement if you want.
|
||||||
|
*/
|
||||||
|
.drsMoveHandle {
|
||||||
|
height: 20px;
|
||||||
|
background-color: #CCC;
|
||||||
|
border-bottom: 1px solid #666;
|
||||||
|
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-bl {
|
||||||
|
bottom: -8px;
|
||||||
|
left: -8px;
|
||||||
|
cursor: sw-resize;
|
||||||
|
}
|
||||||
|
.dragresize-bm {
|
||||||
|
bottom: -8px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -4px;
|
||||||
|
cursor: s-resize;
|
||||||
|
}
|
||||||
|
.dragresize-br {
|
||||||
|
bottom: -8px;
|
||||||
|
right: -8px;
|
||||||
|
cursor: se-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
</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 style="font: 13px/20px sans-serif; background-color: #FFF">
|
||||||
|
|
||||||
|
<div style="text-align: center">
|
||||||
|
<h1 style="font: 32px/48px sans-serif">DragResize v1.0</h1>
|
||||||
|
by Angus Turnbull - <a href="http://www.twinhelix.com">http://www.twinhelix.com</a>.
|
||||||
|
Updated: 27 June 2006.
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Here's our draggable elements.
|
||||||
|
All that's required is that they have a relative or absolute CSS 'position',
|
||||||
|
and are matched by the isElement/isHandle methods of a DragResize object.
|
||||||
|
Easy!
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div class="drsElement"
|
||||||
|
style="left: 50px; top: 150px; width: 250px; height: 120px;
|
||||||
|
background: #CDF; text-align: center">
|
||||||
|
<div class="drsMoveHandle">Div 0</div>
|
||||||
|
Content
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="drsElement"
|
||||||
|
style="left: 20px; top: 300px; width: 150px; height: 200px;
|
||||||
|
background: #FDC; text-align: center">
|
||||||
|
<div class="drsMoveHandle">Div 1</div>
|
||||||
|
Content
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="drsElement drsMoveHandle"
|
||||||
|
style="left: 150px; top: 280px; width: 50px; height: 100px;
|
||||||
|
background: #DFC; text-align: center">
|
||||||
|
Div 2
|
||||||
|
Content
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div style="margin-top: 400px"><!-- spacer --></div>
|
||||||
|
|
||||||
|
<p>This is a JavaScript library that lets you easily implement user-friendly
|
||||||
|
and customisable dragging and resizing of your page elements. You might want to
|
||||||
|
use it as part of a web application -- it contains all you need for a
|
||||||
|
lightweight "windowing" system. Features include:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><strong>Can both drag and resize</strong> page elements.</li>
|
||||||
|
<li><strong>Works with absolute and relatively positioned</strong> elements
|
||||||
|
in your page.</li>
|
||||||
|
<li><strong>Customisable appearance</strong> as it makes extensive use of CSS
|
||||||
|
classes for layout of its resisze handles.</li>
|
||||||
|
<li><strong>Unobtrusive, Object-Orientated JavaScript</strong> means it's easy
|
||||||
|
to add to your pages.</li>
|
||||||
|
<li><strong>Bounding boxes and minimum sizes</strong> can be set and
|
||||||
|
automatically enforced.</li>
|
||||||
|
<li><strong>Cross-browser compatible</strong> so it works for everyone.</li>
|
||||||
|
<li><strong>Small code size</strong> so your visitors don't have to wait!</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div style="border: 2px solid red; background: #FFF0F0; padding: 0pt 10pt 0pt 10pt">
|
||||||
|
|
||||||
|
<h4>Script License Agreement</h4>
|
||||||
|
|
||||||
|
<p>DragResize © 2005-2006 Angus Turnbull, TwinHelix Designs
|
||||||
|
<a href="http://www.twinhelix.com">http://www.twinhelix.com</a></p>
|
||||||
|
<p>Licensed under the
|
||||||
|
<a href="http://creativecommons.org/licenses/LGPL/2.1/">CC-GNU LGPL,
|
||||||
|
version 2.1 or later</a>.</p>
|
||||||
|
<p>This is distributed WITHOUT ANY WARRANTY; without even the implied
|
||||||
|
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>I hope you find it handy!
|
||||||
|
It's free for you to use and distribute, as long as you retain the license and
|
||||||
|
copyright as per the LGPL.
|
||||||
|
If you like this and/or my other scripts, you're more than welcome to
|
||||||
|
<a href="http://www.twinhelix.com/donate/">make a donation</a>.
|
||||||
|
See the source for more details and instructions.</p>
|
||||||
|
|
||||||
|
<p>Note: DragResize was conceived initially as part of my work on the
|
||||||
|
<a href="http://www.fotonotes.net">Fotonotes DHTML Client</a>.</p>
|
||||||
|
|
||||||
|
<p><em>Good luck - Angus.</em></p>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
14
dragresize/dragresize.js
Normal file
14
dragresize/dragresize.js
Normal file
File diff suppressed because one or more lines are too long
352
dragresize/dragresize_commented.js
Normal file
352
dragresize/dragresize_commented.js
Normal file
@ -0,0 +1,352 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
DragResize v1.0
|
||||||
|
(c) 2005-2006 Angus Turnbull, TwinHelix Designs http://www.twinhelix.com
|
||||||
|
|
||||||
|
Licensed under the CC-GNU LGPL, version 2.1 or later:
|
||||||
|
http://creativecommons.org/licenses/LGPL/2.1/
|
||||||
|
This is distributed WITHOUT ANY WARRANTY; without even the implied
|
||||||
|
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Common API code.
|
||||||
|
|
||||||
|
if (typeof addEvent != 'function')
|
||||||
|
{
|
||||||
|
var addEvent = function(o, t, f, l)
|
||||||
|
{
|
||||||
|
var d = 'addEventListener', n = 'on' + t, rO = o, rT = t, rF = f, rL = l;
|
||||||
|
if (o[d] && !l) return o[d](t, f, false);
|
||||||
|
if (!o._evts) o._evts = {};
|
||||||
|
if (!o._evts[t])
|
||||||
|
{
|
||||||
|
o._evts[t] = o[n] ? { b: o[n] } : {};
|
||||||
|
o[n] = new Function('e',
|
||||||
|
'var r = true, o = this, a = o._evts["' + t + '"], i; for (i in a) {' +
|
||||||
|
'o._f = a[i]; r = o._f(e||window.event) != false && r; o._f = null;' +
|
||||||
|
'} return r');
|
||||||
|
if (t != 'unload') addEvent(window, 'unload', function() {
|
||||||
|
removeEvent(rO, rT, rF, rL);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (!f._i) f._i = addEvent._i++;
|
||||||
|
o._evts[t][f._i] = f;
|
||||||
|
};
|
||||||
|
addEvent._i = 1;
|
||||||
|
var removeEvent = function(o, t, f, l)
|
||||||
|
{
|
||||||
|
var d = 'removeEventListener';
|
||||||
|
if (o[d] && !l) return o[d](t, f, false);
|
||||||
|
if (o._evts && o._evts[t] && f._i) delete o._evts[t][f._i];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function cancelEvent(e, c)
|
||||||
|
{
|
||||||
|
e.returnValue = false;
|
||||||
|
if (e.preventDefault) e.preventDefault();
|
||||||
|
if (c)
|
||||||
|
{
|
||||||
|
e.cancelBubble = true;
|
||||||
|
if (e.stopPropagation) e.stopPropagation();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// *** DRAG/RESIZE CODE ***
|
||||||
|
|
||||||
|
function DragResize(myName, config)
|
||||||
|
{
|
||||||
|
var props = {
|
||||||
|
myName: myName, // Name of the object.
|
||||||
|
enabled: true, // Global toggle of drag/resize.
|
||||||
|
handles: ['tl', 'tm', 'tr',
|
||||||
|
'ml', 'mr', 'bl', 'bm', 'br'], // Array of drag handles: top/mid/bot/right.
|
||||||
|
isElement: null, // Function ref to test for an element.
|
||||||
|
isHandle: null, // Function ref to test for move handle.
|
||||||
|
element: null, // The currently selected element.
|
||||||
|
handle: null, // Active handle reference of the element.
|
||||||
|
minWidth: 10, minHeight: 10, // Minimum pixel size of elements.
|
||||||
|
minLeft: 0, maxLeft: 9999, // Bounding box area, in pixels.
|
||||||
|
minTop: 0, maxTop: 9999,
|
||||||
|
zIndex: 1, // The highest Z-Index yet allocated.
|
||||||
|
mouseX: 0, mouseY: 0, // Current mouse position, recorded live.
|
||||||
|
lastMouseX: 0, lastMouseY: 0, // Last processed mouse positions.
|
||||||
|
mOffX: 0, mOffY: 0, // A known offset between position & mouse.
|
||||||
|
elmX: 0, elmY: 0, // Element position.
|
||||||
|
elmW: 0, elmH: 0, // Element size.
|
||||||
|
allowBlur: true, // Whether to allow automatic blur onclick.
|
||||||
|
ondragfocus: null, // Event handler functions.
|
||||||
|
ondragstart: null,
|
||||||
|
ondragmove: null,
|
||||||
|
ondragend: null,
|
||||||
|
ondragblur: null
|
||||||
|
};
|
||||||
|
|
||||||
|
for (var p in props)
|
||||||
|
this[p] = (typeof config[p] == 'undefined') ? props[p] : config[p];
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
DragResize.prototype.apply = function(node)
|
||||||
|
{
|
||||||
|
// Adds object event handlers to the specified DOM node.
|
||||||
|
|
||||||
|
var obj = this;
|
||||||
|
addEvent(node, 'mousedown', function(e) { obj.mouseDown(e) } );
|
||||||
|
addEvent(node, 'mousemove', function(e) { obj.mouseMove(e) } );
|
||||||
|
addEvent(node, 'mouseup', function(e) { obj.mouseUp(e) } );
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
DragResize.prototype.select = function(newElement) { with (this)
|
||||||
|
{
|
||||||
|
// Selects an element for dragging.
|
||||||
|
|
||||||
|
if (!document.getElementById || !enabled) return;
|
||||||
|
|
||||||
|
// Activate and record our new dragging element.
|
||||||
|
if (newElement && (newElement != element) && enabled)
|
||||||
|
{
|
||||||
|
element = newElement;
|
||||||
|
// Elevate it and give it resize handles.
|
||||||
|
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);
|
||||||
|
elmW = element.offsetWidth;
|
||||||
|
elmH = element.offsetHeight;
|
||||||
|
if (ondragfocus) this.ondragfocus();
|
||||||
|
}
|
||||||
|
}};
|
||||||
|
|
||||||
|
|
||||||
|
DragResize.prototype.deselect = function(delHandles) { with (this)
|
||||||
|
{
|
||||||
|
// Immediately stops dragging an element. If 'delHandles' is true, this
|
||||||
|
// remove the handles from the element and clears the element flag,
|
||||||
|
// completely resetting the .
|
||||||
|
|
||||||
|
if (!document.getElementById || !enabled) return;
|
||||||
|
|
||||||
|
if (delHandles)
|
||||||
|
{
|
||||||
|
if (ondragblur) this.ondragblur();
|
||||||
|
if (this.resizeHandleSet) this.resizeHandleSet(element, false);
|
||||||
|
element = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
handle = null;
|
||||||
|
mOffX = 0;
|
||||||
|
mOffY = 0;
|
||||||
|
}};
|
||||||
|
|
||||||
|
|
||||||
|
DragResize.prototype.mouseDown = function(e) { with (this)
|
||||||
|
{
|
||||||
|
// Suitable elements are selected for drag/resize on mousedown.
|
||||||
|
// We also initialise the resize boxes, and drag parameters like mouse position etc.
|
||||||
|
if (!document.getElementById || !enabled) return true;
|
||||||
|
|
||||||
|
var elm = e.target || e.srcElement,
|
||||||
|
newElement = null,
|
||||||
|
newHandle = null,
|
||||||
|
hRE = new RegExp(myName + '-([trmbl]{2})', '');
|
||||||
|
|
||||||
|
while (elm)
|
||||||
|
{
|
||||||
|
// Loop up the DOM looking for matching elements. Remember one if found.
|
||||||
|
if (elm.className)
|
||||||
|
{
|
||||||
|
if (!newHandle && (hRE.test(elm.className) || isHandle(elm))) newHandle = elm;
|
||||||
|
if (isElement(elm)) { newElement = elm; break }
|
||||||
|
}
|
||||||
|
elm = elm.parentNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If this isn't on the last dragged element, call deselect(),
|
||||||
|
// which will hide its handles and clear element.
|
||||||
|
if (element && (element != newElement) && allowBlur) deselect(true);
|
||||||
|
|
||||||
|
// If we have a new matching element, call select().
|
||||||
|
if (newElement && (!element || (newElement == element)))
|
||||||
|
{
|
||||||
|
// Stop mouse selections if we're dragging a handle.
|
||||||
|
if (newHandle) cancelEvent(e);
|
||||||
|
select(newElement, newHandle);
|
||||||
|
handle = newHandle;
|
||||||
|
if (handle && ondragstart) this.ondragstart(hRE.test(handle.className));
|
||||||
|
}
|
||||||
|
}};
|
||||||
|
|
||||||
|
|
||||||
|
DragResize.prototype.mouseMove = function(e) { with (this)
|
||||||
|
{
|
||||||
|
// This continually offsets the dragged element by the difference between the
|
||||||
|
// last recorded mouse position (mouseX/Y) and the current mouse position.
|
||||||
|
if (!document.getElementById || !enabled) return true;
|
||||||
|
|
||||||
|
// We always record the current mouse position.
|
||||||
|
mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
|
||||||
|
mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
|
||||||
|
// Record the relative mouse movement, in case we're dragging.
|
||||||
|
// Add any previously stored & ignored offset to the calculations.
|
||||||
|
var diffX = mouseX - lastMouseX + mOffX;
|
||||||
|
var diffY = mouseY - lastMouseY + mOffY;
|
||||||
|
mOffX = mOffY = 0;
|
||||||
|
// Update last processed mouse positions.
|
||||||
|
lastMouseX = mouseX;
|
||||||
|
lastMouseY = mouseY;
|
||||||
|
|
||||||
|
// That's all we do if we're not dragging anything.
|
||||||
|
if (!handle) return true;
|
||||||
|
|
||||||
|
// If included in the script, run the resize handle drag routine.
|
||||||
|
// Let it create an object representing the drag offsets.
|
||||||
|
var isResize = false;
|
||||||
|
if (this.resizeHandleDrag && this.resizeHandleDrag(diffX, diffY))
|
||||||
|
{
|
||||||
|
isResize = true;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// If the resize drag handler isn't set or returns fase (to indicate the drag was
|
||||||
|
// not on a resize handle), we must be dragging the whole element, so move that.
|
||||||
|
// Bounds check left-right...
|
||||||
|
var dX = diffX, dY = diffY;
|
||||||
|
if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
|
||||||
|
else if (elmX + elmW + dX > maxLeft) mOffX = (dX - (diffX = maxLeft - elmX - elmW));
|
||||||
|
// ...and up-down.
|
||||||
|
if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
|
||||||
|
else if (elmY + elmH + dY > maxTop) mOffY = (dY - (diffY = maxTop - elmY - elmH));
|
||||||
|
elmX += diffX;
|
||||||
|
elmY += diffY;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Assign new info back to the element, with minimum dimensions.
|
||||||
|
with (element.style)
|
||||||
|
{
|
||||||
|
left = elmX + 'px';
|
||||||
|
width = elmW + 'px';
|
||||||
|
top = elmY + 'px';
|
||||||
|
height = elmH + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Evil, dirty, hackish Opera select-as-you-drag fix.
|
||||||
|
if (window.opera && document.documentElement)
|
||||||
|
{
|
||||||
|
var oDF = document.getElementById('op-drag-fix');
|
||||||
|
if (!oDF)
|
||||||
|
{
|
||||||
|
var oDF = document.createElement('input');
|
||||||
|
oDF.id = 'op-drag-fix';
|
||||||
|
oDF.style.display = 'none';
|
||||||
|
document.body.appendChild(oDF);
|
||||||
|
}
|
||||||
|
oDF.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ondragmove) this.ondragmove(isResize);
|
||||||
|
|
||||||
|
// Stop a normal drag event.
|
||||||
|
cancelEvent(e);
|
||||||
|
}};
|
||||||
|
|
||||||
|
|
||||||
|
DragResize.prototype.mouseUp = function(e) { with (this)
|
||||||
|
{
|
||||||
|
// On mouseup, stop dragging, but don't reset handler visibility.
|
||||||
|
if (!document.getElementById || !enabled) return;
|
||||||
|
|
||||||
|
var hRE = new RegExp(myName + '-([trmbl]{2})', '');
|
||||||
|
if (handle && ondragend) this.ondragend(hRE.test(handle.className));
|
||||||
|
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
|
||||||
|
// elm* dimensions and mOffX/Y.
|
||||||
|
|
||||||
|
var hClass = handle && handle.className &&
|
||||||
|
handle.className.match(new RegExp(myName + '-([tmblr]{2})')) ? RegExp.$1 : '';
|
||||||
|
|
||||||
|
// If the hClass is one of the resize handles, resize one or two dimensions.
|
||||||
|
// Bounds checking is the hard bit -- basically for each edge, check that the
|
||||||
|
// element doesn't go under minimum size, and doesn't go beyond its boundary.
|
||||||
|
var dY = diffY, dX = diffX, processed = false;
|
||||||
|
if (hClass.indexOf('t') >= 0)
|
||||||
|
{
|
||||||
|
rs = 1;
|
||||||
|
if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight));
|
||||||
|
else if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
|
||||||
|
elmY += diffY;
|
||||||
|
elmH -= diffY;
|
||||||
|
processed = true;
|
||||||
|
}
|
||||||
|
if (hClass.indexOf('b') >= 0)
|
||||||
|
{
|
||||||
|
rs = 1;
|
||||||
|
if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH));
|
||||||
|
else if (elmY + elmH + dY > maxTop) mOffY = (dY - (diffY = maxTop - elmY - elmH));
|
||||||
|
elmH += diffY;
|
||||||
|
processed = true;
|
||||||
|
}
|
||||||
|
if (hClass.indexOf('l') >= 0)
|
||||||
|
{
|
||||||
|
rs = 1;
|
||||||
|
if (elmW - dX < minWidth) mOffX = (dX - (diffX = elmW - minWidth));
|
||||||
|
else if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
|
||||||
|
elmX += diffX;
|
||||||
|
elmW -= diffX;
|
||||||
|
processed = true;
|
||||||
|
}
|
||||||
|
if (hClass.indexOf('r') >= 0)
|
||||||
|
{
|
||||||
|
rs = 1;
|
||||||
|
if (elmW + dX < minWidth) mOffX = (dX - (diffX = minWidth - elmW));
|
||||||
|
else if (elmX + elmW + dX > maxLeft) mOffX = (dX - (diffX = maxLeft - elmX - elmW));
|
||||||
|
elmW += diffX;
|
||||||
|
processed = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return processed;
|
||||||
|
}};
|
||||||
Loading…
Reference in New Issue
Block a user