From dcbc93cacf145f58786c45035cd0c57a2ba761c8 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian.lam@gmail.com>
Date: Wed, 15 May 2013 21:32:56 -0400
Subject: [PATCH] fixing up formatting bar to not be highlightable (and not
 have an outline when the span is focused on), also tweaked the formatting
 options to behave a little more smartly when text is currently highlighted
 when it is invoked.

---
 public/css/style.less       | 18 +++++++++++++--
 public/src/app.js           | 44 +++++++++++++++++++++++++++----------
 public/templates/header.tpl |  2 +-
 3 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/public/css/style.less b/public/css/style.less
index a827248a2c..a60b6a0575 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -1,4 +1,3 @@
-
 .caret-left {
 	border-left: 0;
 	border-right: 4px solid black;
@@ -6,7 +5,14 @@
 	border-bottom: 4px solid transparent;
 }
 
-
+.no-select {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
 
 .pointer {
 	cursor: pointer;
@@ -586,3 +592,11 @@ footer.footer {
 a:hover {
   text-decoration:none;
 }
+
+.formatting-bar {
+	.no-select;
+
+	span:focus {
+		outline: none;
+	}
+}
\ No newline at end of file
diff --git a/public/src/app.js b/public/src/app.js
index e2bda92774..88da403680 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -280,26 +280,46 @@ var socket,
 		}, false);
 
 		// Posting
-		var	formattingBar = document.getElementById('formatting-bar'),
+		var	formattingBar = document.querySelector('.formatting-bar'),
 			postContentEl = document.getElementById('post_content');
 		jQuery('#post_window').slideToggle(0);
 		formattingBar.addEventListener('click', function(e) {
-			if (e.target.nodeName === 'I') {
-				switch(e.target.className) {
+			if (e.target.nodeName === 'I' || e.target.nodeName === 'SPAN') {
+				var	cursorEnd = postContentEl.value.length,
+					selectionStart = postContentEl.selectionStart,
+					selectionEnd = postContentEl.selectionEnd,
+					target;
+				if (e.target.nodeName === 'I') target = e.target;
+				else if (e.target.nodeName === 'SPAN') target = e.target.querySelector('i');
+				switch(target.className) {
 					case 'icon-bold':
-						var cursorEnd = postContentEl.value.length;
-						postContentEl.value = postContentEl.value + '**bolded text**';
-						postContentEl.selectionStart = cursorEnd+2;
-						postContentEl.selectionEnd = postContentEl.value.length - 2;
+						if (selectionStart === selectionEnd) {
+							// Nothing selected
+							postContentEl.value = postContentEl.value + '**bolded text**';
+							postContentEl.selectionStart = cursorEnd+2;
+							postContentEl.selectionEnd = postContentEl.value.length - 2;
+						} else {
+							// Text selected
+							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
+							postContentEl.selectionStart = selectionStart + 2;
+							postContentEl.selectionEnd = selectionEnd + 2;
+						}
 					break;
 					case 'icon-italic':
-						var cursorEnd = postContentEl.value.length;
-						postContentEl.value = postContentEl.value + '*italicised text*';
-						postContentEl.selectionStart = cursorEnd+1;
-						postContentEl.selectionEnd = postContentEl.value.length - 1;
+						if (selectionStart === selectionEnd) {
+							// Nothing selected
+							postContentEl.value = postContentEl.value + '*italicised text*';
+							postContentEl.selectionStart = cursorEnd+1;
+							postContentEl.selectionEnd = postContentEl.value.length - 1;
+						} else {
+							// Text selected
+							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
+							postContentEl.selectionStart = selectionStart + 1;
+							postContentEl.selectionEnd = selectionEnd + 1;
+						}
 					break;
 					case 'icon-list':
-						var cursorEnd = postContentEl.value.length;
+						// Nothing selected
 						postContentEl.value = postContentEl.value + "\n\n* list item";
 						postContentEl.selectionStart = cursorEnd+4;
 						postContentEl.selectionEnd = postContentEl.value.length;
diff --git a/public/templates/header.tpl b/public/templates/header.tpl
index e46d640e9f..f4591e3ba2 100644
--- a/public/templates/header.tpl
+++ b/public/templates/header.tpl
@@ -61,7 +61,7 @@
 			<div class="container">
 
 				<div class="btn-toolbar">
-					<div class="btn-group" id="formatting-bar">
+					<div class="btn-group formatting-bar">
 						<span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span>
 						<span class="btn btn-link" tabindex="-1"><i class="icon-italic"></i></span>
 						<!-- <span class="btn btn-link" tabindex="-1"><i class="icon-font"></i></span> -->