jquery.jnotify.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*!
  2. * jNotify jQuery Plug-in
  3. *
  4. * Copyright 2010 Giva, Inc. (http://www.givainc.com/labs/)
  5. *
  6. * Licensed under the Apache License, Version 2.0 (the "License");
  7. * you may not use this file except in compliance with the License.
  8. * You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing, software
  13. * distributed under the License is distributed on an "AS IS" BASIS,
  14. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15. * See the License for the specific language governing permissions and
  16. * limitations under the License.
  17. *
  18. * Date: 2010-09-30
  19. * Rev: 1.1.00
  20. */
  21. ;(function($){
  22. $.jnotify = function (m, o, d){
  23. return new jNotify(m, o, d);
  24. };
  25. // set the version of the plug-in
  26. $.jnotify.version = "1.1.00";
  27. var $jnotify, queue = [], count = 0, playing = false, paused = false, queuedId, queuedNote,
  28. // define default settings
  29. defaults = {
  30. // define core settings
  31. type: "" // if a type is specified, then an additional class of classNotification + type is created for each notification
  32. , delay: 2000 // the default time to show each notification (in milliseconds)
  33. , sticky: false // determines if the message should be considered "sticky" (user must manually close notification)
  34. , closeLabel: "×" // the HTML to use for the "Close" link
  35. , showClose: true // determines if the "Close" link should be shown if notification is also sticky
  36. , fadeSpeed: 1000 // the speed to fade messages out (in milliseconds)
  37. , slideSpeed: 250 // the speed used to slide messages out (in milliseconds)
  38. // define the class statements
  39. , classContainer: "jnotify-container" // className to use for the outer most container--this is where all the notifications appear
  40. , classNotification: "jnotify-notification" // className of the individual notification containers
  41. , classBackground: "jnotify-background" // className of the background layer for each notification container
  42. , classClose: "jnotify-close" // className to use for the "Close" link
  43. , classMessage: "jnotify-message" // className to use for the actual notification text container--this is where the message is actually written
  44. // event handlers
  45. , init: null // callback that occurs when the main jnotify container is created
  46. , create: null // callback that occurs when when the note is created (occurs just before appearing in DOM)
  47. , beforeRemove: null // callback that occurs when before the notification starts to fade away
  48. , remove: null // callback that occurs when notification is removed
  49. , transition: null // allows you to overwrite how the transitions between messages are handled
  50. // receives the following arguments:
  51. // container - jQuery object containing the notification
  52. // message - jQuery object of the actual message
  53. // count - the number of items left in queue
  54. // callback - a function you must execute once your transition has executed
  55. // options - the options used for this jnotify instance
  56. };
  57. // override the defaults
  58. $.jnotify.setup = function (o){
  59. defaults = $.extend({}, defaults, o) ;
  60. };
  61. $.jnotify.play = function (f, d){
  62. if( playing && (f !== true ) || (queue.length == 0) ) return;
  63. playing = true;
  64. // get first note
  65. var note = queue.shift();
  66. queuedNote = note;
  67. // determine delay to use
  68. var delay = (arguments.length >= 2) ? parseInt(d, 10) : note.options.delay;
  69. // run delay before removing message
  70. queuedId = setTimeout(function(){
  71. // clear timeout id
  72. queuedId = 0;
  73. note.remove(function (){
  74. // makr that the queue is empty
  75. if( queue.length == 0 ) playing = false;
  76. // force playing the next item in queue
  77. else if( !paused ) $.jnotify.play(true);
  78. });
  79. }, delay);
  80. };
  81. $.jnotify.pause = function(){
  82. clearTimeout(queuedId);
  83. // push the item back into the queue
  84. if( queuedId ) queue.unshift(queuedNote);
  85. // mark that we're playing (so it doesn't automatically start playing)
  86. paused = playing = true;
  87. }
  88. $.jnotify.resume = function(){
  89. // mark that we're no longer pause
  90. paused = false;
  91. // resume playing
  92. $.jnotify.play(true, 0);
  93. }
  94. function jNotify(message, options){
  95. // a reference to the jNotify object
  96. var self = this, TO = typeof options;
  97. if( TO == "number" ){
  98. options = $.extend({}, defaults, {delay: options});
  99. } else if( TO == "boolean" ){
  100. options = $.extend({}, defaults, {sticky: true}) ;
  101. } else if( TO == "string" ){
  102. options = $.extend({}, defaults, {type: options, delay: ((arguments.length > 2) && (typeof arguments[2] == "number")) ? arguments[2] : defaults.delay, sticky: ((arguments.length > 2) && (typeof arguments[2] == "boolean")) ? arguments[2] : defaults.sticky}) ;
  103. } else {
  104. options = $.extend({}, defaults, options);
  105. }
  106. // store the options
  107. this.options = options;
  108. // if the container doesn't exist, create it
  109. if( !$jnotify ){
  110. // we want to use one single container, so always use the default container class
  111. $jnotify = $('<div class="' + defaults.classContainer + '" />').appendTo("body");
  112. if( $.isFunction(options.init) ) options.init.apply(self, [$jnotify]);
  113. }
  114. // create the notification
  115. function create(message){
  116. var html = '<div class="' + options.classNotification + (options.type.length ? (" " + options.classNotification + "-" + options.type) : "") + '">'
  117. + '<div class="' + options.classBackground + '"></div>'
  118. + (options.sticky && options.showClose ? ('<a class="' + options.classClose + '">' + options.closeLabel + '</a>') : '')
  119. + '<div class="' + options.classMessage + '">'
  120. + '<div>' + message + '</div>'
  121. + '</div></div>';
  122. // increase the counter tracking the notification instances
  123. count++;
  124. // create the note
  125. var $note = $(html);
  126. if( options.sticky ){
  127. // add click handler to remove the sticky notification
  128. $note.find("a." + options.classClose).bind("click.jnotify", function (){
  129. self.remove();
  130. });
  131. }
  132. // run callback
  133. if( $.isFunction(options.create) ) options.create.apply(self, [$note]);
  134. // return the new note
  135. return $note.appendTo($jnotify);
  136. }
  137. // remove the notification
  138. this.remove = function (callback){
  139. var $msg = $note.find("." + options.classMessage), $parent = $msg.parent();
  140. // remove message from counter
  141. var index = count--;
  142. // run callback
  143. if( $.isFunction(options.beforeRemove) ) options.beforeRemove.apply(self, [$msg]);
  144. // cleans up notification
  145. function finished(){
  146. // remove the parent container
  147. $parent.remove();
  148. // if there's a callback, run it
  149. if( $.isFunction(callback) ) callback.apply(self, [$msg]);
  150. if( $.isFunction(options.remove) ) options.remove.apply(self, [$msg]);
  151. }
  152. // check if a custom transition has been specified
  153. if( $.isFunction(options.transition) ) options.transition.apply(self, [$parent, $msg, index, finished, options]);
  154. else {
  155. $msg.fadeTo(options.fadeSpeed, 0.01, function (){
  156. // if last item, just remove
  157. if( index <= 1 ) finished();
  158. // slide the parent closed
  159. else $parent.slideUp(options.slideSpeed, finished);
  160. });
  161. // if the last notification, fade out the container
  162. if( count <= 0 ) $parent.fadeOut(options.fadeSpeed);
  163. }
  164. }
  165. // create the note
  166. var $note = create(message);
  167. // if not a sticky, add to show queue
  168. if( !options.sticky ){
  169. // add the message to the queue
  170. queue.push(this);
  171. // play queue
  172. $.jnotify.play();
  173. }
  174. return this;
  175. };
  176. })(jQuery);