Delete Widget

classy_delete_widget.coffee

class App.FancyDelete extends App.Object
  constructor: (@_destroy_url, @_deleteSelector = '.js-delete', @_cancelSelector = '.js-cancel', @_deleteFilter = null, @_cancelFilter = null, @_container = "tr") ->
    events = [new App.Event(@_deleteSelector, "click", @destroy, @_deleteFilter),
              new App.Event(@_cancelSelector, "click", @cancel, @_cancelFilter)]
    super(events)

  destroy: (e) =>
    e.preventDefault()
    self = e.target
    if self.find(".js-text").text() == "Delete"
      self.find("i").addClass("fa-rotate-90")
      changeText(self, "OK")
      self.parent().find(".js-delegation-cancel").show()
    else
      self.find("i").removeClass("fa-rotate-90")
      self.find("i").addClass("fa-spin")
      changeText(self, "Deleting...")
      self.parent().find(@_cancelSelector).hide()
      row = self.closest(@_container)
      $.ajax
        url: @_destroy_url
        type: 'POST'
        data:
          id: self.attr('data-id')
        success: (result) ->
          row.fadeOut 300, ->
            row.remove()

  cancel: (e) ->
    e.preventDefault()
    self = e.target
    self.parent().find("i").removeClass("fa-rotate-90")
    changeText(self.parent(), "Delete")
    self.hide()

  changeText: (element, newText) ->
    element.find(".js-text").text(newText)

delete.js.coffee

  changeText = (element, newText) ->
    element.find(".js-text").text(newText)
  

  $(".js-delegation-delete").on 'click', (event) ->
    event.preventDefault()
    self = $(@)
    if self.find(".js-text").text() == "Delete"
      self.find("i").addClass("fa-rotate-90")
      changeText(self, "OK")
      self.parent().find(".js-delegation-cancel").show()
    else
      self.find("i").removeClass("fa-rotate-90")
      self.find("i").addClass("fa-spin")
      changeText(self, "Deleting...")
      self.parent().find(".js-delegation-cancel").hide()
      row = $(@).closest("tr")
      $.ajax
        url: '/delegations/destroy'
        type: 'POST'
        data:
          id: $(@).attr("data-id")
        success: (result) ->
          row.fadeOut 300, ->
            table = self.closest("table")
            row.remove()
            if table.find("tr").length == 1
              insertNoDelegationsRow(table)
            restripe()

  $(".js-delegation-cancel").on 'click', (event) ->
    event.preventDefault()
    self = $(@)
    self.parent().find("i").removeClass("fa-rotate-90")
    changeText(self.parent(), "Delete")
    self.hide()

index.html

<a href='#' class='btn btn-danger btn-xs js-delegation-delete' data-id='1'><i class='fa fa-minus-circle'></i> <span class='js-text'>Delete</span></a>
<a href='#' class='btn btn-primary btn-xs js-delegation-cancel' style='display:none;'>Cancel</a>