Closes #31 possibility to define custom buttons

mistic100 · Jun 25, 2016 · cab2178 · cab2178
1 parent bdbb315
commit cab2178
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 26 deletions.
diff --git a/bootstrap-confirmation.js b/bootstrap-confirmation.js
@@ -27,6 +27,7 @@
     popout: false,
     singleton: false,
     copyAttributes: 'href target',
+    buttons: null,
     onConfirm: $.noop,
     onCancel: $.noop,
     btnOkClass: 'btn-xs btn-primary',
@@ -168,32 +169,61 @@
       e.stopPropagation();
     });
 
-    // configure 'ok' button
-    $tip.find('[data-apply="confirmation"]')
-      .addClass(this.options.btnOkClass)
-      .html(this.options.btnOkLabel)
-      .attr(this.options._attributes)
-      .prepend($('<i></i>').addClass(this.options.btnOkIcon), ' ')
-      .off('click')
-      .one('click', function(e) {
-        self.getOnConfirm.call(self).call(self.$element);
-        self.$element.trigger('confirmed.bs.confirmation');
-        self.$element.trigger(self.options.trigger, [true]);
-        self.$element.confirmation('hide');
-      });
-
-    // configure 'cancel' button
-    $tip.find('[data-dismiss="confirmation"]')
-      .addClass(this.options.btnCancelClass)
-      .html(this.options.btnCancelLabel)
-      .prepend($('<i></i>').addClass(this.options.btnCancelIcon), ' ')
-      .off('click')
-      .one('click', function(e) {
-        self.getOnCancel.call(self).call(self.$element);
-        if (self.inState) self.inState.click = false; // Bootstrap 3.3.5
-        self.$element.trigger('canceled.bs.confirmation');
-        self.$element.confirmation('hide');
-      });
+    // configure custom buttons
+    if (this.options.buttons) {
+      var $group = $tip.find('.confirmation-buttons .btn-group').empty();
+
+      this.options.buttons.forEach(function(button) {
+        $group.append(
+          $('<a></a>')
+            .addClass(button.class)
+            .html(button.label)
+            .prepend($('<i></i>').addClass(button.icon), ' ')
+            .one('click', function() {
+              if (button.onClick) {
+                button.onClick.call(self.$element);
+              }
+              if (button.cancel) {
+                self.getOnCancel.call(self).call(self.$element);
+                self.$element.trigger('canceled.bs.confirmation');
+              }
+              else {
+                self.getOnConfirm.call(self).call(self.$element);
+                self.$element.trigger('confirmed.bs.confirmation');
+              }
+              self.$element.confirmation('hide');
+            })
+        );
+      }, this);
+    }
+    else {
+      // configure 'ok' button
+      $tip.find('[data-apply="confirmation"]')
+        .addClass(this.options.btnOkClass)
+        .html(this.options.btnOkLabel)
+        .attr(this.options._attributes)
+        .prepend($('<i></i>').addClass(this.options.btnOkIcon), ' ')
+        .off('click')
+        .one('click', function() {
+          self.getOnConfirm.call(self).call(self.$element);
+          self.$element.trigger('confirmed.bs.confirmation');
+          self.$element.trigger(self.options.trigger, [true]);
+          self.$element.confirmation('hide');
+        });
+
+      // configure 'cancel' button
+      $tip.find('[data-dismiss="confirmation"]')
+        .addClass(this.options.btnCancelClass)
+        .html(this.options.btnCancelLabel)
+        .prepend($('<i></i>').addClass(this.options.btnCancelIcon), ' ')
+        .off('click')
+        .one('click', function() {
+          self.getOnCancel.call(self).call(self.$element);
+          if (self.inState) self.inState.click = false; // Bootstrap 3.3.5
+          self.$element.trigger('canceled.bs.confirmation');
+          self.$element.confirmation('hide');
+        });
+    }
 
     $tip.removeClass('fade top bottom left right in');
 

diff --git a/example/index.html b/example/index.html
@@ -67,6 +67,13 @@ <h1>Bootstrap Confirmation</h1>
         <button class="btn btn-default" data-toggle="confirmation" data-popout="true">Confirmation 2</button>
       </div>
     </div>
+
+    <div class="panel panel-default">
+      <div class="panel-heading">Custom buttons</div>
+      <div class="panel-body">
+        <button class="btn btn-default" id="custom-confirmation" data-title="Choose your currency">Confirmation</button>
+      </div>
+    </div>
   </div>
 </div>
 
@@ -79,6 +86,41 @@ <h1>Bootstrap Confirmation</h1>
   console.log('Bootstrap Confirmation ' + $.fn.confirmation.Constructor.VERSION);
 
   $('[data-toggle=confirmation]').confirmation();
+
+  var currency = '';
+  $('#custom-confirmation').confirmation({
+    onConfirm: function() {
+      alert('You choosed ' + currency);
+    },
+    buttons: [
+      {
+        class: 'btn btn-danger',
+        icon: 'glyphicon glyphicon-usd',
+        onClick: function() {
+          currency = 'US Dollar';
+        }
+      },
+      {
+        class: 'btn btn-primary',
+        icon: 'glyphicon glyphicon-euro',
+        onClick: function() {
+          currency = 'Euro';
+        }
+      },
+      {
+        class: 'btn btn-warning',
+        icon: 'glyphicon glyphicon-bitcoin',
+        onClick: function() {
+          currency = 'Bitcoin';
+        }
+      },
+      {
+        class: 'btn btn-default',
+        icon: 'glyphicon glyphicon-remove',
+        cancel: true
+      }
+    ]
+  });
 </script>
 
 <script>