141 lines
3.4 KiB
JavaScript
141 lines
3.4 KiB
JavaScript
var App = App || {};
|
|
App.Presenters = App.Presenters || {};
|
|
|
|
App.Presenters.PostNotesPresenter = function(
|
|
jQuery,
|
|
util,
|
|
promise) {
|
|
|
|
var post;
|
|
var notes;
|
|
var templates = {};
|
|
var $target;
|
|
|
|
function init(params, loaded) {
|
|
$target = params.$target;
|
|
post = params.post;
|
|
notes = params.notes || [];
|
|
|
|
promise.wait(util.promiseTemplate('post-notes'))
|
|
.then(function(postNotesTemplate) {
|
|
templates.postNotes = postNotesTemplate;
|
|
render();
|
|
loaded();
|
|
}).fail(function() {
|
|
console.log(arguments);
|
|
loaded();
|
|
});
|
|
}
|
|
|
|
function addNewNote() {
|
|
notes.push({left: 50, top: 50, width: 50, height: 50, text: '…'});
|
|
}
|
|
|
|
function addNewNoteAndRender() {
|
|
addNewNote();
|
|
render();
|
|
}
|
|
|
|
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 {
|
|
init: init,
|
|
render: render,
|
|
addNewNote: addNewNoteAndRender,
|
|
};
|
|
|
|
};
|
|
|
|
App.DI.register('postNotesPresenter', [
|
|
'jQuery',
|
|
'util',
|
|
'promise'],
|
|
App.Presenters.PostNotesPresenter);
|