diff options
| author | Johan Berggren <jbn@nordu.net> | 2011-03-04 14:23:08 +0100 |
|---|---|---|
| committer | Johan Berggren <jbn@nordu.net> | 2011-03-04 14:23:08 +0100 |
| commit | 07a04353ebacf6769683b55694d5aa78139d1d4f (patch) | |
| tree | 15029939880287af94bc76eb3eb99fd8edad9f72 /site-media/js | |
| parent | 6613bbae1b7d3262fec64ae1c8da7d772c2e2b66 (diff) | |
Added tagging on Memberships
Diffstat (limited to 'site-media/js')
| -rw-r--r-- | site-media/js/tag-it.js | 100 |
1 files changed, 100 insertions, 0 deletions
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);
|