Merge pull request #1409 from miksago/formatting-dispatch-table

Composer: Implement formatting bar dispatch table

public/src/modules/composer.js

@@ -414,90 +414,109 @@ define(['taskbar'], function(taskbar) {
 		thumbForm.submit();
 	}
 
-	function handleFormattingBarClick() {
-		var iconClass = $(this).find('i').attr('class');
-		var textarea = $(this).parents('.composer').find('textarea')[0];
-
-		var textareaValue = $(textarea).val();
-
-		var selectionStart = textarea.selectionStart,
-			selectionEnd = textarea.selectionEnd,
-			selectionLength = selectionEnd - selectionStart,
-			isSelectionAtEnd = selectionStart === selectionEnd;
-
-		function updateSelection(start, end){
-			textarea.setSelectionRange(start, end);
-			textarea.focus();
-		}
 
-		function insertIntoInput(value) {
+	/*************************************************/
-			$(textarea).val(textareaValue.slice(0, selectionStart) + value + textareaValue.slice(selectionStart));
+	/* Rich Textarea Controls                        */
-		}
+	/*************************************************/
+	function insertIntoTextarea(textarea, value) {
+		var $textarea = $(textarea);
+		var currentVal = $textarea.val();
+
+		$textarea.val(
+			currentVal.slice(0, textarea.selectionStart) +
+			value +
+			currentVal.slice(textarea.selectionStart)
+		);
+	}
 
-		function wrapSelectedWith(leading, trailing){
+	function wrapSelectionInTextareaWith(textarea, leading, trailing){
 			if(trailing === undefined){
 				trailing = leading;
 			}
 
-			$(textarea).val(textareaValue.slice(0, selectionStart) + leading + textareaValue.slice(selectionStart, selectionEnd) + trailing + textareaValue.slice(selectionEnd));
+			var $textarea = $(textarea);
+			var currentVal = $textarea.val()
+
+			$textarea.val(
+				currentVal.slice(0, textarea.selectionStart) +
+				leading +
+				currentVal.slice(textarea.selectionStart, textarea.selectionEnd) +
+				trailing +
+				currentVal.slice(textarea.selectionEnd)
+			);
 		}
 
-		if(iconClass === 'fa fa-bold') {
+	function updateTextareaSelection(textarea, start, end){
-			if (isSelectionAtEnd) {
+			textarea.setSelectionRange(start, end);
-				insertIntoInput("**bolded text**");
+			$(textarea).focus();
+		}
 
-				updateSelection(selectionStart + 2, selectionStart + 13);
+	var formattingDispatchTable = {
+		'fa fa-bold': function(textarea, selectionStart, selectionEnd){
+			if(selectionStart === selectionEnd){
+				insertIntoTextarea(textarea, '**bolded text**');
+				updateTextareaSelection(textarea, selectionStart + 2, selectionStart + 13);
 			} else {
-				wrapSelectedWith('**');
+				wrapSelectionInTextareaWith(textarea, '**');
-
+				updateTextareaSelection(textarea, selectionStart + 2, selectionEnd + 2);
-				// Highlight selection
-				updateSelection(selectionStart + 2, selectionEnd + 2);
 			}
-		}
+		},
-
-		if(iconClass === 'fa fa-italic') {
-			if (isSelectionAtEnd) {
-				insertIntoInput("*italicised text*");
 
-				// Highlight selection
+		'fa fa-italic': function(textarea, selectionStart, selectionEnd){
-				updateSelection(selectionStart + 1, selectionStart + 16);
+			if(selectionStart === selectionEnd){
+				insertIntoTextarea(textarea, "*italicised text*");
+				updateTextareaSelection(textarea, selectionStart + 1, selectionStart + 16);
 			} else {
-				wrapSelectedWith('*');
+				wrapSelectionInTextareaWith(textarea, '*');
-
+				updateTextareaSelection(textarea, selectionStart + 1, selectionEnd + 1);
-				// Highlight selection
-				updateSelection(selectionStart + 1, selectionEnd + 1);
 			}
-		}
+		},
 
-		if (iconClass === 'fa fa-list'){
+		'fa fa-list': function(textarea, selectionStart, selectionEnd){
-			if(isSelectionAtEnd){
+			if(selectionStart === selectionEnd){
-				insertIntoInput("\n* list item");
+				insertIntoTextarea(textarea, "\n* list item");
 
 				// Highlight "list item"
-				updateSelection(selectionStart + 3, selectionStart + 12);
+				updateTextareaSelection(textarea, selectionStart + 3, selectionStart + 12);
 			} else {
-				wrapSelectedWith('\n* ', '');
+				wrapSelectionInTextareaWith(textarea, '\n* ', '');
-
+				updateTextareaSelection(textarea, selectionStart + 3, selectionEnd + 3);
-				// Maintain selection:
-				updateSelection(selectionStart + 3, selectionEnd + 3);
 			}
-		}
+		},
 
-		if (iconClass === 'fa fa-link') {
+		'fa fa-link': function(textarea, selectionStart, selectionEnd){
-			if (isSelectionAtEnd) {
+			if(selectionStart === selectionEnd){
-				insertIntoInput("[link text](link url)");
+				insertIntoTextarea(textarea, "[link text](link url)");
 
 				// Highlight "link url"
-				updateSelection(selectionStart + 12, selectionEnd + 20);
+				updateTextareaSelection(textarea, selectionStart + 12, selectionEnd + 20);
 			} else {
-				wrapSelectedWith('[', '](link url)');
+				wrapSelectionInTextareaWith(textarea, '[', '](link url)');
 
 				// Highlight "link url"
-				updateSelection(selectionStart + selectionLength + 3, selectionEnd + 11);
+				updateTextareaSelection(textarea, selectionEnd + 3, selectionEnd + 11);
 			}
+		},
+
+		'fa fa-picture-o': function(){
+			$('#files').click();
+		},
+
+		'fa fa-upload': function(){
+			$('#files').click();
+		}
+	};
+
+	function handleFormattingBarClick() {
+		var iconClass = $(this).find('i').attr('class');
+		var textarea = $(this).parents('.composer').find('textarea')[0];
+
+		if(formattingDispatchTable.hasOwnProperty(iconClass)){
+			formattingDispatchTable[iconClass](textarea, textarea.selectionStart, textarea.selectionEnd);
 		}
 	}
 
+
 	composer.newTopic = function(cid) {
 		if(!allowed()) {
 			return;
@@ -710,10 +729,6 @@ define(['taskbar'], function(taskbar) {
 
 				postContainer.on('click', '.formatting-bar span', handleFormattingBarClick);
 
-				postContainer.on('click', '.formatting-bar span .fa-picture-o, .formatting-bar span .fa-upload', function() {
-					$('#files').click();
-				});
-
 				postContainer.find('#files').on('change', function(e) {
 					var files = (e.target || {}).files || ($(this).val() ? [{name: $(this).val(), type: utils.fileMimeType($(this).val())}] : null);
 					if(files) {