mirror of
https://github.com/rr-/szurubooru.git
synced 2025-07-17 08:26:24 +00:00
Switched to spaces
This commit is contained in:
rr-
@ -2,146 +2,146 @@ var App = App || {};
|
||||
App.Util = App.Util || {};
|
||||
|
||||
App.Util.Draggable = function(jQuery) {
|
||||
var KEY_LEFT = 37;
|
||||
var KEY_UP = 38;
|
||||
var KEY_RIGHT = 39;
|
||||
var KEY_DOWN = 40;
|
||||
var KEY_LEFT = 37;
|
||||
var KEY_UP = 38;
|
||||
var KEY_RIGHT = 39;
|
||||
var KEY_DOWN = 40;
|
||||
|
||||
function relativeDragStrategy($element) {
|
||||
var $parent = $element.parent();
|
||||
var delta;
|
||||
var x = $element.offset().left - $parent.offset().left;
|
||||
var y = $element.offset().top - $parent.offset().top;
|
||||
function relativeDragStrategy($element) {
|
||||
var $parent = $element.parent();
|
||||
var delta;
|
||||
var x = $element.offset().left - $parent.offset().left;
|
||||
var y = $element.offset().top - $parent.offset().top;
|
||||
|
||||
var getPosition = function() {
|
||||
return {x: x, y: y};
|
||||
};
|
||||
var getPosition = function() {
|
||||
return {x: x, y: y};
|
||||
};
|
||||
|
||||
var setPosition = function(newX, newY) {
|
||||
x = newX;
|
||||
y = newY;
|
||||
var screenX = Math.min(Math.max(newX, 0), $parent.outerWidth() - $element.outerWidth());
|
||||
var screenY = Math.min(Math.max(newY, 0), $parent.outerHeight() - $element.outerHeight());
|
||||
screenX *= 100.0 / $parent.outerWidth();
|
||||
screenY *= 100.0 / $parent.outerHeight();
|
||||
$element.css({
|
||||
left: screenX + '%',
|
||||
top: screenY + '%'});
|
||||
};
|
||||
var setPosition = function(newX, newY) {
|
||||
x = newX;
|
||||
y = newY;
|
||||
var screenX = Math.min(Math.max(newX, 0), $parent.outerWidth() - $element.outerWidth());
|
||||
var screenY = Math.min(Math.max(newY, 0), $parent.outerHeight() - $element.outerHeight());
|
||||
screenX *= 100.0 / $parent.outerWidth();
|
||||
screenY *= 100.0 / $parent.outerHeight();
|
||||
$element.css({
|
||||
left: screenX + '%',
|
||||
top: screenY + '%'});
|
||||
};
|
||||
|
||||
return {
|
||||
mouseClicked: function(e) {
|
||||
delta = {
|
||||
x: $element.offset().left - e.clientX,
|
||||
y: $element.offset().top - e.clientY,
|
||||
};
|
||||
},
|
||||
return {
|
||||
mouseClicked: function(e) {
|
||||
delta = {
|
||||
x: $element.offset().left - e.clientX,
|
||||
y: $element.offset().top - e.clientY,
|
||||
};
|
||||
},
|
||||
|
||||
mouseMoved: function(e) {
|
||||
setPosition(
|
||||
e.clientX + delta.x - $parent.offset().left,
|
||||
e.clientY + delta.y - $parent.offset().top);
|
||||
},
|
||||
mouseMoved: function(e) {
|
||||
setPosition(
|
||||
e.clientX + delta.x - $parent.offset().left,
|
||||
e.clientY + delta.y - $parent.offset().top);
|
||||
},
|
||||
|
||||
getPosition: getPosition,
|
||||
setPosition: setPosition,
|
||||
};
|
||||
}
|
||||
getPosition: getPosition,
|
||||
setPosition: setPosition,
|
||||
};
|
||||
}
|
||||
|
||||
function absoluteDragStrategy($element) {
|
||||
var delta;
|
||||
var x = $element.offset().left;
|
||||
var y = $element.offset().top;
|
||||
function absoluteDragStrategy($element) {
|
||||
var delta;
|
||||
var x = $element.offset().left;
|
||||
var y = $element.offset().top;
|
||||
|
||||
var getPosition = function() {
|
||||
return {x: x, y: y};
|
||||
};
|
||||
var getPosition = function() {
|
||||
return {x: x, y: y};
|
||||
};
|
||||
|
||||
var setPosition = function(newX, newY) {
|
||||
x = newX;
|
||||
y = newY;
|
||||
$element.css({
|
||||
left: x + 'px',
|
||||
top: y + 'px'});
|
||||
};
|
||||
var setPosition = function(newX, newY) {
|
||||
x = newX;
|
||||
y = newY;
|
||||
$element.css({
|
||||
left: x + 'px',
|
||||
top: y + 'px'});
|
||||
};
|
||||
|
||||
return {
|
||||
mouseClicked: function(e) {
|
||||
delta = {
|
||||
x: $element.position().left - e.clientX,
|
||||
y: $element.position().top - e.clientY,
|
||||
};
|
||||
},
|
||||
return {
|
||||
mouseClicked: function(e) {
|
||||
delta = {
|
||||
x: $element.position().left - e.clientX,
|
||||
y: $element.position().top - e.clientY,
|
||||
};
|
||||
},
|
||||
|
||||
mouseMoved: function(e) {
|
||||
setPosition(e.clientX + delta.x, e.clientY + delta.y);
|
||||
},
|
||||
mouseMoved: function(e) {
|
||||
setPosition(e.clientX + delta.x, e.clientY + delta.y);
|
||||
},
|
||||
|
||||
getPosition: getPosition,
|
||||
setPosition: setPosition,
|
||||
};
|
||||
}
|
||||
getPosition: getPosition,
|
||||
setPosition: setPosition,
|
||||
};
|
||||
}
|
||||
|
||||
function makeDraggable($element, dragStrategy, enableHotkeys) {
|
||||
var strategy = dragStrategy($element);
|
||||
$element.data('drag-strategy', strategy);
|
||||
function makeDraggable($element, dragStrategy, enableHotkeys) {
|
||||
var strategy = dragStrategy($element);
|
||||
$element.data('drag-strategy', strategy);
|
||||
|
||||
$element.addClass('draggable');
|
||||
$element.addClass('draggable');
|
||||
|
||||
$element.mousedown(function(e) {
|
||||
if (e.target !== $element.get(0)) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
$element.focus();
|
||||
$element.addClass('dragging');
|
||||
$element.mousedown(function(e) {
|
||||
if (e.target !== $element.get(0)) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
$element.focus();
|
||||
$element.addClass('dragging');
|
||||
|
||||
strategy.mouseClicked(e);
|
||||
jQuery(window).bind('mousemove.elemmove', function(e) {
|
||||
strategy.mouseMoved(e);
|
||||
}).bind('mouseup.elemmove', function(e) {
|
||||
e.preventDefault();
|
||||
strategy.mouseMoved(e);
|
||||
$element.removeClass('dragging');
|
||||
jQuery(window).unbind('mousemove.elemmove');
|
||||
jQuery(window).unbind('mouseup.elemmove');
|
||||
});
|
||||
});
|
||||
strategy.mouseClicked(e);
|
||||
jQuery(window).bind('mousemove.elemmove', function(e) {
|
||||
strategy.mouseMoved(e);
|
||||
}).bind('mouseup.elemmove', function(e) {
|
||||
e.preventDefault();
|
||||
strategy.mouseMoved(e);
|
||||
$element.removeClass('dragging');
|
||||
jQuery(window).unbind('mousemove.elemmove');
|
||||
jQuery(window).unbind('mouseup.elemmove');
|
||||
});
|
||||
});
|
||||
|
||||
if (enableHotkeys) {
|
||||
$element.keydown(function(e) {
|
||||
var position = strategy.getPosition();
|
||||
var oldPosition = {x: position.x, y: position.y};
|
||||
if (e.shiftKey) {
|
||||
return;
|
||||
}
|
||||
if (enableHotkeys) {
|
||||
$element.keydown(function(e) {
|
||||
var position = strategy.getPosition();
|
||||
var oldPosition = {x: position.x, y: position.y};
|
||||
if (e.shiftKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
var delta = e.ctrlKey ? 10 : 1;
|
||||
if (e.which === KEY_LEFT) {
|
||||
position.x -= delta;
|
||||
} else if (e.which === KEY_RIGHT) {
|
||||
position.x += delta;
|
||||
} else if (e.which === KEY_UP) {
|
||||
position.y -= delta;
|
||||
} else if (e.which === KEY_DOWN) {
|
||||
position.y += delta;
|
||||
}
|
||||
var delta = e.ctrlKey ? 10 : 1;
|
||||
if (e.which === KEY_LEFT) {
|
||||
position.x -= delta;
|
||||
} else if (e.which === KEY_RIGHT) {
|
||||
position.x += delta;
|
||||
} else if (e.which === KEY_UP) {
|
||||
position.y -= delta;
|
||||
} else if (e.which === KEY_DOWN) {
|
||||
position.y += delta;
|
||||
}
|
||||
|
||||
if (position.x !== oldPosition.x || position.y !== oldPosition.y) {
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
e.preventDefault();
|
||||
strategy.setPosition(position.x, position.y);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
if (position.x !== oldPosition.x || position.y !== oldPosition.y) {
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
e.preventDefault();
|
||||
strategy.setPosition(position.x, position.y);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
makeDraggable: makeDraggable,
|
||||
absoluteDragStrategy: absoluteDragStrategy,
|
||||
relativeDragStrategy: relativeDragStrategy,
|
||||
};
|
||||
return {
|
||||
makeDraggable: makeDraggable,
|
||||
absoluteDragStrategy: absoluteDragStrategy,
|
||||
relativeDragStrategy: relativeDragStrategy,
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user