From 6ca08e5532adb6e55159b1223d09bc527859ba26 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Sat, 11 Oct 2014 22:00:22 +0200
Subject: [PATCH] Added tag siblings to frontend

---
 TODO                                |   1 -
 public_html/css/forms.css           |  26 +++++-
 public_html/js/Controls/TagInput.js | 129 +++++++++++++++++++++-------
 3 files changed, 120 insertions(+), 36 deletions(-)

diff --git a/TODO b/TODO
index a659cd9e..69a6dd36 100644
--- a/TODO
+++ b/TODO
@@ -28,7 +28,6 @@ everything related to tags:
         - tag editing
             - category (from config.ini)
             - description
-        - related tags
     - aliases
         - take care of recursion
         - listing
diff --git a/public_html/css/forms.css b/public_html/css/forms.css
index d9e1213c..89bfddcc 100644
--- a/public_html/css/forms.css
+++ b/public_html/css/forms.css
@@ -197,9 +197,31 @@ input[type=checkbox]:checked + label::before {
 }
 .tag-input li a {
 	color: black;
+}
+.tag-input li a.close {
 	font-size: 14px;
-	margin-left: 0.5em;
-	cursor: pointer;
+	margin-left: 0.75em;
+}
+
+.related-tags {
+	line-height: 200%;
+	font-size: 15px;
+	display: none;
+	margin: 0.5em 0.5em 1em 0.5em;
+}
+.related-tags span {
+	float: left;
+}
+.related-tags ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+.related-tags li {
+	display: inline-block;
+	margin: 0 0.5em;
+	padding: 0;
 }
 
 .autocomplete {
diff --git a/public_html/js/Controls/TagInput.js b/public_html/js/Controls/TagInput.js
index 1c1fa5db..ea17aec9 100644
--- a/public_html/js/Controls/TagInput.js
+++ b/public_html/js/Controls/TagInput.js
@@ -4,6 +4,8 @@ App.Controls = App.Controls || {};
 App.Controls.TagInput = function($underlyingInput) {
 	var _ = App.DI.get('_');
 	var jQuery = App.DI.get('jQuery');
+	var promise = App.DI.get('promise');
+	var api = App.DI.get('api');
 
 	var KEY_RETURN = 13;
 	var KEY_SPACE = 32;
@@ -18,38 +20,46 @@ App.Controls.TagInput = function($underlyingInput) {
 		inputConfirmed: null,
 	};
 
-	if ($underlyingInput.length === 0) {
-		throw new Error('Tag input element was not found');
-	}
-	if ($underlyingInput.length > 1) {
-		throw new Error('Cannot set tag input to more than one element at once');
-	}
-	if ($underlyingInput.attr('data-tagged')) {
-		throw new Error('Tag input was already initialized for this element');
-	}
-	$underlyingInput.attr('data-tagged', true);
-	$underlyingInput.hide();
-
 	var $wrapper = jQuery('<div class="tag-input">');
 	var $tagList = jQuery('<ul class="tags">');
 	var $input = jQuery('<input class="tag-real-input" type="text"/>');
-	$wrapper.append($tagList);
-	$wrapper.append($input);
-	$wrapper.insertAfter($underlyingInput);
-	$wrapper.click(function(e) {
-		if (e.target.nodeName === 'LI') {
-			return;
-		}
-		e.preventDefault();
-		$input.focus();
-	});
-	$input.attr('placeholder', $underlyingInput.attr('placeholder'));
-
-	addTagsFromText($underlyingInput.val());
-	$underlyingInput.val('');
-
+	var $related = jQuery('<div class="related-tags"><span>Related tags:</span><ul>');
+	init();
+	render();
 	initAutocomplete();
 
+	function init() {
+		if ($underlyingInput.length === 0) {
+			throw new Error('Tag input element was not found');
+		}
+		if ($underlyingInput.length > 1) {
+			throw new Error('Cannot set tag input to more than one element at once');
+		}
+		if ($underlyingInput.attr('data-tagged')) {
+			throw new Error('Tag input was already initialized for this element');
+		}
+		$underlyingInput.attr('data-tagged', true);
+	}
+
+	function render() {
+		$underlyingInput.hide();
+		$wrapper.append($tagList);
+		$wrapper.append($input);
+		$wrapper.insertAfter($underlyingInput);
+		$wrapper.click(function(e) {
+			if (e.target.nodeName === 'LI') {
+				return;
+			}
+			e.preventDefault();
+			$input.focus();
+		});
+		$input.attr('placeholder', $underlyingInput.attr('placeholder'));
+		$related.insertAfter($wrapper);
+
+		addTagsFromText($underlyingInput.val());
+		$underlyingInput.val('');
+	}
+
 	function initAutocomplete() {
 		var autocomplete = new App.Controls.AutoCompleteInput($input);
 		autocomplete.onApply = function(text) {
@@ -131,14 +141,13 @@ App.Controls.TagInput = function($underlyingInput) {
 			return;
 		}
 
-		var oldTags = getTags();
-		if (_.contains(_.map(oldTags, function(tag) { return tag.toLowerCase(); }), tag.toLowerCase())) {
+		if (isTaggedWith(tag)) {
 			flashTag(tag);
 		} else {
 			if (typeof(options.beforeTagAdded) === 'function') {
 				options.beforeTagAdded(tag);
 			}
-			var newTags = oldTags.slice();
+			var newTags = getTags().slice();
 			newTags.push(tag);
 			setTags(newTags);
 		}
@@ -155,6 +164,14 @@ App.Controls.TagInput = function($underlyingInput) {
 		}
 	}
 
+	function isTaggedWith(tag) {
+		var tags = getTags();
+		var tagNames = _.map(tags, function(tag) {
+			return tag.toLowerCase();
+		});
+		return _.contains(tagNames, tag.toLowerCase());
+	}
+
 	function removeLastTag() {
 		removeTag(_.last(getTags()));
 	}
@@ -170,11 +187,18 @@ App.Controls.TagInput = function($underlyingInput) {
 		$underlyingInput.val(newTags.join(' '));
 		_.each(newTags, function(tag) {
 			var $elem = jQuery('<li/>');
-			$elem.text(tag);
 			$elem.attr('data-tag', tag.toLowerCase());
 
-			var $deleteButton = jQuery('<a><i class="fa fa-remove"></i></a>');
-			$deleteButton.bind('click', function(e) {
+			var $tagLink = jQuery('<a class="tag">');
+			$tagLink.text(tag);
+			$tagLink.click(function(e) {
+				e.preventDefault();
+				showRelatedTags(tag);
+			});
+			$elem.append($tagLink);
+
+			var $deleteButton = jQuery('<a class="close"><i class="fa fa-remove"></i></a>');
+			$deleteButton.click(function(e) {
 				e.preventDefault();
 				removeTag(tag);
 				$input.focus();
@@ -185,6 +209,45 @@ App.Controls.TagInput = function($underlyingInput) {
 		});
 	}
 
+	function showRelatedTags(tag) {
+		if ($related.data('lastTag') === tag) {
+			$related.slideUp('fast');
+			$related.data('lastTag', null);
+			return;
+		}
+
+		$related.slideUp('fast', function() {
+			$related.data('lastTag', tag);
+			var $list = $related.find('ul');
+			promise.wait(api.get('/tags/' + tag + '/siblings'))
+				.then(function(response) {
+					$list.empty();
+
+					var relatedTags = response.json.data;
+					relatedTags = _.filter(relatedTags, function(tag) {
+						return !isTaggedWith(tag.name);
+					});
+					relatedTags = relatedTags.slice(0, 20);
+					_.each(relatedTags, function(tag) {
+						var $li = jQuery('<li>');
+						var $a = jQuery('<a href="#/posts/query=' + tag.name + '">');
+						$a.text(tag.name);
+						$a.click(function(e) {
+							e.preventDefault();
+							addTag(tag.name);
+						});
+						$li.append($a);
+						$list.append($li);
+					});
+					if (_.size(relatedTags)) {
+						$related.slideDown('fast');
+					}
+				}).fail(function() {
+					console.log(arguments);
+				});
+		});
+	}
+
 	function getTags() {
 		return tags;
 	}