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