<div class="modal confirm -with-overlay -nav-padded js-modal js-modal-exit js-confirm-cancel" data-status="" data-modal="confirm">
<div class="modal-inner inner">
<div class="modal-panel">
<div class="modal-header">
<button type="button" class="btn btn-default btn-modal-exit js-modal-exit js-confirm-cancel svg-wrap" aria-label="Exit Modal">
<span class="fa fa-times"></span>
</button>
<h3 class="modal-title">
<span class="text">Notice</span>
</h3>
</div>
<div class="modal-section confirm-content">
<div class="confirm-icon">
<i aria-hidden="true" class="fa fa-"></i>
</div>
<h3 class="confirm-heading"></h3>
<div class="button-group">
<button class="btn btn-default btn-confirm-submit js-confirm-submit js-modal-exit" type="button">
<span class="text"></span>
</button>
<button class="btn btn-default js-modal-exit" type="button">
<span class="text">Cancel</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal confirm -with-overlay -nav-padded js-modal js-modal-exit js-confirm-cancel" data-status="{{confirmStatus}}" data-modal="confirm">
<div class="modal-inner inner">
<div class="modal-panel">
<div class="modal-header">
<button type="button" class="btn btn-default btn-modal-exit js-modal-exit js-confirm-cancel svg-wrap" aria-label="Exit Modal">
<span class="fa fa-times"></span>
</button>
<h3 class="modal-title">
<span class="text">Notice</span>
</h3>
</div>
<div class="modal-section confirm-content">
<div class="confirm-icon">
<i aria-hidden="true" class="fa fa-{{confirmIcon}}"></i>
</div>
<h3 class="confirm-heading">{{{confirmHeading}}}</h3>
{{#if confirmMessage}}
<p class="confirm-body">{{{confirmMessage}}}</p>
{{/if}}
<div class="button-group">
<button class="btn btn-default btn-confirm-submit js-confirm-submit{{#if confirmCustom }}-custom{{/if}} js-modal-exit" type="button">
<span class="text">{{confirmButton}}</span>
</button>
<button class="btn btn-default js-modal-exit" type="button">
<span class="text">Cancel</span>
</button>
</div>
</div>
</div>
</div>
</div>
/* No context defined for this component. */
.confirm {
&.modal {
.modal-inner {
max-width: 125rem;
}
}
&[data-status="warning"], &[data-status="danger"] {
.modal-header {
border-bottom-color: $color-irma-danger;
}
.confirm-icon, .btn-confirm-submit {
background: $color-irma-danger;
}
.btn-confirm-submit {
&:hover, &:focus {
background: $color-irma-danger-dark;
}
}
}
&[data-status="good"], &[data-status="success"] {
.modal-header {
border-bottom-color: $color-irma-spearmint;
}
.confirm-icon, .btn-confirm-submit {
background: $color-irma-spearmint;
}
.btn-confirm-submit {
&:hover, &:focus {
background: $color-irma-mint;
}
}
}
&[data-status="caution"] {
.modal-header {
border-bottom-color: $color-irma-goldenrod;
}
.confirm-icon, .btn-confirm-submit {
background: $color-irma-goldenrod;
color: $color-irma-navy;
}
.btn-confirm-submit {
&:hover, &:focus {
background: $color-irma-gold;
}
}
}
.confirm-content {
text-align: center;
.button-group {
margin-top: 10rem;
justify-content: center;
}
}
.confirm-icon {
display: flex;
justify-content: center;
align-items: center;
width: 15rem;
height: 15rem;
margin: 0 auto;
border-radius: 50%;
color: white;
@include font-size-other(32px);
}
.confirm-heading {
margin-top: 6rem;
}
.confirm-body {
margin-top: 3rem;
}
}
/*
* _confirm.js
*/
irma.confirm = (function () {
'use strict';
var createNew = function (options, callback) {
$.get(irma.assetPath + '/templates/confirm/confirm.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template);
var html = templateScript(options);
$('.page-container').append(html);
irma.modal.openModal('confirm');
$('.js-confirm-submit-custom').on('click', function () {
callback();
});
});
};
var confirm = function ($target, options) {
$.get(irma.assetPath + '/templates/confirm/confirm.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template);
var html = templateScript(options);
$('.page-container').append(html);
irma.modal.openModal('confirm');
$('.confirm .js-confirm-submit').data('target', $target);
});
};
var init = function () {
$(document).on('click', '.js-confirm', function (e) {
var $btn = $(this),
data = $btn.data();
if (!data.confirmed) {
e.stopImmediatePropagation();
e.preventDefault();
confirm($btn, data);
}
else {
$btn.data('confirmed', false);
}
}).on('click', '.js-table-action', function (e) {
var action = _.find(irma.confirmActions, { name: $(this).data().action });
if (action) {
var $btn = $(this);
var data = _.merge(action, $(this).data());
if (!data.confirmed) {
e.stopImmediatePropagation();
confirm($btn, data);
}
else {
$btn.data('confirmed', false);
}
}
}).on('click', '.js-confirm-submit', function () {
var $target = $(this).data().target;
$target.data('confirmed', true)
.trigger('click');
$(this).closest('.confirm').remove();
});
};
return {
init: init,
createNew: createNew
};
}());
data-confirm-icon reference: https://fontawesome.com/v4.7.0/icons/
recommended: use icon “share-square-o” for form submission and “trash-o” for deletion
data-status options are “warning” and “good”