examples.notifications.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967
  1. (function( $ ) {
  2. 'use strict';
  3. /*
  4. Default Notifications
  5. */
  6. $('#default-primary').click(function() {
  7. new PNotify({
  8. title: 'Regular Notice',
  9. text: 'Check me out! I\'m a notice.',
  10. type: 'custom',
  11. addclass: 'notification-primary',
  12. icon: 'fa fa-twitter'
  13. });
  14. });
  15. $('#default-notice').click(function() {
  16. new PNotify({
  17. title: 'Regular Notice',
  18. text: 'Check me out! I\'m a notice.'
  19. });
  20. });
  21. $('#default-success').click(function() {
  22. new PNotify({
  23. title: 'Regular Notice',
  24. text: 'Check me out! I\'m a notice.',
  25. type: 'success'
  26. });
  27. });
  28. $('#default-info').click(function() {
  29. new PNotify({
  30. title: 'Regular Notice',
  31. text: 'Check me out! I\'m a notice.',
  32. type: 'info'
  33. });
  34. });
  35. $('#default-error').click(function() {
  36. new PNotify({
  37. title: 'Regular Notice',
  38. text: 'Check me out! I\'m a notice.',
  39. type: 'error'
  40. });
  41. });
  42. $('#default-dark').click(function() {
  43. new PNotify({
  44. title: 'Regular Notice',
  45. text: 'Check me out! I\'m a notice.',
  46. addclass: 'notification-dark',
  47. icon: 'fa fa-user'
  48. });
  49. });
  50. /*
  51. Shadowed Notifications
  52. */
  53. $('#shadow-primary').click(function() {
  54. new PNotify({
  55. title: 'With Shadow',
  56. text: 'Check me out! I\'m a notice.',
  57. shadow: true,
  58. addclass: 'notification-primary',
  59. icon: 'fa fa-twitter'
  60. });
  61. });
  62. $('#shadow-notice').click(function() {
  63. new PNotify({
  64. title: 'With Shadow',
  65. text: 'Check me out! I\'m a notice.',
  66. shadow: true
  67. });
  68. });
  69. $('#shadow-success').click(function() {
  70. new PNotify({
  71. title: 'With Shadow',
  72. text: 'Check me out! I\'m a notice.',
  73. type: 'success',
  74. shadow: true
  75. });
  76. });
  77. $('#shadow-info').click(function() {
  78. new PNotify({
  79. title: 'With Shadow',
  80. text: 'Check me out! I\'m a notice.',
  81. type: 'info',
  82. shadow: true
  83. });
  84. });
  85. $('#shadow-error').click(function() {
  86. new PNotify({
  87. title: 'With Shadow',
  88. text: 'Check me out! I\'m a notice.',
  89. type: 'error',
  90. shadow: true
  91. });
  92. });
  93. $('#shadow-dark').click(function() {
  94. new PNotify({
  95. title: 'With Shadow',
  96. text: 'Check me out! I\'m a notice.',
  97. addclass: 'notification-dark',
  98. icon: 'fa fa-user',
  99. shadow: true
  100. });
  101. });
  102. /*
  103. No Icon Notification
  104. */
  105. $('#no-icon-primary').click(function() {
  106. new PNotify({
  107. title: 'Without Icon',
  108. text: 'Check me out! I\'m a notice.',
  109. addclass: 'ui-pnotify-no-icon notification-primary',
  110. icon: false
  111. });
  112. });
  113. $('#no-icon-notice').click(function() {
  114. new PNotify({
  115. title: 'Without Icon',
  116. text: 'Check me out! I\'m a notice.',
  117. addclass: 'ui-pnotify-no-icon',
  118. icon: false
  119. });
  120. });
  121. $('#no-icon-success').click(function() {
  122. new PNotify({
  123. title: 'Without Icon',
  124. text: 'Check me out! I\'m a notice.',
  125. type: 'success',
  126. addclass: 'ui-pnotify-no-icon',
  127. icon: false
  128. });
  129. });
  130. $('#no-icon-info').click(function() {
  131. new PNotify({
  132. title: 'Without Icon',
  133. text: 'Check me out! I\'m a notice.',
  134. type: 'info',
  135. addclass: 'ui-pnotify-no-icon',
  136. icon: false
  137. });
  138. });
  139. $('#no-icon-error').click(function() {
  140. new PNotify({
  141. title: 'Without Icon',
  142. text: 'Check me out! I\'m a notice.',
  143. type: 'error',
  144. addclass: 'ui-pnotify-no-icon',
  145. icon: false
  146. });
  147. });
  148. $('#no-icon-dark').click(function() {
  149. new PNotify({
  150. title: 'Without Icon',
  151. text: 'Check me out! I\'m a notice.',
  152. addclass: 'ui-pnotify-no-icon notification-dark',
  153. icon: false
  154. });
  155. });
  156. /*
  157. No Border Radius Notification
  158. */
  159. $('#no-radious-primary').click(function() {
  160. new PNotify({
  161. title: 'border-radius: 0;',
  162. text: 'Check me out! I\'m a notice.',
  163. addclass: 'notification-primary',
  164. cornerclass: 'ui-pnotify-sharp',
  165. icon: 'fa fa-twitter'
  166. });
  167. });
  168. $('#no-radious-notice').click(function() {
  169. new PNotify({
  170. title: 'border-radius: 0;',
  171. text: 'Check me out! I\'m a notice.',
  172. cornerclass: 'ui-pnotify-sharp'
  173. });
  174. });
  175. $('#no-radious-success').click(function() {
  176. new PNotify({
  177. title: 'border-radius: 0;',
  178. text: 'Check me out! I\'m a notice.',
  179. type: 'success',
  180. cornerclass: 'ui-pnotify-sharp'
  181. });
  182. });
  183. $('#no-radious-info').click(function() {
  184. new PNotify({
  185. title: 'border-radius: 0;',
  186. text: 'Check me out! I\'m a notice.',
  187. type: 'info',
  188. cornerclass: 'ui-pnotify-sharp'
  189. });
  190. });
  191. $('#no-radious-error').click(function() {
  192. new PNotify({
  193. title: 'border-radius: 0;',
  194. text: 'Check me out! I\'m a notice.',
  195. type: 'error',
  196. cornerclass: 'ui-pnotify-sharp'
  197. });
  198. });
  199. $('#no-radious-dark').click(function() {
  200. new PNotify({
  201. title: 'border-radius: 0;',
  202. text: 'Check me out! I\'m a notice.',
  203. addclass: 'notification-dark',
  204. icon: 'fa fa-user',
  205. cornerclass: 'ui-pnotify-sharp'
  206. });
  207. });
  208. /*
  209. Custom Icon Notification
  210. */
  211. $('#custom-icon-primary').click(function() {
  212. new PNotify({
  213. title: 'Custom Icon',
  214. text: 'Check me out! I\'m a notice.',
  215. addclass: 'notification-primary',
  216. icon: 'fa fa-home'
  217. });
  218. });
  219. $('#custom-icon-notice').click(function() {
  220. new PNotify({
  221. title: 'Custom Icon',
  222. text: 'Check me out! I\'m a notice.',
  223. icon: 'fa fa-home'
  224. });
  225. });
  226. $('#custom-icon-success').click(function() {
  227. new PNotify({
  228. title: 'Custom Icon',
  229. text: 'Check me out! I\'m a notice.',
  230. type: 'success',
  231. icon: 'fa fa-home'
  232. });
  233. });
  234. $('#custom-icon-info').click(function() {
  235. new PNotify({
  236. title: 'Custom Icon',
  237. text: 'Check me out! I\'m a notice.',
  238. type: 'info',
  239. icon: 'fa fa-home'
  240. });
  241. });
  242. $('#custom-icon-error').click(function() {
  243. new PNotify({
  244. title: 'Custom Icon',
  245. text: 'Check me out! I\'m a notice.',
  246. type: 'error',
  247. icon: 'fa fa-home'
  248. });
  249. });
  250. $('#custom-icon-dark').click(function() {
  251. new PNotify({
  252. title: 'Custom Icon',
  253. text: 'Check me out! I\'m a notice.',
  254. addclass: 'notification-dark',
  255. icon: 'fa fa-home'
  256. });
  257. });
  258. /*
  259. Icon without border notification
  260. */
  261. $('#icon-without-border-primary').click(function() {
  262. new PNotify({
  263. title: 'Icon Without Border',
  264. text: 'Check me out! I\'m a notice.',
  265. addclass: 'notification-primary icon-nb',
  266. icon: 'fa fa-twitter'
  267. });
  268. });
  269. $('#icon-without-border-notice').click(function() {
  270. new PNotify({
  271. title: 'Icon Without Border',
  272. text: 'Check me out! I\'m a notice.',
  273. addclass: 'icon-nb'
  274. });
  275. });
  276. $('#icon-without-border-success').click(function() {
  277. new PNotify({
  278. title: 'Icon Without Border',
  279. text: 'Check me out! I\'m a notice.',
  280. type: 'success',
  281. addclass: 'icon-nb'
  282. });
  283. });
  284. $('#icon-without-border-info').click(function() {
  285. new PNotify({
  286. title: 'Icon Without Border',
  287. text: 'Check me out! I\'m a notice.',
  288. type: 'info',
  289. addclass: 'icon-nb'
  290. });
  291. });
  292. $('#icon-without-border-error').click(function() {
  293. new PNotify({
  294. title: 'Icon Without Border',
  295. text: 'Check me out! I\'m a notice.',
  296. type: 'error',
  297. addclass: 'icon-nb'
  298. });
  299. });
  300. $('#icon-without-border-dark').click(function() {
  301. new PNotify({
  302. title: 'Icon Without Border',
  303. text: 'Check me out! I\'m a notice.',
  304. addclass: 'notification-dark icon-nb',
  305. icon: 'fa fa-user'
  306. });
  307. });
  308. /*
  309. Non-blocking notifications
  310. */
  311. $('#non-blocking-primary').click(function() {
  312. new PNotify({
  313. title: 'Non-Blocking',
  314. 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.',
  315. addclass: 'notification-primary',
  316. icon: 'fa fa-twitter',
  317. nonblock: {
  318. nonblock: true,
  319. nonblock_opacity: .2
  320. }
  321. });
  322. });
  323. $('#non-blocking-notice').click(function() {
  324. new PNotify({
  325. title: 'Non-Blocking',
  326. 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.',
  327. nonblock: {
  328. nonblock: true,
  329. nonblock_opacity: .2
  330. }
  331. });
  332. });
  333. $('#non-blocking-success').click(function() {
  334. new PNotify({
  335. title: 'Non-Blocking',
  336. 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.',
  337. type: 'success',
  338. nonblock: {
  339. nonblock: true,
  340. nonblock_opacity: .2
  341. }
  342. });
  343. });
  344. $('#non-blocking-info').click(function() {
  345. new PNotify({
  346. title: 'Non-Blocking',
  347. 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.',
  348. type: 'info',
  349. nonblock: {
  350. nonblock: true,
  351. nonblock_opacity: .2
  352. }
  353. });
  354. });
  355. $('#non-blocking-error').click(function() {
  356. new PNotify({
  357. title: 'Non-Blocking',
  358. 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.',
  359. type: 'error',
  360. nonblock: {
  361. nonblock: true,
  362. nonblock_opacity: .2
  363. }
  364. });
  365. });
  366. $('#non-blocking-dark').click(function() {
  367. new PNotify({
  368. title: 'Non-Blocking',
  369. 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.',
  370. addclass: 'notification-dark',
  371. icon: 'fa fa-user',
  372. nonblock: {
  373. nonblock: true,
  374. nonblock_opacity: .2
  375. }
  376. });
  377. });
  378. /*
  379. Sticky notifications
  380. */
  381. $('#sticky-primary').click(function() {
  382. new PNotify({
  383. title: 'Sticky',
  384. text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
  385. addclass: 'notification-primary',
  386. icon: 'fa fa-twitter',
  387. hide: false,
  388. buttons: {
  389. sticker: false
  390. }
  391. });
  392. });
  393. $('#sticky-notice').click(function() {
  394. new PNotify({
  395. title: 'Sticky',
  396. text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
  397. hide: false,
  398. buttons: {
  399. sticker: false
  400. }
  401. });
  402. });
  403. $('#sticky-success').click(function() {
  404. new PNotify({
  405. title: 'Sticky',
  406. text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
  407. type: 'success',
  408. hide: false,
  409. buttons: {
  410. sticker: false
  411. }
  412. });
  413. });
  414. $('#sticky-info').click(function() {
  415. new PNotify({
  416. title: 'Sticky',
  417. text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
  418. type: 'info',
  419. hide: false,
  420. buttons: {
  421. sticker: false
  422. }
  423. });
  424. });
  425. $('#sticky-error').click(function() {
  426. new PNotify({
  427. title: 'Sticky',
  428. text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
  429. type: 'error',
  430. hide: false,
  431. buttons: {
  432. sticker: false
  433. }
  434. });
  435. });
  436. $('#sticky-dark').click(function() {
  437. new PNotify({
  438. title: 'Sticky',
  439. text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
  440. addclass: 'notification-dark',
  441. icon: 'fa fa-user',
  442. hide: false,
  443. buttons: {
  444. sticker: false
  445. }
  446. });
  447. });
  448. /*
  449. Click to close notifications
  450. */
  451. $('#click-to-close-primary').click(function() {
  452. var notice = new PNotify({
  453. title: 'Click to Close',
  454. text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
  455. addclass: 'notification-primary click-2-close',
  456. icon: 'fa fa-twitter',
  457. hide: false,
  458. buttons: {
  459. closer: false,
  460. sticker: false
  461. }
  462. });
  463. notice.get().click(function() {
  464. notice.remove();
  465. });
  466. });
  467. $('#click-to-close-notice').click(function() {
  468. var notice = new PNotify({
  469. title: 'Click to Close',
  470. text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
  471. addclass: 'click-2-close',
  472. hide: false,
  473. buttons: {
  474. closer: false,
  475. sticker: false
  476. }
  477. });
  478. notice.get().click(function() {
  479. notice.remove();
  480. });
  481. });
  482. $('#click-to-close-success').click(function() {
  483. var notice = new PNotify({
  484. title: 'Click to Close',
  485. text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
  486. type: 'success',
  487. addclass: 'click-2-close',
  488. hide: false,
  489. buttons: {
  490. closer: false,
  491. sticker: false
  492. }
  493. });
  494. notice.get().click(function() {
  495. notice.remove();
  496. });
  497. });
  498. $('#click-to-close-info').click(function() {
  499. var notice = new PNotify({
  500. title: 'Click to Close',
  501. text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
  502. type: 'info',
  503. addclass: 'click-2-close',
  504. hide: false,
  505. buttons: {
  506. closer: false,
  507. sticker: false
  508. }
  509. });
  510. notice.get().click(function() {
  511. notice.remove();
  512. });
  513. });
  514. $('#click-to-close-error').click(function() {
  515. var notice = new PNotify({
  516. title: 'Click to Close',
  517. text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
  518. type: 'error',
  519. addclass: 'click-2-close',
  520. hide: false,
  521. buttons: {
  522. closer: false,
  523. sticker: false
  524. }
  525. });
  526. notice.get().click(function() {
  527. notice.remove();
  528. });
  529. });
  530. $('#click-to-close-dark').click(function() {
  531. var notice = new PNotify({
  532. title: 'Click to Close',
  533. text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
  534. addclass: 'notification-dark click-2-close',
  535. icon: 'fa fa-user',
  536. hide: false,
  537. buttons: {
  538. closer: false,
  539. sticker: false
  540. }
  541. });
  542. notice.get().click(function() {
  543. notice.remove();
  544. });
  545. });
  546. /*
  547. Positions
  548. */
  549. var stack_topleft = {"dir1": "down", "dir2": "right", "push": "top"};
  550. var stack_bottomleft = {"dir1": "right", "dir2": "up", "push": "top"};
  551. var stack_bottomright = {"dir1": "up", "dir2": "left", "firstpos1": 15, "firstpos2": 15};
  552. var stack_bar_top = {"dir1": "down", "dir2": "right", "push": "top", "spacing1": 0, "spacing2": 0};
  553. var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
  554. $('#position-1-primary').click(function() {
  555. var notice = new PNotify({
  556. title: 'Notification',
  557. text: 'Some notification text.',
  558. addclass: 'notification-primary stack-topleft',
  559. icon: 'fa fa-twitter'
  560. });
  561. });
  562. $('#position-1-notice').click(function() {
  563. var notice = new PNotify({
  564. title: 'Notification',
  565. text: 'Some notification text.',
  566. addclass: 'stack-topleft'
  567. });
  568. });
  569. $('#position-1-success').click(function() {
  570. var notice = new PNotify({
  571. title: 'Notification',
  572. text: 'Some notification text.',
  573. type: 'success',
  574. addclass: 'stack-topleft'
  575. });
  576. });
  577. $('#position-1-info').click(function() {
  578. var notice = new PNotify({
  579. title: 'Notification',
  580. text: 'Some notification text.',
  581. type: 'info',
  582. addclass: 'stack-topleft'
  583. });
  584. });
  585. $('#position-1-error').click(function() {
  586. var notice = new PNotify({
  587. title: 'Notification',
  588. text: 'Some notification text.',
  589. type: 'error',
  590. addclass: 'stack-topleft'
  591. });
  592. });
  593. $('#position-1-dark').click(function() {
  594. var notice = new PNotify({
  595. title: 'Notification',
  596. text: 'Some notification text.',
  597. addclass: 'notification-dark stack-topleft',
  598. icon: 'fa fa-user'
  599. });
  600. });
  601. $('#position-2-primary').click(function() {
  602. var notice = new PNotify({
  603. title: 'Notification',
  604. text: 'Some notification text.',
  605. addclass: 'notification-primary stack-bottomleft',
  606. icon: 'fa fa-twitter',
  607. stack: stack_bottomleft
  608. });
  609. });
  610. $('#position-2-notice').click(function() {
  611. var notice = new PNotify({
  612. title: 'Notification',
  613. text: 'Some notification text.',
  614. addclass: 'stack-bottomleft',
  615. stack: stack_bottomleft
  616. });
  617. });
  618. $('#position-2-success').click(function() {
  619. var notice = new PNotify({
  620. title: 'Notification',
  621. text: 'Some notification text.',
  622. type: 'success',
  623. addclass: 'stack-bottomleft',
  624. stack: stack_bottomleft
  625. });
  626. });
  627. $('#position-2-info').click(function() {
  628. var notice = new PNotify({
  629. title: 'Notification',
  630. text: 'Some notification text.',
  631. type: 'info',
  632. addclass: 'stack-bottomleft',
  633. stack: stack_bottomleft
  634. });
  635. });
  636. $('#position-2-error').click(function() {
  637. var notice = new PNotify({
  638. title: 'Notification',
  639. text: 'Some notification text.',
  640. type: 'error',
  641. addclass: 'stack-bottomleft',
  642. stack: stack_bottomleft
  643. });
  644. });
  645. $('#position-2-dark').click(function() {
  646. var notice = new PNotify({
  647. title: 'Notification',
  648. text: 'Some notification text.',
  649. addclass: 'notification-dark stack-bottomleft',
  650. icon: 'fa fa-user',
  651. stack: stack_bottomleft
  652. });
  653. });
  654. $('#position-3-primary').click(function() {
  655. var notice = new PNotify({
  656. title: 'Notification',
  657. text: 'Some notification text.',
  658. addclass: 'notification-primary stack-bottomright',
  659. icon: 'fa fa-twitter',
  660. stack: stack_bottomright
  661. });
  662. });
  663. $('#position-3-notice').click(function() {
  664. var notice = new PNotify({
  665. title: 'Notification',
  666. text: 'Some notification text.',
  667. addclass: 'stack-bottomright',
  668. stack: stack_bottomright
  669. });
  670. });
  671. $('#position-3-success').click(function() {
  672. var notice = new PNotify({
  673. title: 'Notification',
  674. text: 'Some notification text.',
  675. type: 'success',
  676. addclass: 'stack-bottomright',
  677. stack: stack_bottomright
  678. });
  679. });
  680. $('#position-3-info').click(function() {
  681. var notice = new PNotify({
  682. title: 'Notification',
  683. text: 'Some notification text.',
  684. type: 'info',
  685. addclass: 'stack-bottomright',
  686. stack: stack_bottomright
  687. });
  688. });
  689. $('#position-3-error').click(function() {
  690. var notice = new PNotify({
  691. title: 'Notification',
  692. text: 'Some notification text.',
  693. type: 'error',
  694. addclass: 'stack-bottomright',
  695. stack: stack_bottomright
  696. });
  697. });
  698. $('#position-3-dark').click(function() {
  699. var notice = new PNotify({
  700. title: 'Notification',
  701. text: 'Some notification text.',
  702. addclass: 'notification-dark stack-bottomright',
  703. icon: 'fa fa-user',
  704. stack: stack_bottomright
  705. });
  706. });
  707. $('#position-4-primary').click(function() {
  708. var notice = new PNotify({
  709. title: 'Notification',
  710. text: 'Some notification text.',
  711. addclass: 'notification-primary stack-bar-top',
  712. icon: 'fa fa-twitter',
  713. stack: stack_bar_top,
  714. width: "100%"
  715. });
  716. });
  717. $('#position-4-notice').click(function() {
  718. var notice = new PNotify({
  719. title: 'Notification',
  720. text: 'Some notification text.',
  721. addclass: 'stack-bar-top',
  722. stack: stack_bar_top,
  723. width: "100%"
  724. });
  725. });
  726. $('#position-4-success').click(function() {
  727. var notice = new PNotify({
  728. title: 'Notification',
  729. text: 'Some notification text.',
  730. type: 'success',
  731. addclass: 'stack-bar-top',
  732. stack: stack_bar_top,
  733. width: "100%"
  734. });
  735. });
  736. $('#position-4-info').click(function() {
  737. var notice = new PNotify({
  738. title: 'Notification',
  739. text: 'Some notification text.',
  740. type: 'info',
  741. addclass: 'stack-bar-top',
  742. stack: stack_bar_top,
  743. width: "100%"
  744. });
  745. });
  746. $('#position-4-error').click(function() {
  747. var notice = new PNotify({
  748. title: 'Notification',
  749. text: 'Some notification text.',
  750. type: 'error',
  751. addclass: 'stack-bar-top',
  752. stack: stack_bar_top,
  753. width: "100%"
  754. });
  755. });
  756. $('#position-4-dark').click(function() {
  757. var notice = new PNotify({
  758. title: 'Notification',
  759. text: 'Some notification text.',
  760. addclass: 'notification-dark stack-bar-top',
  761. icon: 'fa fa-user',
  762. stack: stack_bar_top,
  763. width: "100%"
  764. });
  765. });
  766. $('#position-5-primary').click(function() {
  767. var notice = new PNotify({
  768. title: 'Notification',
  769. text: 'Some notification text.',
  770. addclass: 'notification-primary stack-bar-bottom',
  771. icon: 'fa fa-twitter',
  772. stack: stack_bar_bottom,
  773. width: "70%"
  774. });
  775. });
  776. $('#position-5-notice').click(function() {
  777. var notice = new PNotify({
  778. title: 'Notification',
  779. text: 'Some notification text.',
  780. addclass: 'stack-bar-bottom',
  781. stack: stack_bar_bottom,
  782. width: "70%"
  783. });
  784. });
  785. $('#position-5-success').click(function() {
  786. var notice = new PNotify({
  787. title: 'Notification',
  788. text: 'Some notification text.',
  789. type: 'success',
  790. addclass: 'stack-bar-bottom',
  791. stack: stack_bar_bottom,
  792. width: "70%"
  793. });
  794. });
  795. $('#position-5-info').click(function() {
  796. var notice = new PNotify({
  797. title: 'Notification',
  798. text: 'Some notification text.',
  799. type: 'info',
  800. addclass: 'stack-bar-bottom',
  801. stack: stack_bar_bottom,
  802. width: "70%"
  803. });
  804. });
  805. $('#position-5-error').click(function() {
  806. var notice = new PNotify({
  807. title: 'Notification',
  808. text: 'Some notification text.',
  809. type: 'error',
  810. addclass: 'stack-bar-bottom',
  811. stack: stack_bar_bottom,
  812. width: "70%"
  813. });
  814. });
  815. $('#position-5-dark').click(function() {
  816. var notice = new PNotify({
  817. title: 'Notification',
  818. text: 'Some notification text.',
  819. addclass: 'notification-dark stack-bar-bottom',
  820. icon: 'fa fa-user',
  821. stack: stack_bar_bottom,
  822. width: "70%"
  823. });
  824. });
  825. /*
  826. Desktop Notifications Code
  827. */
  828. $.each(['notice', 'error', 'info', 'success'], function( i, type ) {
  829. $( '#desktop-' + type ).click(function() {
  830. PNotify.desktop.permission();
  831. (new PNotify({
  832. title: 'Desktop ' + type.charAt(0).toUpperCase() + type.slice(1),
  833. 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 notice.',
  834. type: type,
  835. desktop: {
  836. desktop: true
  837. }
  838. })).get().click(function() {
  839. alert('Hey! You clicked the desktop notification!');
  840. });
  841. });
  842. });
  843. $('#desktop-sticky').click(function() {
  844. PNotify.desktop.permission();
  845. (new PNotify({
  846. title: 'Sticky Desktop Notice',
  847. text: 'I\'m a sticky notice, so you\'ll have to close me yourself. (Some systems don\'t allow sticky notifications.) If you\'ve given me permission, I\'ll appear as a desktop notification. If you haven\'t, I\'ll still appear as a regular notice.',
  848. hide: false,
  849. desktop: {
  850. desktop: true
  851. }
  852. })).get().click(function() {
  853. alert('Hey! You clicked the desktop notification!');
  854. });
  855. });
  856. $('#desktop-custom').click(function() {
  857. PNotify.desktop.permission();
  858. (new PNotify({
  859. title: 'Desktop Custom Icon',
  860. 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 notice.',
  861. desktop: {
  862. desktop: true,
  863. icon: 'assets/images/!happy-face.png'
  864. }
  865. })).get().click(function() {
  866. alert('Hey! You clicked the desktop notification!');
  867. });
  868. });
  869. }).apply( this, [ jQuery ]);