notificationwidget.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. // Copyright (c) Jupyter Development Team.
  2. // Distributed under the terms of the Modified BSD License.
  3. define(['jquery'], function($) {
  4. "use strict";
  5. /**
  6. * Construct a NotificationWidget object.
  7. *
  8. * @constructor
  9. * @param {string} selector - a jQuery selector string for the
  10. * notification widget element
  11. */
  12. var NotificationWidget = function (selector) {
  13. this.selector = selector;
  14. this.timeout = null;
  15. this.busy = false;
  16. if (this.selector !== undefined) {
  17. this.element = $(selector);
  18. this.style();
  19. }
  20. this.element.hide();
  21. this.inner = $('<span/>');
  22. this.element.append(this.inner);
  23. };
  24. /**
  25. * Add the 'notification_widget' CSS class to the widget element.
  26. *
  27. * @method style
  28. */
  29. NotificationWidget.prototype.style = function () {
  30. // use explicit bootstrap classes here,
  31. // because multiple inheritance in LESS doesn't work
  32. // for this particular combination
  33. this.element.addClass('notification_widget btn btn-xs navbar-btn');
  34. };
  35. /**
  36. * hide the widget and empty the text
  37. **/
  38. NotificationWidget.prototype.hide = function () {
  39. var that = this;
  40. this.element.fadeOut(100, function(){that.inner.text('');});
  41. };
  42. /**
  43. * Set the notification widget message to display for a certain
  44. * amount of time (timeout). The widget will be shown forever if
  45. * timeout is <= 0 or undefined. If the widget is clicked while it
  46. * is still displayed, execute an optional callback
  47. * (click_callback). If the callback returns false, it will
  48. * prevent the notification from being dismissed.
  49. *
  50. * Options:
  51. * class - CSS class name for styling
  52. * icon - CSS class name for the widget icon
  53. * title - HTML title attribute for the widget
  54. *
  55. * @method set_message
  56. * @param {string} msg - The notification to display
  57. * @param {integer} [timeout] - The amount of time in milliseconds to display the widget
  58. * @param {function} [click_callback] - The function to run when the widget is clicked
  59. * @param {Object} [options] - Additional options
  60. */
  61. NotificationWidget.prototype.set_message = function (msg, timeout, click_callback, options) {
  62. options = options || {};
  63. // unbind potential previous callback
  64. this.element.unbind('click');
  65. this.inner.attr('class', options.icon);
  66. this.inner.attr('title', options.title);
  67. this.inner.text(msg);
  68. this.element.fadeIn(100);
  69. // reset previous set style
  70. this.element.removeClass();
  71. this.style();
  72. if (options.class) {
  73. this.element.addClass(options.class);
  74. }
  75. // clear previous timer
  76. if (this.timeout !== null) {
  77. clearTimeout(this.timeout);
  78. this.timeout = null;
  79. }
  80. // set the timer if a timeout is given
  81. var that = this;
  82. if (timeout !== undefined && timeout >= 0) {
  83. this.timeout = setTimeout(function () {
  84. that.element.fadeOut(100, function () {that.inner.text('');});
  85. that.element.unbind('click');
  86. that.timeout = null;
  87. }, timeout);
  88. }
  89. // if no click callback assume we will just dismiss the notification
  90. if (click_callback === undefined) {
  91. click_callback = function(){return true};
  92. }
  93. // on click, remove widget if click callback say so
  94. // and unbind click event.
  95. this.element.click(function () {
  96. if (click_callback() !== false) {
  97. that.element.fadeOut(100, function () {that.inner.text('');});
  98. that.element.unbind('click');
  99. }
  100. if (that.timeout !== null) {
  101. clearTimeout(that.timeout);
  102. that.timeout = null;
  103. }
  104. });
  105. };
  106. /**
  107. * Display an information message (styled with the 'info'
  108. * class). Arguments are the same as in set_message. Default
  109. * timeout is 3500 milliseconds.
  110. *
  111. * @method info
  112. */
  113. NotificationWidget.prototype.info = function (msg, timeout, click_callback, options) {
  114. options = options || {};
  115. options.class = options.class + ' info';
  116. timeout = timeout || 3500;
  117. this.set_message(msg, timeout, click_callback, options);
  118. };
  119. /**
  120. * Display a warning message (styled with the 'warning'
  121. * class). Arguments are the same as in set_message. Messages are
  122. * sticky by default.
  123. *
  124. * @method warning
  125. */
  126. NotificationWidget.prototype.warning = function (msg, timeout, click_callback, options) {
  127. options = options || {};
  128. options.class = options.class + ' warning';
  129. this.set_message(msg, timeout, click_callback, options);
  130. };
  131. /**
  132. * Display a danger message (styled with the 'danger'
  133. * class). Arguments are the same as in set_message. Messages are
  134. * sticky by default.
  135. *
  136. * @method danger
  137. */
  138. NotificationWidget.prototype.danger = function (msg, timeout, click_callback, options) {
  139. options = options || {};
  140. options.class = options.class + ' danger';
  141. this.set_message(msg, timeout, click_callback, options);
  142. };
  143. /**
  144. * Get the text of the widget message.
  145. *
  146. * @method get_message
  147. * @return {string} - the message text
  148. */
  149. NotificationWidget.prototype.get_message = function () {
  150. return this.inner.html();
  151. };
  152. return {'NotificationWidget': NotificationWidget};
  153. });