Added post note dragging and resizing in frontend

public_html/css/post.css

@@ -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);
+	background: rgba(255, 255, 255, 0.3);
-	border: 1px solid rgba(0, 0, 0, 0.5);
+	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;
+}

public_html/js/Presenters/PostNotesPresenter.js

@@ -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);
-

public_html/templates/post-content.tpl

@@ -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>
 

public_html/templates/post-notes.tpl

@@ -1,13 +1,17 @@
-<% _.each(notes, function(note) { %>
+<div class="post-notes">
-	<div class="post-note"
+	<% _.each(notes, function(note) { %>
-		style="left: <%= note.left %>px;
+		<div class="post-note"
-			top: <%= note.top %>px;
+			style="left: <%= note.left %>px;
-			width: <%= note.width %>px;
+				top: <%= note.top %>px;
-			height: <%= note.height %>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>
-<% }) %>