BioTorrents.de’s version of Gazelle
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

jquery.noty.js 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  1. /*!
  2. @package noty - jQuery Notification Plugin
  3. @version version: 2.4.1
  4. @contributors https://github.com/needim/noty/graphs/contributors
  5. @documentation Examples and Documentation - http://needim.github.com/noty/
  6. @license Licensed under the MIT licenses: http://www.opensource.org/licenses/mit-license.php
  7. */
  8. if (typeof Object.create !== 'function') {
  9. Object.create = function (o) {
  10. function F() {
  11. }
  12. F.prototype = o;
  13. return new F();
  14. };
  15. }
  16. var NotyObject = {
  17. init: function (options) {
  18. // Mix in the passed in options with the default options
  19. this.options = $.extend({}, $.noty.defaults, options);
  20. this.options.layout = (this.options.custom) ? $.noty.layouts['inline'] : $.noty.layouts[this.options.layout];
  21. if ($.noty.themes[this.options.theme]) {
  22. this.options.theme = $.noty.themes[this.options.theme];
  23. if (this.options.theme.template)
  24. this.options.template = this.options.theme.template;
  25. if (this.options.theme.animation)
  26. this.options.animation = this.options.theme.animation;
  27. }
  28. else {
  29. this.options.themeClassName = this.options.theme;
  30. }
  31. this.options = $.extend({}, this.options, this.options.layout.options);
  32. if (this.options.id) {
  33. if ($.noty.store[this.options.id]) {
  34. return $.noty.store[this.options.id];
  35. }
  36. } else {
  37. this.options.id = 'noty_' + (new Date().getTime() * Math.floor(Math.random() * 1000000));
  38. }
  39. // Build the noty dom initial structure
  40. this._build();
  41. // return this so we can chain/use the bridge with less code.
  42. return this;
  43. }, // end init
  44. _build: function () {
  45. // Generating noty bar
  46. var $bar = $('<div class="noty_bar noty_type_' + this.options.type + '"></div>').attr('id', this.options.id);
  47. $bar.append(this.options.template).find('.noty_text').html(this.options.text);
  48. this.$bar = (this.options.layout.parent.object !== null) ? $(this.options.layout.parent.object).css(this.options.layout.parent.css).append($bar) : $bar;
  49. if (this.options.themeClassName)
  50. this.$bar.addClass(this.options.themeClassName).addClass('noty_container_type_' + this.options.type);
  51. // Set buttons if available
  52. if (this.options.buttons) {
  53. var $buttons;
  54. // Try find container for buttons in presented template, and create it if not found
  55. if (this.$bar.find('.noty_buttons').length > 0) {
  56. $buttons = this.$bar.find('.noty_buttons');
  57. } else {
  58. $buttons = $('<div/>').addClass('noty_buttons');
  59. (this.options.layout.parent.object !== null) ? this.$bar.find('.noty_bar').append($buttons) : this.$bar.append($buttons);
  60. }
  61. var self = this;
  62. $.each(this.options.buttons, function (i, button) {
  63. var $button = $('<button/>').addClass((button.addClass) ? button.addClass : 'gray').html(button.text).attr('id', button.id ? button.id : 'button-' + i)
  64. .attr('title', button.title)
  65. .appendTo($buttons)
  66. .on('click', function (event) {
  67. if ($.isFunction(button.onClick)) {
  68. button.onClick.call($button, self, event);
  69. }
  70. });
  71. });
  72. } else {
  73. // If buttons is not available, then remove containers if exist
  74. this.$bar.find('.noty_buttons').remove();
  75. }
  76. if (this.options.progressBar && this.options.timeout) {
  77. var $progressBar = $('<div/>').addClass('noty_progress_bar');
  78. (this.options.layout.parent.object !== null) ? this.$bar.find('.noty_bar').append($progressBar) : this.$bar.append($progressBar);
  79. }
  80. // For easy access
  81. this.$message = this.$bar.find('.noty_message');
  82. this.$closeButton = this.$bar.find('.noty_close');
  83. this.$buttons = this.$bar.find('.noty_buttons');
  84. this.$progressBar = this.$bar.find('.noty_progress_bar');
  85. $.noty.store[this.options.id] = this; // store noty for api
  86. }, // end _build
  87. show: function () {
  88. var self = this;
  89. (self.options.custom) ? self.options.custom.find(self.options.layout.container.selector).append(self.$bar) : $(self.options.layout.container.selector).append(self.$bar);
  90. if (self.options.theme && self.options.theme.style)
  91. self.options.theme.style.apply(self);
  92. ($.type(self.options.layout.css) === 'function') ? this.options.layout.css.apply(self.$bar) : self.$bar.css(this.options.layout.css || {});
  93. self.$bar.addClass(self.options.layout.addClass);
  94. self.options.layout.container.style.apply($(self.options.layout.container.selector), [self.options.within]);
  95. self.showing = true;
  96. if (self.options.theme && self.options.theme.style)
  97. self.options.theme.callback.onShow.apply(this);
  98. if ($.inArray('click', self.options.closeWith) > -1)
  99. self.$bar.css('cursor', 'pointer').on('click', function (evt) {
  100. self.stopPropagation(evt);
  101. if (self.options.callback.onCloseClick) {
  102. self.options.callback.onCloseClick.apply(self);
  103. }
  104. self.close();
  105. });
  106. if ($.inArray('hover', self.options.closeWith) > -1)
  107. self.$bar.one('mouseenter', function () {
  108. self.close();
  109. });
  110. if ($.inArray('button', self.options.closeWith) > -1)
  111. self.$closeButton.one('click', function (evt) {
  112. self.stopPropagation(evt);
  113. self.close();
  114. });
  115. if ($.inArray('button', self.options.closeWith) == -1)
  116. self.$closeButton.remove();
  117. if (self.options.callback.beforeShow)
  118. self.options.callback.beforeShow.apply(self);
  119. if (typeof self.options.animation.open == 'string') {
  120. self.animationTypeOpen = 'css';
  121. self.$bar.css('min-height', self.$bar.innerHeight());
  122. self.$bar.on('click', function (e) {
  123. self.wasClicked = true;
  124. });
  125. self.$bar.show();
  126. if (self.options.callback.onShow)
  127. self.options.callback.onShow.apply(self);
  128. self.$bar.addClass(self.options.animation.open).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
  129. if (self.options.callback.afterShow) self.options.callback.afterShow.apply(self);
  130. self.showing = false;
  131. self.shown = true;
  132. self.bindTimeout();
  133. if (self.hasOwnProperty('wasClicked')) {
  134. self.$bar.off('click', function (e) {
  135. self.wasClicked = true;
  136. });
  137. self.close();
  138. }
  139. });
  140. } else if (typeof self.options.animation.open == 'object' && self.options.animation.open == null) {
  141. self.animationTypeOpen = 'none';
  142. self.showing = false;
  143. self.shown = true;
  144. self.$bar.show();
  145. self.bindTimeout();
  146. if (self.options.callback.onShow)
  147. self.options.callback.onShow.apply(self);
  148. self.$bar.queue(function () {
  149. if (self.options.callback.afterShow)
  150. self.options.callback.afterShow.apply(self);
  151. });
  152. } else {
  153. self.animationTypeOpen = 'anim';
  154. if (self.options.callback.onShow)
  155. self.options.callback.onShow.apply(self);
  156. self.$bar.animate(
  157. self.options.animation.open,
  158. self.options.animation.speed,
  159. self.options.animation.easing,
  160. function () {
  161. if (self.options.callback.afterShow) self.options.callback.afterShow.apply(self);
  162. self.showing = false;
  163. self.shown = true;
  164. self.bindTimeout();
  165. });
  166. }
  167. return this;
  168. }, // end show
  169. bindTimeout: function () {
  170. var self = this;
  171. // If noty is have a timeout option
  172. if (self.options.timeout) {
  173. if (self.options.progressBar && self.$progressBar) {
  174. self.$progressBar.css({
  175. transition: 'all ' + self.options.timeout + 'ms linear',
  176. width: '0%'
  177. });
  178. }
  179. self.queueClose(self.options.timeout);
  180. self.$bar.on('mouseenter', self.dequeueClose.bind(self));
  181. self.$bar.on('mouseleave', self.queueClose.bind(self, self.options.timeout));
  182. }
  183. },
  184. dequeueClose: function () {
  185. var self = this;
  186. if (self.options.progressBar) {
  187. this.$progressBar.css({
  188. transition: 'none',
  189. width: '100%'
  190. });
  191. }
  192. if (!this.closeTimer) return;
  193. clearTimeout(this.closeTimer);
  194. this.closeTimer = null;
  195. },
  196. queueClose: function (timeout) {
  197. var self = this;
  198. if (self.options.progressBar) {
  199. self.$progressBar.css({
  200. transition: 'all ' + self.options.timeout + 'ms linear',
  201. width: '0%'
  202. });
  203. }
  204. if (this.closeTimer) return;
  205. self.closeTimer = window.setTimeout(function () {
  206. self.close();
  207. }, timeout);
  208. return self.closeTimer;
  209. },
  210. close: function () {
  211. if (this.$progressBar) {
  212. this.$progressBar.remove();
  213. }
  214. if (this.closeTimer) this.dequeueClose();
  215. if (this.closed) return;
  216. if (this.$bar && this.$bar.hasClass('i-am-closing-now')) return;
  217. var self = this;
  218. if (this.showing && (this.animationTypeOpen == 'anim' || this.animationTypeOpen == 'none')) {
  219. self.$bar.queue(
  220. function () {
  221. self.close.apply(self);
  222. }
  223. );
  224. return;
  225. } else if (this.showing && this.animationTypeOpen == 'css') {
  226. self.$bar.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
  227. self.close();
  228. });
  229. }
  230. if (!this.shown && !this.showing) { // If we are still waiting in the queue just delete from queue
  231. var queue = [];
  232. $.each($.noty.queue, function (i, n) {
  233. if (n.options.id != self.options.id) {
  234. queue.push(n);
  235. }
  236. });
  237. $.noty.queue = queue;
  238. return;
  239. }
  240. self.$bar.addClass('i-am-closing-now');
  241. if (self.options.callback.onClose) {
  242. self.options.callback.onClose.apply(self);
  243. }
  244. if (typeof self.options.animation.close == 'string') {
  245. self.$bar.removeClass(self.options.animation.open).addClass(self.options.animation.close).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
  246. if (self.options.callback.afterClose) self.options.callback.afterClose.apply(self);
  247. self.closeCleanUp();
  248. });
  249. } else if (typeof self.options.animation.close == 'object' && self.options.animation.close == null) {
  250. self.$bar.dequeue().hide(0, function () {
  251. if (self.options.callback.afterClose) self.options.callback.afterClose.apply(self);
  252. self.closeCleanUp();
  253. });
  254. } else {
  255. self.$bar.clearQueue().stop().animate(
  256. self.options.animation.close,
  257. self.options.animation.speed,
  258. self.options.animation.easing,
  259. function () {
  260. if (self.options.callback.afterClose) self.options.callback.afterClose.apply(self);
  261. })
  262. .promise().done(function () {
  263. self.closeCleanUp();
  264. });
  265. }
  266. }, // end close
  267. closeCleanUp: function () {
  268. var self = this;
  269. // Modal Cleaning
  270. if (self.options.modal) {
  271. $.notyRenderer.setModalCount(-1);
  272. if ($.notyRenderer.getModalCount() == 0 && !$.noty.queue.length) $('.noty_modal').fadeOut(self.options.animation.fadeSpeed, function () {
  273. $(this).remove();
  274. });
  275. }
  276. // Layout Cleaning
  277. $.notyRenderer.setLayoutCountFor(self, -1);
  278. if ($.notyRenderer.getLayoutCountFor(self) == 0) $(self.options.layout.container.selector).remove();
  279. // Make sure self.$bar has not been removed before attempting to remove it
  280. if (typeof self.$bar !== 'undefined' && self.$bar !== null) {
  281. if (typeof self.options.animation.close == 'string') {
  282. self.$bar.css('transition', 'all 10ms ease').css('border', 0).css('margin', 0).height(0);
  283. self.$bar.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
  284. self.$bar.remove();
  285. self.$bar = null;
  286. self.closed = true;
  287. if (self.options.theme.callback && self.options.theme.callback.onClose) {
  288. self.options.theme.callback.onClose.apply(self);
  289. }
  290. self.handleNext();
  291. });
  292. } else {
  293. self.$bar.remove();
  294. self.$bar = null;
  295. self.closed = true;
  296. self.handleNext();
  297. }
  298. } else {
  299. self.handleNext();
  300. }
  301. }, // end close clean up
  302. handleNext: function () {
  303. var self = this;
  304. delete $.noty.store[self.options.id]; // deleting noty from store
  305. if (self.options.theme.callback && self.options.theme.callback.onClose) {
  306. self.options.theme.callback.onClose.apply(self);
  307. }
  308. if (!self.options.dismissQueue) {
  309. // Queue render
  310. $.noty.ontap = true;
  311. $.notyRenderer.render();
  312. }
  313. if (self.options.maxVisible > 0 && self.options.dismissQueue) {
  314. $.notyRenderer.render();
  315. }
  316. },
  317. setText: function (text) {
  318. if (!this.closed) {
  319. this.options.text = text;
  320. this.$bar.find('.noty_text').html(text);
  321. }
  322. return this;
  323. },
  324. setType: function (type) {
  325. if (!this.closed) {
  326. this.options.type = type;
  327. this.options.theme.style.apply(this);
  328. this.options.theme.callback.onShow.apply(this);
  329. }
  330. return this;
  331. },
  332. setTimeout: function (time) {
  333. if (!this.closed) {
  334. var self = this;
  335. this.options.timeout = time;
  336. self.$bar.delay(self.options.timeout).promise().done(function () {
  337. self.close();
  338. });
  339. }
  340. return this;
  341. },
  342. stopPropagation: function (evt) {
  343. evt = evt || window.event;
  344. if (typeof evt.stopPropagation !== "undefined") {
  345. evt.stopPropagation();
  346. }
  347. else {
  348. evt.cancelBubble = true;
  349. }
  350. },
  351. closed : false,
  352. showing: false,
  353. shown : false
  354. }; // end NotyObject
  355. $.notyRenderer = {};
  356. $.notyRenderer.init = function (options) {
  357. // Renderer creates a new noty
  358. var notification = Object.create(NotyObject).init(options);
  359. if (notification.options.killer)
  360. $.noty.closeAll();
  361. (notification.options.force) ? $.noty.queue.unshift(notification) : $.noty.queue.push(notification);
  362. $.notyRenderer.render();
  363. return ($.noty.returns == 'object') ? notification : notification.options.id;
  364. };
  365. $.notyRenderer.render = function () {
  366. var instance = $.noty.queue[0];
  367. if ($.type(instance) === 'object') {
  368. if (instance.options.dismissQueue) {
  369. if (instance.options.maxVisible > 0) {
  370. if ($(instance.options.layout.container.selector + ' > li').length < instance.options.maxVisible) {
  371. $.notyRenderer.show($.noty.queue.shift());
  372. }
  373. else {
  374. }
  375. }
  376. else {
  377. $.notyRenderer.show($.noty.queue.shift());
  378. }
  379. }
  380. else {
  381. if ($.noty.ontap) {
  382. $.notyRenderer.show($.noty.queue.shift());
  383. $.noty.ontap = false;
  384. }
  385. }
  386. }
  387. else {
  388. $.noty.ontap = true; // Queue is over
  389. }
  390. };
  391. $.notyRenderer.show = function (notification) {
  392. if (notification.options.modal) {
  393. $.notyRenderer.createModalFor(notification);
  394. $.notyRenderer.setModalCount(+1);
  395. }
  396. // Where is the container?
  397. if (notification.options.custom) {
  398. if (notification.options.custom.find(notification.options.layout.container.selector).length == 0) {
  399. notification.options.custom.append($(notification.options.layout.container.object).addClass('i-am-new'));
  400. }
  401. else {
  402. notification.options.custom.find(notification.options.layout.container.selector).removeClass('i-am-new');
  403. }
  404. }
  405. else {
  406. if ($(notification.options.layout.container.selector).length == 0) {
  407. $('body').append($(notification.options.layout.container.object).addClass('i-am-new'));
  408. }
  409. else {
  410. $(notification.options.layout.container.selector).removeClass('i-am-new');
  411. }
  412. }
  413. $.notyRenderer.setLayoutCountFor(notification, +1);
  414. notification.show();
  415. };
  416. $.notyRenderer.createModalFor = function (notification) {
  417. if ($('.noty_modal').length == 0) {
  418. var modal = $('<div/>').addClass('noty_modal').addClass(notification.options.theme).data('noty_modal_count', 0);
  419. if (notification.options.theme.modal && notification.options.theme.modal.css)
  420. modal.css(notification.options.theme.modal.css);
  421. modal.prependTo($('body')).fadeIn(notification.options.animation.fadeSpeed);
  422. if ($.inArray('backdrop', notification.options.closeWith) > -1)
  423. modal.on('click', function () {
  424. $.noty.closeAll();
  425. });
  426. }
  427. };
  428. $.notyRenderer.getLayoutCountFor = function (notification) {
  429. return $(notification.options.layout.container.selector).data('noty_layout_count') || 0;
  430. };
  431. $.notyRenderer.setLayoutCountFor = function (notification, arg) {
  432. return $(notification.options.layout.container.selector).data('noty_layout_count', $.notyRenderer.getLayoutCountFor(notification) + arg);
  433. };
  434. $.notyRenderer.getModalCount = function () {
  435. return $('.noty_modal').data('noty_modal_count') || 0;
  436. };
  437. $.notyRenderer.setModalCount = function (arg) {
  438. return $('.noty_modal').data('noty_modal_count', $.notyRenderer.getModalCount() + arg);
  439. };
  440. // This is for custom container
  441. $.fn.noty = function (options) {
  442. options.custom = $(this);
  443. return $.notyRenderer.init(options);
  444. };
  445. $.noty = {};
  446. $.noty.queue = [];
  447. $.noty.ontap = true;
  448. $.noty.layouts = {};
  449. $.noty.themes = {};
  450. $.noty.returns = 'object';
  451. $.noty.store = {};
  452. $.noty.get = function (id) {
  453. return $.noty.store.hasOwnProperty(id) ? $.noty.store[id] : false;
  454. };
  455. $.noty.close = function (id) {
  456. return $.noty.get(id) ? $.noty.get(id).close() : false;
  457. };
  458. $.noty.setText = function (id, text) {
  459. return $.noty.get(id) ? $.noty.get(id).setText(text) : false;
  460. };
  461. $.noty.setType = function (id, type) {
  462. return $.noty.get(id) ? $.noty.get(id).setType(type) : false;
  463. };
  464. $.noty.clearQueue = function () {
  465. $.noty.queue = [];
  466. };
  467. $.noty.closeAll = function () {
  468. $.noty.clearQueue();
  469. $.each($.noty.store, function (id, noty) {
  470. noty.close();
  471. });
  472. };
  473. var windowAlert = window.alert;
  474. $.noty.consumeAlert = function (options) {
  475. window.alert = function (text) {
  476. if (options)
  477. options.text = text;
  478. else
  479. options = {text: text};
  480. $.notyRenderer.init(options);
  481. };
  482. };
  483. $.noty.stopConsumeAlert = function () {
  484. window.alert = windowAlert;
  485. };
  486. $.noty.defaults = {
  487. layout : 'topRight',
  488. theme : 'relax',
  489. type : 'alert',
  490. text : '',
  491. progressBar : false,
  492. dismissQueue: true,
  493. template : '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
  494. animation : {
  495. open : {height: 'toggle'},
  496. close : {height: 'toggle'},
  497. easing : 'swing',
  498. speed : 500,
  499. fadeSpeed: 'fast'
  500. },
  501. timeout : false,
  502. force : false,
  503. modal : false,
  504. maxVisible : 5,
  505. killer : false,
  506. closeWith : ['click'],
  507. callback : {
  508. beforeShow : function () {
  509. },
  510. onShow : function () {
  511. },
  512. afterShow : function () {
  513. },
  514. onClose : function () {
  515. },
  516. afterClose : function () {
  517. },
  518. onCloseClick: function () {
  519. }
  520. },
  521. buttons : false
  522. };
  523. $(window).on('resize', function () {
  524. $.each($.noty.layouts, function (index, layout) {
  525. layout.container.style.apply($(layout.container.selector));
  526. });
  527. });
  528. // Helpers
  529. window.noty = function noty(options) {
  530. return $.notyRenderer.init(options);
  531. };