Added post notes presenter

public_html/css/post.css

@@ -166,3 +166,24 @@
 	display: none;
 	word-break: break-all;
 }
+
+.post-notes-target {
+	position: absolute;
+}
+.post-note {
+	position: absolute;
+	background: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.5);
+}
+.post-note .text-wrapper {
+	position: absolute;
+	background: lemonchiffon;
+	border: 1px solid black;
+	padding: 0.5em;
+	display: none;
+	bottom: calc(-100% + 5px);
+	left: -1px;
+}
+.post-note:hover .text-wrapper {
+	display: block;
+}

public_html/index.html

@@ -130,6 +130,7 @@
 	<script type="text/javascript" src="/js/Presenters/PostUploadPresenter.js"></script>
 	<script type="text/javascript" src="/js/Presenters/PostContentPresenter.js"></script>
 	<script type="text/javascript" src="/js/Presenters/PostEditPresenter.js"></script>
+	<script type="text/javascript" src="/js/Presenters/PostNotesPresenter.js"></script>
 	<script type="text/javascript" src="/js/Presenters/PostPresenter.js"></script>
 
 	<script type="text/javascript" src="/js/Presenters/GlobalCommentListPresenter.js"></script>

public_html/js/Presenters/PostContentPresenter.js

@@ -3,7 +3,9 @@ App.Presenters = App.Presenters || {};
 
 App.Presenters.PostContentPresenter = function(
 	util,
-	promise) {
+	promise,
+	presenterManager,
+	postNotesPresenter) {
 
 	var post;
 	var templates = {};
@@ -18,6 +20,11 @@ App.Presenters.PostContentPresenter = function(
 				templates.postContent = postContentTemplate;
 				render();
 				loaded();
+
+				presenterManager.initPresenters([
+					[postNotesPresenter, {post: post, notes: post.notes, $target: $target.find('.post-notes-target')}]],
+					function() {});
+
 			}).fail(function() {
 				console.log(arguments);
 				loaded();
@@ -37,5 +44,7 @@ App.Presenters.PostContentPresenter = function(
 
 App.DI.register('postContentPresenter', [
 	'util',
-	'promise'],
+	'promise',
+	'presenterManager',
+	'postNotesPresenter'],
 	App.Presenters.PostContentPresenter);

public_html/js/Presenters/PostNotesPresenter.js

@@ -0,0 +1,54 @@
+var App = App || {};
+App.Presenters = App.Presenters || {};
+
+App.Presenters.PostNotesPresenter = function(
+	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}));
+	}
+
+	return {
+		init: init,
+		render: render,
+		addNewNote: addNewNoteAndRender,
+	};
+
+};
+
+App.DI.register('postNotesPresenter', [
+	'util',
+	'promise'],
+	App.Presenters.PostNotesPresenter);
+

public_html/templates/post-content.tpl

@@ -1,6 +1,8 @@
 <% var postContentUrl = '/data/posts/' + post.name + '?x=' + Math.random() /* reset gif animations */ %>
 
 <div class="post-type-<%= post.contentType %>">
+	<div class="post-notes-target">
+	</div>
 
 	<%  if (post.contentType === 'image') { %>
 

public_html/templates/post-notes.tpl

@@ -0,0 +1,13 @@
+<% _.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">
+			<%= note.text %>
+		</div>
+
+	</div>
+<% }) %>