diff options
Diffstat (limited to 'site-media')
| -rw-r--r-- | site-media/css/jquery.ui.autocomplete.custom.css | 75 | ||||
| -rw-r--r-- | site-media/js/tag-it.js | 100 |
2 files changed, 175 insertions, 0 deletions
diff --git a/site-media/css/jquery.ui.autocomplete.custom.css b/site-media/css/jquery.ui.autocomplete.custom.css new file mode 100644 index 0000000..33c4084 --- /dev/null +++ b/site-media/css/jquery.ui.autocomplete.custom.css @@ -0,0 +1,75 @@ +.ui-autocomplete {
+ background-color: #eee;
+ position: absolute;
+ cursor: default;
+}
+.ui-autocomplete .ui-menu-item {
+}
+.ui-autocomplete .ui-menu-item a {
+ display:block;
+ padding:4px 6px;
+ text-decoration:none;
+ line-height:12px;
+}
+.ui-autocomplete .ui-menu-item a.ui-state-hover,
+.ui-autocomplete .ui-menu-item a.ui-state-active {
+ background-color:#78959D;
+ color:#fff;
+ margin:0;
+}
+.ui-autocomplete-loading {
+ background: white url(images/ui-anim_basic_16x16.gif) right center no-repeat;
+}
+
+ul.tagit {
+ padding:1px 5px;
+ border-style:solid;
+ border-width:1px;
+ border-color:#C6C6C6;
+ overflow:auto;
+}
+ul.tagit li {
+ -moz-border-radius:5px 5px 5px 5px;
+ display: block;
+ float: left;
+ margin:2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice {
+ background-color:#DEE7F8;
+ border:1px solid #CAD8F3;
+ padding:2px 4px 3px;
+}
+ul.tagit li.tagit-choice:hover {
+ background-color:#bbcef1;
+ border-color:#6d95e0;
+}
+ul.tagit li.tagit-new {
+ padding:2px 4px 3px;
+ padding:2px 4px 1px;
+ padding:2px 4px 1px 0;
+}
+
+ul.tagit li.tagit-choice input {
+ display:block;
+ float:left;
+ margin:2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice a.close {
+ color:#777777;
+ cursor:pointer;
+ font-size:12px;
+ font-weight:bold;
+ outline:medium none;
+ padding:2px 0 2px 3px;
+ text-decoration:none;
+}
+ul.tagit input[type="text"] {
+ -moz-box-sizing:border-box;
+ border:none;
+ margin:0;
+ padding:0;
+ width:inherit;
+ border-color:#C6C6C6;
+ background-color:#FFFFFF;
+ color:#333333;
+}
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);
|