From dfa25b9d0bd58025ee72eb66b93e4c677042d469 Mon Sep 17 00:00:00 2001 From: "bolotin.nicolai" Date: Wed, 24 Oct 2018 15:05:32 +0300 Subject: [PATCH] correctly show/hide when used inside shadow DOM --- coffee/chosen.jquery.coffee | 6 ++-- coffee/chosen.proto.coffee | 61 +++++++++++++++++++++---------------- 2 files changed, 38 insertions(+), 29 deletions(-) diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index 0054f0e89f0..4108599648c 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -106,7 +106,7 @@ class Chosen extends AbstractChosen @container.on 'click.chosen', (evt) -> evt.preventDefault(); return # gobble click of anchor destroy: -> - $(@container[0].ownerDocument).off 'click.chosen', @click_test_action + $(if @container[0].getRootNode? then @container[0].getRootNode() else @container[0].ownerDocument).off 'click.chosen', @click_test_action @form_field_label.off 'click.chosen' if @form_field_label.length > 0 if @search_field[0].tabIndex @@ -139,7 +139,7 @@ class Chosen extends AbstractChosen if not (evt? and ($ evt.target).hasClass "search-choice-close") if not @active_field @search_field.val "" if @is_multiple - $(@container[0].ownerDocument).on 'click.chosen', @click_test_action + $(if @container[0].getRootNode? then @container[0].getRootNode() else @container[0].ownerDocument).on 'click.chosen', @click_test_action this.results_show() else if not @is_multiple and evt and (($(evt.target)[0] == @selected_item[0]) || $(evt.target).parents("a.chosen-single").length) evt.preventDefault() @@ -161,7 +161,7 @@ class Chosen extends AbstractChosen this.close_field() if not @active_field and @container.hasClass "chosen-container-active" close_field: -> - $(@container[0].ownerDocument).off "click.chosen", @click_test_action + $(if @container[0].getRootNode? then @container[0].getRootNode() else @container[0].ownerDocument).off "click.chosen", @click_test_action @active_field = false this.results_hide() diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee index 25bd08c9630..69e0c473a37 100644 --- a/coffee/chosen.proto.coffee +++ b/coffee/chosen.proto.coffee @@ -46,7 +46,7 @@ class @Chosen extends AbstractChosen this.set_label_behavior() on_ready: -> - @form_field.fire("chosen:ready", {chosen: this}) + @form_field.fire("chosen:ready", { chosen: this }) register_observers: -> @container.observe "touchstart", (evt) => this.container_mousedown(evt) @@ -85,7 +85,10 @@ class @Chosen extends AbstractChosen @container.observe "click", (evt) => evt.preventDefault() # gobble click of anchor destroy: -> - @container.ownerDocument.stopObserving "click", @click_test_action + if (@container.getRootNode?) + @container.getRootNode().stopObserving "click", @click_test_action + else + @container.ownerDocument.stopObserving "click", @click_test_action for event in ['chosen:updated', 'chosen:activate', 'chosen:open', 'chosen:close'] @form_field.stopObserving(event) @@ -135,7 +138,10 @@ class @Chosen extends AbstractChosen if not (evt? and evt.target.hasClassName "search-choice-close") if not @active_field @search_field.clear() if @is_multiple - @container.ownerDocument.observe "click", @click_test_action + if (@container.getRootNode?) + @container.getRootNode().observe "click", @click_test_action + else + @container.ownerDocument.observe "click", @click_test_action this.results_show() else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chosen-single")) this.results_toggle() @@ -156,7 +162,10 @@ class @Chosen extends AbstractChosen this.close_field() if not @active_field and @container.hasClassName("chosen-container-active") close_field: -> - @container.ownerDocument.stopObserving "click", @click_test_action + if (@container.getRootNode?) + @container.getRootNode().stopObserving "click", @click_test_action + else + @container.ownerDocument.stopObserving "click", @click_test_action @active_field = false this.results_hide() @@ -200,7 +209,7 @@ class @Chosen extends AbstractChosen @search_field.readOnly = false @container.removeClassName "chosen-container-single-nosearch" - this.update_results_content this.results_option_build({first:true}) + this.update_results_content this.results_option_build({ first: true }) this.search_field_disabled() this.show_search_field_default() @@ -209,22 +218,22 @@ class @Chosen extends AbstractChosen @parsing = false result_do_highlight: (el) -> - this.result_clear_highlight() + this.result_clear_highlight() - @result_highlight = el - @result_highlight.addClassName "highlighted" + @result_highlight = el + @result_highlight.addClassName "highlighted" - maxHeight = parseInt @search_results.getStyle('maxHeight'), 10 - visible_top = @search_results.scrollTop - visible_bottom = maxHeight + visible_top + maxHeight = parseInt @search_results.getStyle('maxHeight'), 10 + visible_top = @search_results.scrollTop + visible_bottom = maxHeight + visible_top - high_top = @result_highlight.positionedOffset().top - high_bottom = high_top + @result_highlight.getHeight() + high_top = @result_highlight.positionedOffset().top + high_bottom = high_top + @result_highlight.getHeight() - if high_bottom >= visible_bottom - @search_results.scrollTop = if (high_bottom - maxHeight) > 0 then (high_bottom - maxHeight) else 0 - else if high_top < visible_top - @search_results.scrollTop = high_top + if high_bottom >= visible_bottom + @search_results.scrollTop = if (high_bottom - maxHeight) > 0 then (high_bottom - maxHeight) else 0 + else if high_top < visible_top + @search_results.scrollTop = high_top result_clear_highlight: -> @result_highlight.removeClassName('highlighted') if @result_highlight @@ -232,7 +241,7 @@ class @Chosen extends AbstractChosen results_show: -> if @is_multiple and @max_selected_options <= this.choices_count() - @form_field.fire("chosen:maxselected", {chosen: this}) + @form_field.fire("chosen:maxselected", { chosen: this }) return false @container.addClassName "chosen-with-drop" @@ -242,7 +251,7 @@ class @Chosen extends AbstractChosen @search_field.value = this.get_search_field_value() this.winnow_results() - @form_field.fire("chosen:showing_dropdown", {chosen: this}) + @form_field.fire("chosen:showing_dropdown", { chosen: this }) update_results_content: (content) -> @search_results.update content @@ -252,7 +261,7 @@ class @Chosen extends AbstractChosen this.result_clear_highlight() @container.removeClassName "chosen-with-drop" - @form_field.fire("chosen:hiding_dropdown", {chosen: this}) + @form_field.fire("chosen:hiding_dropdown", { chosen: this }) @results_showing = false @@ -288,7 +297,7 @@ class @Chosen extends AbstractChosen search_results_mouseover: (evt) -> target = if evt.target.hasClassName("active-result") then evt.target else evt.target.up(".active-result") - this.result_do_highlight( target ) if target + this.result_do_highlight(target) if target search_results_mouseout: (evt) -> this.result_clear_highlight() if evt.target.hasClassName('active-result') or evt.target.up('.active-result') @@ -343,7 +352,7 @@ class @Chosen extends AbstractChosen this.result_clear_highlight() if @is_multiple and @max_selected_options <= this.choices_count() - @form_field.fire("chosen:maxselected", {chosen: this}) + @form_field.fire("chosen:maxselected", { chosen: this }) return false if @is_multiple @@ -353,7 +362,7 @@ class @Chosen extends AbstractChosen high.addClassName("result-selected") - item = @results_data[ high.getAttribute("data-option-array-index") ] + item = @results_data[high.getAttribute("data-option-array-index")] item.selected = true @form_field.options[item.options_index].selected = true @@ -381,7 +390,7 @@ class @Chosen extends AbstractChosen this.search_field_scale() - single_set_selected_text: (text=@default_text) -> + single_set_selected_text: (text = @default_text) -> if text is @default_text @selected_item.addClassName("chosen-default") else @@ -433,7 +442,7 @@ class @Chosen extends AbstractChosen no_results: (terms) -> @search_results.insert this.get_no_results_html(terms) - @form_field.fire("chosen:no_results", {chosen: this}) + @form_field.fire("chosen:no_results", { chosen: this }) no_results_clear: -> nr = null @@ -507,7 +516,7 @@ class @Chosen extends AbstractChosen @search_field.setStyle(width: width + 'px') - trigger_form_field_change: -> + trigger_form_field_change: -> triggerHtmlEvent @form_field, 'input' triggerHtmlEvent @form_field, 'change'