jquery.noty.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. /**
  2. * noty - jQuery Notification Plugin v1.2.1
  3. * Contributors: https://github.com/needim/noty/graphs/contributors
  4. *
  5. * Examples and Documentation - http://needim.github.com/noty/
  6. *
  7. * Licensed under the MIT licenses:
  8. * http://www.opensource.org/licenses/mit-license.php
  9. *
  10. **/
  11. (function($) {
  12. $.noty = function(options, customContainer) {
  13. var base = {};
  14. var $noty = null;
  15. var isCustom = false;
  16. base.init = function(options) {
  17. base.options = $.extend({}, $.noty.defaultOptions, options);
  18. base.options.type = base.options.cssPrefix+base.options.type;
  19. base.options.id = base.options.type+'_'+new Date().getTime();
  20. base.options.layout = base.options.cssPrefix+'layout_'+base.options.layout;
  21. if (base.options.custom.container) customContainer = base.options.custom.container;
  22. isCustom = ($.type(customContainer) === 'object') ? true : false;
  23. return base.addQueue();
  24. };
  25. // Push notification to queue
  26. base.addQueue = function() {
  27. var isGrowl = ($.inArray(base.options.layout, $.noty.growls) == -1) ? false : true;
  28. if (!isGrowl) (base.options.force) ? $.noty.queue.unshift({options: base.options}) : $.noty.queue.push({options: base.options});
  29. return base.render(isGrowl);
  30. };
  31. // Render the noty
  32. base.render = function(isGrowl) {
  33. // Layout spesific container settings
  34. var container = (isCustom) ? customContainer.addClass(base.options.theme+' '+base.options.layout+' noty_custom_container') : $('body');
  35. if (isGrowl) {
  36. if ($('ul.noty_cont.' + base.options.layout).length == 0)
  37. container.prepend($('<ul/>').addClass('noty_cont ' + base.options.layout));
  38. container = $('ul.noty_cont.' + base.options.layout);
  39. } else {
  40. if ($.noty.available) {
  41. var fromQueue = $.noty.queue.shift(); // Get noty from queue
  42. if ($.type(fromQueue) === 'object') {
  43. $.noty.available = false;
  44. base.options = fromQueue.options;
  45. } else {
  46. $.noty.available = true; // Queue is over
  47. return base.options.id;
  48. }
  49. } else {
  50. return base.options.id;
  51. }
  52. }
  53. base.container = container;
  54. // Generating noty bar
  55. base.bar = $('<div class="noty_bar"/>').attr('id', base.options.id).addClass(base.options.theme+' '+base.options.layout+' '+base.options.type);
  56. $noty = base.bar;
  57. $noty.append(base.options.template).find('.noty_text').html(base.options.text);
  58. $noty.data('noty_options', base.options);
  59. // Close button display
  60. (base.options.closeButton) ? $noty.addClass('noty_closable').find('.noty_close').show() : $noty.find('.noty_close').remove();
  61. // Bind close event to button
  62. $noty.find('.noty_close').bind('click', function() { $noty.trigger('noty.close'); });
  63. // If we have a button we must disable closeOnSelfClick and closeOnSelfOver option
  64. if (base.options.buttons) base.options.closeOnSelfClick = base.options.closeOnSelfOver = false;
  65. // Close on self click
  66. if (base.options.closeOnSelfClick) $noty.bind('click', function() { $noty.trigger('noty.close'); }).css('cursor', 'pointer');
  67. // Close on self mouseover
  68. if (base.options.closeOnSelfOver) $noty.bind('mouseover', function() { $noty.trigger('noty.close'); }).css('cursor', 'pointer');
  69. // Set buttons if available
  70. if (base.options.buttons) {
  71. $buttons = $('<div/>').addClass('noty_buttons');
  72. $noty.find('.noty_message').append($buttons);
  73. $.each(base.options.buttons, function(i, button) {
  74. bclass = (button.type) ? button.type : 'gray';
  75. $button = $('<button/>').addClass(bclass).html(button.text).appendTo($noty.find('.noty_buttons'))
  76. .bind('click', function() {
  77. if ($.isFunction(button.click)) {
  78. button.click.call($button, $noty);
  79. }
  80. });
  81. });
  82. }
  83. return base.show(isGrowl);
  84. };
  85. base.show = function(isGrowl) {
  86. // is Modal?
  87. if (base.options.modal) $('<div/>').addClass('noty_modal').addClass(base.options.theme).prependTo($('body')).fadeIn('fast');
  88. $noty.close = function() { return this.trigger('noty.close'); };
  89. // Prepend noty to container
  90. (isGrowl) ? base.container.prepend($('<li/>').append($noty)) : base.container.prepend($noty);
  91. // topCenter and center specific options
  92. if (base.options.layout == 'noty_layout_topCenter' || base.options.layout == 'noty_layout_center') {
  93. $.noty.reCenter($noty);
  94. }
  95. $noty.bind('noty.setText', function(event, text) {
  96. $noty.find('.noty_text').html(text);
  97. if (base.options.layout == 'noty_layout_topCenter' || base.options.layout == 'noty_layout_center') {
  98. $.noty.reCenter($noty);
  99. }
  100. });
  101. $noty.bind('noty.setType', function(event, type) {
  102. $noty.removeClass($noty.data('noty_options').type);
  103. type = $noty.data('noty_options').cssPrefix+type;
  104. $noty.data('noty_options').type = type;
  105. $noty.addClass(type);
  106. if (base.options.layout == 'noty_layout_topCenter' || base.options.layout == 'noty_layout_center') {
  107. $.noty.reCenter($noty);
  108. }
  109. });
  110. $noty.bind('noty.getId', function(event) {
  111. return $noty.data('noty_options').id;
  112. });
  113. // Bind close event
  114. $noty.one('noty.close', function(event) {
  115. var options = $noty.data('noty_options');
  116. if(options.onClose){options.onClose();}
  117. // Modal Cleaning
  118. if (options.modal) $('.noty_modal').fadeOut('fast', function() { $(this).remove(); });
  119. $noty.clearQueue().stop().animate(
  120. $noty.data('noty_options').animateClose,
  121. $noty.data('noty_options').speed,
  122. $noty.data('noty_options').easing,
  123. $noty.data('noty_options').onClosed)
  124. .promise().done(function() {
  125. // Layout spesific cleaning
  126. if ($.inArray($noty.data('noty_options').layout, $.noty.growls) > -1) {
  127. $noty.parent().remove();
  128. } else {
  129. $noty.remove();
  130. // queue render
  131. $.noty.available = true;
  132. base.render(false);
  133. }
  134. });
  135. });
  136. // Start the show
  137. if(base.options.onShow){base.options.onShow();}
  138. $noty.animate(base.options.animateOpen, base.options.speed, base.options.easing, base.options.onShown);
  139. // If noty is have a timeout option
  140. if (base.options.timeout) $noty.delay(base.options.timeout).promise().done(function() { $noty.trigger('noty.close'); });
  141. return base.options.id;
  142. };
  143. // Run initializer
  144. return base.init(options);
  145. };
  146. // API
  147. $.noty.get = function(id) { return $('#'+id); };
  148. $.noty.close = function(id) {
  149. //remove from queue if not already visible
  150. for(var i=0;i<$.noty.queue.length;) {
  151. if($.noty.queue[i].options.id==id)
  152. $.noty.queue.splice(id,1);
  153. else
  154. i++;
  155. }
  156. //close if already visible
  157. $.noty.get(id).trigger('noty.close');
  158. };
  159. $.noty.setText = function(id, text) {
  160. $.noty.get(id).trigger('noty.setText', text);
  161. };
  162. $.noty.setType = function(id, type) {
  163. $.noty.get(id).trigger('noty.setType', type);
  164. };
  165. $.noty.closeAll = function() {
  166. $.noty.clearQueue();
  167. $('.noty_bar').trigger('noty.close');
  168. };
  169. $.noty.reCenter = function(noty) {
  170. noty.css({'left': ($(window).width() - noty.outerWidth()) / 2 + 'px'});
  171. };
  172. $.noty.clearQueue = function() {
  173. $.noty.queue = [];
  174. };
  175. var windowAlert = window.alert;
  176. $.noty.consumeAlert = function(options){
  177. window.alert = function(text){
  178. if(options){options.text = text;}
  179. else{options = {text:text};}
  180. $.noty(options);
  181. };
  182. }
  183. $.noty.stopConsumeAlert = function(){
  184. window.alert = windowAlert;
  185. }
  186. $.noty.queue = [];
  187. $.noty.growls = ['noty_layout_topLeft', 'noty_layout_topRight', 'noty_layout_bottomLeft', 'noty_layout_bottomRight'];
  188. $.noty.available = true;
  189. $.noty.defaultOptions = {
  190. layout: 'top',
  191. theme: 'noty_theme_default',
  192. animateOpen: {height: 'toggle'},
  193. animateClose: {height: 'toggle'},
  194. easing: 'swing',
  195. text: '',
  196. type: 'alert',
  197. speed: 500,
  198. timeout: 5000,
  199. closeButton: false,
  200. closeOnSelfClick: true,
  201. closeOnSelfOver: false,
  202. force: false,
  203. onShow: false,
  204. onShown: false,
  205. onClose: false,
  206. onClosed: false,
  207. buttons: false,
  208. modal: false,
  209. template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
  210. cssPrefix: 'noty_',
  211. custom: {
  212. container: null
  213. }
  214. };
  215. $.fn.noty = function(options) {
  216. return this.each(function() {
  217. (new $.noty(options, $(this)));
  218. });
  219. };
  220. })(jQuery);
  221. //Helper
  222. function noty(options) {
  223. return jQuery.noty(options); // returns an id
  224. }