add more options to confirmation popovers... (#291)

...rework the API a little bit, too.

cf #289

I didn't add the advanced positioning, since that would best be
addressed upstream in Bootstrap.

spec/dummy/app/assets/stylesheets/application.css.scss

@@ -17,7 +17,7 @@
 @import 'dvl/components/pagination';
 @import 'dvl/components/pagination_compact';
 @import 'dvl/components/popovers';
-@import 'dvl/components/delete_popover';
+@import 'dvl/components/confirmation_popover';
 @import 'dvl/components/progress';
 @import 'dvl/components/sidebar_data';
 @import 'dvl/components/sidebar_nav';

spec/dummy/app/views/home/components.rb

@@ -546,15 +546,39 @@ def main
       ul(class: 'delete_list') {
         li(class: 'js_delete_1') {
           text 'Project 1'
-          a(icon('minus-circle', 'aria-label' => 'Delete'), class: 'icon_secondary', 'data-confirm' => true, 'data-confirm-with' => 'popover', href: '/delete', 'data-method' => 'delete', 'data-remote' => true)
+          a(
+            icon('minus-circle', 'aria-label' => 'Delete'),
+            class: 'icon_secondary',
+            'data-confirm' => true,
+            'data-confirm-with' => 'popover',
+            href: '/delete',
+            'data-method' => 'delete',
+            'data-remote' => true
+          )
         }
         li(class: 'js_delete_2') {
           text 'Project 2'
-          a(icon('minus-circle', 'aria-label' => 'Delete'), class: 'icon_secondary', 'data-confirm' => 'This is an important record. <strong>It will be destroyed forever.</strong>', 'data-confirm-with' => 'popover', href: '/delete', 'data-method' => 'delete', 'data-remote' => true)
+          a(
+            icon('minus-circle', 'aria-label' => 'Delete'),
+            class: 'icon_secondary',
+            'data-confirm' => 'This is an important record. <strong>It will be destroyed forever.</strong>',
+            'data-confirm-with' => 'popover',
+            href: '/delete',
+            'data-method' => 'delete',
+            'data-remote' => true
+          )
         }
         li(class: 'js_delete_3') {
           text 'Project 3'
-          a(icon('minus-circle', 'aria-label' => 'Delete'), class: 'icon_secondary', 'data-confirm' => true, 'data-confirm-with' => 'popover', 'data-confirmation-options' => { 't_delete' => 'Archive' }.to_json, href: '/delete', 'data-method' => 'delete', 'data-remote' => true)
+          a(
+            icon('minus-circle', 'aria-label' => 'Delete'),
+            class: 'icon_secondary',
+            'data-confirm' => true,
+            'data-confirm-with' => 'popover',
+            'data-confirm-text' => 'Archive',
+            href: '/delete',
+            'data-method' => 'delete',
+            'data-remote' => true)
         }
       }
     }, sub: true, hint: 'Popovers can contain headers and alternate button text.'

vendor/assets/javascripts/dvl/components/confirmations.coffee

@@ -2,9 +2,11 @@ Dvl.Confirmations = {}
 
 class Dvl.Confirmations.Popover
   defaults:
-    t_cancel: 'Cancel'
-    t_delete: 'Delete'
-    popoverOpts: {}
+    'cancel-text': 'Cancel'
+    'cancel-class': ''
+    'confirm-class': 'error'
+    'confirm-text': 'Delete'
+    'popover-opts': {}
     # cancelCb:
 
   constructor: ($el, message, cb, opts = {}) ->
@@ -15,11 +17,14 @@ class Dvl.Confirmations.Popover
 
     @$el.data('popover-confirmation', @)
 
-    @options = $.extend {}, @defaults, @$el.data('confirmation-options'), opts
+    @options = $.extend {}, @defaults, opts
+
+    for i of @defaults
+      @options[i] = @$el.data(i) if @$el.data(i)?
 
     if message
       wrappedMessage = """
-        <div class='popover_delete_confirmation_message'>
+        <div class='popover_confirmation_message'>
           #{message}
         </div>
       """
@@ -28,27 +33,27 @@ class Dvl.Confirmations.Popover
       $.extend({
         html: true
         content: """
-          <div class='popover_delete_confirmation'>
+          <div class='popover_confirmation'>
             #{wrappedMessage || ''}
-            <a class='button error js-confirm-delete' href='#'>#{@options.t_delete}</a>
-            <a class='button js-cancel' href='#'>#{@options.t_cancel}</a>
+            <a class='button #{@options['confirm-class']} js-popover-confirm' href='#'>#{@options['confirm-text']}</a>
+            <a class='button #{@options['cancel-class']} js-popover-cancel' href='#'>#{@options['cancel-text']}</a>
           </div>
         """
         trigger: 'manual'
         placement: 'bottom'
-      }, @options.popoverOpts)
+      }, @options['popover-opts'])
     )
 
     @$el.popover('show')
 
     $tip = @$el.data('bs.popover').$tip
 
     $tip.on 'click', '.button', (e) =>
-      if $(e.target).hasClass('js-confirm-delete')
+      if $(e.target).hasClass('js-popover-confirm')
         @$el.trigger('confirm.dvl')
         cb()
 
-      if $(e.target).hasClass('js-cancel')
+      if $(e.target).hasClass('js-popover-cancel')
         @$el.trigger('cancel.dvl')
         @options.cancelCb?()
 
@@ -66,19 +71,22 @@ class Dvl.Confirmations.Popover
 
 class Dvl.Confirmations.Modal
   defaults:
-    t_generic: 'This is a destructive action. Please confirm.'
-    t_title: 'Are you sure?'
-    t_cancel: 'Cancel'
-    t_confirm: 'Confirm'
+    'generic-message': 'This is a destructive action. Please confirm.'
+    'title': 'Are you sure?'
+    'cancel-text': 'Cancel'
+    'confirm-text': 'Confirm'
     # cancelCb:
 
   constructor: ($el, message, cb, opts = {}) ->
-    @options = $.extend {}, @defaults, $el.data('confirmation-options'), opts
+    @options = $.extend {}, @defaults, opts
+
+    for i of @defaults
+      @options[i] = $el.data(i) if $el.data(i)?
 
-    message ||= @options.t_generic
+    message ||= @options['generic-message']
 
     $modal = Dvl.Modal.init(
-      Dvl.Modal.getHTML(title: @options.t_title),
+      Dvl.Modal.getHTML(title: @options['title']),
       removeOnClose: true
     )
 
@@ -90,9 +98,9 @@ class Dvl.Confirmations.Modal
         <div class='modal_footer'>
           <div class='modal_footer_primary'>
             <a class='button white' data-dismiss='modal'>
-              #{@options.t_cancel}
+              #{@options['cancel-text']}
             </a>
-            <button class='button error js-confirm-delete'>#{@options.t_confirm}</button>
+            <button class='button error js-popover-confirm'>#{@options['confirm-text']}</button>
           </div>
         </div>
       """
@@ -101,12 +109,12 @@ class Dvl.Confirmations.Modal
       $el.trigger('cancel.dvl')
       @options.cancelCb?()
 
-    $modal.one 'click', '.js-confirm-delete', ->
+    $modal.one 'click', '.js-popover-confirm', ->
       $el.trigger('confirm.dvl')
       cb()
 
       $modal.
         modal('hide').
         remove()
 
-    $modal.find('.js-confirm-delete').focus()
+    $modal.find('.js-popover-confirm').focus()

vendor/assets/stylesheets/dvl/components/delete_popover.scss → vendor/assets/stylesheets/dvl/components/confirmation_popover.scss

@@ -1,4 +1,4 @@
-.popover_delete_confirmation {
+.popover_confirmation {
   .button {
     display: block;
     padding-left: 1.5rem;
@@ -10,7 +10,7 @@
   }
 }
 
-.popover_delete_confirmation_message {
+.popover_confirmation_message {
   font-size: $fontSmall;
   text-align: center;
   margin-bottom: $rhythm;