-
Notifications
You must be signed in to change notification settings - Fork 514
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adde IIFE format for Compat module. Fixed some problems in Compat. Ve…
…rsion bump.
- Loading branch information
Showing
13 changed files
with
408 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,255 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"/> | ||
| <title>PNotify</title> | ||
| <meta name="HandheldFriendly" content="true" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
|
|
||
| <!-- RequireJS --> | ||
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script> | ||
|
|
||
| <!-- jQuery --> | ||
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | ||
|
|
||
| <!-- Animate.css --> | ||
| <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" /> | ||
|
|
||
| <!-- Font Awesome --> | ||
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> | ||
|
|
||
| <!-- PNotify --> | ||
| <script type="text/javascript" src="../lib/iife/PNotify.js"></script> | ||
| <link href="../src/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" /> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyButtons.js"></script> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyAnimate.js"></script> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyCallbacks.js"></script> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyNonBlock.js"></script> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyMobile.js"></script> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyHistory.js"></script> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyDesktop.js"></script> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyConfirm.js"></script> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyStyleMaterial.js"></script> | ||
| <script type="text/javascript" src="../lib/iife/PNotifyReference.js"></script> | ||
|
|
||
| <script type="text/javascript" src="../lib/iife/PNotifyCompat.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>PNotify Backward Compatibility Module (IIFE)</h1> | ||
|
|
||
| <p> | ||
| This page loads all modules + the special "PNotifyCompat" module. This module makes most code written for PNotify 3 work with PNotify 4. | ||
| <hr /> | ||
| Some simple demos:<br /> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'Regular Notice', | ||
| text: 'Check me out! I\'m a notice.' | ||
| });">Notice</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'New Thing', | ||
| text: 'Just to let you know, something happened.', | ||
| type: 'info' | ||
| });">Info Message</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'Success!', | ||
| text: 'That thing that you were trying to do worked.', | ||
| type: 'success' | ||
| });">Success Message</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'Oh No!', | ||
| text: 'Something terrible happened.', | ||
| type: 'error' | ||
| });">Error Message</button> | ||
| <button onclick="new PNotifyCompat('Check me out! I\'m a notice.');">Simple</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'No Mouse Reset Notice', | ||
| text: 'I don\'t care if you move your mouse over me, I\'ll disappear when I want.', | ||
| mouse_reset: false | ||
| });">No Mouse Reset</button> | ||
| <button onclick="var notice = new PNotifyCompat({ | ||
| title: 'Click Notice', | ||
| text: 'I wish someone would click me.' | ||
| }); | ||
| notice.get().css('cursor', 'pointer').click(function(e) { | ||
| if ($(e.target).is('.ui-pnotify-closer *, .ui-pnotify-sticker *')) return; | ||
| notice.update({ | ||
| type: 'success', | ||
| text: 'Yay, you clicked me!<div style="text-align: center;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Happy_smiley_face.png/240px-Happy_smiley_face.png" /></div>' | ||
| }); | ||
| });">Click on It</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: '<span style="color: green;">Rich Content Notice</span>', | ||
| text: '<span style="color: blue;">Look at my beautiful <strong>strong</strong>, <em>emphasized</em>, and <span style="font-size: 1.5em;">large</span> text.</span>' | ||
| });">Rich Text</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: '<em>Escaped Notice</em>', | ||
| title_escape: true, | ||
| text: $('#evil_html').html(), | ||
| text_escape: true | ||
| });">Or Keep it Safe</button> | ||
| <span id="evil_html" style="display: none;"> | ||
| <span>As you can see, I don't allow HTML in my content.</span> | ||
| <span>This prevents things like cross site scripting attacks:</span> | ||
| <script type="text/javascript"> | ||
| (function(){ | ||
| // Here would be the XSS attack. | ||
| })() | ||
| </script> | ||
| </span> | ||
| <hr /> | ||
| Some module demos<br /> | ||
| <button onclick="PNotifyCompat.desktop.permission(); | ||
| (new PNotifyCompat({ | ||
| title: 'Desktop Notice', | ||
| text: 'If you\'ve given me permission, I\'ll appear as a desktop notification. If you haven\'t, I\'ll still appear as a regular PNotify notice.', | ||
| desktop: { | ||
| desktop: true | ||
| } | ||
| })).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!'); | ||
| });">Desktop - Notice</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'Regular Notice', | ||
| text: 'Check me out! I\'m a notice. With buttons' | ||
| });">Buttons</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'Custom Icon Button Notice', | ||
| text: 'Check me out! My sticker and close buttons have custom icons!', | ||
| hide: false, | ||
| buttons: { | ||
| classes: { | ||
| closer: 'fa fa-bomb', | ||
| pin_up: 'fa fa-anchor', | ||
| pin_down: 'fa fa-hourglass' | ||
| } | ||
| } | ||
| });">Buttons - Custom Icons</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'Non-Blocking Notice', | ||
| text: 'I\'m a special kind of notice called "non-blocking". When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.', | ||
| nonblock: { | ||
| nonblock: true | ||
| } | ||
| });">NonBlock</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'No Mobile Support Notice', | ||
| text: 'If you\'re on a mobile device, I won\'t respond to your swipes.', | ||
| mobile: { | ||
| swipe_dismiss: false | ||
| } | ||
| });">Mobile - No Mobile Support</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'Animate.css Effect', | ||
| text: 'I use effects from Animate.css. Such smooth CSS3 transitions make me feel like butter.', | ||
| animate: { | ||
| animate: true, | ||
| in_class: 'rotateInDownLeft', | ||
| out_class: 'rotateOutUpRight' | ||
| } | ||
| });">Animate</button> | ||
| <button onclick="(new PNotifyCompat({ | ||
| title: 'Confirmation Needed', | ||
| text: 'Are you sure?', | ||
| hide: false, | ||
| confirm: { | ||
| confirm: true | ||
| }, | ||
| buttons: { | ||
| closer: false, | ||
| sticker: false | ||
| }, | ||
| history: { | ||
| history: false | ||
| } | ||
| })).get().on('pnotify.confirm', function() { | ||
| alert('Ok, cool.'); | ||
| }).on('pnotify.cancel', function() { | ||
| alert('Oh ok. Chicken, I see.'); | ||
| });">Confirm - Confirm Dialog</button> | ||
| <button onclick="(new PNotifyCompat({ | ||
| title: 'Input Needed', | ||
| text: 'What side would you like?', | ||
| hide: false, | ||
| confirm: { | ||
| prompt: true | ||
| }, | ||
| buttons: { | ||
| closer: false, | ||
| sticker: false | ||
| }, | ||
| history: { | ||
| history: false | ||
| } | ||
| })).get().on('pnotify.confirm', function(e, notice, val) { | ||
| notice.cancelRemove().update({ | ||
| title: 'You\'ve Chosen a Side', | ||
| text: 'You want ' + $('<div/>').text(val).html() + '.', | ||
| type: 'info', | ||
| hide: true, | ||
| confirm: { | ||
| prompt: false | ||
| }, | ||
| buttons: { | ||
| closer: true, | ||
| sticker: true | ||
| } | ||
| }); | ||
| }).on('pnotify.cancel', function(e, notice) { | ||
| notice.cancelRemove().update({ | ||
| title: 'You Don\'t Want a Side', | ||
| text: 'No soup for you!', | ||
| type: 'info', | ||
| hide: true, | ||
| confirm: { | ||
| prompt: false | ||
| }, | ||
| buttons: { | ||
| closer: true, | ||
| sticker: true | ||
| } | ||
| }); | ||
| });">Confirm - Prompt Dialog</button> | ||
| <button onclick="var dont_alert = function() {}; | ||
| new PNotifyCompat({ | ||
| title: 'I\'m Here', | ||
| text: 'I have a callback for each of my events. I\'ll call all my callbacks while I change states.', | ||
| before_init: function(opts) { | ||
| 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(notice) { | ||
| alert('I\'m called after the notice initializes. I\'m passed the PNotify object for the current notice: ' + notice + '\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(notice) { | ||
| 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: ' + notice); | ||
| }, | ||
| after_open: function(notice) { | ||
| dont_alert('I\'m called after the notice opens. I\'m passed the PNotify object for the current notice: ' + notice); | ||
| }, | ||
| before_close: function(notice, timer_hide) { | ||
| var source_note = 'Return false to cancel close. Use PNotifyCompat.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: ' + notice); | ||
| 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(notice, timer_hide) { | ||
| dont_alert('I\'m called after the notice closes. I\'m passed the PNotify object for the current notice: ' + notice); | ||
| 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); | ||
| } | ||
| });">Callbacks</button> | ||
| <button onclick="$(this).trigger('pnotify.history-last');">History - Show Last</button> | ||
| <button onclick="new PNotifyCompat({ | ||
| title: 'Reference Module', | ||
| text: 'The reference module is a basic module that demonstrates how to write a PNotify module by implementing many of its features. You can find it in pnotify.reference.js (in v3).', | ||
| type: 'info', | ||
| reference: { | ||
| put_thing: true | ||
| } | ||
| });">Reference</button> | ||
| <hr /> | ||
| </p> | ||
|
|
||
| <p id="copyright">© 2011-2018 Hunter Perrin. All Rights Reserved.</p> | ||
| </body> | ||
| </html> |
Oops, something went wrong.