Arbitrary floating notes

Author: System Administrator

app/models/draft.rb

@@ -23,7 +23,7 @@ def reviewify
         sent = sentences[i] = sent.gsub("<p>", "")
         strt = true
       end
-      sentences[i] = '<a class="sentence" href="#" id="sent-' + i.to_s + '">' + sent.strip + '</a>'
+      sentences[i] = '<a class="sentence" href="#" id="sent-' + (i + 1).to_s + '">' + sent.strip + '</a>'
       if brk then sentences[i] = sentences[i].insert(0, "</p><p>") end
       if strt then sentences[i] = sentences[i].insert(0, "<p>") end
     end

app/views/drafts/review.html.erb

@@ -112,6 +112,16 @@ a.sentence.down.has_note .heading {
 	height: 90px;
 }
 
+.flote {
+	padding: 10px;
+	font-family: Courier;
+	height: 90px;
+}
+
+.mark {
+	cursor: pointer;
+}
+
 #tooltip {
 	position: absolute;
 	z-index: 3000;
@@ -132,6 +142,26 @@ a.sentence.down.has_note .heading {
 	font-weight: bold;
 }
 
+#tooltipflote {
+	position: absolute;
+	z-index: 3000;
+	border: 1px solid #86acc1;
+	background-color: #fff;
+	opacity: 0.85;
+	max-width: 450px;
+}
+#tooltipflote .contain {
+	background: #cde9f8;
+	border: 2px solid #fff;
+	color: black;
+	padding: 5px;
+}
+#tooltipflote h3, #tooltipflote div { 
+	margin: 0;
+	font-size: 12px;
+	font-weight: bold;
+}
+
 </style>
 
 <script type="text/javascript">
@@ -140,18 +170,22 @@ var t = null;
 
 var save_review = function(continuous) {
 	var content = $("#draft_content").html();
-	$.post("/drafts/save_review", {authenticity_token: AUTH_TOKEN, draft_id: <%= @draft.id %>, content: content, signature: $("#signature").attr("value"), general_comments: $("#general_comments").val()},
-		function(ret) {
-			var ret = JSON.parse(ret);
-			var now = new Date();
-			document.title = "(saved at " + now.format("h:MM:sstt") + " on " + now.format("dddd dS, yyyy") + ")";
-		}
-	)
+	$.post("/drafts/save_review", {
+		authenticity_token: AUTH_TOKEN, 
+		draft_id: <%= @draft.id %>, 
+		content: content, 
+		signature: $("#signature").attr("value"), 
+		general_comments: $("#general_comments").val()
+	},
+	function(ret) {
+		var ret = JSON.parse(ret);
+		var now = new Date();
+		document.title = "[draft]back » saved at " + now.format("h:MM:sstt") + " on " + now.format("dddd dS, yyyy") + "";
+	});
+	
 	if (continuous) {
 		setTimeout("save_review(true)", 1000 * 30) // Save every thirty seconds.
-	} else {
-		return false;
-	}
+	} else { return false; }
 };
 
 var hide_notes = function(affect) {
@@ -166,6 +200,58 @@ var hide_notes = function(affect) {
 };
 
 $(document).ready(function() {
+	var flote_count = 0;
+	$("#draft").click(function(ev) {
+		if (ev.shiftKey) {
+			$flote = $("#flote").clone();
+			$flote.appendTo("#draft_content");
+			$flote.attr("id", "flote-" + flote_count);
+			flote_count += 1;
+			$flote.val($flote.val().replace("\n", ""));
+			$flote.css("top", (ev.pageY - 10) + "px");
+			$flote.css("left", (ev.pageX - 10) + "px");
+			$flote.show();
+			$flote.focus();
+		}
+	});
+	
+	$(".mark").live("mouseover",
+		function(ev) {
+			var id = $(this).attr("id").split("-")[1];
+			if ($("#flote-" + id).html() != "" && $("#flote-" + id).html() != null) {
+				$("#show-flote").html($("#flote-" + id).html());
+				$("#tooltipflote").css("top", ev.pageY - 30 + "px");
+				$("#tooltipflote").css("left", ev.pageX + 20 + "px");
+				//$("#note-" + id).css("height", $("#note-" + id)[0].scrollHeight);
+				$("#tooltipflote").show();
+			} else {
+				$("#tooltipflote").hide();
+			}
+		}
+	);
+	
+	$(".mark").live("mouseout",
+		function(ev) {
+			var id = $(this).attr("id").split("-")[1];
+			$("#tooltipflote").hide();
+		}
+	);
+	
+	$(".mark").live("mousemove",
+		function(ev) {
+			$("#tooltipflote").css("top", ev.pageY - 30 + "px");
+			$("#tooltipflote").css("left", ev.pageX + 20 + "px");
+		}
+	);
+	
+	$(".mark").live("click",
+		function(ev) {
+			var id = $(this).attr("id").split("-")[1];
+			$("#flote-" + id).show();
+			$("#flote-" + id).focus();
+		}
+	);
+	
 	$(".note").live("keydown", function(e) {
 		if (e.keyCode == 13) {
 			$(this).hide();
@@ -214,7 +300,50 @@ $(document).ready(function() {
 		return false;
 	}
 
+	$(".flote").live("keydown", function(e) {
+		if (e.keyCode == 13) {
+			if ($(this).val() == "") {
+				if ($(this).attr("id") != "flote") {
+					$(this).remove();
+					$(this).hide();
+				}
+			} else {
+				$(this).html($(this).val());
+				$(this).hide();
+				$mark = $("#mark-" + $(this).attr("id").split("-")[1]);
+				if ($mark.length == 0) {
+					$mark = $("#mark").clone();
+					$mark.appendTo("#draft_content");
+					$mark.attr("id", "mark-" + $(this).attr("id").split("-")[1]);
+				};
+				$mark.css("top", $(this).css("top"));
+				$mark.css("left", $(this).css("left"));
+				$mark.show();
+			}
+		};
+	});
+	
 	$(".sentence").click(function(ev) {
+		$(".flote").each(function() {
+			if ($(this).val() == "") {
+				if ($(this).attr("id") != "flote") {
+					$(this).remove();
+					$(this).hide();
+				}
+			} else {
+				$(this).html($(this).val());
+				$(this).hide();
+				$mark = $("#mark-" + $(this).attr("id").split("-")[1]);
+				if ($mark.length == 0) {
+					$mark = $("#mark").clone();
+					$mark.appendTo("#draft_content");
+					$mark.attr("id", "mark-" + $(this).attr("id").split("-")[1]);
+				};
+				$mark.css("top", $(this).css("top"));
+				$mark.css("left", $(this).css("left"));
+				$mark.show();
+			}
+		});
 		clearTimeout(t);
 		$(".note").each(function(e) {
 			$(this).hide();
@@ -276,7 +405,10 @@ $(document).ready(function() {
 });
 </script>
 <div id="tooltip" style="display: none; right: auto;"><div class="contain"><h3><span id="show-note"></span></h3></div></div>
+<div id="tooltipflote" style="display: none; right: auto;"><div class="contain"><h3><span id="show-flote"></span></h3></div></div>
+<textarea id="flote" class="flote" affect="neutral" style="width: 250px; position: absolute; display: none; z-index: 999"></textarea>
 <textarea id="note" class="note" affect="neutral" style="width: 250px; position: absolute; display: none;"></textarea>
+<div id="mark" class="mark" style="position: absolute; display: none; font-size: 12px; color: #ff5544; z-index: 10">&#9679;</div>
 <div class="instructions">
 	<h2 style="margin: 2px 0px 5px 0px;">Instructions:</h2>
 	<ol style="font-size: 11px;">
@@ -288,7 +420,7 @@ $(document).ready(function() {
 
 <div id="draft">
 	<div style="float: right; margin-top: 10px;"><a href="/drafts/refresh_review?public_url=<%= params[:id] %>&amp;draft_id=<%= @draft.id %>">Refresh latest draft and start over</a></div>
-	<h1 style="font-family: Arial; font-size: 22px; margin-top: 20px; line-height: 1.2em;"><%= @draft.title %></h1>
+	<h1 style="font-family: Arial; font-size: 22px; margin-top: 20px; line-height: 1.2em;"><a class="sentence" href="#" id="sent-0"><%= @draft.title %></a></h1>
 	<div id="draft_content">
 	<% if @content.nil? %>
 		Whoops, it looks like something's gone horribly wrong and we've lost your work.