* https://petprojects.googlecode.com/svn/trunk/GPL-LICENSE.txt
*/
(function($) {
- $.fn.selectSelector = function(source, name, select) {
+ function hide_error(input) {
+ var err = input.parent().parent().find(".invalid-remaining");
+ err.hide();
+ }
+
+ function show_error(input, msg) {
+ var err = input.parent().parent().find(".invalid-remaining");
+ console.log(err.length);
+ err.text(msg);
+ err.show();
+ }
+
+ $.fn.selectSelector = function(source, select) {
return this.each(function() {
- var selector = $(this),
- input = $('input[type=text]', this);
+ var selector = $(this),
+ input = $('input[type=text]', this);
- selector.click(function() { input.focus(); })
- .delegate('.tag a', 'click', function() {
- var id = $(this).parent().data("id");
- for (var i = 0; i < source.length; i++) {
- if (source[i].id == id) {
- source[i].selected = null;
- }
- }
- select.find("option[value=" + id + "]").attr("selected", null)
- recreate();
- });
+ selector.click(function() { input.focus(); })
+ .delegate('.badge a', 'click', function() {
+ var id = $(this).parent().data("id");
+ select.find("option[value=" + id + "]").attr("selected", false)
+ recreate();
+ });
- function addTag(item) {
- var tag = $('<span class="tag"/>')
- .text(item.toString() + ' ')
- .data("id", item.id)
- .append('<a>x</a>')
- .insertBefore(input);
- input.attr("placeholder", null);
- select.find("option[value=" + item.id + "]").attr("selected", "selected")
+ function addTag(id, text) {
+ const idx = text.indexOf(':');
+ if (idx > 0) {
+ text = text.substr(0, idx);
}
- function recreate() {
- selector.find("span").remove();
- for (var i = 0; i < source.length; i++) {
- if (source[i].selected) {
- addTag(source[i]);
- }
+ $('<span class="badge badge-pill badge-primary"/>')
+ .text(text + ' ')
+ .data("id", id)
+ .append('<a>x</a>')
+ .insertBefore(input);
+ input.attr("placeholder", null);
+ select.find("option[value='" + id + "']").attr("selected", "selected")
+ hide_error(input);
+ }
+
+ function recreate() {
+ selector.find("span").remove();
+ select.find("option").each(function() {
+ if (this.hasAttribute("selected")) {
+ addTag(this.getAttribute("value"), this.innerText);
}
+ });
+ }
+ recreate();
+
+ input.focusout(function(e) {
+ var value = input.val().trim()
+ if (value != "") {
+ show_error(input, "Please select an existing tag, it;s not possible to add custom ones.");
}
- recreate();
+ })
- input.keydown(function(e) {
- if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active)
- e.preventDefault();
- })
- .autocomplete({
- minLength: 0,
- source: source,
- select: function(event, ui) {
- addTag(ui.item);
- input.val("");
- return false;
- }
- }).focus(function() {
- // The following works only once.
- // $(this).trigger('keydown.autocomplete');
- // As suggested by digitalPBK, works multiple times
- // $(this).data("autocomplete").search($(this).val());
- // As noted by Jonny in his answer, with newer versions use uiAutocomplete
- $(this).data("ui-autocomplete").search($(this).val());
- });
+ input.keydown(function(e) {
+ if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active)
+ e.preventDefault();
+ })
+ .autocomplete({
+ minLength: 0,
+ source: source,
+ select: function(event, ui) {
+ addTag(ui.item.id, ui.item.toString());
+ input.val("");
+ return false;
+ }
+ }).focus(function() {
+ // The following works only once.
+ // $(this).trigger('keydown.autocomplete');
+ // As suggested by digitalPBK, works multiple times
+ // $(this).data("autocomplete").search($(this).val());
+ // As noted by Jonny in his answer, with newer versions use uiAutocomplete
+ $(this).data("ui-autocomplete").search($(this).val());
+ });
- 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')._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()
- ));
- };
- });
+ input.data('ui-autocomplete')._resizeMenu = function(ul, item) {
+ var ul = this.menu.element;
+ ul.outerWidth(Math.max(
+ ul.width('').outerWidth(),
+ selector.outerWidth()
+ ));
+ };
+ });
}
$.fn.csvSelector = function(source, name, result, allowSlash) {
lookup[source[i].id] = source[i];
}
- var selected_raw = result.val().split(",");
- for (var i = 0; i < selected_raw.length; i++) {
- var raw = selected_raw[i].trim();
- if (lookup[raw]) {
- selected.push(raw);
- }
- }
-
selector.click(function() { input.focus(); })
- .delegate('.tag a', 'click', function() {
+ .delegate('.badge a', 'click', function() {
var id = $(this).parent().data("id");
for (var i = 0; i < selected.length; i++) {
if (selected[i] == id) {
recreate();
});
-
function selectItem(id) {
for (var i = 0; i < selected.length; i++) {
if (selected[i] == id) {
}
function addTag(id, value) {
- var tag = $('<span class="tag"/>')
+ var tag = $('<span class="badge badge-pill badge-primary"/>')
.text(value)
.data("id", id)
.append(' <a>x</a>')
.insertBefore(input);
input.attr("placeholder", null);
+ hide_error(input);
}
function recreate() {
}
result.val(selected.join(","))
}
- recreate();
+
+ function readFromResult() {
+ selected = [];
+ var selected_raw = result.val().split(",");
+ for (var i = 0; i < selected_raw.length; i++) {
+ var raw = selected_raw[i].trim();
+ if (lookup[raw] || raw.match(/^([a-z0-9_]+)$/)) {
+ selected.push(raw);
+ }
+ }
+
+ recreate();
+ }
+ readFromResult();
+
+ result.change(readFromResult);
+
+ input.focusout(function() {
+ var item = input.val();
+ if (item.length == 0) {
+ input.data("ui-autocomplete").search("");
+ } else if (item.match(/^([a-z0-9_]+)$/)) {
+ selectItem(item);
+ recreate();
+ input.val("");
+ }
+ return true;
+ });
input.keydown(function(e) {
if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active)
recreate();
input.val("");
} else {
- alert("Only lowercase alphanumeric and number names allowed.");
+ show_error(input, "Only lowercase alphanumeric and number names allowed.");
}
e.preventDefault();
return true;
});
});
- console.log(options);
- ele.selectSelector(options, sel.attr("name"), sel);
+ ele.selectSelector(options, sel);
});
$(".metapackage_selector").each(function() {