Show More
@@ -1,171 +1,174 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 | // use explicit bootstrap classes here, |
|
36 | // use explicit bootstrap classes here, | |
37 | // because multiple inheritance in LESS doesn't work |
|
37 | // because multiple inheritance in LESS doesn't work | |
38 | // for this particular combination |
|
38 | // for this particular combination | |
39 | this.element.addClass('notification_widget btn btn-xs navbar-btn'); |
|
39 | this.element.addClass('notification_widget btn btn-xs navbar-btn'); | |
40 | }; |
|
40 | }; | |
41 |
|
41 | |||
42 | /** |
|
42 | /** | |
43 | * hide the widget and empty the text |
|
43 | * hide the widget and empty the text | |
44 | **/ |
|
44 | **/ | |
45 | NotificationWidget.prototype.hide = function () { |
|
45 | NotificationWidget.prototype.hide = function () { | |
46 | var that = this; |
|
46 | var that = this; | |
47 | this.element.fadeOut(100, function(){that.inner.text('');}); |
|
47 | this.element.fadeOut(100, function(){that.inner.text('');}); | |
48 | }; |
|
48 | }; | |
49 |
|
49 | |||
50 | /** |
|
50 | /** | |
51 | * Set the notification widget message to display for a certain |
|
51 | * Set the notification widget message to display for a certain | |
52 | * amount of time (timeout). The widget will be shown forever if |
|
52 | * amount of time (timeout). The widget will be shown forever if | |
53 | * timeout is <= 0 or undefined. If the widget is clicked while it |
|
53 | * timeout is <= 0 or undefined. If the widget is clicked while it | |
54 | * is still displayed, execute an optional callback |
|
54 | * is still displayed, execute an optional callback | |
55 | * (click_callback). If the callback returns false, it will |
|
55 | * (click_callback). If the callback returns false, it will | |
56 | * prevent the notification from being dismissed. |
|
56 | * prevent the notification from being dismissed. | |
57 | * |
|
57 | * | |
58 | * Options: |
|
58 | * Options: | |
59 | * class - CSS class name for styling |
|
59 | * class - CSS class name for styling | |
60 | * icon - CSS class name for the widget icon |
|
60 | * icon - CSS class name for the widget icon | |
61 | * title - HTML title attribute for the widget |
|
61 | * title - HTML title attribute for the widget | |
62 | * |
|
62 | * | |
63 | * @method set_message |
|
63 | * @method set_message | |
64 | * @param {string} msg - The notification to display |
|
64 | * @param {string} msg - The notification to display | |
65 | * @param {integer} [timeout] - The amount of time in milliseconds to display the widget |
|
65 | * @param {integer} [timeout] - The amount of time in milliseconds to display the widget | |
66 | * @param {function} [click_callback] - The function to run when the widget is clicked |
|
66 | * @param {function} [click_callback] - The function to run when the widget is clicked | |
67 | * @param {Object} [options] - Additional options |
|
67 | * @param {Object} [options] - Additional options | |
68 | */ |
|
68 | */ | |
69 | NotificationWidget.prototype.set_message = function (msg, timeout, click_callback, options) { |
|
69 | NotificationWidget.prototype.set_message = function (msg, timeout, click_callback, options) { | |
70 | options = options || {}; |
|
70 | options = options || {}; | |
71 |
|
71 | |||
72 | // unbind potential previous callback |
|
72 | // unbind potential previous callback | |
73 | this.element.unbind('click'); |
|
73 | this.element.unbind('click'); | |
74 | this.inner.attr('class', options.icon); |
|
74 | this.inner.attr('class', options.icon); | |
75 | this.inner.attr('title', options.title); |
|
75 | this.inner.attr('title', options.title); | |
76 | this.inner.text(msg); |
|
76 | this.inner.text(msg); | |
77 | this.element.fadeIn(100); |
|
77 | this.element.fadeIn(100); | |
78 |
|
78 | |||
79 | // reset previous set style |
|
79 | // reset previous set style | |
80 | this.element.removeClass(); |
|
80 | this.element.removeClass(); | |
81 | this.style(); |
|
81 | this.style(); | |
82 | if (options.class) { |
|
82 | if (options.class) { | |
83 | this.element.addClass(options.class); |
|
83 | this.element.addClass(options.class); | |
84 | } |
|
84 | } | |
85 |
|
85 | |||
86 | // clear previous timer |
|
86 | // clear previous timer | |
87 | if (this.timeout !== null) { |
|
87 | if (this.timeout !== null) { | |
88 | clearTimeout(this.timeout); |
|
88 | clearTimeout(this.timeout); | |
89 | this.timeout = null; |
|
89 | this.timeout = null; | |
90 | } |
|
90 | } | |
91 |
|
91 | |||
92 | // set the timer if a timeout is given |
|
92 | // set the timer if a timeout is given | |
93 | var that = this; |
|
93 | var that = this; | |
94 | if (timeout !== undefined && timeout >= 0) { |
|
94 | if (timeout !== undefined && timeout >= 0) { | |
95 | this.timeout = setTimeout(function () { |
|
95 | this.timeout = setTimeout(function () { | |
96 | that.element.fadeOut(100, function () {that.inner.text('');}); |
|
96 | that.element.fadeOut(100, function () {that.inner.text('');}); | |
97 | that.element.unbind('click'); |
|
97 | that.element.unbind('click'); | |
98 | that.timeout = null; |
|
98 | that.timeout = null; | |
99 | }, timeout); |
|
99 | }, timeout); | |
100 | } |
|
100 | } | |
101 |
|
101 | |||
102 | // bind the click callback if it is given |
|
102 | // if no click callback assume we will just dismiss the notification | |
103 |
if (click_callback |
|
103 | if (click_callback === undefined) { | |
|
104 | click_callback = function(){return true}; | |||
|
105 | } | |||
|
106 | // on click, remove widget if click callback say so | |||
|
107 | // and unbind click event. | |||
104 |
|
|
108 | this.element.click(function () { | |
105 |
|
|
109 | if (click_callback() !== false) { | |
106 |
|
|
110 | that.element.fadeOut(100, function () {that.inner.text('');}); | |
107 | } |
|
|||
108 | that.element.unbind('click'); |
|
111 | that.element.unbind('click'); | |
|
112 | } | |||
109 |
|
|
113 | if (that.timeout !== null) { | |
110 |
|
|
114 | clearTimeout(that.timeout); | |
111 |
|
|
115 | that.timeout = null; | |
112 |
|
|
116 | } | |
113 |
|
|
117 | }); | |
114 | } |
|
|||
115 | }; |
|
118 | }; | |
116 |
|
119 | |||
117 | /** |
|
120 | /** | |
118 | * Display an information message (styled with the 'info' |
|
121 | * Display an information message (styled with the 'info' | |
119 | * class). Arguments are the same as in set_message. Default |
|
122 | * class). Arguments are the same as in set_message. Default | |
120 | * timeout is 3500 milliseconds. |
|
123 | * timeout is 3500 milliseconds. | |
121 | * |
|
124 | * | |
122 | * @method info |
|
125 | * @method info | |
123 | */ |
|
126 | */ | |
124 | NotificationWidget.prototype.info = function (msg, timeout, click_callback, options) { |
|
127 | NotificationWidget.prototype.info = function (msg, timeout, click_callback, options) { | |
125 | options = options || {}; |
|
128 | options = options || {}; | |
126 | options.class = options.class + ' info'; |
|
129 | options.class = options.class + ' info'; | |
127 | timeout = timeout || 3500; |
|
130 | timeout = timeout || 3500; | |
128 | this.set_message(msg, timeout, click_callback, options); |
|
131 | this.set_message(msg, timeout, click_callback, options); | |
129 | }; |
|
132 | }; | |
130 |
|
133 | |||
131 | /** |
|
134 | /** | |
132 | * Display a warning message (styled with the 'warning' |
|
135 | * Display a warning message (styled with the 'warning' | |
133 | * class). Arguments are the same as in set_message. Messages are |
|
136 | * class). Arguments are the same as in set_message. Messages are | |
134 | * sticky by default. |
|
137 | * sticky by default. | |
135 | * |
|
138 | * | |
136 | * @method warning |
|
139 | * @method warning | |
137 | */ |
|
140 | */ | |
138 | NotificationWidget.prototype.warning = function (msg, timeout, click_callback, options) { |
|
141 | NotificationWidget.prototype.warning = function (msg, timeout, click_callback, options) { | |
139 | options = options || {}; |
|
142 | options = options || {}; | |
140 | options.class = options.class + ' warning'; |
|
143 | options.class = options.class + ' warning'; | |
141 | this.set_message(msg, timeout, click_callback, options); |
|
144 | this.set_message(msg, timeout, click_callback, options); | |
142 | }; |
|
145 | }; | |
143 |
|
146 | |||
144 | /** |
|
147 | /** | |
145 | * Display a danger message (styled with the 'danger' |
|
148 | * Display a danger message (styled with the 'danger' | |
146 | * class). Arguments are the same as in set_message. Messages are |
|
149 | * class). Arguments are the same as in set_message. Messages are | |
147 | * sticky by default. |
|
150 | * sticky by default. | |
148 | * |
|
151 | * | |
149 | * @method danger |
|
152 | * @method danger | |
150 | */ |
|
153 | */ | |
151 | NotificationWidget.prototype.danger = function (msg, timeout, click_callback, options) { |
|
154 | NotificationWidget.prototype.danger = function (msg, timeout, click_callback, options) { | |
152 | options = options || {}; |
|
155 | options = options || {}; | |
153 | options.class = options.class + ' danger'; |
|
156 | options.class = options.class + ' danger'; | |
154 | this.set_message(msg, timeout, click_callback, options); |
|
157 | this.set_message(msg, timeout, click_callback, options); | |
155 | }; |
|
158 | }; | |
156 |
|
159 | |||
157 | /** |
|
160 | /** | |
158 | * Get the text of the widget message. |
|
161 | * Get the text of the widget message. | |
159 | * |
|
162 | * | |
160 | * @method get_message |
|
163 | * @method get_message | |
161 | * @return {string} - the message text |
|
164 | * @return {string} - the message text | |
162 | */ |
|
165 | */ | |
163 | NotificationWidget.prototype.get_message = function () { |
|
166 | NotificationWidget.prototype.get_message = function () { | |
164 | return this.inner.html(); |
|
167 | return this.inner.html(); | |
165 | }; |
|
168 | }; | |
166 |
|
169 | |||
167 | // For backwards compatibility. |
|
170 | // For backwards compatibility. | |
168 | IPython.NotificationWidget = NotificationWidget; |
|
171 | IPython.NotificationWidget = NotificationWidget; | |
169 |
|
172 | |||
170 | return {'NotificationWidget': NotificationWidget}; |
|
173 | return {'NotificationWidget': NotificationWidget}; | |
171 | }); |
|
174 | }); |
General Comments 0
You need to be logged in to leave comments.
Login now