60 lines
2.0 KiB
JavaScript
60 lines
2.0 KiB
JavaScript
"use strict";
|
|
|
|
// Class definition
|
|
const KTBaseToastDemos = function () {
|
|
// Private functions
|
|
const exampleToggle = () => {
|
|
// Select elements
|
|
const button = document.getElementById('kt_docs_toast_toggle_button');
|
|
const toastElement = document.getElementById('kt_docs_toast_toggle');
|
|
|
|
// Get toast instance --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#getinstance
|
|
const toast = bootstrap.Toast.getOrCreateInstance(toastElement);
|
|
|
|
// Handle button click
|
|
button.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
|
|
// Toggle toast to show --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
|
|
toast.show();
|
|
});
|
|
}
|
|
|
|
const exampleStack = () => {
|
|
// Select elements
|
|
const button = document.getElementById('kt_docs_toast_stack_button');
|
|
const container = document.getElementById('kt_docs_toast_stack_container');
|
|
const targetElement = document.querySelector('[data-kt-docs-toast="stack"]'); // Use CSS class or HTML attr to avoid duplicating ids
|
|
|
|
// Remove base element markup
|
|
targetElement.parentNode.removeChild(targetElement);
|
|
|
|
// Handle button click
|
|
button.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
|
|
// Create new toast element
|
|
const newToast = targetElement.cloneNode(true);
|
|
container.append(newToast);
|
|
|
|
// Create new toast instance --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#getorcreateinstance
|
|
const toast = bootstrap.Toast.getOrCreateInstance(newToast);
|
|
|
|
// Toggle toast to show --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
|
|
toast.show();
|
|
});
|
|
}
|
|
|
|
return {
|
|
// Public Functions
|
|
init: function () {
|
|
exampleToggle();
|
|
exampleStack();
|
|
}
|
|
};
|
|
}();
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTBaseToastDemos.init();
|
|
}); |