new: [webroot] Added bootstrap toaster
mokaddem
parent
14509edef8
commit
8ea8bf6418
|
|
@ -39,9 +39,11 @@ $cakeDescription = 'Cerebrate';
|
|||
<?= $this->Html->script('popper.min.js') ?>
|
||||
<?= $this->Html->script('bootstrap.bundle.js') ?>
|
||||
<?= $this->Html->script('main.js') ?>
|
||||
<?= $this->Html->script('bootstrap-helper.js') ?>
|
||||
<?= $this->fetch('meta') ?>
|
||||
<?= $this->fetch('css') ?>
|
||||
<?= $this->fetch('script') ?>
|
||||
<?= $this->Html->css('bootstrap-additional.css') ?>
|
||||
<?= $this->Html->meta('favicon.ico', '/img/favicon.ico', ['type' => 'icon']); ?>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -63,5 +65,6 @@ $cakeDescription = 'Cerebrate';
|
|||
</div>
|
||||
</main>
|
||||
<div id="mainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true"></div>
|
||||
<div id="mainToastContainer" style="position: absolute; top: 15px; right: 15px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
/* Toast */
|
||||
.toast {
|
||||
min-width: 250px;
|
||||
}
|
||||
.toast-primary {
|
||||
color: #004085;
|
||||
background-color: #cce5ff;
|
||||
border-color: #b8daff;
|
||||
}
|
||||
.toast-primary strong {
|
||||
color: #002752;
|
||||
}
|
||||
.toast-secondary {
|
||||
color: #383d41;
|
||||
background-color: #e2e3e5;
|
||||
border-color: #d6d8db;
|
||||
}
|
||||
.toast-secondary strong {
|
||||
color: #202326;
|
||||
}
|
||||
.toast-success {
|
||||
color: #155724 !important;
|
||||
background-color: #d4edda !important;
|
||||
border-color: #c3e6cb !important;
|
||||
}
|
||||
.toast-success strong {
|
||||
color: #0b2e13;
|
||||
}
|
||||
.toast-info {
|
||||
color: #0c5460;
|
||||
background-color: #d1ecf1;
|
||||
border-color: #bee5eb;
|
||||
}
|
||||
.toast-info strong {
|
||||
color: #062c33;
|
||||
}
|
||||
.toast-warning {
|
||||
color: #856404;
|
||||
background-color: #fff3cd;
|
||||
border-color: #ffeeba;
|
||||
}
|
||||
.toast-warning strong {
|
||||
color: #533f03;
|
||||
}
|
||||
.toast-danger {
|
||||
color: #721c24;
|
||||
background-color: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
.toast-danger strong {
|
||||
color: #491217;
|
||||
}
|
||||
.toast-light {
|
||||
color: #818182;
|
||||
background-color: #fefefe;
|
||||
border-color: #fdfdfe;
|
||||
}
|
||||
.toast-light strong {
|
||||
color: #686868;
|
||||
}
|
||||
.toast-dark {
|
||||
color: #1b1e21;
|
||||
background-color: #d6d8d9;
|
||||
border-color: #c6c8ca;
|
||||
}
|
||||
.toast-dark strong {
|
||||
color: #040505;
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
function showToast(options) {
|
||||
var theToast = new Toaster(options)
|
||||
theToast.makeToast()
|
||||
theToast.show()
|
||||
return theToast.$toast
|
||||
}
|
||||
|
||||
class Toaster {
|
||||
constructor(options) {
|
||||
this.options = Object.assign({}, Toaster.defaultOptions, options)
|
||||
this.bsToastOptions = {
|
||||
autohide: this.options.autohide,
|
||||
delay: this.options.delay,
|
||||
}
|
||||
}
|
||||
|
||||
static defaultOptions = {
|
||||
title: false,
|
||||
muted: false,
|
||||
body: false,
|
||||
variant: 'default',
|
||||
autohide: true,
|
||||
delay: 5000,
|
||||
titleHtml: false,
|
||||
mutedHtml: false,
|
||||
bodyHtml: false,
|
||||
closeButton: true,
|
||||
}
|
||||
|
||||
makeToast() {
|
||||
if (this.isValid()) {
|
||||
this.$toast = Toaster.buildToast(this.options)
|
||||
$('#mainToastContainer').append(this.$toast)
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this.isValid()) {
|
||||
var that = this
|
||||
this.$toast.toast(this.bsToastOptions)
|
||||
.toast('show')
|
||||
.on('hidden.bs.toast', function () {
|
||||
that.removeToast()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
removeToast() {
|
||||
this.$toast.remove();
|
||||
}
|
||||
|
||||
isValid() {
|
||||
return this.options.title !== false || this.options.muted !== false || this.options.body !== false
|
||||
}
|
||||
|
||||
static buildToast(options) {
|
||||
var $toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>')
|
||||
$toast.addClass('toast-' + options.variant)
|
||||
if (options.title !== false || options.muted !== false) {
|
||||
var $toastHeader = $('<div class="toast-header"/>')
|
||||
$toastHeader.addClass('toast-' + options.variant)
|
||||
if (options.title !== false) {
|
||||
var $toastHeaderText
|
||||
if (options.titleHtml) {
|
||||
$toastHeaderText = $('<div class="mr-auto"/>').html(options.title);
|
||||
} else {
|
||||
$toastHeaderText = $('<strong class="mr-auto"/>').text(options.title)
|
||||
}
|
||||
$toastHeader.append($toastHeaderText)
|
||||
}
|
||||
if (options.muted !== false) {
|
||||
var $toastHeaderMuted
|
||||
if (options.mutedHtml) {
|
||||
$toastHeaderMuted = $('<div/>').html(options.muted)
|
||||
} else {
|
||||
$toastHeaderMuted = $('<small class="text-muted"/>').text(options.muted)
|
||||
}
|
||||
$toastHeader.append($toastHeaderMuted)
|
||||
}
|
||||
if (options.closeButton) {
|
||||
var $closeButton = $('<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button>')
|
||||
$toastHeader.append($closeButton)
|
||||
}
|
||||
$toast.append($toastHeader)
|
||||
}
|
||||
if (options.body !== false) {
|
||||
var $toastBody
|
||||
if (options.bodyHtml) {
|
||||
$toastBody = $('<div class="toast-body"/>').html(options.body)
|
||||
} else {
|
||||
$toastBody = $('<div class="toast-body"/>').text(options.body)
|
||||
}
|
||||
$toast.append($toastBody)
|
||||
}
|
||||
return $toast
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue