From 07a04353ebacf6769683b55694d5aa78139d1d4f Mon Sep 17 00:00:00 2001
From: Johan Berggren <jbn@nordu.net>
Date: Fri, 4 Mar 2011 14:23:08 +0100
Subject: Added tagging on Memberships

---
 site-media/css/jquery.ui.autocomplete.custom.css |  75 +++++++++++++++++
 site-media/js/tag-it.js                          | 100 +++++++++++++++++++++++
 2 files changed, 175 insertions(+)
 create mode 100644 site-media/css/jquery.ui.autocomplete.custom.css
 create mode 100644 site-media/js/tag-it.js

(limited to 'site-media')

diff --git a/site-media/css/jquery.ui.autocomplete.custom.css b/site-media/css/jquery.ui.autocomplete.custom.css
new file mode 100644
index 0000000..33c4084
--- /dev/null
+++ b/site-media/css/jquery.ui.autocomplete.custom.css
@@ -0,0 +1,75 @@
+.ui-autocomplete {
+	background-color: #eee;
+	position: absolute;
+	cursor: default;
+}
+.ui-autocomplete .ui-menu-item {
+}
+.ui-autocomplete  .ui-menu-item a {
+	display:block;
+	padding:4px 6px;
+	text-decoration:none;
+	line-height:12px;
+}
+.ui-autocomplete .ui-menu-item a.ui-state-hover,
+.ui-autocomplete .ui-menu-item a.ui-state-active {
+	background-color:#78959D;
+	color:#fff;
+	margin:0;
+}
+.ui-autocomplete-loading {
+	background: white url(images/ui-anim_basic_16x16.gif) right center no-repeat;
+}
+
+ul.tagit {
+	padding:1px 5px;
+	border-style:solid;
+	border-width:1px;
+	border-color:#C6C6C6;
+	overflow:auto;
+}
+ul.tagit li {
+	-moz-border-radius:5px 5px 5px 5px;
+	display: block;
+	float: left;
+	margin:2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice {
+	background-color:#DEE7F8;
+	border:1px solid #CAD8F3;
+	padding:2px 4px 3px;
+}
+ul.tagit li.tagit-choice:hover {
+	background-color:#bbcef1;
+	border-color:#6d95e0;
+}
+ul.tagit li.tagit-new {
+	padding:2px 4px 3px;
+	padding:2px 4px 1px;
+	padding:2px 4px 1px 0;
+}
+
+ul.tagit li.tagit-choice input {
+	display:block;
+	float:left;
+	margin:2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice a.close {
+	color:#777777;
+	cursor:pointer;
+	font-size:12px;
+	font-weight:bold;
+	outline:medium none;
+	padding:2px 0 2px 3px;
+	text-decoration:none;
+}
+ul.tagit input[type="text"] {
+	-moz-box-sizing:border-box;
+	border:none;
+	margin:0;
+	padding:0;
+	width:inherit;
+	border-color:#C6C6C6;
+	background-color:#FFFFFF;
+	color:#333333;
+}
diff --git a/site-media/js/tag-it.js b/site-media/js/tag-it.js
new file mode 100644
index 0000000..040cef4
--- /dev/null
+++ b/site-media/js/tag-it.js
@@ -0,0 +1,100 @@
+(function($) {
+
+	$.fn.tagit = function(options) {
+
+		var el = this;
+
+		const BACKSPACE		= 8;
+		const ENTER			= 13;
+		const SPACE			= 32;
+		const COMMA			= 44;
+
+		// add the tagit CSS class.
+		el.addClass("tagit");
+
+		// create the input field.
+		var html_input_field = "<li class=\"tagit-new\"><input class=\"tagit-input\" type=\"text\" /></li>\n";
+		el.html (html_input_field);
+
+		tag_input		= el.children(".tagit-new").children(".tagit-input");
+
+		$(this).click(function(e){
+			if (e.target.tagName == 'A') {
+				// Removes a tag when the little 'x' is clicked.
+				// Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
+				$(e.target).parent().remove();
+			}
+			else {
+				// Sets the focus() to the input field, if the user clicks anywhere inside the UL.
+				// This is needed because the input field needs to be of a small size.
+				tag_input.focus();
+			}
+		});
+
+		tag_input.keypress(function(event){
+			if (event.which == BACKSPACE) {
+				if (tag_input.val() == "") {
+					// When backspace is pressed, the last tag is deleted.
+					$(el).children(".tagit-choice:last").remove();
+				}
+			}
+			// Comma/Space/Enter are all valid delimiters for new tags.
+			else if (event.which == COMMA || event.which == SPACE || event.which == ENTER) {
+				event.preventDefault();
+
+				var typed = tag_input.val();
+				typed = typed.replace(/,+$/,"");
+				typed = typed.trim();
+
+				if (typed != "") {
+					if (is_new (typed)) {
+						create_choice (typed);
+					}
+					// Cleaning the input.
+					tag_input.val("");
+				}
+			}
+		});
+
+		tag_input.autocomplete({
+			source: options.availableTags, 
+			select: function(event,ui){
+				if (is_new (ui.item.value)) {
+					create_choice (ui.item.value);
+				}
+				// Cleaning the input.
+				tag_input.val("");
+
+				// Preventing the tag input to be update with the chosen value.
+				return false;
+			}
+		});
+
+		function is_new (value){
+			var is_new = true;
+			this.tag_input.parents("ul").children(".tagit-choice").each(function(i){
+				n = $(this).children("input").val();
+				if (value == n) {
+					is_new = false;
+				}
+			})
+			return is_new;
+		}
+		function create_choice (value){
+			var el = "";
+			el  = "<li class=\"tagit-choice\">\n";
+			el += value + "\n";
+			el += "<a class=\"close\">x</a>\n";
+			el += "<input type=\"hidden\" style=\"display:none;\" value=\""+value+"\" name=\"item[tags][]\">\n";
+			el += "</li>\n";
+			var li_search_tags = this.tag_input.parent();
+			$(el).insertBefore (li_search_tags);
+			this.tag_input.val("");
+		}
+	};
+
+	String.prototype.trim = function() {
+		return this.replace(/^\s+|\s+$/g,"");
+	};
+
+})(jQuery);
-- 
cgit v1.1