app/assets/javascripts/georgia/components/media-library.js.coffee
class @MediaLibrary
constructor: (element, target) ->
@element = $(element)
@target = null
@picturesContainer = @element.find("[data-media='results']")
@search = @element.find("[data-media='search']")
@search.bind('change', @update)
@element.on('click', "[data-media='results'] a[rel='next']", @changePage)
@element.on('click', "[data-media='results'] a[rel='previous']", @changePage)
@element.on('click', "[data-media='picture']", @select)
@update()
update: () =>
@loadSpinner()
url = '/admin/api/media/pictures'
@performQuery(url)
changePage: (event) =>
@stopEvent(event)
@loadSpinner()
url = $(event.currentTarget).attr('href')
@performQuery(url)
select: (event) =>
@stopEvent(event)
@closeMediaLibrary()
picture = $(event.currentTarget).clone()
@target.find('.js-media-image').html(picture)
@target.find('input').val(picture.data('media-id'))
performQuery: (url) ->
$.ajax(
url: url
data:
query: @query
).done( (data) => @picturesContainer.html(data) )
setTarget: (target) => @target = $(target)
closeMediaLibrary: -> $('.js-close, .close').trigger('click')
loadSpinner: => @picturesContainer.html(@spinnerTag())
stopEvent: (event) ->
event.stopPropagation()
event.preventDefault()
query: => @search.val()
spinnerTag: -> "<div class='spinner'><i class='fa fa-spin fa-spinner fa-4x'></i></div>"
jQuery ->
# If the media library modal is loaded,
# Create a js object
# When the 'choose image' button is clicked, reset the target
if $("#media_library").length
mediaLibrary = new MediaLibrary($("#media_library"))
$('body').on('click', '.js-media-library', () ->
mediaLibrary.setTarget($(this).data('media'))
)