ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactored Resizable to match Draggable

Browse source
This commit is contained in:
Marcin Kurczewski 2015-02-22 18:45:07 +01:00
parent 04a16a2a36
commit 90406b1278
1 changed files with 45 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
public_html/js/Util/Resizable.js
View file

@ -2,8 +2,50 @@ var App = App || {};
App.Util = App.Util || {}; App.Util = App.Util || {};
App.Util.Resizable = function(jQuery) { App.Util.Resizable = function(jQuery) {
function relativeResizeStrategy($element) {
var $parent = $element.parent();
var delta;
var width = $element.width();
var height = $element.height();
var getSize = function() {
return {width: width, height: height};
};
var setSize = function(newWidth, newHeight) {
width = newWidth;
height = newHeight;
var screenWidth = Math.min(Math.max(width, 20), $parent.outerWidth() + $parent.offset().left - $element.offset().left);
var screenHeight = Math.min(Math.max(height, 20), $parent.outerHeight() + $parent.offset().top - $element.offset().top);
screenWidth *= 100.0 / $parent.outerWidth();
screenHeight *= 100.0 / $parent.outerHeight();
$element.css({
width: screenWidth + '%',
height: screenHeight + '%'});
};
return {
mouseClicked: function(e) {
delta = {
x: $element.width() - e.clientX,
y: $element.height() - e.clientY,
};
},
mouseMoved: function(e) {
setSize(
e.clientX + delta.x,
e.clientY + delta.y);
},
getSize: getSize,
setSize: setSize,
};
}
function makeResizable($element) { function makeResizable($element) {
var $resizer = jQuery('<div class="resizer"></div>'); var $resizer = jQuery('<div class="resizer"></div>');
var strategy = relativeResizeStrategy($element);
$element.append($resizer); $element.append($resizer);
$resizer.mousedown(function(e) { $resizer.mousedown(function(e) {
@ -11,27 +53,13 @@ App.Util.Resizable = function(jQuery) {
e.stopPropagation(); e.stopPropagation();
$element.addClass('resizing'); $element.addClass('resizing');
var $parent = $element.parent(); strategy.mouseClicked(e);
var deltaX = $element.width() - e.clientX;
var deltaY = $element.height() - e.clientY;
var update = function(e) {
var w = e.clientX + deltaX;
var h = e.clientY + deltaY;
w = Math.min(Math.max(w, 20), $parent.outerWidth() + $parent.offset().left - $element.offset().left);
h = Math.min(Math.max(h, 20), $parent.outerHeight() + $parent.offset().top - $element.offset().top);
w *= 100.0 / $parent.outerWidth();
h *= 100.0 / $parent.outerHeight();
$element.css({
width: w + '%',
height: h + '%'});
};
jQuery(window).bind('mousemove.elemsize', function(e) { jQuery(window).bind('mousemove.elemsize', function(e) {
update(e); strategy.mouseMoved(e);
}).bind('mouseup.elemsize', function(e) { }).bind('mouseup.elemsize', function(e) {
e.preventDefault(); e.preventDefault();
update(e); strategy.mouseMoved(e);
$element.removeClass('resizing'); $element.removeClass('resizing');
jQuery(window).unbind('mousemove.elemsize'); jQuery(window).unbind('mousemove.elemsize');
jQuery(window).unbind('mouseup.elemsize'); jQuery(window).unbind('mouseup.elemsize');