Added post note dragging and resizing in frontend
This commit is contained in:
Marcin Kurczewski
parent
d0270824f1
commit
22d7ab8732
4 changed files with 143 additions and 21 deletions
|
|
@ -1,8 +1,12 @@
|
|||
.post-type-image img,
|
||||
.post-type-video video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.post-type-image img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.post-type-youtube iframe {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
|
|
@ -167,23 +171,50 @@
|
|||
word-break: break-all;
|
||||
}
|
||||
|
||||
.post-notes-target {
|
||||
.post-content {
|
||||
position: relative;
|
||||
}
|
||||
.post-notes {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.post-note {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.post-note .dragger {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: move;
|
||||
}
|
||||
.post-note .text-wrapper {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: calc(100%);
|
||||
left: -1px;
|
||||
padding-top: 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.post-note .text {
|
||||
padding: 0.5em;
|
||||
background: lemonchiffon;
|
||||
border: 1px solid black;
|
||||
padding: 0.5em;
|
||||
display: none;
|
||||
bottom: calc(-100% + 5px);
|
||||
left: -1px;
|
||||
}
|
||||
.post-note:hover .text-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post-note .resizer {
|
||||
position: absolute;
|
||||
cursor: nwse-resize;
|
||||
border: 0.25em solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 0.25em solid transparent;
|
||||
border-left: 0.25em solid transparent;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<% var postContentUrl = '/data/posts/' + post.name + '?x=' + Math.random() /* reset gif animations */ %>
|
||||
|
||||
<div class="post-type-<%= post.contentType %>">
|
||||
<div class="post-content post-type-<%= post.contentType %>">
|
||||
<div class="post-notes-target">
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<% _.each(notes, function(note) { %>
|
||||
<div class="post-note"
|
||||
style="left: <%= note.left %>px;
|
||||
top: <%= note.top %>px;
|
||||
width: <%= note.width %>px;
|
||||
height: <%= note.height %>px">
|
||||
<div class="post-notes">
|
||||
<% _.each(notes, function(note) { %>
|
||||
<div class="post-note"
|
||||
style="left: <%= note.left %>px;
|
||||
top: <%= note.top %>px;
|
||||
width: <%= note.width %>px;
|
||||
height: <%= note.height %>px">
|
||||
|
||||
<div class="text-wrapper">
|
||||
<div class="text">
|
||||
<%= note.text %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-wrapper">
|
||||
<%= note.text %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<% }) %>
|
||||
<% }) %>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue