Posted By

dom111 on 09/15/10


Tagged

javascript growl jquery message purr


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

verostudios


jQuery Message


 / Published in: jQuery
 

URL: http://www.dom111.co.uk/blog/coding/jquery-message-letting-the-user-know-whats-going-on/209

Recently I’ve seen a few implementation of Growl in Javascript and basically just thought I’d have a go too. Everyone’s doing it, or so it seems!

This simple implementation is styled using pure CSS and you should be to easily modify it to suit your needs!

  1. /**
  2.  * Message
  3.  *
  4.  * Methods for growl-style messages
  5.  *
  6.  * @author Dom Hastings
  7.  */
  8. var Message = {
  9. /**
  10.   * options
  11.   *
  12.   * @var Object The options for the script
  13.   */
  14. options: {
  15. 'appendTo': 'body', // jQuery selector of element to append messages to
  16. 'autohide': 5, // autohide delay in seconds, or 0 to disable autohide
  17. 'interval': 500, // interval between actions, in ms
  18. 'messageClass': 'message', // className for messages
  19. 'messageClassActive': 'message-active', // className for messages
  20. 'messageContainerClass': 'messageContainer', // className for message container
  21. 'messageWrapperClass': 'message-wrapper', // className for message container
  22. 'messageTextClass': 'message-text', // className for message text
  23. 'messageTitleClass': 'message-title' // className for message titles
  24. },
  25.  
  26. /**
  27.   * queue
  28.   *
  29.   * @var Array The message data
  30.   */
  31. queue: [],
  32.  
  33. /**
  34.   * container
  35.   *
  36.   * @var Object The DOM node of the messages container
  37.   */
  38. container: null,
  39.  
  40. /**
  41.   * init
  42.   *
  43.   * Initialisation function
  44.   *
  45.   * @author Dom Hastings
  46.   * @param Object options The options to be merged with the global options
  47.   * @return void
  48.   */
  49. init: function(options) {
  50. $.extend(this.options, options || {});
  51.  
  52. if (this.options.autohide) {
  53. this.options.autohide *= 1000;
  54. }
  55.  
  56. $(this.options.appendTo)
  57. .append(
  58. $('<div id="__messageQueue__container"></div>')
  59. .addClass(this.options.messageContainerClass)
  60. );
  61.  
  62. this.container = $('div#__messageQueue__container');
  63.  
  64. if ('setInterval' in window) {
  65. window.setInterval(function() {
  66. Message.check();
  67. }, this.options.interval);
  68.  
  69. } else {
  70. window.setTimeout(function() {
  71. Message.check(true);
  72. }, this.options.interval);
  73. }
  74.  
  75. // prevent text selection in ie
  76. $('div#__messageQueue__container *').live('selectstart', function() {
  77. return false;
  78. });
  79.  
  80. // prevent text selection in all others...
  81. $('div#__messageQueue__container *').live('mousedown', function() {
  82. $(this).css('MozUserSelect', 'none');
  83.  
  84. return false;
  85. });
  86. },
  87.  
  88. /**
  89.   * check
  90.   *
  91.   * Checks and processess the queue
  92.   *
  93.   * @author Dom Hastings
  94.   * @param Boolean timeout Whether to set a timeout again
  95.   * @return void
  96.   */
  97. check: function(timeout) {
  98. var now = new Date().getTime();
  99.  
  100. for (var i = 0; i < this.queue.length; i++) {
  101. var item = this.queue[i];
  102.  
  103. if (item.unread) {
  104. item.unread = false;
  105.  
  106. this.show(item.unique);
  107.  
  108. } else {
  109. if (!item.active && !item.sticky && this.options.autohide && ((!item.autohide && item.time < (now - this.options.autohide)) || (item.autohide && item.time < (now - item.autohide)))) {
  110. this.hide(item.unique);
  111. }
  112. }
  113. }
  114.  
  115. if (timeout) {
  116. window.setTimeout(function() {
  117. Message.check(true);
  118. }, this.options.interval);
  119. }
  120. },
  121.  
  122. /**
  123.   * add
  124.   *
  125.   * Adds a new message to the queue
  126.   *
  127.   * @author Dom Hastings
  128.   * @param String text The message body
  129.   * @param String title The message title
  130.   * @param String style The message style
  131.   * @return Number The result from Array.push
  132.   */
  133. add: function(text, title, options) {
  134. if (!title) {
  135. title = text.substr(0, 20);
  136.  
  137. if (text.length > 20) {
  138. title += '...';
  139. }
  140. }
  141.  
  142. if (!options) {
  143. options = {
  144. 'style': '',
  145. 'callback': false,
  146. 'autohide': false
  147. };
  148.  
  149. } else if (typeof options == 'string') {
  150. options = {
  151. 'style': options,
  152. 'callback': false,
  153. 'autohide': false
  154. };
  155.  
  156. } else if (typeof options == 'function') {
  157. options = {
  158. 'style': '',
  159. 'callback': options,
  160. 'sticky': true,
  161. 'autohide': false
  162. };
  163.  
  164. } else if (typeof options == 'number') {
  165. options = {
  166. 'style': '',
  167. 'callback': false,
  168. 'autohide': options
  169. };
  170.  
  171. } else if (typeof options == 'object') {
  172. if (options.callback) {
  173. options.sticky = true;
  174. }
  175. }
  176.  
  177. var now = new Date().getTime();
  178.  
  179. return this.queue.push($.extend(options, {
  180. 'time': now,
  181. 'unique': now + '_' + (Math.floor(Math.random() * 90000) + 10000),
  182. 'text': text,
  183. 'title': title,
  184. 'unread': true,
  185. 'active': false,
  186. 'sticky': (options.sticky || options.style.match(/\bsticky\b/i) ? true : false)
  187. }));
  188. },
  189.  
  190. /**
  191.   * remove
  192.   *
  193.   * Removes the message with the specified unique identifier from the global queue
  194.   *
  195.   * @author Dom Hastings
  196.   * @param String unique The unique identifier
  197.   * @return Boolean true
  198.   */
  199. remove: function(unique) {
  200. for (var i = this.queue.length - 1; i >= 0; i--) {
  201. if (this.queue[i].unique == unique) {
  202. this.queue.splice(i, 1);
  203. }
  204. }
  205.  
  206. return true;
  207. },
  208.  
  209. /**
  210.   * get
  211.   *
  212.   * Returns the message with the specified unique identifier from the global queue
  213.   *
  214.   * @author Dom Hastings
  215.   * @param String unique The unique identifier
  216.   * @return Object The specified message
  217.   */
  218. get: function(unique) {
  219. for (var i = this.queue.length - 1; i >= 0; i--) {
  220. if (this.queue[i].unique == unique) {
  221. return this.queue[i];
  222. }
  223. }
  224.  
  225. return false;
  226. },
  227.  
  228. /**
  229.   * show
  230.   *
  231.   * Show the message with the specified unique identifier
  232.   *
  233.   * @author Dom Hastings
  234.   * @param String unique The unique identifier
  235.   * @return void
  236.   */
  237. show: function(unique) {
  238. var item = this.get(unique);
  239.  
  240. $(this.container)
  241. .append(
  242. $('<div id="__messageId_' + item.unique + '"></div>')
  243. .addClass(this.options.messageClass)
  244. .append(
  245. $('<div></div>')
  246. .addClass(this.options.messageWrapperClass)
  247. .append(
  248. $('<div></div>')
  249. .addClass(item.style)
  250. .append(
  251. $('<h1></h1>')
  252. .addClass(this.options.messageTitleClass)
  253. .html(item.title)
  254. )
  255. .append(
  256. $('<p></p>')
  257. .addClass(this.options.messageTextClass)
  258. .html(item.text)
  259. )
  260. )
  261. .data('unique', item.unique)
  262. .click(function() {
  263. Message.hide($(this).data('unique'));
  264. })
  265. .mouseenter(function() {
  266. Message.active($(this).data('unique'));
  267. })
  268. .mouseleave(function() {
  269. Message.inactive($(this).data('unique'));
  270. })
  271. )
  272. .css({
  273. 'opacity': 0
  274. })
  275. .animate({
  276. 'opacity': 1
  277. }, 300)
  278. );
  279. },
  280.  
  281. /**
  282.   * hide
  283.   *
  284.   * Hides the message with the specified unique identifier
  285.   *
  286.   * @author Dom Hastings
  287.   * @param String unique The unique identifier
  288.   * @return void
  289.   */
  290. hide: function(unique) {
  291. var item = this.get(unique);
  292.  
  293. if (item.callback) {
  294. item.callback();
  295. }
  296.  
  297. this.remove(unique);
  298.  
  299. $('div#__messageId_' + unique)
  300. .animate({
  301. 'height': '0px',
  302. 'opacity': '0',
  303. 'margin-bottom': '0px'
  304. }, 300, 'linear', function() {
  305. $(this).remove();
  306. });
  307. },
  308.  
  309. /**
  310.   * active
  311.   *
  312.   * Sets the message with the specified unique identifier as active
  313.   *
  314.   * @author Dom Hastings
  315.   * @param String unique The unique identifier
  316.   * @return void
  317.   */
  318. active: function(unique) {
  319. var item = this.get(unique);
  320.  
  321. $('div#__messageId_' + unique).addClass(this.options.messageClassActive);
  322.  
  323. item.active = true;
  324. },
  325.  
  326. /**
  327.   * inactive
  328.   *
  329.   * Sets the message with the specified unique identifier as inactive
  330.   *
  331.   * @author Dom Hastings
  332.   * @param String unique The unique identifier
  333.   * @return void
  334.   */
  335. inactive: function(unique) {
  336. var item = this.get(unique);
  337.  
  338. $('div#__messageId_' + unique).removeClass(this.options.messageClassActive);
  339.  
  340. item.active = false;
  341. }
  342. }

Report this snippet  

You need to login to post a comment.