##// END OF EJS Templates
Merge pull request #7653 from Carreau/sticky-not...
Min RK -
r20296:6a8f5890 merge
parent child Browse files
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 !== undefined) {
103 if (click_callback === undefined) {
104 this.element.click(function () {
104 click_callback = function(){return true};
105 if (click_callback() !== false) {
106 that.element.fadeOut(100, function () {that.inner.text('');});
107 }
108 that.element.unbind('click');
109 if (that.timeout !== null) {
110 clearTimeout(that.timeout);
111 that.timeout = null;
112 }
113 });
114 }
105 }
106 // on click, remove widget if click callback say so
107 // and unbind click event.
108 this.element.click(function () {
109 if (click_callback() !== false) {
110 that.element.fadeOut(100, function () {that.inner.text('');});
111 that.element.unbind('click');
112 }
113 if (that.timeout !== null) {
114 clearTimeout(that.timeout);
115 that.timeout = null;
116 }
117 });
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