implement a generic asset picker
This commit is contained in:
did
parent
63e2a63d1a
commit
cd411de4ce
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
class Locomotive.Models.ThemeAsset extends Backbone.Model
|
||||
|
||||
|
||||
|
||||
|
||||
class Locomotive.Models.ThemeAssetsCollection extends Backbone.Collection
|
||||
|
||||
model: Locomotive.Models.ThemeAsset
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
window.ImageUploadify =
|
||||
window.LocomotiveUploadify =
|
||||
|
||||
build: (el, options) ->
|
||||
multipart_params = @_get_default_multipart_params()
|
||||
|
|
@ -1,80 +1,28 @@
|
|||
#= require ../shared/asset_picker_view
|
||||
|
||||
Locomotive.Views.ContentAssets ||= {}
|
||||
|
||||
class Locomotive.Views.ContentAssets.PickerView extends Backbone.View
|
||||
|
||||
tag: 'div'
|
||||
class Locomotive.Views.ContentAssets.PickerView extends Locomotive.Views.Shared.AssetPickerView
|
||||
|
||||
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())
|
||||
template: ->
|
||||
ich.content_asset_picker
|
||||
|
||||
fetch_assets: ->
|
||||
@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
|
||||
build_uploader: (el, link) ->
|
||||
window.LocomotiveUploadify.build el,
|
||||
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;*.zip'
|
||||
success: (model) => @collection.add(model)
|
||||
error: (msg) => @shake()
|
||||
|
||||
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: ->
|
||||
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?
|
||||
_on_refresh: ->
|
||||
self = @
|
||||
@$('ul.list li.asset').each (index) ->
|
||||
if (index + 1) % self.number_items_per_row == 0
|
||||
$(@).addClass('last')
|
||||
else
|
||||
$(@).removeClass('last')
|
||||
|
||||
_reset: ->
|
||||
_.each @_item_views || [], (view) -> view.remove()
|
||||
$('.ui-widget-overlay').unbind 'click'
|
||||
@$('.actions input[type=file]').remove()
|
||||
@dialog.dialog('destroy') if @dialog?
|
||||
super()
|
||||
|
|
@ -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?
|
||||
|
|
@ -1,89 +1,32 @@
|
|||
#= require ../shared/asset_picker_view
|
||||
|
||||
Locomotive.Views.ThemeAssets ||= {}
|
||||
|
||||
class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View
|
||||
|
||||
tag: 'div'
|
||||
class Locomotive.Views.ThemeAssets.ImagePickerView extends Locomotive.Views.Shared.AssetPickerView
|
||||
|
||||
events:
|
||||
'click ul.list a': 'select_asset'
|
||||
|
||||
initialize: ->
|
||||
_.bindAll(@, 'add_assets', 'add_asset')
|
||||
@collection.bind('reset', @add_assets)
|
||||
|
||||
render: ->
|
||||
@_reset()
|
||||
|
||||
$(@el).html(ich.theme_image_picker())
|
||||
template: ->
|
||||
ich.theme_image_picker
|
||||
|
||||
fetch_assets: ->
|
||||
@collection.fetch data: { content_type: 'image' }
|
||||
|
||||
return @
|
||||
|
||||
create_dialog: ->
|
||||
@dialog = $(@el).dialog
|
||||
modal: true
|
||||
width: 600,
|
||||
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,
|
||||
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')
|
||||
build_uploader: (el, link) ->
|
||||
window.LocomotiveUploadify.build el,
|
||||
url: link.attr('href')
|
||||
data_name: el.attr('name')
|
||||
height: link.outerHeight()
|
||||
width: link.outerWidth()
|
||||
success: (model) => @collection.add(model)
|
||||
error: (msg) => @shake()
|
||||
|
||||
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?
|
||||
|
||||
_reset: ->
|
||||
$('.ui-widget-overlay').unbind 'click'
|
||||
@$('.actions input[type=file]').remove()
|
||||
@dialog.dialog('destroy') if @dialog?
|
||||
@_refresh()
|
||||
Loading…
Reference in New Issue