first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,572 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Noty and jGrowl notifications
|
||||
*
|
||||
* Demo JS code for extra_jgrowl_noty.html page
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var NotyJgrowl = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Noty.js examples
|
||||
var _componentNoty = function() {
|
||||
if (typeof Noty == 'undefined') {
|
||||
console.warn('Warning - noty.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Override Noty defaults
|
||||
Noty.overrideDefaults({
|
||||
theme: 'limitless',
|
||||
layout: 'topRight',
|
||||
type: 'alert',
|
||||
timeout: 2500
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Notification types
|
||||
//
|
||||
|
||||
// Error
|
||||
$('#noty_error').on('click', function() {
|
||||
new Noty({
|
||||
text: 'Change a few things up and try submitting again.',
|
||||
type: 'error'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Success
|
||||
$('#noty_success').on('click', function() {
|
||||
new Noty({
|
||||
text: 'You successfully read this important alert message.',
|
||||
type: 'success'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Warning
|
||||
$('#noty_warning').on('click', function() {
|
||||
new Noty({
|
||||
text: 'Warning! Best check yo self, you\'re not looking too good.',
|
||||
type: 'warning'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Info
|
||||
$('#noty_info').on('click', function() {
|
||||
new Noty({
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Alert
|
||||
$('#noty_alert').on('click', function() {
|
||||
new Noty({
|
||||
text: 'Best check yourself, you\'re not looking too good.',
|
||||
type: 'alert'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Confirmation
|
||||
$('#noty_confirm').on('click', function() {
|
||||
var notyConfirm = new Noty({
|
||||
text: '<h6 class="mb-3">Please confirm your action</h6><label>Enter comment (optional)</label> <input type="text" class="form-control" placeholder="Enter comment">',
|
||||
timeout: false,
|
||||
modal: true,
|
||||
layout: 'center',
|
||||
closeWith: 'button',
|
||||
type: 'confirm',
|
||||
buttons: [
|
||||
Noty.button('Cancel', 'btn btn-link', function () {
|
||||
notyConfirm.close();
|
||||
}),
|
||||
|
||||
Noty.button('Submit <i class="icon-paperplane ml-2"></i>', 'btn bg-blue ml-1', function () {
|
||||
alert('Submitted!');
|
||||
notyConfirm.close();
|
||||
},
|
||||
{id: 'button1', 'data-status': 'ok'}
|
||||
)
|
||||
]
|
||||
}).show();
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Top position
|
||||
//
|
||||
|
||||
// Top
|
||||
$('#noty_top').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'top',
|
||||
text: 'Best check yourself, you\'re not looking too good.',
|
||||
type: 'alert'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Left
|
||||
$('#noty_top_left').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'topLeft',
|
||||
text: 'Best check yourself, you\'re not looking too good.',
|
||||
type: 'alert'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Center
|
||||
$('#noty_top_center').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'topCenter',
|
||||
text: 'Best check yourself, you\'re not looking too good.',
|
||||
type: 'alert'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Right (default)
|
||||
$('#noty_top_right').on('click', function() {
|
||||
new Noty({
|
||||
text: 'Best check yourself, you\'re not looking too good.',
|
||||
type: 'alert'
|
||||
}).show();
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Center position
|
||||
//
|
||||
|
||||
// Left
|
||||
$('#noty_center_left').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'centerLeft',
|
||||
text: 'You successfully read this important alert message.',
|
||||
type: 'success'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Center
|
||||
$('#noty_center').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'center',
|
||||
text: 'You successfully read this important alert message.',
|
||||
type: 'success'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Right
|
||||
$('#noty_center_right').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'centerRight',
|
||||
text: 'You successfully read this important alert message.',
|
||||
type: 'success'
|
||||
}).show();
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Bottom position
|
||||
//
|
||||
|
||||
// Bottom
|
||||
$('#noty_bottom').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'bottom',
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Left
|
||||
$('#noty_bottom_left').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'bottomLeft',
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Center
|
||||
$('#noty_bottom_center').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'bottomCenter',
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info'
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Right (default)
|
||||
$('#noty_bottom_right').on('click', function() {
|
||||
new Noty({
|
||||
layout: 'bottomRight',
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info'
|
||||
}).show();
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Other examples
|
||||
//
|
||||
|
||||
// Overlay
|
||||
$('#noty_overlay').on('click', function() {
|
||||
new Noty({
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info',
|
||||
modal: true
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Sticky
|
||||
$('#noty_sticky').on('click', function() {
|
||||
new Noty({
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info',
|
||||
timeout: false
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Close button
|
||||
$('#noty_close').on('click', function() {
|
||||
new Noty({
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info',
|
||||
closeWith: ['button']
|
||||
}).show();
|
||||
});
|
||||
|
||||
// No progress
|
||||
$('#noty_progress').on('click', function() {
|
||||
new Noty({
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info',
|
||||
progressBar: false
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Styled
|
||||
$('#noty_styled').on('click', function() {
|
||||
new Noty({
|
||||
theme: ' alert alert-danger alert-styled-left p-0',
|
||||
text: 'Change a few things up and try submitting again.',
|
||||
type: 'error',
|
||||
progressBar: false,
|
||||
closeWith: ['button']
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Styled with white background
|
||||
$('#noty_styled_white').on('click', function() {
|
||||
new Noty({
|
||||
theme: ' alert alert-success alert-styled-left p-0 bg-white',
|
||||
text: 'You successfully read this important alert message.',
|
||||
type: 'success',
|
||||
progressBar: false,
|
||||
closeWith: ['button']
|
||||
}).show();
|
||||
});
|
||||
|
||||
// Solid styled
|
||||
$('#noty_solid_styled').on('click', function() {
|
||||
new Noty({
|
||||
theme: ' alert bg-info text-white alert-styled-left p-0',
|
||||
text: 'This alert needs your attention, but it\'s not super important.',
|
||||
type: 'info',
|
||||
progressBar: false,
|
||||
closeWith: ['button']
|
||||
}).show();
|
||||
});
|
||||
};
|
||||
|
||||
// jGrowl examples
|
||||
var _componentJgrowl = function() {
|
||||
if (!$().jGrowl) {
|
||||
console.warn('Warning - jgrowl.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Defaults override - hide "close all" button
|
||||
$.jGrowl.defaults.closer = false;
|
||||
|
||||
|
||||
//
|
||||
// Contextual options
|
||||
//
|
||||
|
||||
// Solid color theme
|
||||
$('#jgrowl-default').on('click', function () {
|
||||
$.jGrowl('We are glad to see you again', {
|
||||
header: 'Good morning!',
|
||||
theme: 'bg-primary'
|
||||
});
|
||||
});
|
||||
|
||||
// Danger notification
|
||||
$('#jgrowl-danger').on('click', function () {
|
||||
$.jGrowl('Change a few things up and try submitting again', {
|
||||
header: 'Oh snap!',
|
||||
theme: 'bg-danger'
|
||||
});
|
||||
});
|
||||
|
||||
// Success notification
|
||||
$('#jgrowl-success').on('click', function () {
|
||||
$.jGrowl('You successfully read this important alert message', {
|
||||
header: 'Well done!',
|
||||
theme: 'bg-success'
|
||||
});
|
||||
});
|
||||
|
||||
// Warning notification
|
||||
$('#jgrowl-warning').on('click', function () {
|
||||
$.jGrowl('Better check yourself, you\'re not looking too good', {
|
||||
header: 'Attention Here!',
|
||||
theme: 'bg-warning'
|
||||
});
|
||||
});
|
||||
|
||||
// Info notification
|
||||
$('#jgrowl-info').on('click', function () {
|
||||
$.jGrowl('This alert needs your attention, but it\'s not super important.', {
|
||||
header: 'Heads up!',
|
||||
theme: 'bg-info'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Notification styling
|
||||
//
|
||||
|
||||
// Solid left
|
||||
$('#jgrowl-solid-styled-left').on('click', function () {
|
||||
$.jGrowl('Solid color notification with left icon', {
|
||||
header: 'Left icon',
|
||||
theme: 'alert-styled-left bg-danger'
|
||||
});
|
||||
});
|
||||
|
||||
// Solid right
|
||||
$('#jgrowl-solid-styled-right').on('click', function () {
|
||||
$.jGrowl('Solid color notification with right icon', {
|
||||
header: 'Right icon',
|
||||
theme: 'alert-styled-right bg-info'
|
||||
});
|
||||
});
|
||||
|
||||
// Solid custom
|
||||
$('#jgrowl-solid-custom-styled').on('click', function () {
|
||||
$.jGrowl('Notification with custom colors', {
|
||||
header: 'Custom styling',
|
||||
theme: 'bg-teal alert-styled-left alert-styled-custom'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Styled left
|
||||
$('#jgrowl-styled-left').on('click', function () {
|
||||
$.jGrowl('Notification with left contextual icon', {
|
||||
header: 'Left icon',
|
||||
theme: 'alert-bordered alert-styled-left alert-danger'
|
||||
});
|
||||
});
|
||||
|
||||
// Styled right
|
||||
$('#jgrowl-styled-right').on('click', function () {
|
||||
$.jGrowl('Notification with right contextual icon', {
|
||||
header: 'Right icon',
|
||||
theme: 'alert-bordered alert-styled-right alert-danger'
|
||||
});
|
||||
});
|
||||
|
||||
// Custom style
|
||||
$('#jgrowl-custom-styled').on('click', function () {
|
||||
$.jGrowl('Notification with custom style', {
|
||||
header: 'Custom style',
|
||||
theme: 'alert-styled-left alert-styled-custom alpha-teal text-teal-900 border-teal'
|
||||
});
|
||||
});
|
||||
|
||||
// Styled with arrow
|
||||
$('#jgrowl-styled-arrow').on('click', function () {
|
||||
$.jGrowl('Styled alert with arrow', {
|
||||
header: 'Styled with arrow',
|
||||
theme: 'alert-styled-left alert-arrow-left alert-primary'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Rounded
|
||||
$('#jgrowl-rounded').on('click', function () {
|
||||
$.jGrowl('Alert with rounded corners', {
|
||||
theme: 'bg-primary alert-rounded'
|
||||
});
|
||||
});
|
||||
|
||||
// Basic style
|
||||
$('#jgrowl-alert-default').on('click', function () {
|
||||
$.jGrowl('Default alert style example', {
|
||||
header: 'Default alert style',
|
||||
theme: 'alert-bordered alert-primary'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Options
|
||||
//
|
||||
|
||||
// Sticky notification
|
||||
$('#jgrowl-sticky').on('click', function () {
|
||||
$.jGrowl('I am a sticky message', {
|
||||
header: 'Sticky message',
|
||||
sticky: true,
|
||||
theme: 'bg-slate-600'
|
||||
});
|
||||
});
|
||||
|
||||
// Long life message
|
||||
$('#jgrowl-long-life').on('click', function () {
|
||||
$.jGrowl('A message that will live a little longer.', {
|
||||
header: 'Long life message',
|
||||
life: 10000,
|
||||
theme: 'bg-slate-600'
|
||||
});
|
||||
});
|
||||
|
||||
// Callbacks
|
||||
$('#jgrowl-callbacks').on('click', function () {
|
||||
$.jGrowl('Check out your console', {
|
||||
theme: 'bg-slate-600',
|
||||
life: 5000,
|
||||
header: 'Callbacks',
|
||||
beforeOpen: function(e,m,o) {
|
||||
console.log("I am going to be opened!", this);
|
||||
},
|
||||
afterOpen: function(e,m,o) {
|
||||
console.log("I am opened!", this);
|
||||
},
|
||||
close: function(e,m,o) {
|
||||
console.log("I am closed!", this);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Animation options
|
||||
$('#jgrowl-animation').on('click', function () {
|
||||
$.jGrowl('I am a notice!', {
|
||||
speed: 100,
|
||||
theme: 'bg-danger',
|
||||
header: 'Fast animation speed'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Positions
|
||||
//
|
||||
|
||||
// Top left
|
||||
$('#jgrowl-top-left').on('click', function () {
|
||||
$('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
|
||||
$.jGrowl('I am a jGrowl notice!', {
|
||||
position: 'top-left',
|
||||
theme: 'bg-teal',
|
||||
header: 'Top Left position'
|
||||
});
|
||||
});
|
||||
|
||||
// Top center
|
||||
$('#jgrowl-top-center').on('click', function () {
|
||||
$('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
|
||||
$.jGrowl('I am a jGrowl notice!', {
|
||||
position: 'top-center',
|
||||
theme: 'bg-teal',
|
||||
header: 'Top Center position'
|
||||
});
|
||||
});
|
||||
|
||||
// Top right
|
||||
$('#jgrowl-top-right').on('click', function () {
|
||||
$('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
|
||||
$.jGrowl('I am a jGrowl notice!', {
|
||||
position: 'top-right',
|
||||
theme: 'bg-teal',
|
||||
header: 'Top Right position'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Center
|
||||
$('#jgrowl-center').on('click', function () {
|
||||
$('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
|
||||
$.jGrowl('I am a jGrowl notice!', {
|
||||
position: 'center',
|
||||
theme: 'bg-danger',
|
||||
header: 'Center position'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Bottom left
|
||||
$('#jgrowl-bottom-left').on('click', function () {
|
||||
$('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
|
||||
$.jGrowl('I am a jGrowl notice!', {
|
||||
position: 'bottom-left',
|
||||
theme: 'bg-info',
|
||||
header: 'Bottom Left position'
|
||||
});
|
||||
});
|
||||
|
||||
// Bottom right
|
||||
$('#jgrowl-bottom-right').on('click', function () {
|
||||
$('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
|
||||
$.jGrowl('I am a jGrowl notice!', {
|
||||
position: 'bottom-right',
|
||||
theme: 'bg-info',
|
||||
header: 'Bottom Right position'
|
||||
});
|
||||
});
|
||||
|
||||
// Bottom center
|
||||
$('#jgrowl-bottom-center').on('click', function () {
|
||||
$('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
|
||||
$.jGrowl('I am a jGrowl notice!', {
|
||||
position: 'bottom-center',
|
||||
theme: 'bg-info',
|
||||
header: 'Bottom Center position'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_componentNoty();
|
||||
_componentJgrowl();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
NotyJgrowl.init();
|
||||
});
|
||||
Reference in New Issue
Block a user