implement a generic asset picker

app/assets/javascripts/locomotive/models/content_asset.js.coffee

@@ -4,8 +4,6 @@ class Locomotive.Models.ContentAsset extends Backbone.Model
     @set
       image:  @get('content_type') == 'image'
 
-
-
 class Locomotive.Models.ContentAssetsCollection extends Backbone.Collection
 
   model: Locomotive.Models.ContentAsset

app/assets/javascripts/locomotive/models/theme_asset.js.coffee

@@ -1,8 +1,6 @@
 class Locomotive.Models.ThemeAsset extends Backbone.Model
 
 
-
-
 class Locomotive.Models.ThemeAssetsCollection extends Backbone.Collection
 
   model: Locomotive.Models.ThemeAsset

app/assets/javascripts/locomotive/utils/uploadify.js.coffee

@@ -1,4 +1,4 @@
-window.ImageUploadify =
+window.LocomotiveUploadify =
 
   build: (el, options) ->
     multipart_params = @_get_default_multipart_params()

app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee

@@ -1,80 +1,28 @@
+#= require ../shared/asset_picker_view
+
 Locomotive.Views.ContentAssets ||= {}
 
-class Locomotive.Views.ContentAssets.PickerView extends Backbone.View
+class Locomotive.Views.ContentAssets.PickerView extends Locomotive.Views.Shared.AssetPickerView
-
-  tag: 'div'
 
   number_items_per_row: 4
 
   _item_views: []
 
-  initialize: ->
+  template: ->
-    _.bindAll(@, 'add_assets', 'add_asset', 'remove_asset')
+    ich.content_asset_picker
-    @collection.bind('reset', @add_assets)
-    @collection.bind('add', @add_asset)
-    @collection.bind('remove', @remove_asset)
-
-  render: ->
-    @_reset()
-
-    $(@el).html(ich.content_asset_picker())
 
+  fetch_assets: ->
     @collection.fetch()
 
-    return @
+  build_uploader: (el, link) ->
-
+    window.LocomotiveUploadify.build el,
-  create_dialog: ->
+      url:        link.attr('href')
-    @dialog = $(@el).dialog
+      data_name:  el.attr('name')
-      modal:    true
+      height:     link.outerHeight()
-      width:    650,
+      width:      link.outerWidth()
-      create: =>
+      file_ext:   '*.png;*.gif;*.jpg;*.jpeg;*.pdf;*.doc;*.docx;*.xls;*.xlsx;*.txt;*.zip'
-        $('.ui-widget-overlay').bind 'click', => @close()
+      success:    (model) => @collection.add(model)
-
+      error:      (msg)   => @shake()
-        @$('h2').appendTo($(@el).prev())
-        actions = @$('.dialog-actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix')
-
-        actions.find('#close-link').click (event) => @close(event)
-
-      open: =>
-        actions = $(@el).parent().find('.ui-dialog-buttonpane')
-        link    = actions.find('#upload-link')
-        el      = actions.find('input[type=file]')
-
-        window.ImageUploadify.build el, # TODO: ImageUploadify => DefaultUploadify. Put this in method
-          url:        link.attr('href')
-          data_name:  el.attr('name')
-          height:     link.outerHeight()
-          width:      link.outerWidth()
-          file_ext:   '*.png;*.gif;*.jpg;*.jpeg;*.pdf;*.doc;*.docx;*.xls;*.xlsx;*.txt'
-          success:    (model) => @collection.add(model)
-          error:      (msg)   => @shake()
-
-        actions.find('.upload-button-wrapper').hover(
-          => link.addClass('hover'),
-          => link.removeClass('hover')
-        )
-
-    @open()
-
-  open: ->
-    $(@el).dialog('open')
-
-  close: (event) ->
-    event.stopPropagation() & event.preventDefault() if event?
-    $(@el).dialog('close')
-
-  shake: ->
-    $(@el).parents('.ui-dialog').effect('shake', { times: 4 }, 100)
-
-  center: ->
-    $(@el).dialog('option', 'position', 'center')
-
-  add_assets: (collection) ->
-    collection.each @add_asset
-
-    @_refresh()
-
-    setTimeout (=> @create_dialog()), 30 # disable flickering
 
   add_asset: (asset) ->
     view = new Locomotive.Views.ContentAssets.PickerItemView model: asset, parent: @
@@ -88,28 +36,15 @@ class Locomotive.Views.ContentAssets.PickerView extends Backbone.View
     view = _.find @_item_views, (tmp) -> tmp.model == asset
     view.remove() if view?
     @_refresh()
-    @center()
 
-  _move_to_last_asset: ->
+  _on_refresh: ->
-    limit = @$('ul.list li.clear').position()
+    self = @
-    @$('ul.list').animate(scrollTop: limit.top, 400) if limit?
+    @$('ul.list li.asset').each (index) ->
-
+      if (index + 1) % self.number_items_per_row == 0
-  _refresh: ->
+        $(@).addClass('last')
-    if @collection.length == 0
+      else
-      @$('ul.list').hide() & @$('p.no-items').show()
+        $(@).removeClass('last')
-    else
-      @$('p.no-items').hide() & @$('ul.list').show()
-      self = @
-      @$('ul.list li.asset').each (index) ->
-        if (index + 1) % self.number_items_per_row == 0
-          $(@).addClass('last')
-        else
-          $(@).removeClass('last')
-
-    @center() if @dialog?
 
   _reset: ->
     _.each @_item_views || [], (view) -> view.remove()
-    $('.ui-widget-overlay').unbind 'click'
+    super()
-    @$('.actions input[type=file]').remove()
-    @dialog.dialog('destroy') if @dialog?

app/assets/javascripts/locomotive/views/shared/asset_picker_view.js.coffee

@@ -0,0 +1,101 @@
+Locomotive.Views.Shared ||= {}
+
+class Locomotive.Views.Shared.AssetPickerView extends Backbone.View
+
+  tag: 'div'
+
+  initialize: ->
+    _.bindAll(@, 'add_assets', 'add_asset', 'remove_asset')
+    @collection.bind('reset', @add_assets)
+    @collection.bind('add', @add_asset)
+    @collection.bind('remove', @remove_asset)
+
+  render: ->
+    @_reset()
+
+    $(@el).html(@template()())
+
+    @fetch_assets()
+
+    return @
+
+  template: ->
+    # please overide template
+
+  fetch_assets: ->
+    # please overide fetch_assets
+
+  build_uploader: (el, link) ->
+    # please overide build_uploader
+
+  create_dialog: ->
+    @dialog = $(@el).dialog
+      modal:    true
+      width:    650,
+      create: =>
+        $('.ui-widget-overlay').bind 'click', => @close()
+
+        @$('h2').appendTo($(@el).prev())
+        actions = @$('.dialog-actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix')
+
+        actions.find('#close-link').click (event) => @close(event)
+
+      open: =>
+        actions = $(@el).parent().find('.ui-dialog-buttonpane')
+        el      = actions.find('input[type=file]')
+        link    = actions.find('#upload-link')
+
+        @build_uploader(el, link)
+
+        actions.find('.upload-button-wrapper').hover(
+          => link.addClass('hover'),
+          => link.removeClass('hover')
+        )
+
+    @open()
+
+  open: ->
+    $(@el).dialog('open')
+
+  close: (event) ->
+    event.stopPropagation() & event.preventDefault() if event?
+    $(@el).dialog('close')
+
+  shake: ->
+    $(@el).parents('.ui-dialog').effect('shake', { times: 4 }, 100)
+
+  center: ->
+    $(@el).dialog('option', 'position', 'center')
+
+  add_assets: (collection) ->
+    collection.each @add_asset
+
+    @_refresh()
+
+    setTimeout (=> @create_dialog()), 30 # disable flickering
+
+  add_asset: (asset) ->
+    # please overide add_asset
+
+  remove_asset: (asset) ->
+    # please overide remove_asset
+
+  _move_to_last_asset: ->
+    limit = @$('ul.list li.clear').position()
+    @$('ul.list').animate(scrollTop: limit.top, 100) if limit?
+
+  _refresh: ->
+    if @collection.length == 0
+      @$('ul.list').hide() & @$('p.no-items').show()
+    else
+      @$('p.no-items').hide() & @$('ul.list').show()
+      @_on_refresh()
+
+    @center() if @dialog?
+
+  _on_refresh: ->
+
+  _reset: ->
+    $('.ui-widget-overlay').unbind 'click'
+    @$('.actions input[type=file]').remove()
+    @dialog.dialog('destroy') if @dialog?

app/assets/javascripts/locomotive/views/theme_assets/image_picker_view.js.coffee

@@ -1,89 +1,32 @@
+#= require ../shared/asset_picker_view
+
 Locomotive.Views.ThemeAssets ||= {}
 
-class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View
+class Locomotive.Views.ThemeAssets.ImagePickerView extends Locomotive.Views.Shared.AssetPickerView
-
-  tag: 'div'
 
   events:
     'click ul.list a':  'select_asset'
 
-  initialize: ->
+  template: ->
-    _.bindAll(@, 'add_assets', 'add_asset')
+    ich.theme_image_picker
-    @collection.bind('reset', @add_assets)
-
-  render: ->
-    @_reset()
-
-    $(@el).html(ich.theme_image_picker())
 
+  fetch_assets: ->
     @collection.fetch data: { content_type: 'image' }
 
-    return @
+  build_uploader: (el, link) ->
-
+    window.LocomotiveUploadify.build el,
-  create_dialog: ->
+      url:        link.attr('href')
-    @dialog = $(@el).dialog
+      data_name:  el.attr('name')
-      modal:    true
+      height:     link.outerHeight()
-      width:    600,
+      width:      link.outerWidth()
-      create: =>
+      success:    (model) => @collection.add(model)
-        $('.ui-widget-overlay').bind 'click', => @close()
+      error:      (msg)   => @shake()
-
-        @$('h2').appendTo($(@el).prev())
-        actions = @$('.dialog-actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix')
-
-        actions.find('#close-link').click (event) => @close(event)
-
-      open: =>
-        actions = $(@el).parent().find('.ui-dialog-buttonpane')
-        link    = actions.find('#upload-link')
-        el      = actions.find('input[type=file]')
-
-        window.ImageUploadify.build el,
-          url:        link.attr('href')
-          data_name:  el.attr('name')
-          height:     link.outerHeight()
-          width:      link.outerWidth()
-          success:    (model) => @add_asset(new Locomotive.Models.ThemeAsset(model))
-          error:      (msg)   => @shake()
-
-        actions.find('.upload-button-wrapper').hover(
-          => link.addClass('hover'),
-          => link.removeClass('hover')
-        )
-
-    @open()
-
-  open: ->
-    $(@el).dialog('open')
-
-  close: (event) ->
-    event.stopPropagation() & event.preventDefault() if event?
-    $(@el).dialog('close')
-
-  shake: ->
-    $(@el).parents('.ui-dialog').effect('shake', { times: 4 }, 100)
-
-  center: ->
-    $(@el).dialog('option', 'position', 'center')
 
   select_asset: (event) ->
     event.stopPropagation() & event.preventDefault()
     if @options.on_select
       @options.on_select($(event.target).html())
 
-  add_assets: (collection) ->
-    if collection.length == 0
-      @$('p.no-items').show()
-    else
-      @$('ul.list').show()
-      collection.each @add_asset
-
-    setTimeout (=> @create_dialog()), 30 # disable flickering
-
   add_asset: (asset) ->
     @$('ul.list').append(ich.theme_asset(asset.toJSON()))
-    @center() if @dialog?
+    @_refresh()
-
-  _reset: ->
-    $('.ui-widget-overlay').unbind 'click'
-    @$('.actions input[type=file]').remove()
-    @dialog.dialog('destroy') if @dialog?