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