API tools faq
paste
Advertisement
feiinho

Solaris Tumblr Theme

feiinho
Aug 5th, 2017
264
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Snarl Web Notifications</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  6.  
  7. <!-- styles -->
  8. <link rel="stylesheet" type="text/css" href="static/normalize.css">
  9. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  10. <link rel="stylesheet" type="text/css" href="static/snarl.min.css">
  11. <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
  12. <link rel="stylesheet" type="text/css" href="static/waves.min.css">
  13. <link rel="stylesheet" type="text/css" href="static/style.css">
  14.  
  15. <!-- javascript (at top so demos can be places inline for clarity) -->
  16. <script src="static/jquery-1.10.2.min.js"></script>
  17.  
  18. <script type="text/javascript" src="http://janpaepke.github.io/ScrollMagic//js/lib/greensock/TweenMax.min.js"></script>
  19. <script src="static/ScrollMagic.min.js"></script>
  20. <script type="text/javascript" src="http://janpaepke.github.io/ScrollMagic/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
  21. <script src="static/waves.min.js"></script>
  22. <script src="static/snarl.js"></script>
  23.  
  24. <script>
  25. // Parallaxing
  26. $(document).ready(function() {
  27. var percentage = (function() {
  28. var container = $('header.jumbotron').innerHeight();
  29. return function(pct) {
  30. return (container * pct) + 'px';
  31. }
  32. })();
  33.  
  34. var containerHeight = $('header.jumbotron').innerHeight();
  35.  
  36. console.log(percentage(0.5));
  37.  
  38. // init controller
  39. var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: containerHeight + 'px'}});
  40. new ScrollMagic.Scene().setTween("#header-background", {y: percentage(0.85), ease: Linear.easeNone}).addTo(controller);
  41. new ScrollMagic.Scene().setTween("#header-text", {y: percentage(0.5), opacity: 0.1, ease: Linear.easeNone}).addTo(controller);
  42. });
  43. </script>
  44. </head>
  45. <body>
  46. <header class="jumbotron waves-effect waves-light">
  47. <div id="header-background"></div>
  48. <div id="header-text">
  49. <h1>Snarl</h1>
  50. <p class="subtitle">Growl-style notifications for your web app.</p>
  51. <p class="version">Currently v0.3.3</p>
  52. </div>
  53. </header>
  54. <div id="wrapper">
  55. <!-- TODO: nav bar -->
  56.  
  57. <h1>Snarl Notifications</h1>
  58. <p>Snarl intends to make it quick and easy to include gorgeous and functional Mac/Growl-style notifications in your web app. It supports desktop, touch/tablet, and mobile devices; has raw JS and LESS/CSS source files; and supports custom timeouts and notification click callbacks. Ripple/wave click effect brought by <a href="http://fian.my.id/Waves/" target="_blank">Waves</a>!</p>
  59. <p class="text-center">
  60. <a id="snarl-download" class="big-button waves-effect waves-button waves-light" href="https://github.com/hoxxep/Snarl/raw/master/dist/snarl.zip"><i class="fa fa-download"></i> Download</a>
  61. <a id="snarl-github" class="big-button waves-effect waves-button" href="https://github.com/hoxxep/Snarl/"><i class="fa fa-lg fa-github"></i> View on Github</a>
  62. </p>
  63.  
  64. <h1 id="getting-started">Getting Started</h1>
  65. <h3>Download the Files</h3>
  66. <p>Hit the download link above and in the downloaded <code>snarl.zip</code> file will be source and minified versions of the JS, CSS and optionally the LESS files too.</p>
  67.  
  68. <h3>Clone the Repo</h3>
  69. <p>Another method of getting the files is cloning the repo via <code>git clone https://github.com/hoxxep/Snarl</code>. You'll find the files which can be used in projects inside the <code>dist/</code> folder. If you have cloned the repo and are modifying the source files to suit your project's aesthetic, instead of editing files in the dist folder, edit them inside the <code>src/</code> folder. Then, in the Snarl repo root directory (provided you have <a href="http://nodejs.org/" target="_blank" title="Node.js">node</a> installed) you can run <code>npm install</code>, <code>npm install -g gulp</code>, <code>gulp</code> and this will watch the source files and rebuild the dist files if any changes occur - automatically compiling the LESS and minifying the source files.</p>
  70.  
  71. <h3>Adding the Files to Your Project</h3>
  72. <p>Snarl gives you pre-minified versions of the CSS and JS for immediate embedding into projects. Otherwise, the raw files are still there in case you want to edit them. Included is also <code>snarl.less</code> which is the source for the compiled CSS, modifying this is the fastest way to change the aesthetic of the notification design or animations to suit your project.</p>
  73. <p>Check out the demos below for usage examples.</p>
  74.  
  75. <!-- TODO: customising notifications -->
  76.  
  77. <h1>Snarl Notification Demos</h1>
  78. <p><strong>Note:</strong> Snarl itself does not require jQuery as a dependency, but these examples use jQuery for the click events for clarity.</p>
  79. <!-- TODO: proper links and contents (sticky side-nav?) -->
  80. <!--<ul>
  81. <li>Basic</li>
  82. <li>With timer (null open+close, and with specified delay)</li>
  83. <li>Update notification</li>
  84. <li>Setting defaults</li>
  85. <li>With click callbacks (string + function)</li>
  86. <li>Messages App</li>
  87. </ul>-->
  88. <h2>Basic Demo</h2>
  89. <p>Adding a notification is really simple with snarl. Specify a title and some text (as a description) and your notification will appear!</p>
  90. <p><button id="basic-demo" class="waves-effect waves-button waves-light">Basic Demo</button></p>
  91. <script>
  92. $('#basic-demo').click(function() {
  93. Snarl.addNotification({
  94. title: 'Ahoy there, skipper',
  95. text: 'Hello, world!'
  96. });
  97. });
  98. </script>
  99. {% highlight javascript %}
  100. $('#basic-demo').click(function() {
  101. Snarl.addNotification({
  102. title: 'Ahoy there, Skipper',
  103. text: 'Hello, world!'
  104. });
  105. });
  106. {% endhighlight %}
  107.  
  108. <h2>Icons</h2>
  109. <p>Snarl supports optional custom icons in the form of images, SVGs, and glyphicon fonts (such as FontAwesome). For a circular icon you can add a class/style on the image/svg/glyphicon which applies <code>border-radius:50%;</code> to the icon.</p>
  110. <p><button id="icon-demo" class="waves-effect waves-button waves-light">Custom Icon</button></p>
  111. <script>
  112. $('#icon-demo').click(function() {
  113. Snarl.addNotification({
  114. title: 'Custom Icons',
  115. text: 'Cool, huh? Supports images, svgs, and glyphicon fonts.',
  116. icon: '<i class="fa fa-globe"></i>'
  117. });
  118. });
  119. </script>
  120. {% highlight javascript %}
  121. $('#icon-demo').click(function() {
  122. Snarl.addNotification({
  123. title: 'Custom Icons',
  124. text: 'Cool, huh? Supports images, svgs, and glyphicon fonts.',
  125. icon: '<i class="fa fa-globe"></i>'
  126. });
  127. });
  128. {% endhighlight %}
  129.  
  130. <h2>Timeouts</h2>
  131. <p>Snarl supports custom timeouts specified in milliseconds or even having no timeouts at all.</p>
  132. <h3>Custom Timeout</h3>
  133. <p><button id="custom-timeout-demo" class="waves-effect waves-button waves-light">Custom Timeout</button></p>
  134. <script>
  135. $('#custom-timeout-demo').click(function() {
  136. Snarl.addNotification({
  137. title: 'Custom Timeouts',
  138. text: 'This notification has an 8000ms timeout.',
  139. icon: '<i class="fa fa-clock-o"></i>',
  140. timeout: 8000
  141. });
  142. });
  143. </script>
  144. {% highlight javascript %}
  145. $('#custom-timeout-demo').click(function() {
  146. Snarl.addNotification({
  147. title: 'Custom Timeouts',
  148. text: 'This notification has an 8000ms timeout!',
  149. icon: '<i class="fa fa-clock-o"></i>',
  150. timeout: 8000
  151. });
  152. });
  153. {% endhighlight %}
  154.  
  155. <h3>No Timeout</h3>
  156. <p>Notifications with no timeouts must either be manually dismissed by the user, or can be removed by your code once an event is complete. Updating notifications is done using the ID string returned by <code>Snarl.addNotification()</code>.</p>
  157. <p><button id="no-timeout-open" class="waves-effect waves-button waves-light">Open Notification</button>
  158. <button id="no-timeout-close" class="waves-effect waves-button waves-light close-button">Close Notification</button></p>
  159. <script>
  160. var noTimeoutNotification = null;
  161. $('#no-timeout-open').click(function() {
  162. if (Snarl.isDismissed(noTimeoutNotification)) {
  163. noTimeoutNotification = Snarl.addNotification({
  164. title: 'No Timeout',
  165. text: 'Close the notification by pressing either the dismiss button on the page or in the notification.',
  166. icon: '<i class="fa fa-ban"></i>',
  167. timeout: null
  168. });
  169. }
  170. });
  171. $('#no-timeout-close').click(function() {
  172. Snarl.removeNotification(noTimeoutNotification);
  173. });
  174. </script>
  175. {% highlight javascript %}
  176. var noTimeoutNotification = null;
  177. $('#no-timeout-open').click(function() {
  178. if (Snarl.isDismissed(noTimeoutNotification)) {
  179. noTimeoutNotification = Snarl.addNotification({
  180. title: 'No Timeout',
  181. text: 'Close the notification by pressing either the dismiss button on the page or in the notification.',
  182. icon: '<i class="fa fa-ban"></i>',
  183. timeout: null
  184. });
  185. }
  186. });
  187. $('#no-timeout-close').click(function() {
  188. Snarl.removeNotification(noTimeoutNotification);
  189. });
  190. {% endhighlight %}
  191.  
  192. <h2>Update Notifications</h2>
  193. <p>Because notifications are track/modifiable with their IDs, notifications can be updated, reopened, and removed. All options on a notification can be updated later by resupplying the options you wish to change with the <code>Snarl.editNotification(id, options)</code> function.</p>
  194. <p><input id="update-notification-title" class="form-control" placeholder="Notification Title"></p>
  195. <p><input id="update-notification-text" class="form-control" placeholder="Notification Text"></p>
  196. <p><input id="update-notification-icon" class="form-control" placeholder='Notification Icon (blank = null)'></p>
  197. <p><input id="update-notification-timeout" class="form-control" placeholder="Notification Timeout (blank = null)"></p>
  198. <p><label><input id="update-notification-dismissable" type="checkbox" checked> Dismissable</label></p>
  199. <p>
  200. <button id="update-notification-open" class="waves-effect waves-button waves-light">Open/Edit Notification</button>
  201. <button id="update-notification-close" class="waves-effect waves-button waves-light close-button">Close Notification</button>
  202. </p>
  203. <script>
  204. /**
  205. * Take user input
  206. */
  207. function options() {
  208. var title = $('#update-notification-title').val(),
  209. text = $('#update-notification-text').val(),
  210. icon = $('#update-notification-icon').val(),
  211. timeout = $('#update-notification-timeout').val(),
  212. dismissable = $('#update-notification-dismissable').prop('checked');
  213. if (title === '') title = 'Notification Title';
  214. if (text === '') text = 'Notification Text';
  215. if (timeout === '') timeout = null;
  216. return {
  217. title: title,
  218. text: text,
  219. icon: icon,
  220. timeout: timeout,
  221. dismissable: dismissable
  222. };
  223. }
  224. /**
  225. * Snarl-related code
  226. */
  227. var notification = null;
  228. $('#update-notification-open').click(function() {
  229. if (!Snarl.exists(notification)) {
  230. notification = Snarl.addNotification(options());
  231. } else {
  232. Snarl.editNotification(notification, options());
  233. }
  234. });
  235. $('#update-notification-close').click(function() {
  236. Snarl.removeNotification(notification);
  237. });
  238. </script>
  239. {% highlight javascript %}
  240. /**
  241. * Take user input
  242. */
  243. function options() {
  244. var title = $('#update-notification-title').val(),
  245. text = $('#update-notification-text').val(),
  246. icon = $('#update-notification-icon').val(),
  247. timeout = $('#update-notification-timeout').val(),
  248. dismissable = $('#update-notification-dismissable').prop('checked');
  249.  
  250. if (title === '') title = 'Notification Title';
  251. if (text === '') text = 'Notification Text';
  252. if (timeout === '') timeout = null;
  253.  
  254. return {
  255. title: title,
  256. text: text,
  257. icon: icon,
  258. timeout: timeout,
  259. dismissable: dismissable
  260. };
  261. }
  262.  
  263. /**
  264. * Snarl-related code
  265. */
  266. var notification = null;
  267. $('#update-notification-open').click(function() {
  268. if (!Snarl.exists(notification)) {
  269. notification = Snarl.addNotification(options());
  270. } else {
  271. Snarl.editNotification(notification, options());
  272. }
  273. });
  274. $('#update-notification-close').click(function() {
  275. Snarl.removeNotification(notification);
  276. });
  277. {% endhighlight %}
  278.  
  279. <h2>Click Actions/Callbacks</h2>
  280. <p>If the user clicks a notification, an action can be run. Either a callback function can be executed; a url can be visited; or nothing. These are specified via the <code>action</code> option. If a function is provided it will be used as a callback, if a string is provided then that url will be visited, or if <code>null</code> is used then no action will occur. The default value is <code>action: null</code>.</p>
  281.  
  282. <h3>Action: String/Url</h3>
  283. <p>Visit a url when the user clicks the notification. Note: currently does this by setting <code>window.location</code>.</p>
  284. <p><button id="snarl-callback-string" class="waves-effect waves-button waves-light">Open Notification</button></p>
  285. <script>
  286. $('#snarl-callback-string').click(function() {
  287. Snarl.addNotification({
  288. title: 'String Callback',
  289. text: 'Click this notification to visit a url',
  290. icon: '<i class="fa fa-github fa-lg"></i>',
  291. action: 'http://github.com/hoxxep/Snarl'
  292. });
  293. });
  294. </script>
  295. {% highlight javascript %}
  296. $('#snarl-callback-string').click(function() {
  297. Snarl.addNotification({
  298. title: 'String Callback',
  299. text: 'Click this notification to visit a url',
  300. icon: '<i class="fa fa-github fa-lg"></i>'
  301. action: 'http://github.com/hoxxep/Snarl'
  302. });
  303. });
  304. {% endhighlight %}
  305.  
  306. <h3>Action: Callback Function</h3>
  307. <p>This example makes the notification update itself once clicked. The function is passed the notification id as an argument, and has the potential to work with JS MVC frameworks too. Note that if the dismiss button is pressed, then no callback is triggered (subject to change).</p>
  308. <p><button id="snarl-callback-function" class="waves-effect waves-button waves-light">Open Notification</button></p>
  309. <script>
  310. $('#snarl-callback-function').click(function() {
  311. var id = Snarl.addNotification({
  312. title: 'Snarl Notification #' + (Snarl.count + 1),
  313. text: 'Hello, world! Click this notification.',
  314. icon: '<i class="fa fa-dot-circle-o"></i>',
  315. timeout: null,
  316. action: function(id) {
  317. Snarl.editNotification(id, {
  318. text: 'You clicked the notification! Click once more, click the dismiss button, or wait 8000ms to close it.',
  319. icon: '<i class="fa fa-check-circle"></i>',
  320. timeout: 8000,
  321. action: function(id) {
  322. Snarl.removeNotification(id);
  323. }
  324. });
  325. }
  326. });
  327. });
  328. </script>
  329. {% highlight javascript %}
  330. $('#snarl-callback-function').click(function() {
  331. var id = Snarl.addNotification({
  332. title: 'Snarl Notification #' + (Snarl.count + 1),
  333. text: 'Hello, world! Click this notification.',
  334. icon: '<i class="fa fa-dot-circle-o"></i>',
  335. timeout: null,
  336. action: function(id) {
  337. Snarl.editNotification(id, {
  338. text: 'You clicked the notification! Click once more, click the dismiss button, or wait 8000ms to close it.',
  339. icon: '<i class="fa fa-check-circle"></i>',
  340. timeout: 8000,
  341. action: function(id) {
  342. Snarl.removeNotification(id);
  343. }
  344. });
  345. }
  346. });
  347. });
  348. {% endhighlight %}
  349.  
  350. <h2>Messages Demo</h2>
  351. <p>The messages demo is a simple example using jQuery to demo how Snarl notifications could look in a more realistic usage example.</p>
  352. <p><input id="name" placeholder="Name" class="form-control"></p>
  353. <p><textarea id="message" placeholder="Message" class="form-control"></textarea></p>
  354. <p><button id="send-message" class="waves-effect waves-button waves-light">Send Message</button></p>
  355. <script>
  356. var typingNotification = null;
  357. $('#name').focusout(function() {
  358. typingNotification = null;
  359. if ($('#name').val()) {
  360. Snarl.addNotification({
  361. title: $(this).val(),
  362. text: 'Signed in',
  363. icon: '<i class="fa fa-user-plus"></i>'
  364. });
  365. }
  366. });
  367. $('#message').keypress(function() {
  368. if ($('#name').val()) {
  369. if (typingNotification === null) {
  370. typingNotification = Snarl.addNotification({
  371. title: $('#name').val(),
  372. text: 'Is typing...',
  373. icon: '<i class="fa fa-pencil"></i>',
  374. timeout: 2000
  375. });
  376. } else {
  377. Snarl.reOpenNotification(typingNotification);
  378. }
  379. }
  380. });
  381. $('#send-message').click(function() {
  382. if ($('#name').val() && $('#message').val()) {
  383. Snarl.removeNotification(typingNotification);
  384. typingNotification = null;
  385. Snarl.addNotification({
  386. title: $('#name').val(),
  387. text: $('#message').val(),
  388. icon: '<i class="fa fa-comment"></i>',
  389. timeout: 5000
  390. });
  391. $('#message').val('');
  392. } else {
  393. Snarl.addNotification({
  394. title: 'Error',
  395. text: 'No name or message entered!',
  396. icon: '<i class="fa fa-warning"></i>'
  397. });
  398. }
  399. });
  400. </script>
  401. {% highlight javascript %}
  402. var typingNotification = null;
  403. $('#name').focusout(function() {
  404. typingNotification = null;
  405. if ($('#name').val()) {
  406. Snarl.addNotification({
  407. title: $(this).val(),
  408. text: 'Signed in',
  409. icon: '<i class="fa fa-user-plus"></i>'
  410.  
  411. });
  412. }
  413. });
  414. $('#message').keypress(function() {
  415. if ($('#name').val()) {
  416. if (typingNotification === null) {
  417. typingNotification = Snarl.addNotification({
  418. title: $('#name').val(),
  419. text: 'Is typing...',
  420. icon: '<i class="fa fa-pencil"></i>',
  421. timeout: 2000
  422. });
  423. } else {
  424. Snarl.reOpenNotification(typingNotification);
  425. }
  426. }
  427. });
  428. $('#send-message').click(function() {
  429. if ($('#name').val() && $('#message').val()) {
  430. Snarl.removeNotification(typingNotification);
  431. typingNotification = null;
  432. Snarl.addNotification({
  433. title: $('#name').val(),
  434. text: $('#message').val(),
  435. icon: '<i class="fa fa-comment"></i>',
  436. timeout: 5000
  437. });
  438. $('#message').val('');
  439. } else {
  440. Snarl.addNotification({
  441. title: 'Error',
  442. text: 'No name or message entered!',
  443. icon: '<i class="fa fa-warning"></i>'
  444. });
  445. }
  446. });
  447. {% endhighlight %}
  448.  
  449.  
  450. <h1>Snarl Notification Reference</h1>
  451. <!--<ul>
  452. <li>ids</li>
  453. <li>options
  454. <ul>
  455. <li>title</li>
  456. <li>text</li>
  457. <li>timeout</li>
  458. <li>action</li>
  459. </ul>
  460. </li>
  461. </ul>
  462. <ul>
  463. <li>setDefaultOptions(options)</li>
  464. <li>addNotification(options) : returns id</li>
  465. <li>editNotification(id, options)</li>
  466. <li>reOpenNotification(id)</li>
  467. <li>removeNotification(id) : returns bool</li>
  468. <li>isDismissed(id) : returns bool</li>
  469. <li>exists(id) : returns bool</li>
  470. <li>setTitle(id, title)</li>
  471. <li>setText(id, text)</li>
  472. <li>setTimeout(id, timeout)</li>
  473. </ul>-->
  474.  
  475. <h2>Common Function Arguments</h2>
  476. <!-- TODO: prettify this -->
  477. <h3>Argument: id</h3>
  478. The <code>id</code> is the string which maps to a Snarl notification. <code>id</code>s are generated and returned automatically when using <code>.addNotification(options)</code>.
  479.  
  480. <h3>Argument: options</h3>
  481. <p><code>title</code>: String - title of the notification.</p>
  482. <p><code>text</code>: String - description part of the notification.</p>
  483. <p><code>icon</code>: String/HTML - HTML string for an image/svg/glyphicon element to use as a notification icon.</p>
  484. <p><code>timeout</code>: Integer/null</p>
  485. <ul>
  486. <li>Integer: timeout of notification in milliseconds.</li>
  487. <li>null: no timeout.</li>
  488. </ul>
  489. <p><code>action</code>: String/Function/null</p>
  490. <ul>
  491. <li>String: url of page to visit if notification is clicked.</li>
  492. <li>Function: callback function to run on notification click. Is passed the notification id as a parameter.</li>
  493. <li>null: no callback/action when clicked.</li>
  494. </ul>
  495. <p><code>dismissable</code>: true/false whether the notification is dismissable</p>
  496.  
  497. <h3>Default Options</h3>
  498. {% highlight javascript %}
  499. Snarl.defaultOptions => {
  500. title: '',
  501. text: '',
  502. icon: '',
  503. timeout: 3000,
  504. action: null,
  505. dismissable: true
  506. }
  507. {% endhighlight %}
  508.  
  509. <h3>Example Options</h3>
  510. <p>Note: for user friendliness, most notifications should be dismissable (and they are by default), hence why <code>dismissable</code> is omitted in this example.</p>
  511. {% highlight javascript %}
  512. var options = {
  513. title: 'Snarl Notification',
  514. text: 'Hello, world! This is an example notification.',
  515. icon: '<i class="fa fa-info-circle"></i>',
  516. action: function(id) {
  517. // do relevant action in web app
  518. console.log('Snarl notification ' + id + ' was clicked!');
  519. }
  520. };
  521. {% endhighlight %}
  522.  
  523. <h2>Snarl Methods</h2>
  524.  
  525. <h3>.setDefaultOptions(options)</h3>
  526. <p>Set's the default options to be used when adding a new notification.</p>
  527. {% highlight javascript %}
  528. // Example: Set default timeout to null
  529. Snarl.setDefaultOptions({
  530. timeout: null
  531. });
  532. {% endhighlight %}
  533.  
  534. <h3>.setNotificationHTML(html_string)</h3>
  535. <p>Customise the inner HTML generated for a notification. Notifications automatically have the class <code>.snarl-notification</code> and id <code>#snarl-notification-[id]</code> added. (<code>[id]</code> is the notification ID string returned by <code>.addNotification()</code>).</p>
  536. <p><strong>Note:</strong> notifications must have the <code>snarl-title</code>, <code>snarl-text</code>, and <code>snarl-close</code> classes to hold the title and text, and to have a working close button.</p>
  537. {% highlight javascript %}
  538. // Example: Very basic custom notification HTML with Waves support and a FontAwesome close icon
  539. Snarl.setNotificationHTML(
  540. '<div class="waves-effect">' +
  541. '<h3 class="snarl-title"></h3>' +
  542. '<p class="snarl-text"></p>' +
  543. '<div class="snarl-close waves-effect">' +
  544. '<i class="fa fa-close"></i>' +
  545. '</div>'
  546. '</div>'
  547. );
  548. {% endhighlight %}
  549.  
  550. <h3>.addNotification(options) : String id</h3>
  551. <p>Open a new notification with the specified options. <strong>Returns</strong> a string that is the notification <code>id</code>.</p>
  552. {% highlight javascript %}
  553. // Example: Add new notification
  554. var notification = Snarl.addNotification({
  555. title: 'Snarl Notification',
  556. text: 'Example notification text',
  557. action: 'http://hoxxep.github.io/Snarl'
  558. });
  559. {% endhighlight %}
  560.  
  561. <h3>.editNotification(id, options)</h3>
  562. <p>Edit an open notification. Only supply the options that you want to update, the rest will stay the same. If the notification has been dismissed it will re-open the notification with the previous timeout setting.</p>
  563. {% highlight javascript %}
  564. // Example: Edit the description on our new notification
  565. Snarl.editNotification(notification, {
  566. text: 'I\'ve edited the notification text!'
  567. });
  568. {% endhighlight %}
  569.  
  570. <h3>.reOpenNotification(id)</h3>
  571. <p>Attempt to re-open a notification otherwise, if the notification is still open, reset the timeout.</p>
  572. {% highlight javascript %}
  573. // Example: Re-open the notification if it was dismissed
  574. Snarl.reOpenNotification(notification);
  575. {% endhighlight %}
  576.  
  577. <h3>.removeNotification(id) : Boolean successful</h3>
  578. <p>Dismiss a notification. <strong>Returns</strong> <code>true</code> if the notification was open and <code>false</code> if it was already dismissed or did not exist. <strong>Note</strong> removed notifications can still be re-opened or edited, this merely dismisses a notification. Will probably be refactored to <code>.dismissNotification</code> in the near future.</p>
  579. {% highlight javascript %}
  580. // Example: Manually dismiss the notification
  581. Snarl.removeNotification(notification);
  582. {% endhighlight %}
  583.  
  584. <h3>.isDismissed(id) : Boolean dismissed</h3>
  585. <p>Checks if a notification is open. <strong>Returns</strong> <code>true</code> if the notification has been dismissed <em>or does not exist</em>.</p>
  586. {% highlight javascript %}
  587. // Example: Because we dismissed/removed the notification .isDismissed is true
  588. Snarl.isDismissed(notification) // => true
  589. {% endhighlight %}
  590.  
  591. <h3>.exists(id) : Boolean exists</h3>
  592. <p>Check if a notification id has been used. <strong>Returns</strong> <code>true</code> if notification has been opened with that <code>id</code> even if it's been dismissd.</p>
  593. {% highlight javascript %}
  594. // Example: Notification with our id still exists, even after being
  595. // dismissed/removed. This means the notification can still be re-opened.
  596. Snarl.exists(notification) // => true
  597. {% endhighlight %}
  598.  
  599. <h3>.setTitle(id, title)</h3>
  600. <p>Set the title of a notification. Shorthand for <code>.editNotification(id, {title: title})</code>.</p>
  601. {% highlight javascript %}
  602. // Example: Change the title of our notification
  603. // Note: this will re-open/reset the timeout on our notification to it's current setting.
  604. Snarl.setTitle(notification, 'Changed the title!');
  605. {% endhighlight %}
  606.  
  607. <h3>.setText(id, text)</h3>
  608. <p>Set the text of a notification. Shorthand for <code>.editNotification(id, {text: text})</code>.</p>
  609. {% highlight javascript %}
  610. // Example: Change the text of our notification
  611. // Note: this will re-open/reset the timeout on our notification to it's current setting.
  612. Snarl.setText(notification, 'Changed the text!');
  613. {% endhighlight %}
  614.  
  615. <h3>.setIcon(id, icon)</h3>
  616. <p>Set the icon of a notification. Shorthand for <code>.editNotification(id, {icon: icon})</code>.</p>
  617. {% highlight javascript %}
  618. // Example: Change the icon of our notification
  619. // Note: this will re-open/reset the timeout on our notification to it's current setting.
  620. Snarl.setIcon(notification, '<i class="fa fa-info-circle"></i>');
  621. {% endhighlight %}
  622.  
  623. <h3>.setTimeout(id, timeout)</h3>
  624. <p>Set the timeout of a notification. Shorthand for <code>.editNotification(id, {timeout: timeout})</code>.</p>
  625. {% highlight javascript %}
  626. // Example: Remove the timeout altogether
  627. // Note: this will re-open/reset the timeout on our notification.
  628. Snarl.setTimeout(notification, null);
  629. {% endhighlight %}
  630. {% highlight javascript %}
  631. // Example: Make timeout 8000ms
  632. // Note: this will re-open/reset the timeout on our notification.
  633. Snarl.setTimeout(notification, 8000);
  634. {% endhighlight %}
  635.  
  636.  
  637.  
  638. <!-- TODO: final paragraph/follow on github/get -->
  639. </div>
  640.  
  641. <footer>Copyright &copy; <a href="https://github.com/hoxxep" target="_blank">Liam Gray</a></footer>
  642.  
  643. <script>
  644. // Init Waves
  645. Waves.displayEffect();
  646. </script>
  647. </body>
  648. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!