make ControllerModal use @content instead of @el

so that we can use elements and events (spine's own event binding that takes care that we don't create accidental memory leaks)

app/assets/javascripts/app/controllers/_application_controller.js.coffee

@@ -441,6 +441,17 @@ class App.ControllerContent extends App.Controller
     @navShow()
 
 class App.ControllerModal extends App.Controller
+  elements:
+    '.modal-body': 'body'
+
+  events:
+    'submit form': 'onSubmit'
+    'click .js-submit:not(.is-disabled)': 'onSubmit'
+    'click .js-cancel': 'hide'
+    'click .js-close': 'hide'
+
+  className: 'modal fade zIndex-9'
+
   constructor: (options = {}) ->
     defaults =
       backdrop: true
@@ -448,23 +459,20 @@ class App.ControllerModal extends App.Controller
       close:    true
       head:     '?'
       buttonClass: 'btn--success'
+      centerButtons: []
 
     options = _.extend( defaults, options )
 
-    # do not use @el, because it's inserted by js
-    delete options.el
-
     super(options)
 
     if @shown
       @show()
 
-  show: ->
+  show: (content) ->
     if @button is true
       @button = 'Submit'
 
-    @modalElement = $( '<div class="modal fade"></div>' )
-    @modalElement.append $( App.view('modal')(
+    @html App.view('modal')
       head:         @head
       message:      @message
       detail:       @detail
@@ -472,41 +480,42 @@ class App.ControllerModal extends App.Controller
       cancel:       @cancel
       button:       @button
       buttonClass:  @buttonClass
-    ) )
-    if @el && !@message && !@detail
-      @modalElement.find('.modal-body').html @el
+      centerButtons:@centerButtons
+      content: content
 
-    @modalElement.find('form').on('submit', (e) => @onSubmit(e) )
-    @modalElement.find('.js-submit').on('click', (e) => @onSubmit(e) )
-    @modalElement.find('.js-cancel').on('click', (e) => @hide(e)  )
-    @modalElement.find('.js-close').on('click', (e) => @hide(e) )
+    if @content
+      @body.html @content
 
-    @modalElement.modal(
+    @el.modal
       keyboard: @keyboard
       show:     true
       backdrop: @backdrop
-    ).on('show.bs.modal', =>
-      @onShow()
-    ).on('hidden.bs.modal', =>
-      @onHide()
-      # remove modal from dom
-      $('.modal').remove()
-    ).find('.js-close').bind('submit', (e) => @hide(e) )
+    .on
+      'show.bs.modal': @onShow
+      'shown.bs.modal': @onShown
+      'hidden.bs.modal': =>
+        @onHide()
+        # remove modal from dom
+        $('.modal').remove()
 
-  hide: (e) ->
+  hide: (e) =>
     if e
       e.preventDefault()
-    @modalElement.modal('hide')
+    @el.modal('hide')
+
+  onShown: ->
+    console.log('modal shown: do nothing')
+    # do nothing
 
   onShow: ->
-    console.log('no nothing')
+    console.log('modal rendered: do nothing')
     # do nothing
 
   onHide: ->
-    console.log('no nothing')
+    console.log('modal removed: do nothing')
     # do nothing
 
-  onSubmit: (e) ->
+  onSubmit: (e) =>
     e.preventDefault()
     @log 'error', 'You need to implement your own "onSubmit" method!'
 

app/assets/javascripts/app/controllers/_channel/email.js.coffee

@@ -91,7 +91,7 @@ class App.ChannelEmailFilterEdit extends App.ControllerModal
         autofocus: true,
       )
 
-    @el = @form.form
+    @content = @form.form
     @show()
 
   onSubmit: (e) =>
@@ -180,7 +180,7 @@ class App.ChannelEmailAddressEdit extends App.ControllerModal
         autofocus: true,
       )
 
-    @el = @form.form
+    @content = @form.form
 
     @show()
 
@@ -266,7 +266,7 @@ class App.ChannelEmailSignatureEdit extends App.ControllerModal
         autofocus: true
       )
 
-    @el = @form.form
+    @content = @form.form
 
     @show()
 
@@ -353,7 +353,7 @@ class App.ChannelEmailInboundEdit extends App.ControllerModal
         autofocus: true
       )
 
-    @el = @form.form
+    @content = @form.form
 
     @show()
 

app/assets/javascripts/app/controllers/agent_ticket_merge.js.coffee

@@ -26,7 +26,7 @@ class App.TicketMerge extends App.ControllerModal
 
   render: ->
 
-    @html App.view('agent_ticket_merge')()
+    @content = $ App.view('agent_ticket_merge')()
 
     list = []
     for ticket_id in @ticket_ids_by_customer
@@ -34,7 +34,7 @@ class App.TicketMerge extends App.ControllerModal
         ticketItem = App.Ticket.fullLocal( ticket_id )
         list.push ticketItem
     new App.ControllerTable(
-      el:       @el.find('#ticket-merge-customer-tickets'),
+      el:       @content.find('#ticket-merge-customer-tickets'),
       overview: [ 'number', 'title', 'state', 'group', 'created_at' ]
       model:    App.Ticket,
       objects:  list,
@@ -47,18 +47,18 @@ class App.TicketMerge extends App.ControllerModal
         ticketItem = App.Ticket.fullLocal( ticket_id )
         list.push ticketItem
     new App.ControllerTable(
-      el:       @el.find('#ticket-merge-recent-tickets'),
+      el:       @content.find('#ticket-merge-recent-tickets'),
       overview: [ 'number', 'title', 'state', 'group', 'created_at' ]
       model:    App.Ticket,
       objects:  list,
       radio:    true,
     )
 
-    @el.delegate('[name="master_ticket_number"]', 'focus', (e) ->
+    @content.delegate('[name="master_ticket_number"]', 'focus', (e) ->
       $(e.target).parents().find('[name="radio"]').prop( 'checked', false )
     )
 
-    @el.delegate('[name="radio"]', 'click', (e) ->
+    @content.delegate('[name="radio"]', 'click', (e) ->
       if $(e.target).prop('checked')
         ticket_id = $(e.target).val()
         ticket    = App.Ticket.fullLocal( ticket_id )

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -398,7 +398,7 @@ class ModalForm extends App.ControllerModal
       model: App.User
       autofocus: true
     )
-    @el = controller.form
+    @content = controller.form
 
     @show()
 
@@ -421,9 +421,7 @@ class ModalText extends App.ControllerModal
     @render()
 
   render: ->
-    @html App.view('layout_ref/content')()
-
-    @show()
+    @show( App.view('layout_ref/content')() )
 
   onHide: =>
     window.history.back()

app/assets/javascripts/app/controllers/ticket_customer.js.coffee

@@ -17,7 +17,7 @@ class App.TicketCustomer extends App.ControllerModal
       autofocus: true
     )
 
-    @el = controller.form
+    @content = controller.form
 
     @show()
 

app/assets/javascripts/app/controllers/ticket_overview.js.coffee

@@ -639,7 +639,7 @@ class App.OverviewSettings extends App.ControllerModal
       model:     { configure_attributes: @configure_attributes_article }
       autofocus: false
     )
-    @el = controller.form
+    @content = controller.form
     @show()
 
   onSubmit: (e) =>

app/assets/javascripts/app/controllers/widget/link.js.coffee

@@ -116,7 +116,7 @@ class App.LinkAdd extends App.ControllerModal
 
 
   render: ->
-    @html App.view('link/add')(
+    @content = $ App.view('link/add')(
       link_object:    @link_object,
       link_object_id: @link_object_id,
       object:         @object,
@@ -128,7 +128,7 @@ class App.LinkAdd extends App.ControllerModal
         ticketItem = App.Ticket.fullLocal( ticket_id )
         list.push ticketItem
     new App.ControllerTable(
-      el:       @el.find('#ticket-merge-customer-tickets'),
+      el:       @content.find('#ticket-merge-customer-tickets'),
       overview: [ 'number', 'title', 'state', 'group', 'created_at' ]
       model:    App.Ticket,
       objects:  list,
@@ -141,18 +141,18 @@ class App.LinkAdd extends App.ControllerModal
         ticketItem = App.Ticket.fullLocal( ticket_id )
         list.push ticketItem
     new App.ControllerTable(
-      el:       @el.find('#ticket-merge-recent-tickets'),
+      el:       @content.find('#ticket-merge-recent-tickets'),
       overview: [ 'number', 'title', 'state', 'group', 'created_at' ]
       model:    App.Ticket,
       objects:  list,
       radio:    true,
     )
 
-    @el.delegate('[name="ticket_number"]', 'focus', (e) ->
+    @content.delegate('[name="ticket_number"]', 'focus', (e) ->
       $(e.target).parents().find('[name="radio"]').prop( 'checked', false )
     )
 
-    @el.delegate('[name="radio"]', 'click', (e) ->
+    @content.delegate('[name="radio"]', 'click', (e) ->
       if $(e.target).prop('checked')
         ticket_id = $(e.target).val()
         ticket    = App.Ticket.fullLocal( ticket_id )

app/assets/javascripts/app/lib/app_post/user_organization_autocompletion.js.coffee

@@ -282,7 +282,7 @@ class UserNew extends App.ControllerModal
       autofocus:  true
     )
 
-    @el = controller.form
+    @content = controller.form
 
     @show()