etherpad-lite/static/js/draggable.js
2011-12-11 19:45:40 +01:00

195 lines
5.3 KiB
JavaScript

/**
* This code is mostly from the old Etherpad. Please help us to comment this code.
* This helps other people to understand this code better and helps them to improve it.
* TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED
*/
/**
* Copyright 2009 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS-IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function makeDraggable(jqueryNodes, eventHandler)
{
jqueryNodes.each(function()
{
var node = $(this);
var state = {};
var inDrag = false;
function dragStart(evt)
{
if (inDrag)
{
return;
}
inDrag = true;
if (eventHandler('dragstart', evt, state) !== false)
{
$(document).bind('mousemove', dragUpdate);
$(document).bind('mouseup', dragEnd);
}
evt.preventDefault();
return false;
}
function dragUpdate(evt)
{
if (!inDrag)
{
return;
}
eventHandler('dragupdate', evt, state);
evt.preventDefault();
return false;
}
function dragEnd(evt)
{
if (!inDrag)
{
return;
}
inDrag = false;
try
{
eventHandler('dragend', evt, state);
}
finally
{
$(document).unbind('mousemove', dragUpdate);
$(document).unbind('mouseup', dragEnd);
evt.preventDefault();
}
return false;
}
node.bind('mousedown', dragStart);
});
}
function makeResizableVPane(top, sep, bottom, minTop, minBottom, callback)
{
if (minTop === undefined) minTop = 0;
if (minBottom === undefined) minBottom = 0;
makeDraggable($(sep), function(eType, evt, state)
{
if (eType == 'dragstart')
{
state.startY = evt.pageY;
state.topHeight = $(top).height();
state.bottomHeight = $(bottom).height();
state.minTop = minTop;
state.maxTop = (state.topHeight + state.bottomHeight) - minBottom;
}
else if (eType == 'dragupdate')
{
var change = evt.pageY - state.startY;
var topHeight = state.topHeight + change;
if (topHeight < state.minTop)
{
topHeight = state.minTop;
}
if (topHeight > state.maxTop)
{
topHeight = state.maxTop;
}
change = topHeight - state.topHeight;
var bottomHeight = state.bottomHeight - change;
var sepHeight = $(sep).height();
var totalHeight = topHeight + sepHeight + bottomHeight;
topHeight = 100.0 * topHeight / totalHeight;
sepHeight = 100.0 * sepHeight / totalHeight;
bottomHeight = 100.0 * bottomHeight / totalHeight;
$(top).css('bottom', 'auto');
$(top).css('height', topHeight + "%");
$(sep).css('top', topHeight + "%");
$(bottom).css('top', (topHeight + sepHeight) + '%');
$(bottom).css('height', 'auto');
if (callback) callback();
}
});
}
function makeResizableHPane(left, sep, right, minLeft, minRight, sepWidth, sepOffset, callback)
{
if (minLeft === undefined) minLeft = 0;
if (minRight === undefined) minRight = 0;
makeDraggable($(sep), function(eType, evt, state)
{
if (eType == 'dragstart')
{
state.startX = evt.pageX;
state.leftWidth = $(left).width();
state.rightWidth = $(right).width();
state.minLeft = minLeft;
state.maxLeft = (state.leftWidth + state.rightWidth) - minRight;
}
else if (eType == 'dragend' || eType == 'dragupdate')
{
var change = evt.pageX - state.startX;
var leftWidth = state.leftWidth + change;
if (leftWidth < state.minLeft)
{
leftWidth = state.minLeft;
}
if (leftWidth > state.maxLeft)
{
leftWidth = state.maxLeft;
}
change = leftWidth - state.leftWidth;
var rightWidth = state.rightWidth - change;
newSepWidth = sepWidth;
if (newSepWidth == undefined) newSepWidth = $(sep).width();
newSepOffset = sepOffset;
if (newSepOffset == undefined) newSepOffset = 0;
if (change == 0)
{
if (rightWidth != minRight || state.lastRightWidth == undefined)
{
state.lastRightWidth = rightWidth;
rightWidth = minRight;
}
else
{
rightWidth = state.lastRightWidth;
state.lastRightWidth = minRight;
}
change = state.rightWidth - rightWidth;
leftWidth = change + state.leftWidth;
}
var totalWidth = leftWidth + newSepWidth + rightWidth;
leftWidth = 100.0 * leftWidth / totalWidth;
newSepWidth = 100.0 * newSepWidth / totalWidth;
newSepOffset = 100.0 * newSepOffset / totalWidth;
rightWidth = 100.0 * rightWidth / totalWidth;
$(left).css('right', 'auto');
$(left).css('width', leftWidth + "%");
$(sep).css('left', (leftWidth + newSepOffset) + "%");
$(right).css('left', (leftWidth + newSepWidth) + '%');
$(right).css('width', 'auto');
if (callback) callback();
}
});
}