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

115 lines
3.1 KiB
CoffeeScript

Locomotive.Views.ContentAssets ||= {}
class Locomotive.Views.ContentAssets.PickerView extends Backbone.View
tag: 'div'
number_items_per_row: 4
_item_views: []
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(ich.content_asset_picker())
@collection.fetch()
return @
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')
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: @
(@_item_views ||= []).push(view)
@$('ul.list .clear').before(view.render().el)
@_refresh() & @_move_to_last_asset()
remove_asset: (asset) ->
view = _.find @_item_views, (tmp) -> tmp.model == asset
view.remove() if view?
@_refresh()
@center()
_move_to_last_asset: ->
limit = @$('ul.list li.clear').position()
@$('ul.list').animate(scrollTop: limit.top, 400) if limit?
_refresh: ->
if @collection.length == 0
@$('ul.list').hide() & @$('p.no-items').show()
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'
@$('.actions input[type=file]').remove()
@dialog.dialog('destroy') if @dialog?