]> git.lizzy.rs Git - cheatdb.git/blobdiff - app/public/static/tagselector.js
Add descriptions to tags, and show in multiselect
[cheatdb.git] / app / public / static / tagselector.js
index 32e4882381629be95850b5d05ecbf1e4059068c9..566f88a6cde424adb5351359d7411aa0ed69ed64 100644 (file)
@@ -5,79 +5,99 @@
  * 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() {