app/public/static/tagselector.js

   1 /*!
   2  * Tag Selector plugin for jQuery: Facilitates selecting multiple tags by extending jQuery UI Autocomplete.
   3  * You may use Tag Selector under the terms of either the MIT License or the GNU General Public License (GPL) Version 2.
   4  * https://petprojects.googlecode.com/svn/trunk/MIT-LICENSE.txt
   5  * https://petprojects.googlecode.com/svn/trunk/GPL-LICENSE.txt
   6  */
   7 (function($) {
   8         $.fn.selectSelector = function(source, name, select) {
   9                 return this.each(function() {
  10                                 var selector = $(this),
  11                                         input = $('input[type=text]', this);
  12
  13                                 selector.click(function() { input.focus(); })
  14                                         .delegate('.tag a', 'click', function() {
  15                                                 var id = $(this).parent().data("id");
  16                                                 for (var i = 0; i < source.length; i++) {
  17                                                         if (source[i].id == id) {
  18                                                                 source[i].selected = null;
  19                                                         }
  20                                                 }
  21                                                 select.find("option[value=" + id + "]").attr("selected", null)
  22                                                 recreate();
  23                                         });
  24
  25                                 function addTag(item) {
  26                                         var tag = $('<span class="tag"/>')
  27                                                 .text(item.toString() + ' ')
  28                                                 .data("id", item.id)
  29                                                 .append('<a>x</a>')
  30                                                 .insertBefore(input);
  31                                         input.attr("placeholder", null);
  32                                         select.find("option[value=" + item.id + "]").attr("selected", "selected")
  33                                 }
  34
  35                                 function recreate() {
  36                                         selector.find("span").remove();
  37                                         for (var i = 0; i < source.length; i++) {
  38                                                 if (source[i].selected) {
  39                                                         addTag(source[i]);
  40                                                 }
  41                                         }
  42                                 }
  43                                 recreate();
  44
  45                                 input.keydown(function(e) {
  46                                                 if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active)
  47                                                         e.preventDefault();
  48                                         })
  49                                         .autocomplete({
  50                                                 minLength: 0,
  51                                                 source: source,
  52                                                 select: function(event, ui) {
  53                                                         addTag(ui.item);
  54                                                         input.val("");
  55                                                         return false;
  56                                                 }
  57                                         }).focus(function() {
  58                                                 // The following works only once.
  59                                                 // $(this).trigger('keydown.autocomplete');
  60                                                 // As suggested by digitalPBK, works multiple times
  61                                                 // $(this).data("autocomplete").search($(this).val());
  62                                                 // As noted by Jonny in his answer, with newer versions use uiAutocomplete
  63                                                 $(this).data("ui-autocomplete").search($(this).val());
  64                                         });
  65
  66                                 input.data('ui-autocomplete')._renderItem = function(ul, item) {
  67                                                 return $('<li/>')
  68                                                         .data('item.autocomplete', item)
  69                                                         .append($('<a/>').text(item.toString()))
  70                                                         .appendTo(ul);
  71                                         };
  72
  73                                 input.data('ui-autocomplete')._resizeMenu = function(ul, item) {
  74                                                 var ul = this.menu.element;
  75                                                 ul.outerWidth(Math.max(
  76                                                         ul.width('').outerWidth(),
  77                                                         selector.outerWidth()
  78                                                 ));
  79                                         };
  80                         });
  81         }
  82
  83         $.fn.csvSelector = function(source, name, result, allowSlash) {
  84                 return this.each(function() {
  85                                 var selector = $(this),
  86                                         input = $('input[type=text]', this);
  87
  88                                 var selected = [];
  89
  90                                 selector.click(function() { input.focus(); })
  91                                         .delegate('.tag a', 'click', function() {
  92                                                 var id = $(this).parent().data("id");
  93                                                 for (var i = 0; i < selected.length; i++) {
  94                                                         if (selected[i] == id) {
  95                                                                 selected.splice(i, 1);
  96                                                         }
  97                                                 }
  98                                                 recreate();
  99                                         });
 100
 101
 102                                 function selectItem(id) {
 103                                         for (var i = 0; i < selected.length; i++) {
 104                                                 if (selected[i] == id) {
 105                                                         return false;
 106                                                 }
 107                                         }
 108                                         selected.push(id);
 109                                         return true;
 110                                 }
 111
 112                                 function addTag(id, value) {
 113                                         var tag = $('<span class="tag"/>')
 114                                                 .text(value)
 115                                                 .data("id", id)
 116                                                 .append(' <a>x</a>')
 117                                                 .insertBefore(input);
 118
 119                                         input.attr("placeholder", null);
 120                                 }
 121
 122                                 function recreate() {
 123                                         selector.find("span").remove();
 124                                         for (var i = 0; i < selected.length; i++) {
 125                                                 var value = source[selected[i]] || selected[i];
 126                                                 addTag(selected[i], value);
 127                                         }
 128                                         result.val(selected.join(","))
 129                                 }
 130                                 recreate();
 131
 132                                 input.keydown(function(e) {
 133                                                 if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active)
 134                                                         e.preventDefault();
 135                                                 else if (e.keyCode === $.ui.keyCode.COMMA) {
 136                                                         var item = input.val();
 137                                                         if (item.match(/^([a-z0-9_]+)$/)) {
 138                                                                 selectItem(item);
 139                                                                 recreate();
 140                                                                 input.val("");
 141                                                         } else {
 142                                                                 alert("Only lowercase alphanumeric and number names allowed.");
 143                                                         }
 144                                                         e.preventDefault();
 145                                                         return true;
 146                                                 } else if (e.keyCode === $.ui.keyCode.BACKSPACE) {
 147                                                         if (input.val() == "") {
 148                                                                 var item = selected[selected.length - 1];
 149                                                                 selected.splice(selected.length - 1, 1);
 150                                                                 recreate();
 151                                                                 input.val(item);
 152                                                                 e.preventDefault();
 153                                                                 return true;
 154                                                         }
 155                                                 }
 156                                         })
 157                                         .autocomplete({
 158                                                 minLength: 0,
 159                                                 source: source,
 160                                                 select: function(event, ui) {
 161                                                         selectItem(ui.item.id);
 162                                                         recreate();
 163                                                         input.val("");
 164                                                         return false;
 165                                                 }
 166                                         });
 167
 168                                 input.data('ui-autocomplete')._renderItem = function(ul, item) {
 169                                                 return $('<li/>')
 170                                                         .data('item.autocomplete', item)
 171                                                         .append($('<a/>').text(item.toString()))
 172                                                         .appendTo(ul);
 173                                         };
 174
 175                                 input.data('ui-autocomplete')._resizeMenu = function(ul, item) {
 176                                                 var ul = this.menu.element;
 177                                                 ul.outerWidth(Math.max(
 178                                                         ul.width('').outerWidth(),
 179                                                         selector.outerWidth()
 180                                                 ));
 181                                         };
 182                         });
 183         }
 184
 185         $(function() {
 186                 $(".multichoice_selector").each(function() {
 187                         var ele = $(this);
 188                         var sel = ele.parent().find("select");
 189                         sel.hide();
 190
 191                         var options = [];
 192                         sel.find("option").each(function() {
 193                                 var text = $(this).text();
 194                                 options.push({
 195                                         id: $(this).attr("value"),
 196                                         value: text,
 197                                         selected: $(this).attr("selected") ? true : false,
 198                                         toString: function() { return text; },
 199                                 });
 200                         });
 201
 202                         console.log(options);
 203                         ele.selectSelector(options, sel.attr("name"), sel);
 204                 });
 205
 206                 $(".metapackage_selector").each(function() {
 207                         var input = $(this).parent().children("input[type='text']");
 208                         input.hide();
 209                         $(this).csvSelector(meta_packages, input.attr("name"), input);
 210                 })
 211         });
 212 })(jQuery);