frontend example

coffee.js.coffee

window.updateKitCount = (etalon_kit) ->
  # update kit total_count, if number of chosen photos > than kit 
  current_count = parseInt($('#js-kit-counter .count').text())
  total_count   = parseInt($('#js-kit-counter .all').text())
  if current_count > total_count
    $('#js-kit-counter .all').text(total_count + etalon_kit)

window.initSortablePhotos = (el = '#sortable') ->
  # sortable photos
  $(el).sortable(
    items: '> .photo'
    update: (e, ui) ->
      serialized_data = $(this).sortable('serialize', { key: 'sort[]'})
      $.post(
        "#{window.location.pathname}/sort",
        sort_order: serialized_data
      )
  )

$ ->
  # fileupload button trigger
  $('#js-fileupload-trigger').click (e) ->
    e.preventDefault()
    $('#fileupload').click()

  # prevent confirm page loading unless kit is complete
  $('#js-kit-counter').click (e) ->
    return false if isKitEmpty()
	
  # show popup if kit is inclomplete
  $('.confirm .arrow.order a').click (e) ->
    e.preventDefault()
    if isKitComplete()
      $('#confirm-button').submit()
    else
      $(this).closest('.page-content').find('.popup').fadeIn(300)

  # highlight photo for removal
  $('.confirm .photos .remove').on 'ajax:before', ->
    el = $(this).closest('.photo')
    el.css('background-color', '#4f4f4f')
    el.css('opacity', '0.74')

  # remove instances from confirm page
  $('.confirm .photos .remove').on 'ajax:success', (e, data) ->
    if data.deleted
      # update total count
      total_count = $('#js-kit-counter .count')
      total_count.text(data.total_count)
      
      current_kit = parseInt($('#js-kit-counter .all').text())
      difference = (current_kit - data.total_count) - data.kit
      if(difference >= 0)
        $('#js-kit-counter .all').text(current_kit - data.kit)

      # remove photo
      el = $(e.target)
      el.closest('.photo').fadeOut(300, ->
        el.remove()
      )
        
      # goto choose page if user deleted all photos
      if data.total_count == 0
        $('.photo.add a').click()

      # update confirm popup
      total_count = parseInt(total_count.text())
        
      if(total_count < current_kit)
        $('.confirm-popup .text span').text(current_kit - total_count)

  initSortablePhotos()

  $('#fileupload').fileupload(
    dataType: 'json'
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
    sequentialUploads: true
    formData: {sender: $('.choose-page-flbtn').length ? 'c' : 'u' }
    done: (e, data) ->
      # send file right after selection
      $.each data.result.images, (i, item_photo) ->
        new_photo = $(
          """
          <div id="photo_#{item_photo.id}" class="photo" data-photo-id='#{item_photo.id}' >
            <a href="#">
              <img alt='' src='#{item_photo.image.upload_preview.url}' />
            </a>
            <span class="quantity"></span>
            <a href="#" class="up"></a>
            <a href="#" class="down"></a>
          </div>
          """
        )
        $('.photos').prepend(new_photo)
        # initalize all events for new photo element
        photoInit(new_photo)
  ).bind('fileuploadstart', (e) ->

    $('#ajax-loader').show()

  ).bind('fileuploadstop', (e) ->

    $('#ajax-loader').hide()
    $('#sortable').sortable('refresh')

  )

  # ig friend search
  friend_srch = $('#friend-search')
  if friend_srch.length
    
    friend_srch.find('input[name=friend]').on 'keyup', (e) ->
      $(this).parent().trigger 'submit'

    friend_srch.on 'submit', (e) ->
      e.preventDefault()
      name = $(this).find('input[name=friend]').val()

      if name
      
        name = new RegExp(name, 'i')

        $('.friends-page .friend').each (i, friend) =>
          friend = $(friend)
          f_name = friend.find('.name').text()
          f_nick = friend.find('.nick').text()

          if f_name.match(name) || f_nick.match(name)
            friend.show()
          else
            friend.hide()
      else
        $('.friends-page .friend').show()