From 7f6874bfd02e19a0f733fc753b47394f1ae4b5ca Mon Sep 17 00:00:00 2001 From: Patrick Filler Date: Tue, 12 Jul 2011 19:11:54 -0400 Subject: [PATCH] Initial version of jQuery Chosen. Plenty of bugs at this point! --- chosen/chosen.jquery.js | 754 +++++++++++++++++++++++++ coffee/chosen.jquery.coffee | 649 +++++++++++++++++++++ example.jquery.html | 1063 +++++++++++++++++++++++++++++++++++ 3 files changed, 2466 insertions(+) create mode 100644 chosen/chosen.jquery.js create mode 100644 coffee/chosen.jquery.coffee create mode 100644 example.jquery.html diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js new file mode 100644 index 0000000..5d86cb8 --- /dev/null +++ b/chosen/chosen.jquery.js @@ -0,0 +1,754 @@ +(function() { + /* + Chosen for Protoype.js + by Patrick Filler for Harvest + + Copyright (c) 2011 Harvest + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + THE SOFTWARE. + */ var $, Chosen, OptionsParser, first_intersect, get_side_border_padding, root; + var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; + root = typeof exports !== "undefined" && exports !== null ? exports : this; + $ = jQuery; + $.fn.extend({ + chosen: function(data, options) { + return $(this).each(function(input_field) { + return new Chosen(this, data, options); + }); + } + }); + Chosen = (function() { + function Chosen(elmn) { + this.set_default_values(); + this.form_field = elmn; + this.is_multiple = this.form_field.multiple; + this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option"; + this.set_up_html(); + this.register_observers(); + } + Chosen.prototype.set_default_values = function() { + this.click_test_action = __bind(function(evt) { + return this.test_active_click(evt); + }, this); + this.active_field = false; + this.mouse_on_container = false; + this.results_showing = false; + this.result_highlighted = null; + this.result_single_selected = null; + return this.choices = 0; + }; + Chosen.prototype.set_up_html = function() { + var container_div, dd_top, dd_width, sf_width; + this.container_id = this.form_field.id + "_chzn"; + this.f_width = ($(this.form_field)).width(); + this.default_text = ($(this.form_field)).attr('title') ? ($(this.form_field)).attr('title') : this.default_text_default; + container_div = $("
", { + id: this.container_id, + "class": 'chzn-container', + style: 'width: ' + this.f_width + 'px;' + }); + if (this.is_multiple) { + container_div.html('
    '); + } else { + container_div.html('' + this.default_text + '
      '); + } + ($(this.form_field)).hide().after(container_div); + this.container = $('#' + this.container_id); + this.container.addClass("chzn-container-" + (this.is_multiple ? "multi" : "single")); + this.dropdown = this.container.find('div.chzn-drop').first(); + dd_top = this.container.height(); + dd_width = this.f_width - get_side_border_padding(this.dropdown); + this.dropdown.css({ + "width": dd_width + "px", + "top": dd_top + "px" + }); + this.search_field = this.container.find('input').first(); + this.search_results = this.container.find('ul.chzn-results').first(); + this.search_field_scale(); + this.search_no_results = this.container.find('li.no-results').first(); + if (this.is_multiple) { + this.search_choices = this.container.find('ul.chzn-choices').first(); + this.search_container = this.container.find('li.search-field').first(); + } else { + this.search_container = this.container.find('div.chzn-search').first(); + this.selected_item = this.container.find('.chzn-single').first(); + sf_width = dd_width - get_side_border_padding(this.search_container) - get_side_border_padding(this.search_field); + this.search_field.css({ + "width": sf_width + "px" + }); + } + this.results_build(); + return this.set_tab_index(); + }; + Chosen.prototype.register_observers = function() { + this.container.click(__bind(function(evt) { + return this.container_click(evt); + }, this)); + this.container.mouseenter(__bind(function(evt) { + return this.mouse_enter(evt); + }, this)); + this.container.mouseleave(__bind(function(evt) { + return this.mouse_leave(evt); + }, this)); + this.search_results.click(__bind(function(evt) { + return this.search_results_click(evt); + }, this)); + this.search_results.mouseover(__bind(function(evt) { + return this.search_results_mouseover(evt); + }, this)); + this.search_results.mouseout(__bind(function(evt) { + return this.search_results_mouseout(evt); + }, this)); + ($(this.form_field)).bind("liszt:updated", __bind(function(evt) { + return this.results_update_field(evt); + }, this)); + this.search_field.blur(__bind(function(evt) { + return this.input_blur(evt); + }, this)); + this.search_field.keyup(__bind(function(evt) { + return this.keyup_checker(evt); + }, this)); + this.search_field.keydown(__bind(function(evt) { + return this.keydown_checker(evt); + }, this)); + if (this.is_multiple) { + this.search_choices.click(__bind(function(evt) { + return this.choices_click(evt); + }, this)); + return this.search_field.focus(__bind(function(evt) { + return this.input_focus(evt); + }, this)); + } else { + return this.selected_item.focus(__bind(function(evt) { + return this.activate_field(evt); + }, this)); + } + }; + Chosen.prototype.container_click = function(evt) { + if (evt && evt.type === "click") { + evt.stopPropagation(); + } + if (!this.pending_destroy_click) { + if (!this.active_field) { + if (this.is_multiple) { + this.search_field.val(""); + } + $(document).click(this.click_test_action); + this.results_show(); + } else if (!this.is_multiple && evt && ($(evt.target) === this.selected_item || $(evt.target).parents("a.chzn-single").length)) { + this.results_show(); + } + return this.activate_field(); + } else { + return this.pending_destroy_click = false; + } + }; + Chosen.prototype.mouse_enter = function() { + return this.mouse_on_container = true; + }; + Chosen.prototype.mouse_leave = function() { + return this.mouse_on_container = false; + }; + Chosen.prototype.input_focus = function(evt) { + if (!this.active_field) { + return setTimeout(this.container_click.bind(this), 50); + } + }; + Chosen.prototype.input_blur = function(evt) { + if (!this.mouse_on_container) { + this.active_field = false; + return setTimeout(this.blur_test.bind(this), 100); + } + }; + Chosen.prototype.blur_test = function(evt) { + if (!this.active_field && this.container.hasClass("chzn-container-active")) { + return this.close_field(); + } + }; + Chosen.prototype.close_field = function() { + $(document).unbind("click", this.click_test_action); + if (!this.is_multiple) { + this.selected_item.attr("tabIndex", this.search_field.attr("tabIndex")); + this.search_field.attr("tabIndex", -1); + } + this.active_field = false; + this.results_hide(); + this.container.removeClass("chzn-container-active"); + this.winnow_results_clear(); + this.clear_backstroke(); + this.show_search_field_default(); + return this.search_field_scale(); + }; + Chosen.prototype.activate_field = function() { + if (!this.is_multiple && !this.active_field) { + this.search_field.attr("tabIndex", this.selected_item.attr("tabIndex")); + this.selected_item.attr("tabIndex", -1); + } + this.container.addClass("chzn-container-active"); + this.active_field = true; + this.search_field.value = this.search_field.value; + return this.search_field.focus(); + }; + Chosen.prototype.test_active_click = function(evt) { + if ($(evt.target).parents('#' + this.container.id).length) { + return this.active_field = true; + } else { + return this.close_field(); + } + }; + Chosen.prototype.results_build = function() { + var content, data, startTime, _i, _len, _ref; + startTime = new Date(); + this.parsing = true; + this.results_data = OptionsParser.select_to_array(this.form_field); + if (this.is_multiple && this.choices > 0) { + this.search_choices.find("li.search-choice").remove(); + this.choices = 0; + } else if (!this.is_multiple) { + this.selected_item.find("span").text(this.default_text); + } + content = ''; + _ref = this.results_data; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + data = _ref[_i]; + if (data.group) { + content += this.result_add_group(data); + } else { + content += this.result_add_option(data); + if (data.selected && this.is_multiple) { + this.choice_build(data); + } else if (data.selected && !this.is_multiple) { + this.selected_item.find("span").text(data.text); + } + } + } + this.show_search_field_default(); + this.search_results.html(content); + return this.parsing = false; + }; + Chosen.prototype.result_add_group = function(group) { + if (!group.disabled) { + group.dom_id = this.form_field.id + "chzn_g_" + group.id; + return '
    • ' + $("
      ").text(group.label).html() + '
      • '; + } else { + return ""; + } + }; + Chosen.prototype.result_add_option = function(option) { + var classes; + if (!option.disabled) { + option.dom_id = this.form_field.id + "chzn_o_" + option.id; + classes = option.selected && this.is_multiple ? [] : ["active-result"]; + if (option.selected) { + classes.push("result-selected"); + } + if (option.group_id >= 0) { + classes.push("group-option"); + } + return '
    • ' + $("
      ").text(option.text).html() + '
      • '; + } else { + return ""; + } + }; + Chosen.prototype.results_update_field = function() { + this.result_clear_highlight(); + this.result_single_selected = null; + return this.results_build(); + }; + Chosen.prototype.result_do_highlight = function(el) { + var high_bottom, high_top, maxHeight, visible_bottom, visible_top; + this.result_clear_highlight(); + this.result_highlight = el; + this.result_highlight.addClass("highlighted"); + maxHeight = parseInt(this.search_results.css("maxHeight"), 10); + visible_top = this.search_results.scrollTop(); + visible_bottom = maxHeight + visible_top; + high_top = this.result_highlight.position().top; + high_bottom = high_top + this.result_highlight.outerHeight(); + if (high_bottom >= visible_bottom) { + return this.search_results.scrollTop((high_bottom - maxHeight) > 0 ? high_bottom - maxHeight : 0); + } else if (high_top < visible_top) { + return this.search_results.scrollTop(high_top); + } + }; + Chosen.prototype.result_clear_highlight = function() { + if (this.result_highlight) { + this.result_highlight.removeClass("highlighted"); + } + return this.result_highlight = null; + }; + Chosen.prototype.results_show = function() { + var dd_top; + if (!this.is_multiple) { + this.selected_item.addClass("chzn-single-with-drop"); + if (this.result_single_selected) { + this.result_do_highlight(this.result_single_selected); + } + } + dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1; + this.dropdown.css({ + "top": dd_top + "px", + "left": 0 + }); + this.results_showing = true; + this.search_field.focus(); + this.search_field.val(this.search_field.val()); + return this.winnow_results(); + }; + Chosen.prototype.results_hide = function() { + if (!this.is_multiple) { + this.selected_item.removeClass("chzn-single-with-drop"); + } + this.result_clear_highlight(); + this.dropdown.css({ + "left": "-9000px" + }); + return this.results_showing = false; + }; + Chosen.prototype.set_tab_index = function(el) { + var ti; + if (($(this.form_field)).attr("tabIndex")) { + ti = ($(this.form_field)).attr("tabIndex"); + ($(this.form_field)).attr("tabIndex", -1); + if (this.is_multiple) { + return this.search_field.attr("tabIndex", ti); + } else { + this.selected_item.attr("tabIndex", ti); + return this.search_field.attr("tabIndex", -1); + } + } + }; + Chosen.prototype.show_search_field_default = function() { + if (this.is_multiple && this.choices < 1 && !this.active_field) { + this.search_field.value = this.default_text; + return this.search_field.addClass("default"); + } else { + this.search_field.value = ""; + return this.search_field.removeClass("default"); + } + }; + Chosen.prototype.search_results_click = function(evt) { + var target; + target = $(evt.target).hasClass("active-result") ? $(evt.target) : $(evt.target).parents(".active-result").first(); + if (target) { + this.result_highlight = target; + return this.result_select(); + } + }; + Chosen.prototype.search_results_mouseover = function(evt) { + var target; + target = $(evt.target).hasClass("active-result") ? $(evt.target) : $(evt.target).parents(".active-result").first(); + if (target) { + return this.result_do_highlight(target); + } + }; + Chosen.prototype.search_results_mouseout = function(evt) { + if ($(evt.target).hasClass("active-result" || $(evt.target).parents('.active-result').first())) { + return this.result_clear_highlight(); + } + }; + Chosen.prototype.choices_click = function(evt) { + evt.preventDefault(); + if (this.active_field && !($(evt.target).hasClass("search-choice" || $(evt.target).parents('.search-choice').first)) && !this.results_showing) { + return this.results_show(); + } + }; + Chosen.prototype.choice_build = function(item) { + var choice_id, link; + choice_id = this.form_field.id + "_chzn_c_" + item.id; + this.choices += 1; + this.search_container.before('
    • ' + item.text + '
      • '); + link = $('#' + choice_id).find("a").first(); + return link.click(__bind(function(evt) { + return this.choice_destroy_link_click(evt); + }, this)); + }; + Chosen.prototype.choice_destroy_link_click = function(evt) { + evt.preventDefault(); + this.pending_destroy_click = true; + return this.choice_destroy($(evt.target)); + }; + Chosen.prototype.choice_destroy = function(link) { + this.choices -= 1; + this.show_search_field_default(); + if (this.is_multiple && this.choices > 0 && this.search_field.value.length < 1) { + this.results_hide(); + } + this.result_deselect(link.attr("rel")); + return link.parents('li').first().remove(); + }; + Chosen.prototype.result_select = function() { + var high, high_id, item, position; + if (this.result_highlight) { + high = this.result_highlight; + high_id = high.attr("id"); + this.result_clear_highlight(); + high.addClass("result-selected"); + if (this.is_multiple) { + this.result_deactivate(high); + } else { + this.result_single_selected = high; + } + position = high_id.substr(high_id.lastIndexOf("_") + 1); + item = this.results_data[position]; + item.selected = true; + this.form_field.options[item.select_index].selected = true; + if (this.is_multiple) { + this.choice_build(item); + } else { + this.selected_item.find("span").first().text(item.text); + } + this.results_hide(); + this.search_field.val(""); + return this.search_field_scale(); + } + }; + Chosen.prototype.result_activate = function(el) { + return el.addClass("active-result").show(); + }; + Chosen.prototype.result_deactivate = function(el) { + return el.removeClass("active-result").hide(); + }; + Chosen.prototype.result_deselect = function(pos) { + var result, result_data; + result_data = this.results_data[pos]; + result_data.selected = false; + this.form_field.options[result_data.select_index].selected = false; + result = $(this.form_field.id + "chzn_o_" + pos); + result.removeClass("result-selected").addClass("active-result").show(); + this.result_clear_highlight(); + this.winnow_results(); + if (typeof Event.simulate === 'function') { + this.form_field.simulate("change"); + } + return this.search_field_scale(); + }; + Chosen.prototype.results_search = function(evt) { + if (this.results_showing) { + return this.winnow_results(); + } else { + return this.results_show(); + } + }; + Chosen.prototype.winnow_results = function() { + var found, option, part, parts, regex, result_id, results, searchText, startTime, startpos, text, zregex, _i, _j, _len, _len2, _ref; + startTime = new Date(); + this.no_results_clear(); + results = 0; + searchText = this.search_field.value === this.default_text ? "" : $.trim(this.search_field.value); + regex = new RegExp('^' + searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i'); + zregex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i'); + _ref = this.results_data; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + option = _ref[_i]; + if (!option.disabled) { + if (option.group) { + $(option.dom_id).hide(); + } else if (!(this.is_multiple && option.selected)) { + found = false; + result_id = this.form_field.id + "chzn_o_" + option.id; + if (regex.test(option.text)) { + found = true; + results += 1; + } else if (option.text.indexOf(" ") >= 0 || option.text.indexOf("[") === 0) { + parts = option.text.replace(/\[|\]/g, "").split(" "); + if (parts.length) { + for (_j = 0, _len2 = parts.length; _j < _len2; _j++) { + part = parts[_j]; + if (regex.test(part)) { + found = true; + results += 1; + } + } + } + } + if (found) { + if (searchText.length) { + startpos = option.text.search(zregex); + text = option.text.substr(0, startpos + searchText.length) + '' + option.text.substr(startpos + searchText.length); + text = text.substr(0, startpos) + '' + text.substr(startpos); + } else { + text = option.text; + } + if ($(result_id).innerHTML !== text) { + $(result_id).text(text); + } + this.result_activate($(result_id)); + if (option.group_id != null) { + $(this.results_data[option.group_id].dom_id).show(); + } + } else { + if ($(result_id) === this.result_highlight) { + this.result_clear_highlight(); + } + this.result_deactivate($(result_id)); + } + } + } + } + if (results < 1 && searchText.length) { + return this.no_results(searchText); + } else { + return this.winnow_results_set_highlight(); + } + }; + Chosen.prototype.winnow_results_clear = function() { + var li, lis, _i, _len, _results; + this.search_field.val(""); + lis = this.search_results.find("li"); + _results = []; + for (_i = 0, _len = lis.length; _i < _len; _i++) { + li = lis[_i]; + li = $(li); + _results.push(li.hasClass("group-result") ? li.show() : !this.is_multiple || !li.hasClass("result-selected") ? this.result_activate(li) : void 0); + } + return _results; + }; + Chosen.prototype.winnow_results_set_highlight = function() { + var do_high; + if (!this.result_highlight) { + do_high = this.search_results.find(".active-result").first(); + if (do_high) { + return this.result_do_highlight(do_high); + } + } + }; + Chosen.prototype.no_results = function(terms) { + return this.search_results.insert(this.no_results_temp.evaluate({ + "terms": terms.escapeHTML() + })); + }; + Chosen.prototype.no_results_clear = function() { + return this.search_results.find(".no-results").remove(); + }; + Chosen.prototype.keydown_arrow = function() { + var actives, next, sibs; + actives = this.search_results.find("li.active-result"); + if (actives.length) { + if (!this.result_highlight) { + this.result_do_highlight($(actives[0])); + } else if (this.results_showing) { + sibs = this.result_highlight.nextAll(); + next = first_intersect(sibs, actives); + if (next) { + this.result_do_highlight($(next)); + } + } + if (!this.results_showing) { + return this.results_show(); + } + } + }; + Chosen.prototype.keyup_arrow = function() { + var actives, prev, sibs; + if (!this.results_showing && !this.is_multiple) { + return this.results_show(); + } else if (this.result_highlight) { + sibs = this.result_highlight.prevAll(); + actives = this.search_results.find("li.active-result"); + prev = first_intersect(sibs, actives); + if (prev) { + return this.result_do_highlight($(prev)); + } else { + if (this.choices > 0) { + this.results_hide(); + } + return this.result_clear_highlight(); + } + } + }; + Chosen.prototype.keydown_backstroke = function() { + if (this.pending_backstroke) { + this.choice_destroy(this.pending_backstroke.find("a").first()); + return this.clear_backstroke(); + } else { + this.pending_backstroke = this.search_container.siblings("li.search-choice").last(); + return this.pending_backstroke.addClass("search-choice-focus"); + } + }; + Chosen.prototype.clear_backstroke = function() { + if (this.pending_backstroke) { + this.pending_backstroke.removeClass("search-choice-focus"); + } + return this.pending_backstroke = null; + }; + Chosen.prototype.keyup_checker = function(evt) { + var stroke, _ref; + stroke = (_ref = evt.which) != null ? _ref : evt.keyCode; + this.search_field_scale(); + switch (stroke) { + case 8: + if (this.is_multiple && this.backstroke_length < 1 && this.choices > 0) { + return this.keydown_backstroke(); + } else if (!this.pending_backstroke) { + return this.results_search(); + } + break; + case 13: + evt.preventDefault(); + if (this.results_showing) { + return this.result_select(); + } + break; + case 9: + case 13: + case 38: + case 40: + case 16: + break; + default: + return this.results_search(); + } + }; + Chosen.prototype.keydown_checker = function(evt) { + var stroke, _ref; + stroke = (_ref = evt.which) != null ? _ref : evt.keyCode; + this.search_field_scale(); + if (stroke !== 8 && this.pending_backstroke) { + this.clear_backstroke(); + } + switch (stroke) { + case 8: + return this.backstroke_length = this.search_field.value.length; + case 9: + return this.mouse_on_container = false; + case 13: + return evt.preventDefault(); + case 38: + evt.preventDefault(); + return this.keyup_arrow(); + case 40: + return this.keydown_arrow(); + } + }; + Chosen.prototype.search_field_scale = function() { + var dd_top, div, h, style, style_block, styles, w, _i, _len; + if (this.is_multiple) { + h = 0; + w = 0; + style_block = "position:absolute; left: -1000px; top: -1000px; display:none;"; + styles = ['font-size', 'font-style', 'font-weight', 'font-family', 'line-height', 'text-transform', 'letter-spacing']; + for (_i = 0, _len = styles.length; _i < _len; _i++) { + style = styles[_i]; + style_block += style + ":" + this.search_field.css(style) + ";"; + } + div = $('
      ', { + 'style': style_block + }).text(this.search_field.val()); + $('body').append(div); + w = div.width() + 25; + div.remove(); + if (w > this.f_width - 10) { + w = this.f_width - 10; + } + this.search_field.css({ + 'width': w + 'px' + }); + dd_top = this.container.height(); + return this.dropdown.css({ + "top": dd_top + "px" + }); + } + }; + return Chosen; + })(); + get_side_border_padding = function(elmt) { + var side_border_padding; + return side_border_padding = elmt.outerWidth() - elmt.width(); + }; + root.get_side_border_padding = get_side_border_padding; + first_intersect = function(a1, a2) { + var element, _i, _len; + console.log(a2); + for (_i = 0, _len = a1.length; _i < _len; _i++) { + element = a1[_i]; + console.log(element); + console.log($.inArray(element, a2)); + if ($.inArray(element, a2)) { + return element; + } + } + return null; + }; + root.first_intersect = first_intersect; + OptionsParser = (function() { + function OptionsParser() { + this.group_index = 0; + this.sel_index = 0; + this.parsed = []; + } + OptionsParser.prototype.add_node = function(child) { + if (child.nodeName === "OPTGROUP") { + return this.add_group(child); + } else { + return this.add_option(child); + } + }; + OptionsParser.prototype.add_group = function(group) { + var group_id, option, _i, _len, _ref; + group_id = this.sel_index + this.group_index; + this.parsed.push({ + id: group_id, + group: true, + label: group.label, + position: this.group_index, + children: 0, + disabled: group.disabled + }); + _ref = group.childNodes; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + option = _ref[_i]; + this.add_option(option, group_id, group.disabled); + } + return this.group_index += 1; + }; + OptionsParser.prototype.add_option = function(option, group_id, group_disabled) { + var _ref; + if (option.nodeName === "OPTION" && (this.sel_index > 0 || option.text !== "")) { + if (group_id || group_id === 0) { + this.parsed[group_id].children += 1; + } + this.parsed.push({ + id: this.sel_index + this.group_index, + select_index: this.sel_index, + value: option.value, + text: option.text, + selected: option.selected, + disabled: (_ref = group_disabled === true) != null ? _ref : { + group_disabled: option.disabled + }, + group_id: group_id + }); + return this.sel_index += 1; + } + }; + return OptionsParser; + })(); + OptionsParser.select_to_array = function(select) { + var child, parser, _i, _len, _ref; + parser = new OptionsParser(); + _ref = select.childNodes; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + child = _ref[_i]; + parser.add_node(child); + } + return parser.parsed; + }; + root.OptionsParser = OptionsParser; +}).call(this); diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee new file mode 100644 index 0000000..920aa91 --- /dev/null +++ b/coffee/chosen.jquery.coffee @@ -0,0 +1,649 @@ +### +Chosen for Protoype.js +by Patrick Filler for Harvest + +Copyright (c) 2011 Harvest + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. +### + +root = exports ? this +$ = jQuery + +$.fn.extend({ + chosen: (data, options) -> + $(this).each((input_field) -> + new Chosen(this, data, options) + ) +}) + +class Chosen + + constructor: (elmn) -> + this.set_default_values() + + @form_field = elmn + @is_multiple = @form_field.multiple + + @default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option" + + this.set_up_html() + this.register_observers() + + + set_default_values: -> + + @click_test_action = (evt) => this.test_active_click(evt) + @active_field = false + @mouse_on_container = false + @results_showing = false + @result_highlighted = null + @result_single_selected = null + @choices = 0 + + # HTML Templates + #@no_results_temp = new Template('
    • No results match "#{terms}"
      • ') + + + set_up_html: -> + @container_id = @form_field.id + "_chzn" + + @f_width = ($ @form_field).width() + + @default_text = if ($ @form_field).attr 'title' then ($ @form_field).attr 'title' else @default_text_default + + container_div = ($ "
      ", { + id: @container_id + class: 'chzn-container' + style: 'width: ' + (@f_width) + 'px;' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter + }) + + if @is_multiple + container_div.html '
        ' + else + container_div.html '' + @default_text + '
          '; + + ($ @form_field).hide().after container_div + @container = ($ '#' + @container_id) + @container.addClass( "chzn-container-" + (if @is_multiple then "multi" else "single") ) + @dropdown = @container.find('div.chzn-drop').first() + + dd_top = @container.height() + dd_width = (@f_width - get_side_border_padding(@dropdown)) + + @dropdown.css({"width": dd_width + "px", "top": dd_top + "px"}) + + @search_field = @container.find('input').first() + @search_results = @container.find('ul.chzn-results').first() + this.search_field_scale() + + @search_no_results = @container.find('li.no-results').first() + + if @is_multiple + @search_choices = @container.find('ul.chzn-choices').first() + @search_container = @container.find('li.search-field').first() + else + @search_container = @container.find('div.chzn-search').first() + @selected_item = @container.find('.chzn-single').first() + sf_width = dd_width - get_side_border_padding(@search_container) - get_side_border_padding(@search_field) + @search_field.css( {"width" : sf_width + "px"} ) + + this.results_build() + this.set_tab_index() + + + register_observers: -> + @container.click (evt) => this.container_click(evt) + @container.mouseenter (evt) => this.mouse_enter(evt) + @container.mouseleave (evt) => this.mouse_leave(evt) + + @search_results.click (evt) => this.search_results_click(evt) + @search_results.mouseover (evt) => this.search_results_mouseover(evt) + @search_results.mouseout (evt) => this.search_results_mouseout(evt) + + ($ @form_field).bind "liszt:updated", (evt) => this.results_update_field(evt) + + @search_field.blur (evt) => this.input_blur(evt) + @search_field.keyup (evt) => this.keyup_checker(evt) + @search_field.keydown (evt) => this.keydown_checker(evt) + + if @is_multiple + @search_choices.click (evt) => this.choices_click(evt) + @search_field.focus (evt) => this.input_focus(evt) + else + @selected_item.focus (evt) => this.activate_field(evt) + + container_click: (evt) -> + if evt and evt.type is "click" + evt.stopPropagation() + if not @pending_destroy_click + if not @active_field + @search_field.val "" if @is_multiple + $(document).click @click_test_action + this.results_show() + else if not @is_multiple and evt and ($(evt.target) is @selected_item || $(evt.target).parents("a.chzn-single").length) + this.results_show() + + this.activate_field() + else + @pending_destroy_click = false + + mouse_enter: -> @mouse_on_container = true + mouse_leave: -> @mouse_on_container = false + + input_focus: (evt) -> + setTimeout this.container_click.bind(this), 50 unless @active_field + + input_blur: (evt) -> + if not @mouse_on_container + @active_field = false + setTimeout this.blur_test.bind(this), 100 + + blur_test: (evt) -> + this.close_field() if not @active_field and @container.hasClass "chzn-container-active" + + close_field: -> + $(document).unbind "click", @click_test_action + + if not @is_multiple + @selected_item.attr "tabIndex", @search_field.attr("tabIndex") + @search_field.attr "tabIndex", -1 + + @active_field = false + this.results_hide() + + @container.removeClass "chzn-container-active" + this.winnow_results_clear() + this.clear_backstroke() + + this.show_search_field_default() + this.search_field_scale() + + activate_field: -> + if not @is_multiple and not @active_field + @search_field.attr "tabIndex", @selected_item.attr "tabIndex" + @selected_item.attr "tabIndex", -1 + + @container.addClass "chzn-container-active" + @active_field = true + + @search_field.value = @search_field.value + @search_field.focus() + + + test_active_click: (evt) -> + if $(evt.target).parents('#' + @container.id).length + @active_field = true + else + this.close_field() + + results_build: -> + startTime = new Date() + @parsing = true + @results_data = OptionsParser.select_to_array @form_field + + if @is_multiple and @choices > 0 + @search_choices.find("li.search-choice").remove() + @choices = 0 + else if not @is_multiple + @selected_item.find("span").text @default_text + + content = '' + for data in @results_data + if data.group + content += this.result_add_group data + else + content += this.result_add_option data + if data.selected and @is_multiple + this.choice_build data + else if data.selected and not @is_multiple + @selected_item.find("span").text data.text + + this.show_search_field_default() + @search_results.html content + @parsing = false + + + result_add_group: (group) -> + if not group.disabled + group.dom_id = @form_field.id + "chzn_g_" + group.id + '
        • ' + $("
          ").text(group.label).html() + '
          • ' + else + "" + + result_add_option: (option) -> + if not option.disabled + option.dom_id = @form_field.id + "chzn_o_" + option.id + + classes = if option.selected and @is_multiple then [] else ["active-result"] + classes.push "result-selected" if option.selected + classes.push "group-option" if option.group_id >= 0 + + '
        • ' + $("
          ").text(option.text).html() + '
          • ' + else + "" + + results_update_field: -> + this.result_clear_highlight() + @result_single_selected = null + this.results_build() + + result_do_highlight: (el) -> + this.result_clear_highlight(); + + @result_highlight = el; + @result_highlight.addClass "highlighted" + + maxHeight = parseInt @search_results.css("maxHeight"), 10 + visible_top = @search_results.scrollTop() + visible_bottom = maxHeight + visible_top + + high_top = @result_highlight.position().top + high_bottom = high_top + @result_highlight.outerHeight() + + #console.log visible_top, visible_bottom, high_top, high_bottom + + if high_bottom >= visible_bottom + #console.log "bottom is greater than bottom" + @search_results.scrollTop if (high_bottom - maxHeight) > 0 then (high_bottom - maxHeight) else 0 + else if high_top < visible_top + #console.log "top is less than top" + @search_results.scrollTop high_top + + result_clear_highlight: -> + @result_highlight.removeClass "highlighted" if @result_highlight + @result_highlight = null + + results_show: -> + if not @is_multiple + @selected_item.addClass "chzn-single-with-drop" + if @result_single_selected + this.result_do_highlight( @result_single_selected ) + + dd_top = if @is_multiple then @container.height() else (@container.height() - 1) + @dropdown.css {"top": dd_top + "px", "left":0} + @results_showing = true + + @search_field.focus() + @search_field.val @search_field.val() + + this.winnow_results() + + results_hide: -> + @selected_item.removeClass "chzn-single-with-drop" unless @is_multiple + this.result_clear_highlight() + @dropdown.css {"left":"-9000px"} + @results_showing = false + + + set_tab_index: (el) -> + if ($ @form_field).attr "tabIndex" + ti = ($ @form_field).attr "tabIndex" + ($ @form_field).attr "tabIndex", -1 + + if @is_multiple + @search_field.attr "tabIndex", ti + else + @selected_item.attr "tabIndex", ti + @search_field.attr "tabIndex", -1 + + show_search_field_default: -> + if @is_multiple and @choices < 1 and not @active_field + @search_field.value = @default_text + @search_field.addClass "default" + else + @search_field.value = "" + @search_field.removeClass "default" + + search_results_click: (evt) -> + target = if $(evt.target).hasClass "active-result" then $(evt.target) else $(evt.target).parents(".active-result").first() + if target + # TODO fix + @result_highlight = target + this.result_select() + + search_results_mouseover: (evt) -> + target = if $(evt.target).hasClass "active-result" then $(evt.target) else $(evt.target).parents(".active-result").first() + this.result_do_highlight( target ) if target + + search_results_mouseout: (evt) -> + this.result_clear_highlight() if $(evt.target).hasClass "active-result" or $(evt.target).parents('.active-result').first() + + + choices_click: (evt) -> + evt.preventDefault() + if( @active_field and not($(evt.target).hasClass "search-choice" or $(evt.target).parents('.search-choice').first) and not @results_showing ) + this.results_show() + + choice_build: (item) -> + choice_id = @form_field.id + "_chzn_c_" + item.id + @choices += 1 + @search_container.before '
        • ' + item.text + '
          • ' + link = $('#' + choice_id).find("a").first() + link.click (evt) => this.choice_destroy_link_click(evt) + + choice_destroy_link_click: (evt) -> + evt.preventDefault() + @pending_destroy_click = true + this.choice_destroy $(evt.target) + + choice_destroy: (link) -> + @choices -= 1 + this.show_search_field_default() + + this.results_hide() if @is_multiple and @choices > 0 and @search_field.value.length < 1 + + this.result_deselect (link.attr "rel") + link.parents('li').first().remove() + + result_select: -> + if @result_highlight + high = @result_highlight + high_id = high.attr "id" + + this.result_clear_highlight(); + + high.addClass "result-selected" + + if @is_multiple + this.result_deactivate high + else + @result_single_selected = high + + position = high_id.substr(high_id.lastIndexOf("_") + 1 ) + item = @results_data[position] + item.selected = true + + @form_field.options[item.select_index].selected = true + + if @is_multiple + this.choice_build item + else + @selected_item.find("span").first().text item.text + + this.results_hide() + @search_field.val "" + + # TODO + #@form_field.simulate("change") if typeof Event.simulate is 'function' + this.search_field_scale() + + result_activate: (el) -> + el.addClass("active-result").show() + + result_deactivate: (el) -> + el.removeClass("active-result").hide() + + result_deselect: (pos) -> + result_data = @results_data[pos] + result_data.selected = false + + @form_field.options[result_data.select_index].selected = false + result = $(@form_field.id + "chzn_o_" + pos) + result.removeClass("result-selected").addClass("active-result").show() + + this.result_clear_highlight() + this.winnow_results() + + @form_field.simulate("change") if typeof Event.simulate is 'function' + this.search_field_scale() + + results_search: (evt) -> + if @results_showing + this.winnow_results() + else + this.results_show() + + winnow_results: -> + startTime = new Date() + this.no_results_clear() + + results = 0 + + searchText = if @search_field.value is @default_text then "" else $.trim @search_field.value + regex = new RegExp('^' + searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i') + zregex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i') + + for option in @results_data + if not option.disabled + if option.group + $(option.dom_id).hide() + else if not (@is_multiple and option.selected) + found = false + result_id = @form_field.id + "chzn_o_" + option.id + + if regex.test option.text + found = true; + results += 1; + else if option.text.indexOf(" ") >= 0 or option.text.indexOf("[") == 0 + #TODO: replace this substitution of /\[\]/ with a list of characters to skip. + parts = option.text.replace(/\[|\]/g, "").split(" ") + if parts.length + for part in parts + if regex.test part + found = true + results += 1 + + if found + if searchText.length + startpos = option.text.search zregex + text = option.text.substr(0, startpos + searchText.length) + '          ' + option.text.substr(startpos + searchText.length) + text = text.substr(0, startpos) + '' + text.substr(startpos) + else + text = option.text + + $(result_id).text text if $(result_id).innerHTML != text + + this.result_activate $(result_id) + + $(@results_data[option.group_id].dom_id).show() if option.group_id? + else + this.result_clear_highlight() if $(result_id) is @result_highlight + this.result_deactivate $(result_id) + + if results < 1 and searchText.length + this.no_results(searchText) + else + this.winnow_results_set_highlight() + + winnow_results_clear: -> + @search_field.val "" + lis = @search_results.find("li") + + for li in lis + li = $(li) + if li.hasClass "group-result" + li.show() + else if not @is_multiple or not li.hasClass "result-selected" + this.result_activate li + + winnow_results_set_highlight: -> + if not @result_highlight + do_high = @search_results.find(".active-result").first() + if(do_high) + this.result_do_highlight do_high + + no_results: (terms) -> + @search_results.insert @no_results_temp.evaluate({"terms":terms.escapeHTML()}) + + no_results_clear: -> + @search_results.find(".no-results").remove() + + keydown_arrow: -> + actives = @search_results.find "li.active-result" + if actives.length + if not @result_highlight + this.result_do_highlight $(actives[0]) + else if @results_showing + sibs = @result_highlight.nextAll() + next = first_intersect sibs, actives + this.result_do_highlight $(next) if next + this.results_show() if not @results_showing + + keyup_arrow: -> + if not @results_showing and not @is_multiple + this.results_show() + else if @result_highlight + sibs = @result_highlight.prevAll() + actives = @search_results.find "li.active-result" + prev = first_intersect sibs, actives + + if prev + this.result_do_highlight ($ prev) + else + this.results_hide() if @choices > 0 + this.result_clear_highlight() + + keydown_backstroke: -> + if @pending_backstroke + this.choice_destroy @pending_backstroke.find("a").first() + this.clear_backstroke() + else + @pending_backstroke = @search_container.siblings("li.search-choice").last() + @pending_backstroke.addClass "search-choice-focus" + + clear_backstroke: -> + @pending_backstroke.removeClass "search-choice-focus" if @pending_backstroke + @pending_backstroke = null + + keyup_checker: (evt) -> + stroke = evt.which ? evt.keyCode + this.search_field_scale() + + switch stroke + when 8 + if @is_multiple and @backstroke_length < 1 and @choices > 0 + this.keydown_backstroke() + else if not @pending_backstroke + this.results_search() + when 13 + evt.preventDefault() + this.result_select() if this.results_showing + when 9, 13, 38, 40, 16 + # don't do anything on these keys + else this.results_search() + + + keydown_checker: (evt) -> + stroke = evt.which ? evt.keyCode + this.search_field_scale() + + this.clear_backstroke() if stroke != 8 and this.pending_backstroke + + switch stroke + when 8 + @backstroke_length = this.search_field.value.length + when 9 + @mouse_on_container = false + when 13 + evt.preventDefault() + when 38 + evt.preventDefault() + this.keyup_arrow() + when 40 + this.keydown_arrow() + + + search_field_scale: -> + if @is_multiple + h = 0 + w = 0 + + style_block = "position:absolute; left: -1000px; top: -1000px; display:none;" + styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing'] + + for style in styles + style_block += style + ":" + @search_field.css(style) + ";" + + div = $('
          ', { 'style' : style_block }).text @search_field.val() + $('body').append div + + w = div.width() + 25 + div.remove() + + if( w > @f_width-10 ) + w = @f_width - 10 + + @search_field.css({'width': w + 'px'}) + + dd_top = @container.height() + @dropdown.css({"top": dd_top + "px"}) + +get_side_border_padding = (elmt) -> + side_border_padding = elmt.outerWidth() - elmt.width() + +root.get_side_border_padding = get_side_border_padding + +first_intersect = (a1, a2) -> + # TODO for some reason, up arrow doesn't find the first + console.log a2 + for element in a1 + console.log element + console.log $.inArray element, a2 + return element if $.inArray element, a2 + + return null + +root.first_intersect = first_intersect + +class OptionsParser + + constructor: -> + @group_index = 0 + @sel_index = 0 + @parsed = [] + + add_node: (child) -> + if child.nodeName is "OPTGROUP" + this.add_group child + else + this.add_option child + + add_group: (group) -> + group_id = @sel_index + @group_index + @parsed.push + id: group_id + group: true + label: group.label + position: @group_index + children: 0 + disabled: group.disabled + this.add_option( option, group_id, group.disabled ) for option in group.childNodes + @group_index += 1 + + add_option: (option, group_id, group_disabled) -> + if option.nodeName is "OPTION" and (@sel_index > 0 or option.text != "") + if group_id || group_id is 0 + @parsed[group_id].children += 1 + @parsed.push + id: @sel_index + @group_index + select_index: @sel_index + value: option.value + text: option.text + selected: option.selected + disabled: ((group_disabled is true) ? group_disabled : option.disabled) + group_id: group_id + @sel_index += 1 + +OptionsParser.select_to_array = (select) -> + parser = new OptionsParser() + parser.add_node( child ) for child in select.childNodes + parser.parsed + +root.OptionsParser = OptionsParser \ No newline at end of file diff --git a/example.jquery.html b/example.jquery.html new file mode 100644 index 0000000..a543150 --- /dev/null +++ b/example.jquery.html @@ -0,0 +1,1063 @@ + + + + + + + +
          +

          Chosen

          +

          Chosen is a javsacript plug-in for Prototype (jQuery support coming soon) that makes long, unwieldy select boxes much more user-friendly. For more information (including usage, explanation and faqs), check out the online documentation.

          + +

          Standard Select

          +
          +
          + Turns This + +
          +
          + Into This + +
          +
          + +

          Multiple Select

          +
          +
          + Turns This + +
          +
          + Into This + +
          +
          + +

          Setup

          +

          Using Chosen is easy as can be.

          +
            +
          1. Download the plug-in and copy the chosen files to your app.
            2. +
          2. Add the class chzn-select to any select box.
            3. +
          3. Disco.
            4. +
          + +
          + + + + \ No newline at end of file