From 22d7ab87327ccd81d94995993f9a83c737cc8b02 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Sat, 25 Oct 2014 17:12:56 +0200
Subject: [PATCH] Added post note dragging and resizing in frontend

---
 public_html/css/post.css                      | 47 ++++++++--
 .../js/Presenters/PostNotesPresenter.js       | 89 ++++++++++++++++++-
 public_html/templates/post-content.tpl        |  2 +-
 public_html/templates/post-notes.tpl          | 26 +++---
 4 files changed, 143 insertions(+), 21 deletions(-)

diff --git a/public_html/css/post.css b/public_html/css/post.css
index 08a541eb..7194a8d8 100644
--- a/public_html/css/post.css
+++ b/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);
-	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;
+}
diff --git a/public_html/js/Presenters/PostNotesPresenter.js b/public_html/js/Presenters/PostNotesPresenter.js
index 14fd04b0..80bc2725 100644
--- a/public_html/js/Presenters/PostNotesPresenter.js
+++ b/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);
-
diff --git a/public_html/templates/post-content.tpl b/public_html/templates/post-content.tpl
index 2e384528..cc43d8fc 100644
--- a/public_html/templates/post-content.tpl
+++ b/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>
 
diff --git a/public_html/templates/post-notes.tpl b/public_html/templates/post-notes.tpl
index a16a7bd7..dee33416 100644
--- a/public_html/templates/post-notes.tpl
+++ b/public_html/templates/post-notes.tpl
@@ -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>