scl/szurubooru
1
0
Fork 0
mirror of https://github.com/rr-/szurubooru.git synced 2025-07-17 08:26:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added draggability to post note edit form

Browse Source
This commit is contained in:
Marcin Kurczewski
2014-11-16 10:22:11 +01:00
parent fb4b31bd37
commit 4e28ccb4dc
7 changed files with 166 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
public_html/js/Presenters/PostNotesPresenter.js
View File

@ -6,7 +6,9 @@ App.Presenters.PostNotesPresenter = function(
util,
promise,
api,
auth) {
auth,
draggable,
resizable) {
var post;
var notes;
@ -59,8 +61,8 @@ App.Presenters.PostNotesPresenter = function(
$postNote.data('postNote', postNote);
$postNote.find('.text-wrapper').click(postNoteClicked);
postNote.$element = $postNote;
makeDraggable($postNote);
makeResizable($postNote);
draggable.makeDraggable($postNote, draggable.relativeDragStrategy);
resizable.makeResizable($postNote);
});
$form.find('button').click(formSubmitted);
@ -144,85 +146,13 @@ App.Presenters.PostNotesPresenter = function(
$form.data('postNote', postNote);
$form.find('textarea').val(postNote.text);
$form.show();
draggable.makeDraggable($form, draggable.absoluteDragStrategy);
}
function hideForm() {
$form.hide();
}
function makeDraggable($element) {
var $dragger = jQuery('<div class="dragger"></div>');
$element.prepend($dragger);
$dragger.mousedown(function(e) {
e.preventDefault();
$element.addClass('dragging');
var $parent = $element.parent();
var deltaX = $element.offset().left - e.clientX;
var deltaY = $element.offset().top - e.clientY;
var update = function(e) {
var x = e.clientX + deltaX - $parent.offset().left;
var y = e.clientY + deltaY - $parent.offset().top;
x = Math.min(Math.max(x, 0), $parent.outerWidth() - $element.outerWidth());
y = Math.min(Math.max(y, 0), $parent.outerHeight() - $element.outerHeight());
x *= 100.0 / $parent.outerWidth();
y *= 100.0 / $parent.outerHeight();
$element.css({
left: x + '%',
top: y + '%'});
};
jQuery(window).bind('mousemove.elemmove', function(e) {
update(e);
}).bind('mouseup.elemmove', function(e) {
e.preventDefault();
update(e);
$element.removeClass('dragging');
jQuery(window).unbind('mousemove.elemmove');
jQuery(window).unbind('mouseup.elemmove');
});
});
}
function makeResizable($element) {
var $resizer = jQuery('<div class="resizer"></div>');
$element.append($resizer);
$resizer.mousedown(function(e) {
e.preventDefault();
e.stopPropagation();
$element.addClass('resizing');
var $parent = $element.parent();
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) {
update(e);
}).bind('mouseup.elemsize', function(e) {
e.preventDefault();
update(e);
$element.removeClass('resizing');
jQuery(window).unbind('mousemove.elemsize');
jQuery(window).unbind('mouseup.elemsize');
});
});
}
return {
init: init,
render: render,
@ -236,5 +166,7 @@ App.DI.register('postNotesPresenter', [
'util',
'promise',
'api',
'auth'],
'auth',
'draggable',
'resizable'],
App.Presenters.PostNotesPresenter);

84
public_html/js/Util/Draggable.js Normal file
View File

@ -0,0 +1,84 @@
var App = App || {};
App.Util = App.Util || {};
App.Util.Draggable = function(jQuery) {
function relativeDragStrategy($element) {
var $parent = $element.parent();
var delta;
return {
click: function(e) {
delta = {
x: $element.offset().left - e.clientX,
y: $element.offset().top - e.clientY,
};
},
update: function(e) {
var x = e.clientX + delta.x - $parent.offset().left;
var y = e.clientY + delta.y - $parent.offset().top;
x = Math.min(Math.max(x, 0), $parent.outerWidth() - $element.outerWidth());
y = Math.min(Math.max(y, 0), $parent.outerHeight() - $element.outerHeight());
x *= 100.0 / $parent.outerWidth();
y *= 100.0 / $parent.outerHeight();
$element.css({
left: x + '%',
top: y + '%'});
},
};
}
function absoluteDragStrategy($element) {
var delta;
return {
click: function(e) {
delta = {
x: $element.position().left - e.clientX,
y: $element.position().top - e.clientY,
};
},
update: function(e) {
var x = e.clientX + delta.x;
var y = e.clientY + delta.y;
$element.css({
left: x + 'px',
top: y + 'px'});
},
};
}
function makeDraggable($element, dragStrategy) {
var strategy = dragStrategy($element);
$element.addClass('draggable');
$element.mousedown(function(e) {
if (e.target !== $element.get(0)) {
return;
}
e.preventDefault();
$element.addClass('dragging');
strategy.click(e);
jQuery(window).bind('mousemove.elemmove', function(e) {
strategy.update(e);
}).bind('mouseup.elemmove', function(e) {
e.preventDefault();
strategy.update(e);
$element.removeClass('dragging');
jQuery(window).unbind('mousemove.elemmove');
jQuery(window).unbind('mouseup.elemmove');
});
});
}
return {
makeDraggable: makeDraggable,
absoluteDragStrategy: absoluteDragStrategy,
relativeDragStrategy: relativeDragStrategy,
};
};
App.DI.registerSingleton('draggable', ['jQuery'], App.Util.Draggable);

5
public_html/js/Util.js → public_html/js/Util/Misc.js
View File

@ -1,6 +1,7 @@
var App = App || {};
App.Util = App.Util || {};
App.Util = function(_, jQuery, marked, promise) {
App.Util.Misc = function(_, jQuery, marked, promise) {
var exitConfirmationEnabled = false;
@ -244,4 +245,4 @@ App.Util = function(_, jQuery, marked, promise) {
};
App.DI.registerSingleton('util', ['_', 'jQuery', 'marked', 'promise'], App.Util);
App.DI.registerSingleton('util', ['_', 'jQuery', 'marked', 'promise'], App.Util.Misc);

48
public_html/js/Util/Resizable.js Normal file
View File

@ -0,0 +1,48 @@
var App = App || {};
App.Util = App.Util || {};
App.Util.Resizable = function(jQuery) {
function makeResizable($element) {
var $resizer = jQuery('<div class="resizer"></div>');
$element.append($resizer);
$resizer.mousedown(function(e) {
e.preventDefault();
e.stopPropagation();
$element.addClass('resizing');
var $parent = $element.parent();
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) {
update(e);
}).bind('mouseup.elemsize', function(e) {
e.preventDefault();
update(e);
$element.removeClass('resizing');
jQuery(window).unbind('mousemove.elemsize');
jQuery(window).unbind('mouseup.elemsize');
});
});
}
return {
makeResizable: makeResizable,
};
};
App.DI.registerSingleton('resizable', ['jQuery'], App.Util.Resizable);