/* ------------------------------------------------------------------------------ * * # PNotify notifications * * Demo JS code for extra_pnotify.html page * * ---------------------------------------------------------------------------- */ // Setup module // ------------------------------ var Pnotify = function() { // // Setup module components // // PNotify examples var _componentPnotify = function() { if (typeof PNotify == 'undefined') { console.warn('Warning - pnotify.min.js is not loaded.'); return; } // // Notification styles // // Default style $('#pnotify-default').on('click', function () { new PNotify({ title: 'Primary notice', text: 'Check me out! I\'m a notice.', icon: 'icon-warning22' }); }); // Styled left $('#pnotify-styled-left').on('click', function () { new PNotify({ title: 'Left icon', text: 'Check me out! I\'m a notice.', addclass: 'alert alert-styled-left', type: 'info' }); }); // Styled right $('#pnotify-styled-right').on('click', function () { new PNotify({ title: 'Right icon', text: 'Check me out! I\'m a notice.', addclass: 'alert alert-warning alert-styled-right', type: 'error' }); }); // Styled with arrow $('#pnotify-styled-arrow').on('click', function () { new PNotify({ title: 'Notice with arrow', text: 'Check me out! I\'m a notice.', addclass: 'alert alert-styled-left alert-arrow-left', type: 'info' }); }); // Custom style $('#pnotify-custom-styled').on('click', function () { new PNotify({ title: 'Custom color notice', text: 'Check me out! I\'m a notice.', addclass: 'alert alert-styled-left alert-styled-custom alert-arrow-left alpha-teal text-teal-800 border-teal' }); }); // // Contextual alternatives // // Danger notification $('#pnotify-danger').on('click', function () { new PNotify({ title: 'Danger notice', text: 'Check me out! I\'m a notice.', icon: 'icon-blocked', type: 'error' }); }); // Success notification $('#pnotify-success').on('click', function () { new PNotify({ title: 'Success notice', text: 'Check me out! I\'m a notice.', icon: 'icon-checkmark3', type: 'success' }); }); // Info notification $('#pnotify-info').on('click', function () { new PNotify({ title: 'Info notice', text: 'Check me out! I\'m a notice.', icon: 'icon-info22', type: 'info' }); }); // // Solid color style // // Solid primary $('#pnotify-solid-primary').on('click', function () { new PNotify({ title: 'Primary notice', text: 'Check me out! I\'m a notice.', addclass: 'bg-primary border-primary' }); }); // Solid danger $('#pnotify-solid-danger').on('click', function () { new PNotify({ title: 'Danger notice', text: 'Check me out! I\'m a notice.', addclass: 'bg-danger border-danger' }); }); // Solid success $('#pnotify-solid-success').on('click', function () { new PNotify({ title: 'Success notice', text: 'Check me out! I\'m a notice.', addclass: 'bg-success border-success' }); }); // Solid warning $('#pnotify-solid-warning').on('click', function () { new PNotify({ title: 'Warning notice', text: 'Check me out! I\'m a notice.', addclass: 'bg-warning border-warning' }); }); // Solid info $('#pnotify-solid-info').on('click', function () { new PNotify({ title: 'Info notice', text: 'Check me out! I\'m a notice.', addclass: 'bg-info border-info' }); }); // Custom solid color $('#pnotify-solid-custom').on('click', function () { new PNotify({ title: 'Custom color notice', text: 'Check me out! I\'m a notice.', addclass: 'bg-teal border-teal' }); }); // Solid styled left $('#pnotify-solid-styled-left').on('click', function () { new PNotify({ title: 'Left icon', text: 'Check me out! I\'m a notice.', addclass: 'alert bg-primary border-primary alert-styled-left' }); }); // Solid styled right $('#pnotify-solid-styled-right').on('click', function () { new PNotify({ title: 'Right icon', text: 'Check me out! I\'m a notice.', addclass: 'alert bg-danger border-danger alert-styled-right', type: 'error' }); }); // // Desktop notifications // // Default $('#pnotify-desktop-default').on('click', function () { PNotify.desktop.permission(); (new PNotify({ title: 'Default Desktop Notice', text: 'If you\'ve given me permission, I\'ll appear as a desktop notification.', desktop: { desktop: true, addclass: 'bg-green border-green', icon: '../../../../global_assets/images/pnotify/default.png' } }) ).get().click(function(e) { if ($('.ui-pnotify-closer, .ui-pnotify-sticker, .ui-pnotify-closer *, .ui-pnotify-sticker *').is(e.target)) return; alert('Hey! You clicked the desktop notification!'); }); }); // Danger $('#pnotify-desktop-danger').on('click', function () { PNotify.desktop.permission(); (new PNotify({ title: 'Danger Desktop Notice', type: 'danger', text: 'I\'m a danger desktop notification, if you have given me a permission.', desktop: { desktop: true, icon: '../../../../global_assets/images/pnotify/danger.png' } }) ).get().click(function(e) { if ($('.ui-pnotify-closer, .ui-pnotify-sticker, .ui-pnotify-closer *, .ui-pnotify-sticker *').is(e.target)) return; alert('Hey! You clicked the desktop notification!'); }); }); // Success $('#pnotify-desktop-success').on('click', function () { PNotify.desktop.permission(); (new PNotify({ title: 'Success Desktop Notice', type: 'success', text: 'I\'m a success desktop notification, if you have given me a permission.', desktop: { desktop: true, icon: '../../../../global_assets/images/pnotify/success.png' } }) ).get().click(function(e) { if ($('.ui-pnotify-closer, .ui-pnotify-sticker, .ui-pnotify-closer *, .ui-pnotify-sticker *').is(e.target)) return; alert('Hey! You clicked the desktop notification!'); }); }); // Warning $('#pnotify-desktop-warning').on('click', function () { PNotify.desktop.permission(); (new PNotify({ title: 'Warning Desktop Notice', type: 'warning', text: 'I\'m a warning desktop notification, if you have given me a permission.', desktop: { desktop: true, icon: '../../../../global_assets/images/pnotify/warning.png' } }) ).get().click(function(e) { if ($('.ui-pnotify-closer, .ui-pnotify-sticker, .ui-pnotify-closer *, .ui-pnotify-sticker *').is(e.target)) return; alert('Hey! You clicked the desktop notification!'); }); }); // Info $('#pnotify-desktop-info').on('click', function () { PNotify.desktop.permission(); (new PNotify({ title: 'Info Desktop Notice', type: 'info', text: 'I\'m an info desktop notification, if you have given me a permission.', desktop: { desktop: true, icon: '../../../../global_assets/images/pnotify/info.png' } }) ).get().click(function(e) { if ($('.ui-pnotify-closer, .ui-pnotify-sticker, .ui-pnotify-closer *, .ui-pnotify-sticker *').is(e.target)) return; alert('Hey! You clicked the desktop notification!'); }); }); // // Options // // No title $('#pnotify-no-title').on('click', function () { new PNotify({ text: 'Check me out! I\'m a notice without title.', addclass: 'bg-primary border-primary' }); }); // Rich content $('#pnotify-rich').on('click', function () { new PNotify({ title: 'Rich content notice', text: 'Look at my beautiful strong, linked, emphasized, and underlined text with icon.', icon: 'icon-comment-discussion' }); }); // Close on click $('#pnotify-click').on('click', function () { var notice = new PNotify({ title: 'Close on click', text: 'Click me anywhere to dismiss me.', addclass: 'bg-warning-400 border-warning-400', hide: false, buttons: { closer: false, sticker: false } }); notice.get().click(function() { notice.remove(); }); }); // Form $('#pnotify-form').on('click', function () { var notice = new PNotify({ text: $('#form_notice').html(), width: '300px', hide: false, addclass: 'bg-slate border-slate', buttons: { closer: false, sticker: false }, insert_brs: false }); // Remove if cancelled notice.get().find('button[name=cancel]').on('click', function() { notice.remove(); }) // Submit form notice.get().submit(function() { var username = $(this).find('input[name=username]').val(); if (!username) { alert('Please provide a username.'); return false; } notice.update({ title: 'Welcome', text: 'Successfully logged in as ' + username, addclass: 'bg-teal border-teal', icon: true, width: PNotify.prototype.options.width, hide: true, buttons: { closer: true, sticker: true } }); return false; }); }); // Sticky notice $('#pnotify-sticky').on('click', function () { new PNotify({ title: 'Sticky notice', text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.', addclass: 'bg-primary border-primary', hide: false }); }); // Sticky buttons $('#pnotify-sticky-buttons').on('click', function () { new PNotify({ title: 'No sticky button notice', text: 'I\'m a sticky notice with no unsticky button. You\'ll have to close me yourself.', addclass: 'bg-primary border-primary', hide: false, buttons: { sticker: false } }); }); // Permanent buttons $('#pnotify-permanent-buttons').on('click', function () { new PNotify({ title: 'Permanent buttons notice', text: 'My buttons are really lonely, so they\'re gonna hang out with us.', addclass: 'bg-slate border-slate', buttons: { closer_hover: false, sticker_hover: false } }); }); // // Modules // // Confirm $('#pnotify-confirm').on('click', function () { // Setup var notice = new PNotify({ title: 'Confirmation', text: '
Are you sure you want to discard changes?
', hide: false, type: 'warning', confirm: { confirm: true, buttons: [ { text: 'Yes', addClass: 'btn btn-sm btn-primary' }, { addClass: 'btn btn-sm btn-link' } ] }, buttons: { closer: false, sticker: false } }) // On confirm notice.get().on('pnotify.confirm', function() { alert('Ok, cool.'); }) // On cancel notice.get().on('pnotify.cancel', function() { alert('Oh ok. Chicken, I see.'); }); }); // Prompt $('#pnotify-prompt').on('click', function () { // Setup var notice = new PNotify({ title: 'Input needed', text: 'What side would you like?', hide: false, confirm: { prompt: true, buttons: [ { text: 'Yes', addClass: 'btn btn-sm btn-primary' }, { addClass: 'btn btn-sm btn-link' } ] }, buttons: { closer: false, sticker: false } }); // On confirm notice.get().on('pnotify.confirm', function(e, notice, val) { notice.cancelRemove().update({ title: 'You\'ve chosen a side', text: 'You want ' + $('').text(val).html() + '.', icon: 'icon-checkmark3', type: 'success', delay: 2000, hide: true, confirm: { prompt: false }, buttons: { closer: true, sticker: true } }); }) // On cancel notice.get().on('pnotify.cancel', function(e, notice) { notice.cancelRemove().update({ title: 'You don\'t want a side', text: 'No soup for you!', icon: 'icon-blocked', type: 'error', delay: 2000, hide: true, confirm: { prompt: false }, buttons: { closer: true, sticker: true } }); }); }); // Multiline prompt $('#pnotify-multiline').on('click', function () { // Setup var notice = new PNotify({ title: 'Input needed', text: 'Write me a poem, please.', hide: false, confirm: { prompt: true, prompt_multi_line: true, prompt_default: 'Roses are red,\nViolets are blue,\n', buttons: [ { text: 'Yes', addClass: 'btn btn-sm btn-primary' }, { addClass: 'btn btn-sm btn-link' } ] }, buttons: { closer: false, sticker: false } }); // Confirm notice.get().on('pnotify.confirm', function(e, notice, val) { notice.cancelRemove().update({ title: 'Your poem', text: $('').text(val).html(), icon: 'icon-checkmark3', type: 'success', hide: true, confirm: { prompt: false }, buttons: { closer: true, sticker: true } }); }); // On cancel notice.get().on('pnotify.cancel', function(e, notice) { notice.cancelRemove().update({ title: 'You don\'t like poetry', text: 'Roses are dead,\nViolets are dead,\nI suck at gardening.', icon: 'icon-blocked', type: 'error', hide: true, confirm: { prompt: false }, buttons: { closer: true, sticker: true } }); }); }); // Custom buttons $('#pnotify-buttons').on('click', function () { new PNotify({ title: 'Choose a side', text: 'You have three options to choose from.', hide: false, width: 420, confirm: { confirm: true, buttons: [ { text: 'Fries', addClass: 'btn btn-sm bg-blue', click: function(notice) { notice.update({ title: 'You\'ve chosen a side', text: 'You want fries.', icon: 'icon-checkmark3', type: 'success', hide: true, confirm: { confirm: false }, buttons: { closer: true, sticker: true } }); } }, { text: 'Mashed Potatoes', addClass: 'btn btn-sm bg-pink-400', click: function(notice) { notice.update({ title: 'You\'ve chosen a side', text: 'You want mashed potatoes.', icon: 'icon-checkmark3', type: 'info', hide: true, confirm: { confirm: false }, buttons: { closer: true, sticker: true } }); } }, { text: 'Fruit', addClass: 'btn btn-sm bg-indigo-400', click: function(notice) { notice.update({ title: 'You\'ve chosen a side', text: 'You want fruit.', icon: 'icon-checkmark3', type: 'info', hide: true, confirm: { confirm: false }, buttons: { closer: true, sticker: true } }); } } ] }, buttons: { closer: false, sticker: false } }); }); // Permanotice $('#pnotify-permanotice').on('click', function () { var permanotice; if (permanotice) { permanotice.open(); } else { permanotice = new PNotify({ title: 'Now look here', text: 'There\'s something you need to know, and I won\'t go away until you come to grips with it.', addclass: 'bg-danger border-danger', hide: false, buttons: { closer: false, sticker: false } }); } }); // Callbacks $('#pnotify-callbacks').on('click', function () { var dont_alert = function() {}; new PNotify({ title: 'I\'m here', text: 'I have a callback for each of my events. I\'ll call all my callbacks while I change states.', addclass: 'bg-teal border-teal', before_init: function(opts) { dont_alert('I\'m called before the notice initializes. I\'m passed the options used to make the notice. I can modify them. Watch me replace the word callback with tire iron!'); opts.text = opts.text.replace(/callback/g, 'tire iron'); }, after_init: function(PNotify) { dont_alert('I\'m called after the notice initializes. I\'m passed the PNotify object for the current notice: ' + PNotify + '\n\nThere are more callbacks you can assign, but this is the last notice you\'ll see. Check the code to see them all.'); }, before_open: function(PNotify) { var source_note = 'Return false to cancel opening.'; dont_alert('I\'m called before the notice opens. I\'m passed the PNotify object for the current notice: ' + PNotify); }, after_open: function(PNotify) { alert('I\'m called after the notice opens. I\'m passed the PNotify object for the current notice: ' + PNotify); }, before_close: function(PNotify, timer_hide) { var source_note = 'Return false to cancel close. Use PNotify.queueRemove() to set the removal timer again.'; dont_alert('I\'m called before the notice closes. I\'m passed the PNotify object for the current notice: ' + PNotify); dont_alert('I also have an argument called timer_hide, which is true if the notice was closed because the timer ran down. Value: ' + timer_hide); }, after_close: function(PNotify, timer_hide) { alert('I\'m called after the notice closes. I\'m passed the PNotify object for the current notice: ' + PNotify); dont_alert('I also have an argument called timer_hide, which is true if the notice was closed because the timer ran down. Value: ' + timer_hide); } }); }); // Switching notices $('#pnotify-switching').on('click', function () { new PNotify({ title: 'Notice', text: 'Right now I\'m a notice.', addclass: 'alert bg-primary border-primary alert-styled-right', before_close: function(PNotify) { PNotify.update({ title: 'Error', text: 'Uh oh. Now I\'ve become an error.', addclass: 'alert bg-danger border-danger alert-styled-right', type: 'error', before_close: function(PNotify) { PNotify.update({ title: 'Success', text: 'I fixed the error!', addclass: 'alert bg-success border-success alert-styled-right', type: 'success', before_close: function(PNotify) { PNotify.update({ title: 'Info', text: 'Everything\'s cool now.', addclass: 'alert bg-info border-info alert-styled-right', type: 'info', before_close: null }); PNotify.queueRemove(); return false; } }); PNotify.queueRemove(); return false; } }); PNotify.queueRemove(); return false; } }); }); // Progress loader $('#pnotify-progress').on('click', function () { var cur_value = 1, progress; // Make a loader. var loader = new PNotify({ title: "Creating series of tubes", text: '