Skip to content

Commit

Permalink
Fix #104 Do not enforce btn-sm
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistic100
mistic100 committed Mar 22, 2019
1 parent adfe6cb commit 76c8cdd
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 72 deletions.
16 changes: 8 additions & 8 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
<div class="container">
<div class="col-md-12 col-lg-10 offset-lg-1">
<div class="page-header">
<a class="float-right" href="https://github.com/mistic100/Bootstrap-Confirmation">
<img src="https://discordemoji.com/assets/emoji/5643_github_octocat.png" width=48px height=48px>
<a class="float-right" href="https://bootstrap-confirmation.js.org/">
<img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" height=48px>
</a>
<h1>Bootstrap Confirmation</h1>
</div>
Expand All @@ -46,9 +46,9 @@ <h1>Bootstrap Confirmation</h1>
<div class="card-header">Customize</div>
<div class="card-body">
<button class="btn btn-primary" data-toggle="confirmation"
data-btn-ok-label="Continue" data-btn-ok-class="btn-success"
data-btn-ok-label="Continue" data-btn-ok-class="btn btn-success"
data-btn-ok-icon-class="material-icons" data-btn-ok-icon-content="check"
data-btn-cancel-label="Stoooop!" data-btn-cancel-class="btn-danger"
data-btn-cancel-label="Stoooop!" data-btn-cancel-class="btn btn-danger"
data-btn-cancel-icon-class="material-icons" data-btn-cancel-icon-content="close"
data-title="Is it ok?" data-content="This might be dangerous">
Confirmation
Expand Down Expand Up @@ -162,28 +162,28 @@ <h1>Bootstrap Confirmation</h1>
},
buttons: [
{
class: 'btn btn-danger',
class: 'btn btn-sm btn-danger',
iconClass: 'material-icons mr-1',
iconContent: 'directions_railway',
label: 'Railway',
value: 'Railway'
},
{
class: 'btn btn-primary',
class: 'btn btn-sm btn-primary',
iconClass: 'material-icons mr-1',
iconContent: 'directions_car',
label: 'Car',
value: 'Car'
},
{
class: 'btn btn-warning',
class: 'btn btn-sm btn-warning',
iconClass: 'material-icons mr-1',
iconContent: 'directions_boat',
label: 'Boat',
value: 'Boat'
},
{
class: 'btn btn-secondary',
class: 'btn btn-sm btn-secondary',
iconClass: 'material-icons mr-1',
iconContent: 'cancel',
label: 'Cancel',
Expand Down
98 changes: 34 additions & 64 deletions src/confirmation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ const VERSION = '4.0.4';
const DATA_KEY = `bs.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const JQUERY_NO_CONFLICT = $.fn[NAME];
const BTN_CLASS_DEFAULT = 'btn btn-sm h-100 d-flex align-items-center';
const BTN_CLASS_BASE = 'h-100 d-flex align-items-center';
const BTN_CLASS_DEFAULT = 'btn btn-sm';

const DefaultType = {
...Popover.DefaultType,
Expand Down Expand Up @@ -46,28 +47,24 @@ const Default = {
copyAttributes : 'href target',
onConfirm : $.noop,
onCancel : $.noop,
btnOkClass : 'btn-primary',
btnOkClass : `${BTN_CLASS_DEFAULT} btn-primary`,
btnOkLabel : 'Yes',
btnOkIconClass : '',
btnOkIconContent : '',
btnCancelClass : 'btn-secondary',
btnCancelClass : `${BTN_CLASS_DEFAULT} btn-secondary`,
btnCancelLabel : 'No',
btnCancelIconClass : '',
btnCancelIconContent: '',
buttons : [],
// @formatter:off
// href="#" allows the buttons to be focused
template : `
<div class="popover confirmation">
<div class="arrow"></div>
<h3 class="popover-header"></h3>
<div class="popover-body">
<p class="confirmation-content"></p>
<div class="confirmation-buttons text-center">
<div class="btn-group">
<a href="#" class="${BTN_CLASS_DEFAULT}" data-apply="confirmation"></a>
<a href="#" class="${BTN_CLASS_DEFAULT}" data-dismiss="confirmation"></a>
</div>
<div class="btn-group"></div>
</div>
</div>
</div>`,
Expand All @@ -84,11 +81,9 @@ const ClassName = {
};

const Selector = {
TITLE : '.popover-header',
CONTENT : '.confirmation-content',
BUTTONS : '.confirmation-buttons .btn-group',
BTN_APPLY : '[data-apply=confirmation]',
BTN_DISMISS: '[data-dismiss=confirmation]',
TITLE : '.popover-header',
CONTENT: '.confirmation-content',
BUTTONS: '.confirmation-buttons .btn-group',
};

const Keymap = {
Expand Down Expand Up @@ -211,7 +206,7 @@ class Confirmation extends Popover {
}

if (this.config.buttons.length > 0) {
this._setCustomButtons($tip);
this._setButtons($tip, this.config.buttons);
}
else {
this._setStandardButtons($tip);
Expand Down Expand Up @@ -322,66 +317,40 @@ class Confirmation extends Popover {
* @private
*/
_setStandardButtons($tip) {
const self = this;

const btnApply = $tip.find(Selector.BTN_APPLY)
.addClass(this.config.btnOkClass)
.html(this.config.btnOkLabel)
.attr(this.config._attributes);

if (this.config.btnOkIconClass || this.config.btnOkIconContent) {
btnApply.prepend($('<i></i>')
.addClass(this.config.btnOkIconClass || '')
.text(this.config.btnOkIconContent || ''));
}

btnApply.off('click')
.one('click', function (e) {
if ($(this).attr('href') === '#') {
e.preventDefault();
}

self.config.onConfirm.call(self.element);
$(self.element).trigger(Event.CONFIRMED);
$(self.element).trigger(self.config.confirmationEvent, [true]);

self.hide();
});

const btnDismiss = $tip.find(Selector.BTN_DISMISS)
.addClass(this.config.btnCancelClass)
.html(this.config.btnCancelLabel);

if (this.config.btnCancelIconClass || this.config.btnCancelIconContent) {
btnDismiss.prepend($('<i></i>')
.addClass(this.config.btnCancelIconClass || '')
.text(this.config.btnCancelIconContent || ''));
}

btnDismiss.off('click')
.one('click', (e) => {
e.preventDefault();

self.config.onCancel.call(self.element);
$(self.element).trigger(Event.CANCELED);

self.hide();
});
const buttons = [
{
class : this.config.btnOkClass,
label : this.config.btnOkLabel,
iconClass : this.config.btnOkIconClass,
iconContent: this.config.btnOkIconContent,
attr : this.config._attributes,
},
{
class : this.config.btnCancelClass,
label : this.config.btnCancelLabel,
iconClass : this.config.btnCancelIconClass,
iconContent: this.config.btnCancelIconContent,
cancel : true,
},
];

this._setButtons($tip, buttons);
}

/**
* Init the custom buttons
* Init the buttons
* @param $tip
* @param buttons
* @private
*/
_setCustomButtons($tip) {
_setButtons($tip, buttons) {
const self = this;
const $group = $tip.find(Selector.BUTTONS).empty();

this.config.buttons.forEach((button) => {
buttons.forEach((button) => {
const btn = $('<a href="#"></a>')
.addClass(BTN_CLASS_DEFAULT)
.addClass(button.class || 'btn btn-secondary')
.addClass(BTN_CLASS_BASE)
.addClass(button.class || `${BTN_CLASS_DEFAULT} btn-secondary`)
.html(button.label || '')
.attr(button.attr || {});

Expand All @@ -407,6 +376,7 @@ class Confirmation extends Popover {
else {
self.config.onConfirm.call(self.element, button.value);
$(self.element).trigger(Event.CONFIRMED, [button.value]);
$(self.element).trigger(self.config.confirmationEvent, [true]);
}

self.hide();
Expand Down

0 comments on commit 76c8cdd

Please sign in to comment.