Introduce abstract-chosen, try to start sharing more code between platforms
This commit is contained in:
Matthew Beale
parent
df6345465a
commit
4e463669d2
8 changed files with 555 additions and 542 deletions
|
|
@ -14,32 +14,15 @@ $.fn.extend({
|
|||
)
|
||||
})
|
||||
|
||||
class Chosen
|
||||
class Chosen extends AbstractChosen
|
||||
|
||||
constructor: (elmn) ->
|
||||
this.set_default_values()
|
||||
|
||||
@form_field = elmn
|
||||
setup: ->
|
||||
@form_field_jq = $ @form_field
|
||||
@is_multiple = @form_field.multiple
|
||||
@is_rtl = @form_field_jq.hasClass "chzn-rtl"
|
||||
|
||||
@default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"
|
||||
|
||||
this.set_up_html()
|
||||
this.register_observers()
|
||||
finish_setup: ->
|
||||
@form_field_jq.addClass "chzn-done"
|
||||
|
||||
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
|
||||
|
||||
set_up_html: ->
|
||||
@container_id = if @form_field.id.length then @form_field.id.replace(/(:|\.)/g, '_') else this.generate_field_id()
|
||||
@container_id += "_chzn"
|
||||
|
|
@ -125,17 +108,6 @@ class Chosen
|
|||
else
|
||||
@pending_destroy_click = false
|
||||
|
||||
mouse_enter: -> @mouse_on_container = true
|
||||
mouse_leave: -> @mouse_on_container = false
|
||||
|
||||
input_focus: (evt) ->
|
||||
setTimeout (=> this.container_mousedown()), 50 unless @active_field
|
||||
|
||||
input_blur: (evt) ->
|
||||
if not @mouse_on_container
|
||||
@active_field = false
|
||||
setTimeout (=> this.blur_test()), 100
|
||||
|
||||
blur_test: (evt) ->
|
||||
this.close_field() if not @active_field and @container.hasClass "chzn-container-active"
|
||||
|
||||
|
|
@ -210,23 +182,6 @@ class Chosen
|
|||
else
|
||||
""
|
||||
|
||||
result_add_option: (option) ->
|
||||
if not option.disabled
|
||||
option.dom_id = @container_id + "_o_" + option.array_index
|
||||
|
||||
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_array_index?
|
||||
|
||||
'<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.html + '</li>'
|
||||
else
|
||||
""
|
||||
|
||||
results_update_field: ->
|
||||
this.result_clear_highlight()
|
||||
@result_single_selected = null
|
||||
this.results_build()
|
||||
|
||||
result_do_highlight: (el) ->
|
||||
if el.length
|
||||
this.result_clear_highlight()
|
||||
|
|
@ -250,12 +205,6 @@ class Chosen
|
|||
@result_highlight.removeClass "highlighted" if @result_highlight
|
||||
@result_highlight = null
|
||||
|
||||
results_toggle: ->
|
||||
if @results_showing
|
||||
this.results_hide()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
results_show: ->
|
||||
if not @is_multiple
|
||||
@selected_item.addClass "chzn-single-with-drop"
|
||||
|
|
@ -389,12 +338,6 @@ class Chosen
|
|||
@form_field_jq.trigger "change"
|
||||
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()
|
||||
|
|
@ -508,27 +451,6 @@ class Chosen
|
|||
@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.result_clear_highlight()
|
||||
this.results_search()
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
this.result_select(evt) if this.results_showing
|
||||
when 27
|
||||
this.results_hide() if @results_showing
|
||||
when 9, 38, 40, 16, 91, 17
|
||||
# don't do anything on these keys
|
||||
else this.results_search()
|
||||
|
||||
|
||||
keydown_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
|
@ -580,22 +502,12 @@ class Chosen
|
|||
dd_top = @container.height()
|
||||
@dropdown.css({"top": dd_top + "px"})
|
||||
|
||||
generate_field_id: ->
|
||||
new_id = this.generate_random_id()
|
||||
@form_field.id = new_id
|
||||
new_id
|
||||
|
||||
generate_random_id: ->
|
||||
string = "sel" + this.generate_random_char() + this.generate_random_char() + this.generate_random_char()
|
||||
while $("#" + string).length > 0
|
||||
string += this.generate_random_char()
|
||||
string
|
||||
|
||||
generate_random_char: ->
|
||||
chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
|
||||
rand = Math.floor(Math.random() * chars.length)
|
||||
newchar = chars.substring rand, rand+1
|
||||
|
||||
get_side_border_padding = (elmt) ->
|
||||
side_border_padding = elmt.outerWidth() - elmt.width()
|
||||
|
||||
|
|
|
|||
|
|
@ -4,39 +4,23 @@ Copyright (c) 2011 by Harvest
|
|||
###
|
||||
root = this
|
||||
|
||||
class Chosen
|
||||
class Chosen extends AbstractChosen
|
||||
|
||||
constructor: (elmn) ->
|
||||
this.set_default_values()
|
||||
|
||||
@form_field = elmn
|
||||
@is_multiple = @form_field.multiple
|
||||
setup: ->
|
||||
@is_rtl = @form_field.hasClassName "chzn-rtl"
|
||||
|
||||
@default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"
|
||||
|
||||
this.set_up_html()
|
||||
this.register_observers()
|
||||
finish_setup: ->
|
||||
@form_field.addClassName "chzn-done"
|
||||
|
||||
|
||||
set_default_values: ->
|
||||
super()
|
||||
|
||||
@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
|
||||
@single_temp = new Template('<a href="javascript:void(0)" class="chzn-single"><span>#{default}</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" autocomplete="off" /></div><ul class="chzn-results"></ul></div>')
|
||||
@multi_temp = new Template('<ul class="chzn-choices"><li class="search-field"><input type="text" value="#{default}" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>')
|
||||
@choice_temp = new Template('<li class="search-choice" id="#{id}"><span>#{choice}</span><a href="javascript:void(0)" class="search-choice-close" rel="#{position}"></a></li>')
|
||||
@no_results_temp = new Template('<li class="no-results">No results match "<span>#{terms}</span>"</li>')
|
||||
|
||||
|
||||
set_up_html: ->
|
||||
@container_id = @form_field.identify().replace(/(:|\.)/g, '_') + "_chzn"
|
||||
|
||||
|
|
@ -79,7 +63,6 @@ class Chosen
|
|||
this.results_build()
|
||||
this.set_tab_index()
|
||||
|
||||
|
||||
register_observers: ->
|
||||
@container.observe "mousedown", (evt) => this.container_mousedown(evt)
|
||||
@container.observe "mouseenter", (evt) => this.mouse_enter(evt)
|
||||
|
|
@ -101,7 +84,6 @@ class Chosen
|
|||
else
|
||||
@selected_item.observe "focus", (evt) => this.activate_field(evt)
|
||||
|
||||
|
||||
container_mousedown: (evt) ->
|
||||
if evt and evt.type is "mousedown"
|
||||
evt.stop()
|
||||
|
|
@ -117,17 +99,6 @@ class Chosen
|
|||
else
|
||||
@pending_destroy_click = false
|
||||
|
||||
mouse_enter: -> @mouse_on_container = true
|
||||
mouse_leave: -> @mouse_on_container = false
|
||||
|
||||
input_focus: (evt) ->
|
||||
setTimeout this.container_mousedown.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.hasClassName("chzn-container-active")
|
||||
|
||||
|
|
@ -202,23 +173,6 @@ class Chosen
|
|||
else
|
||||
""
|
||||
|
||||
result_add_option: (option) ->
|
||||
if not option.disabled
|
||||
option.dom_id = @container_id + "_o_" + option.array_index
|
||||
|
||||
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_array_index?
|
||||
|
||||
'<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.html + '</li>'
|
||||
else
|
||||
""
|
||||
|
||||
results_update_field: ->
|
||||
this.result_clear_highlight()
|
||||
@result_single_selected = null
|
||||
this.results_build()
|
||||
|
||||
result_do_highlight: (el) ->
|
||||
this.result_clear_highlight()
|
||||
|
||||
|
|
@ -241,12 +195,6 @@ class Chosen
|
|||
@result_highlight.removeClassName('highlighted') if @result_highlight
|
||||
@result_highlight = null
|
||||
|
||||
results_toggle: ->
|
||||
if @results_showing
|
||||
this.results_hide()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
results_show: ->
|
||||
if not @is_multiple
|
||||
@selected_item.addClassName('chzn-single-with-drop')
|
||||
|
|
@ -382,12 +330,6 @@ class Chosen
|
|||
@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()
|
||||
|
|
@ -506,27 +448,6 @@ class Chosen
|
|||
@pending_backstroke.removeClassName("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.result_clear_highlight()
|
||||
this.results_search()
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
this.result_select(evt) if this.results_showing
|
||||
when 27
|
||||
this.results_hide() if @results_showing
|
||||
when 9, 38, 40, 16, 91, 17
|
||||
# don't do anything on these keys
|
||||
else this.results_search()
|
||||
|
||||
|
||||
keydown_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
|
@ -546,7 +467,6 @@ class Chosen
|
|||
when 40
|
||||
this.keydown_arrow()
|
||||
|
||||
|
||||
search_field_scale: ->
|
||||
if @is_multiple
|
||||
h = 0
|
||||
|
|
|
|||
102
coffee/lib/abstract-chosen.coffee
Normal file
102
coffee/lib/abstract-chosen.coffee
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
###
|
||||
Chosen source: generate output using 'cake build'
|
||||
Copyright (c) 2011 by Harvest
|
||||
###
|
||||
root = this
|
||||
|
||||
class AbstractChosen
|
||||
|
||||
constructor: (elmn) ->
|
||||
this.set_default_values()
|
||||
|
||||
@form_field = elmn
|
||||
@is_multiple = @form_field.multiple
|
||||
@default_text_default = if @is_multiple then "Select Some Options" else "Select an Option"
|
||||
|
||||
this.setup()
|
||||
|
||||
this.set_up_html()
|
||||
this.register_observers()
|
||||
|
||||
this.finish_setup()
|
||||
|
||||
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
|
||||
|
||||
mouse_enter: -> @mouse_on_container = true
|
||||
mouse_leave: -> @mouse_on_container = false
|
||||
|
||||
input_focus: (evt) ->
|
||||
setTimeout (=> this.container_mousedown()), 50 unless @active_field
|
||||
|
||||
input_blur: (evt) ->
|
||||
if not @mouse_on_container
|
||||
@active_field = false
|
||||
setTimeout (=> this.blur_test()), 100
|
||||
|
||||
result_add_option: (option) ->
|
||||
if not option.disabled
|
||||
option.dom_id = @container_id + "_o_" + option.array_index
|
||||
|
||||
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_array_index?
|
||||
|
||||
'<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.html + '</li>'
|
||||
else
|
||||
""
|
||||
|
||||
results_update_field: ->
|
||||
this.result_clear_highlight()
|
||||
@result_single_selected = null
|
||||
this.results_build()
|
||||
|
||||
results_toggle: ->
|
||||
if @results_showing
|
||||
this.results_hide()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
results_search: (evt) ->
|
||||
if @results_showing
|
||||
this.winnow_results()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
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.result_clear_highlight()
|
||||
this.results_search()
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
this.result_select(evt) if this.results_showing
|
||||
when 27
|
||||
this.results_hide() if @results_showing
|
||||
when 9, 38, 40, 16, 91, 17
|
||||
# don't do anything on these keys
|
||||
else this.results_search()
|
||||
|
||||
generate_field_id: ->
|
||||
new_id = this.generate_random_id()
|
||||
@form_field.id = new_id
|
||||
new_id
|
||||
|
||||
generate_random_char: ->
|
||||
chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ"
|
||||
rand = Math.floor(Math.random() * chars.length)
|
||||
newchar = chars.substring rand, rand+1
|
||||
|
||||
root.AbstractChosen = AbstractChosen
|
||||
Loading…
Add table
Add a link
Reference in a new issue