Add meta package selector

1 files changed, 111 insertions, 5 deletions

diff --git a/app/public/static/tagselector.js b/app/public/static/tagselector.js
index d5895bf..2e90657 100644
--- a/app/public/static/tagselector.js
+++ b/app/public/static/tagselector.js
@@ -5,7 +5,7 @@
  * https://petprojects.googlecode.com/svn/trunk/GPL-LICENSE.txt
  */
 (function($) {
-	$.fn.tagSelector = function(source, name, select) {
+	$.fn.selectSelector = function(source, name, select) {
 		return this.each(function() {
 				var selector = $(this),
 					input = $('input[type=text]', this);
@@ -80,15 +80,115 @@
 			});
 	}
 
+	$.fn.csvSelector = function(source, name, result, allowSlash) {
+		return this.each(function() {
+				var selector = $(this),
+					input = $('input[type=text]', this);
+
+				var selected = [];
+
+				selector.click(function() { input.focus(); })
+					.delegate('.tag a', 'click', function() {
+						var id = $(this).parent().data("id");
+						for (var i = 0; i < selected.length; i++) {
+							if (selected[i] == id) {
+								selected.splice(i, 1);
+							}
+						}
+						recreate();
+					});
+
+
+				function selectItem(id) {
+					for (var i = 0; i < selected.length; i++) {
+						if (selected[i] == id) {
+							return false;
+						}
+					}
+					selected.push(id);
+					return true;
+				}
+
+				function addTag(id, value) {
+					var tag = $('<span class="tag"/>')
+						.text(value)
+						.data("id", id)
+						.append(' <a>x</a>')
+						.insertBefore(input);
+
+					input.attr("placeholder", null);
+				}
+
+				function recreate() {
+					selector.find("span").remove();
+					for (var i = 0; i < selected.length; i++) {
+						var value = source[selected[i]] || selected[i];
+						addTag(selected[i], value);
+					}
+					result.val(selected.join(","))
+				}
+				recreate();
+
+				input.keydown(function(e) {
+						if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active)
+							e.preventDefault();
+						else if (e.keyCode === $.ui.keyCode.COMMA) {
+							var item = input.val();
+							if (item.match(/^([a-z0-9_]+)$/)) {
+								selectItem(item);
+								recreate();
+								input.val("");
+							} else {
+								alert("Only lowercase alphanumeric and number names allowed.");
+							}
+							e.preventDefault();
+							return true;
+						} else if (e.keyCode === $.ui.keyCode.BACKSPACE) {
+							if (input.val() == "") {
+								var item = selected[selected.length - 1];
+								selected.splice(selected.length - 1, 1);
+								recreate();
+								input.val(item);
+								e.preventDefault();
+								return true;
+							}
+						}
+					})
+					.autocomplete({
+						minLength: 0,
+						source: source,
+						select: function(event, ui) {
+							selectItem(ui.item.id);
+							recreate();
+							input.val("");
+							return false;
+						}
+					});
+
+				input.data('ui-autocomplete')._renderItem = function(ul, item) {
+						return $('<li/>')
+							.data('item.autocomplete', item)
+							.append($('<a/>').text(item.toString()))
+							.appendTo(ul);
+					};
+
+				input.data('ui-autocomplete')._resizeMenu = function(ul, item) {
+						var ul = this.menu.element;
+						ul.outerWidth(Math.max(
+							ul.width('').outerWidth(),
+							selector.outerWidth()
+						));
+					};
+			});
+	}
+
 	$(function() {
 		$(".multichoice_selector").each(function() {
 			var ele = $(this);
 			var sel = ele.parent().find("select");
-			console.log(sel.attr("name"));
-			sel.css("display", "none");
+			sel.hide();
 
 			var options = [];
-
 			sel.find("option").each(function() {
 				var text = $(this).text();
 				options.push({
@@ -100,7 +200,13 @@
 			});
 
 			console.log(options);
-			ele.tagSelector(options, sel.attr("name"), sel);
+			ele.selectSelector(options, sel.attr("name"), sel);
+		});
+
+		$(".metapackage_selector").each(function() {
+			var input = $(this).parent().children("input[type='text']");
+			input.hide();
+			$(this).csvSelector(meta_packages, input.attr("name"), input);
 		})
 	});
 })(jQuery);