droom 0.4.3 → 0.5.3

data/app/assets/javascripts/droom/widgets.js.coffee

@@ -4,52 +4,51 @@
 
 jQuery ($) ->
 
-  ## Form Widgets
-  #
-  # These attach to a form element and provide a nicer interface by which to update its content.
+  $.fn.date_picker = ()->
+    @each ->
+      new DatePicker(@)
 
   class DatePicker
+    @month_names: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
     constructor: (element) ->
       @_container = $(element)
-      @_trigger = @_container.find('a')
-      @_field = @_container.find('input')
-      @_holder = @_container.find('div.kal')
-      @_mon = @_container.find('span.mon')
-      @_dom = @_container.find('span.dom')
-      @_year = @_container.find('span.year')
-      @_kal = new Kalendae @_holder[0]
-      @_holder.hide()
-      @_trigger.click @toggle
-      @_container.click @contain
-      @_kal.subscribe 'change', () =>
-        @hide()
-        @_field.val(@_kal.getSelected())
-        [year, month, day] = @_kal.getSelected().split('-')
-        @_year.text(year)
-        @_dom.text(day)
-        @_mon.text(Kalendae.moment.monthsShort[parseInt(month, 10) - 1])
-
-    contain: (e) =>
-      e.stopPropagation() if e
-
-    toggle: (e) =>
-      e.preventDefault() if e
-      if @_holder.is(':visible') then @hide() else @show()
-
-    show: () =>
-      @_holder.fadeIn "fast", () =>
-        @_container.addClass('editing')
-        $(document).bind "click", @hide
-              
-    hide: () =>
-      $(document).unbind "click", @hide
-      @_container.removeClass('editing')
-      @_holder.fadeOut("fast")
-
-  $.fn.date_picker = () ->
-    @each ->
-      new DatePicker(@)
-    @
+      if @_container.is("input")
+        @_field = @_container
+        @_event = 'focus'
+        @_simple = true
+      else
+        @_field = @_container.find('input')
+        @_event = 'click'
+        @_simple = false
+        @_mon = @_container.find('span.mon')
+        @_dom = @_container.find('span.dom')
+        @_year = @_container.find('span.year')
+      initial_date = @getDate()
+      @_container.DatePicker
+        calendars: 1
+        date: initial_date 
+        current: initial_date 
+        view: 'days' 
+        position: 'bottom'
+        showOn: @_event
+        onChange: @setDate
+
+    getDate: () =>
+      if value = @_field.val()
+        new Date(Date.parse(value))
+
+    setDate: (date) =>
+      if date
+        $('.datepicker').hide()
+        d = $.zeroPad(date.getDate())
+        m = DatePicker.month_names[date.getMonth()]
+        y = date.getFullYear()
+        dateString = [y, m, d].join('-')
+        @_field.val(dateString)
+        unless @_simple
+          @_dom.text(d)
+          @_mon.text(m)
+          @_year.text(y)
 
 
   class TimePicker
@@ -86,92 +85,105 @@ jQuery ($) ->
       new TimePicker(@)
 
 
-  #todo: this can now make proper use of the remote mechanism and doesn't need to take over the whole form any more.
-  #
+
+
+  $.fn.file_picker = () ->
+    @each ->
+      new FilePicker @
+
+  $.fn.click_proxy = (target_selector) ->
+    this.bind "click", (e) ->
+      e.preventDefault()
+      $(target_selector).click()
+
   class FilePicker
     constructor: (element) ->
       @_container = $(element)
-      @_form = if form = @_container.attr("data-form") then $(form) else @_container.parent()
-      @_holder = @_form.parent()
-      @_link = @_container.find('a.ul')
+      @_form = @_container.parents('form')
+      @_link = @_container.find('a[data-action="pick"]')
       @_filefield = @_container.find('input[type="file"]')
-      @_tip = @_container.find('p.tip')
-      @_link.click_proxy(@_filefield)
-      @_extensions = ['doc', 'docx', 'pdf', 'xls', 'xlsx', 'jpg', 'png']
-      @_filefield.bind 'change', @pick
       @_file = null
       @_filename = ""
       @_ext = ""
-      @_fields = @_container.siblings('.metadata')
-      @_form.submit @submit
-      
-    pick: (e) =>
-      @_link.removeClass(@_extensions.join(' '))
+      @_fields = @_container.siblings('.non-file-data')
+      @_form.bind 'remote:upload', @initProgress
+      @_form.bind 'remote:progress', @progress
+      @_link.bind 'click', @picker
+      @_filefield.bind 'change', @picked
+    
+    picker: (e) =>
+      e.preventDefault() if e
+      @_filefield.click()
+
+    extensions: () =>
+      @_extensions ?= ['doc', 'docx', 'pdf', 'xls', 'xlsx', 'jpg', 'png']
+
+    picked: (e) =>
+      @_link.removeClass(@extensions().join(' '))
       if files = @_filefield[0].files
-        @_file = files.item(0)
-        @_tip.hide()
-        @showSelection() if @_file
-
-    submit: (e) =>
-      unless @_filefield.attr("disabled")
-        if @_file
-          e.preventDefault() if e
-          @_fields.hide()
-          @_notifier = $('<div class="notifier"></div>').appendTo @_form
-          @_label = $('<h3 class="filename"></h3>').appendTo @_notifier
-          @_progress = $('<div class="progress"></div>').appendTo @_notifier
-          @_bar = $('<div class="bar"></div>').appendTo @_progress
-          @_status = $('<div class="status"></div>').appendTo @_notifier
-          @_label.text(@_filename)
-          @send()
-
-    showSelection: =>
-      @_filename = @_file.name.split(/[\/\\]/).pop()
-      @_ext = @_filename.split('.').pop()
-      @_link.addClass(@_ext) if @_ext in @_extensions
-      $('input.name').val(@_filename)# if $('input.name').val() is ""
-
-    send: =>
-      formData = new FormData @_form.get(0)
-      @xhr = new XMLHttpRequest()
-      @xhr.onreadystatechange = @update
-      @xhr.upload.onprogress = @progress
-      @xhr.upload.onloadend = @finish
-      url = @_form.attr('action')
-      @xhr.open 'POST', url, true
-      @xhr.send formData
-
-    progress: (e) =>
-      @_status.text("Uploading. Please wait.")
-      if e.lengthComputable
+        if @_file = files.item(0)
+          @_previous_filename = @_filename ? ""
+          @_filename = @_file.name.split(/[\/\\]/).pop()
+          @_ext = @_filename.split('.').pop()
+          @display()
+
+    display: () =>
+      @_link.addClass(@_ext) if @_ext in @extensions()
+      @_form.find('input.name').val(@_filename) if $('input.name').val() is @_previous_filename
+
+    initProgress: (e, xhr, settings) =>
+      if @_file?
+        @_fields.hide()
+        @_notifier = $('<div class="notifier"></div>').appendTo @_form
+        @_label = $('<h3 class="filename"></h3>').appendTo @_notifier
+        @_progress = $('<div class="progress"></div>').appendTo @_notifier
+        @_bar = $('<div class="bar"></div>').appendTo @_progress
+        @_label.text(@_filename)
+      true
+
+    progress: (e, prog) =>
+      if @_file? and prog.lengthComputable
         full_width = @_progress.width()
-        progress_width = Math.round(full_width * e.loaded / e.total)
+        progress_width = Math.round(full_width * prog.loaded / prog.total)
         @_bar.width progress_width
 
-    update: =>
-      if @xhr.readyState == 4
-        if @xhr.status == 200
-          response = @xhr.responseText
-          @_form.remove()
-          @_holder.append(response)
-          @_holder.trigger "finished", response
+    remover: () =>
+      unless @_remover?
+        @_remover = $('<a href="#" class="remover" />').insertAfter(@_link)
+        @_remover.click @remove
+      @_remover
 
-    finish: (e) =>
-      @_status.text("Indexing for search. Please wait.")
-      @_bar.css
-        "background-color": "green"
+    remove: (e) =>
+      e.preventDefault() if e
+      old_ff = @_filefield
+      @_filefield = old_ff.clone().insertAfter(old_ff)
+      @_filefield.bind 'change', @picked
+      old_ff.remove()
+      @_form.find('input.name').val("") if $('input.name').val() is @_filename
+      @_filename = ""
+      @_ext = ""
+      @_remover?.hide()
+      @_link.css
+        "background-image": @_original_background
 
 
 
-  $.fn.file_picker = () ->
-    @each ->
-      new FilePicker @
 
-  $.fn.click_proxy = (target_selector) ->
-    this.bind "click", (e) ->
-      e.preventDefault()
-      $(target_selector).click()
 
+  $.fn.image_picker = () ->
+    @each ->
+      new ImagePicker @
+
+  class ImagePicker extends FilePicker
+    display: () =>
+      @_form.find('input.name').val(@_filename) if $('input.name').val() is @_previous_filename
+      @_original_background ?= @_link.css("background-image")
+      reader = new FileReader()
+      reader.onload = (e) =>
+        @_link.css
+          "background-image": "url(#{reader.result})"
+        @remover().show()
+      reader.readAsDataURL(@_file)
 
 
 
@@ -217,6 +229,10 @@ jQuery ($) ->
       @_field.val(i)
 
 
+
+
+
+
   $.fn.password_form = ->
     @each ->
       new PasswordForm(@)
@@ -242,7 +258,6 @@ jQuery ($) ->
       @fields.attr('data-strict', false)
       @unsubmittable()
       @confirmation_holder.hide()
-      console.log 'password form', @
 
     checkForm: () =>
       @fields.removeClass('invalid').addClass('valid')
@@ -282,183 +297,177 @@ jQuery ($) ->
       if @blocked
         e.preventDefault()
       else
-        # might as well debounce, since we're here
         @submit.val('please wait')
         @unsubmittable()
 
 
-  # A captive form submits via an ajax request and pushes its results into the present page in the place 
-  # designated by its 'replacing' attribute.
+
+
+
+
+  # The basic captive form is a fairly dumb binding between form element and target element.
+  # The form is submitted over ajax and the response is displayed in the target.
+  #
+  # If options.fast is true then any change to an input or select within the form will trigger submission.
+  # If options.auto is true then the form will be submitted immediately; more commonly the target is already
+  # populated.
   #
-  # If options['fast'] is true, the form will submit on every change to a text, radio or checkbox input.
+  #todo: this really needs debouncing.
   #
-  #todo: This is very old now. Tidy it up with a more standard action structure, and fewer options.
+  # There is some slack in the internal structure here because subclasses do more intermediate work.
 
   $.fn.captive = (options) ->
     @each ->
       new CaptiveForm @, options
     @
 
+  # The filter form is a fast captive with only one input.
+  # It ought to have a cache too, since there is a simple key.
+
+  $.fn.filter_form = (options) ->
+    @each ->
+      new CaptiveForm @,
+        fast: true
+        into: "#found"
+        auto: false
+        history: false
+    @
+
+  $.fn.table_filter_form = (options) ->
+    @each ->
+      new CaptiveForm @,
+        fast: true
+        into: "table"
+        auto: false
+        history: true
+    @
+
+  # The suggestions form is a fast filter form with history support
+  #
+  $.fn.suggestion_form = (options) ->
+    @each ->
+      new CaptiveForm @, 
+        fast: true
+        auto: false
+        into: "#suggestion_box"
+        history: false
+    @
+  
+
   class CaptiveForm
+    @default_options: {
+      fast: false
+      auto: false
+      threshold: 3
+      history: false
+    }
+    
     constructor: (element, opts) ->
       @_form = $(element)
-      @_options = $.extend {
-        fast: false
-        auto: false
-        historical: false
-      }, opts
+      @_options = $.extend @constructor.default_options, opts
+      @_historical = !!(Modernizr.history and @_options.history or @_form.attr('data-historical'))
       @_selector = @_form.attr('data-target') || @_options.into
       @_container = $(@_selector)
+      @_original_qs = @serialize()
       @_original_content = @_container.html()
-      @_prompt = @_form.find("input[type=\"text\"]")
       @_request = null
+      @_inactive = false
+      @_cache = {}
+      @_form.bind 'refresh', () =>
+        @_form.submit()
       @_form.remote
-        on_submit: @prepare
+        on_request: @prepare
         on_cancel: @cancel
         on_success: @capture
-      if @_options.fast
-        @_form.find("input[type=\"text\"]").keyup @keyed
-        @_form.find("input[type=\"text\"]").change @submit
-        @_form.find("input[type=\"radio\"]").click @clicked
-        @_form.find("input[type=\"checkbox\"]").click @clicked
+      @submit_soon = _.debounce(@submit, 500)
+      @bindInputs() if @_options.fast
+      @_form.bind 'refresh', @changed
       @submit() if @_options.auto
-        
+      if @_historical
+        @saveState(@_original_content)
+        $(window).bind 'popstate', @restoreState
+
+    bindInputs: () =>
+      @_form.find('input[type="search"]').bind 'keyup', @changed
+      @_form.find('input[type="search"]').bind 'change', @changed
+      # @_form.find('input[type="search"]').bind 'click', @changed  # for the clear-box control in webkit search fields
+      @_form.find('input[type="text"]').bind 'keyup', @keyed
+      @_form.find('input[type="text"]').bind 'change', @changed
+      @_form.find('select').bind 'change', @changed
+      @_form.find('input[type="radio"]').bind 'click', @clicked
+      @_form.find('input[type="checkbox"]').bind 'click', @clicked
+
     keyed: (e) =>
       k = e.which
-      if (k >= 32 and k <= 165) or k == 8
-        if @_prompt.val() is "" and not @_options.auto
-          @revert()
-        else
-          @submit()
+      if k is 13
+        @submit(e)
+      if (k >= 46 and k <= 90) or (k >= 96 and k <= 111) or k is 8
+        @changed(e)
+    
+    changed: (e) =>
+      @submit_soon() unless @_inactive
           
     clicked: (e) =>
-      @submit()
+      @submit_soon() unless @_inactive
+    
+    serialize: () =>
+      parameters = []
+      @_form.find(":input").each (i, f) =>
+        field = $(f)
+        parameters.push field.serialize() unless field.val() is ""
+      parameters.join('&')
       
-    submit: (e) =>
-      @_form.submit()
+    submit: (e, nocache) =>
+      e.preventDefault() if e
+      nocache ?= false
+      qs = @serialize()
+      if !nocache and @_cache[qs]
+        @display(@_cache[qs])
+      else
+        @_form.submit()
       
     prepare: (xhr, settings) =>
       @_container.fadeTo "fast", 0.2
-      @_request.abort() if @_request
-      @_request = xhr
     
-    capture: (data, status, xhr) =>
+    capture: (e, data, status, xhr) =>
+      @_cache[@serialize()] = data
       @display(data)
-      @_request = null
-    
+      @saveState(data) if @_historical
+
     display: (results) =>
       replacement = $(results)
       @_container.empty().append(replacement).fadeTo("fast", 1)
       replacement.activate()
       replacement.find('a.cancel').click(@revert)
-        
+
     revert: (e) =>
-      e.preventDefault() if e
       @display(@_original_content)
-      @_prompt.val("")
-      @saveState()
-
-
-  $.fn.filter_form = (options) ->
-    options = $.extend(
-      fast: true
-      auto: true
-      into: "#found"
-    , options)
-    @each ->
-      new CaptiveForm @, options
-    @
-
-
-
-  # The suggestions form is a fast captive with history support based on a single prompt field.
-  #
-  $.fn.suggestion_form = (options) ->
-    options = $.extend(
-      fast: true
-      auto: false
-      into: "#suggestion_box"
-    , options)
-    @each ->
-      new SuggestionForm @, options
-    @
-  
-  class SuggestionForm extends CaptiveForm
-    constructor: (element, opts) ->
-      super
-      @_prompt = @_form.find("input[type=\"text\"]")
-      @_param = @_prompt.attr('name')
-      @_original_term = decodeURIComponent($.urlParam(@_param))
-      if @_original_term and @_original_term isnt "false" and @_original_term isnt ""
-        @_prompt.val(@_original_term)
-        @submit()
-      if Modernizr.history
-        $(window).bind 'popstate', @restoreState
 
-    capture: (data, status, xhr) =>
-      @saveState(data) if Modernizr.history
-      super
-
-    saveState: (results) =>
-      results ?= @_original_content
-      term = @_prompt.val()
-      if term
-        url = window.location.pathname + "?" + encodeURIComponent(@_param) + "=" + encodeURIComponent(term)
-      else
-        url = window.location.pathname
+    saveState: (results, qs) =>
+      qs ?= @serialize()
+      url = window.location.pathname + "?" + qs
+      title = document.title + ' search'
       state = 
         html: results
-        term: term
-      history.pushState state, "Search results", url
-    
+        qs: qs
+      history.pushState state, title, url
+
     restoreState: (e) =>
       event = e.originalEvent
+      e.preventDefault() if e
       if event.state? && event.state.html?
         @display event.state.html
-        @_prompt.val(event.state.term)
+        @_inactive = true
+        @_form.deserialize(event.state.qs)
+        @_inactive = false
+
+
 
 
-  # The preferences form is a simple captive that just displays a confirmation message, with or without some control
-  # links (eg to copy or delete dropboxed folders). It may also include a number of preference blocks, which take care
-  # of showing and hiding subsidiary options.
 
-  $.fn.preferences_form = (options) ->
-    options = $.extend(
-      fast: true
-      clearing: null
-      replacing: ".confirmation"
-    , options)
-    @each ->
-      $(@).find('span.preference').preferences_block()
-      new CaptiveForm @, options
 
-  # The preferences block is a very minimal subcontent toggle. If the first contained radio or checkbox element
-  # is checked, anything `.subpreference` is revealed. If its state changes, we show or hide.
-  #
-  # Note that to make this work with radio buttons we have applied a small hack to make sure they fire a change event
-  # on deselection. See $.trigger_change_on_deselect in utilities.js.
 
-  $.fn.preferences_block = ->
-    @each ->
-      new PreferenceBlock(@)
 
-  class PreferenceBlock
-    constructor: (element) ->
-      @_container = $(element)
-      @_input = @_container.find("> input")
-      @_subprefs = @_container.find('span.subpreference')
-      if @_subprefs.length
-        @_input.trigger_change_on_deselect()
-        @_input.change @set
-        @set()
-        
-    set: (e) =>
-      # let the event through...
-      if @_input.is(":checked") then @show() else @hide()
-    show: () =>
-      @_subprefs.slideDown()
-    hide: () =>
-       @_subprefs.slideUp()
 
 
   # HTML-editing support is provided by WysiHTML, which is an ugly but effective iframe-based solution.
@@ -526,6 +535,7 @@ jQuery ($) ->
   class Folder
     constructor: (element) ->
       @_container = $(element)
+      @_label = @_container.attr('data-label')
       @_list = @_container.children('ul.filing')
       if @_list[0]
         @_container.children('a.folder').click @toggle
@@ -533,7 +543,14 @@ jQuery ($) ->
       
     set: (e) =>
       e.preventDefault() if e
-      if @_container.hasClass('open') then @show() else @hide()
+      @_state = localStorage?.getItem("show_folder_#{@_label}")
+      @_state ?= @_container.hasClass('open') ? "open" : "closed"
+      if @_state is "open"
+        @_container.addClass("open")
+        @_list.show()
+      else
+        @_container.removeClass("open")
+        @_list.hide()
 
     toggle: (e) =>
       if e
@@ -543,15 +560,47 @@ jQuery ($) ->
 
     show: (e) =>
       e.preventDefault() if e
+      localStorage?.setItem("show_folder_#{@_label}", "open")
       @_container.addClass('open')
       @_list.stop().slideDown("fast")
       
     hide: (e) =>
       e.preventDefault() if e
+      localStorage?.setItem("show_folder_#{@_label}", "closed")
       @_list.stop().slideUp "normal", () =>
         @_container.removeClass('open')
 
 
+  $.fn.slug_field = ->
+    @each ->
+      new SlugField(@)
+      
+  class SlugField
+    constructor: (element) ->
+      @_field = $(element)
+      @_form = @_field.parents('form')
+      selector = @_field.attr('data-base') or 'input[data-role="name"]'
+      @_base = @_form.find(selector)
+      @_base.bind "keyup", @update
+      @_previous_base = @_base.val()
+      @set()
+    
+    update: (e) =>
+      @set() if $.significantKeypress(e.which)
+      
+    set: () =>
+      old_base = @_previous_base
+      old_slug = @_field.val()
+      new_base = @_base.val()
+      # if no slug, or if slug looks like it was set automatically
+      if old_slug is "" or old_slug is @slugify(old_base)
+        @_field.val @slugify(new_base)
+      @_previous_base = new_base
+
+    slugify: (string) =>
+      string.replace(/[^\w\d]+/g, '-').toLowerCase()
+
+
   # The Calendar widget is a display of one calendar month in the usual tabular format.
   # Here we wrap it in a scrolling div to support movement from one month to another and
   # hook it up to the suggestion box, if that's on the page, so that clicking a day or month
@@ -596,7 +645,7 @@ jQuery ($) ->
       @_bar = $('<div class="starbar" />').appendTo(@_container)
       @_mask = $('<div class="starmask" />').appendTo(@_container)
       @_bar.css
-        width: @_rating/5 * 80
+        width: @_rating / 5 * 80
 
   $.fn.star_rating = () ->
     @each ->
@@ -642,7 +691,7 @@ jQuery ($) ->
     defaultSelector: () =>
       '.scrap'
       
-    receive: (r) =>
+    receive: (e, r) =>
       response = $(r)
       @sweep response
       response.activate()
@@ -766,10 +815,9 @@ jQuery ($) ->
           old.remove()
           @init()
     
-    # This use of moment depends on the loading of Kalendae, which we use for the date-picker widget above.
-    #
     monthName: () =>
-      Kalendae.moment.months[@_month-1]
+      months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+      months[@_month-1]
       
     searchForm: =>
       @_form ?= $('#suggestions')
@@ -811,6 +859,7 @@ jQuery ($) ->
       submit_form: false
       threshold: 1
       type: 'venue'
+      width: 300
     , options)
     @each ->
       new Suggester(@, options)
@@ -886,6 +935,7 @@ jQuery ($) ->
         empty_field: false
         submit_form: false
         preload: false
+        width: "auto"
         threshold: 2
         limit: 10
         afterSuggest: null
@@ -900,6 +950,7 @@ jQuery ($) ->
       @dropdown = new Dropdown @prompt,
         on_select: @select
         on_keyup: @get
+        width: @options.width
       @button = @form.find("a.search")
       @previously = null
       @request = null
@@ -912,6 +963,8 @@ jQuery ($) ->
       @prompt.bind "paste", @get
       @form.submit @hide
       @get(null, true) if @options.preload
+
+      console.log "suggester", @
       @
 
     reset: () =>
@@ -974,7 +1027,7 @@ jQuery ($) ->
 
 
 
-  $.fn.video_picker = (options) ->
+  $.fn.youtube_suggester = (options) ->
     options = $.extend(
       submit_form: true
       threshold: 3
@@ -989,9 +1042,10 @@ jQuery ($) ->
   class YoutubeSuggester extends Suggester
     constructor: () ->
       super
-      @target = $('textarea#scrap_body')
-      @caption = $('textarea#scrap_note')
-      @thumb = $('.scrapvideo .thumb')
+      @target = $('input#scrap_youtube_id')
+      @name_field = $('input#scrap_name')
+      @preview_holder = $('div.youtube_preview')
+      @thumb_holder = @prompt.siblings('.thumbnail')
 
     suggest: (suggestions) =>
       @unwait()
@@ -1006,15 +1060,24 @@ jQuery ($) ->
     select: (value, id) =>
       @hide()
       @prompt.trigger 'suggester.change'
-      @target.val(id)
+      @prompt.val(id)
       title = $("<div>#{value}</div>").find('.title')
-      @caption.val(title.text()) if @caption.val() is ""
-      $.get "/videos/#{id}.js", @preview, 'html'
+      @name_field.val(title.text()) if @name_field.val() is ""
+      @get_preview(id)
+      @get_thumbnail(id)
       @options.afterSelect?.call(@, value)
     
-    preview: (html) =>
-      @thumb.empty().html(html)
-      
+    get_preview: (id) =>
+      $.get "/videos/#{id}.js", @show_preview, 'html'
+    
+    show_preview: (response) =>
+      @preview_holder.empty().show().html(response)
+
+    get_thumbnail: (id) =>
+      @thumb_holder.css
+        "background-image": "url('http://img.youtube.com/vi/#{id}/3.jpg')"
+
+
 
   # I've just lifted this out of the suggester so that it can be used in other pickers.
 
@@ -1032,10 +1095,12 @@ jQuery ($) ->
       @
 
     place: () =>
+      unless width = @options.width
+        width = @hook.outerWidth() - 2
       @drop.css
         top: @hook.position().top + @hook.outerHeight() - 2
         left: @hook.position().left
-        width: @hook.outerWidth() - 2
+        width: width
       
     populate: (items) =>
       @reset()