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 post note dragging and resizing in frontend

Browse Source
This commit is contained in:
Marcin Kurczewski
2014-10-25 17:12:56 +02:00
parent d0270824f1
commit 22d7ab8732
4 changed files with 143 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.PostNotesPresenter = function(
jQuery,
util,
promise) {
@ -37,6 +38,92 @@ App.Presenters.PostNotesPresenter = function(
function render() {
$target.html(templates.postNotes({post: post, notes: notes}));
var $postNotes = $target.find('.post-note');
$postNotes.each(function(i) {
var $postNote = jQuery(this);
$postNote.data('postNote', notes[i]);
$postNote.find('.text-wrapper').mouseup(postNoteClicked);
makeDraggable($postNote);
makeResizable($postNote);
});
}
function postNoteClicked(e) {
e.preventDefault();
var $postNote = jQuery(e.currentTarget).parents('.post-note');
if ($postNote.hasClass('resizing') || $postNote.hasClass('dragging')) {
return;
}
}
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 minX = $parent.offset().left;
var minY = $parent.offset().top;
var maxX = minX + $parent.outerWidth() - $element.outerWidth();
var maxY = minY + $parent.outerHeight() - $element.outerHeight();
var update = function(e) {
var x = e.clientX + deltaX;
var y = e.clientY + deltaY;
x = Math.min(Math.max(x, minX), maxX);
y = Math.min(Math.max(y, minY), maxY);
$element.offset({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 = Math.max(20, e.clientX + deltaX);
var h = Math.max(20, e.clientY + deltaY);
$element.width(w);
$element.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 {
@ -48,7 +135,7 @@ App.Presenters.PostNotesPresenter = function(
};
App.DI.register('postNotesPresenter', [
'jQuery',
'util',
'promise'],
App.Presenters.PostNotesPresenter);