Show More
@@ -1,104 +1,104 | |||||
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 | var that = this; |
|
19 | var that = this; | |
20 |
|
20 | |||
21 | this.inner = $('<span/>'); |
|
21 | this.inner = $('<span/>'); | |
22 | this.element.append(this.inner); |
|
22 | this.element.append(this.inner); | |
23 |
|
23 | |||
24 | }; |
|
24 | }; | |
25 |
|
25 | |||
26 | NotificationWidget.prototype.style = function () { |
|
26 | NotificationWidget.prototype.style = function () { | |
27 | this.element.addClass('notification_widget'); |
|
27 | this.element.addClass('notification_widget'); | |
28 | }; |
|
28 | }; | |
29 |
|
29 | |||
30 | // msg : message to display |
|
30 | // msg : message to display | |
31 | // timeout : time in ms before diseapearing |
|
31 | // timeout : time in ms before diseapearing | |
32 | // |
|
32 | // | |
33 | // if timeout <= 0 |
|
33 | // if timeout <= 0 | |
34 | // click_callback : function called if user click on notification |
|
34 | // click_callback : function called if user click on notification | |
35 | // could return false to prevent the notification to be dismissed |
|
35 | // could return false to prevent the notification to be dismissed | |
36 | NotificationWidget.prototype.set_message = function (msg, timeout, click_callback, options) { |
|
36 | NotificationWidget.prototype.set_message = function (msg, timeout, click_callback, options) { | |
37 | var options = options || {}; |
|
37 | var options = options || {}; | |
38 | var callback = click_callback || function() {return true;}; |
|
38 | var callback = click_callback || function() {return true;}; | |
39 | var that = this; |
|
39 | var that = this; | |
40 | // unbind potential previous callback |
|
40 | // unbind potential previous callback | |
41 | this.element.unbind('click'); |
|
41 | this.element.unbind('click'); | |
42 | this.inner.attr('class', options.icon); |
|
42 | this.inner.attr('class', options.icon); | |
43 | this.inner.attr('title', options.title); |
|
43 | this.inner.attr('title', options.title); | |
44 | this.inner.text(msg); |
|
44 | this.inner.text(msg); | |
45 | this.element.fadeIn(100); |
|
45 | this.element.fadeIn(100); | |
46 |
|
46 | |||
47 | // reset previous set style |
|
47 | // reset previous set style | |
48 |
this.element.removeClass() |
|
48 | this.element.removeClass(); | |
49 | this.style(); |
|
49 | this.style(); | |
50 | if (options.class){ |
|
50 | if (options.class){ | |
51 |
|
51 | |||
52 | this.element.addClass(options.class) |
|
52 | this.element.addClass(options.class) | |
53 | } |
|
53 | } | |
54 | if (this.timeout !== null) { |
|
54 | if (this.timeout !== null) { | |
55 | clearTimeout(this.timeout); |
|
55 | clearTimeout(this.timeout); | |
56 | this.timeout = null; |
|
56 | this.timeout = null; | |
57 | } |
|
57 | } | |
58 | if (timeout !== undefined && timeout >=0) { |
|
58 | if (timeout !== undefined && timeout >=0) { | |
59 | this.timeout = setTimeout(function () { |
|
59 | this.timeout = setTimeout(function () { | |
60 | that.element.fadeOut(100, function () {that.inner.text('');}); |
|
60 | that.element.fadeOut(100, function () {that.inner.text('');}); | |
61 | that.timeout = null; |
|
61 | that.timeout = null; | |
62 | }, timeout); |
|
62 | }, timeout); | |
63 | } else { |
|
63 | } else { | |
64 | this.element.click(function() { |
|
64 | this.element.click(function() { | |
65 | if( callback() !== false ) { |
|
65 | if( callback() !== false ) { | |
66 | that.element.fadeOut(100, function () {that.inner.text('');}); |
|
66 | that.element.fadeOut(100, function () {that.inner.text('');}); | |
67 | that.element.unbind('click'); |
|
67 | that.element.unbind('click'); | |
68 | } |
|
68 | } | |
69 | if (that.timeout !== undefined) { |
|
69 | if (that.timeout !== undefined) { | |
70 | that.timeout = undefined; |
|
70 | that.timeout = undefined; | |
71 | clearTimeout(that.timeout); |
|
71 | clearTimeout(that.timeout); | |
72 | } |
|
72 | } | |
73 | }); |
|
73 | }); | |
74 | } |
|
74 | } | |
75 | }; |
|
75 | }; | |
76 |
|
76 | |||
77 |
|
77 | |||
78 | NotificationWidget.prototype.info = function (msg, timeout, click_callback, options) { |
|
78 | NotificationWidget.prototype.info = function (msg, timeout, click_callback, options) { | |
79 | var options = options || {}; |
|
79 | var options = options || {}; | |
80 | options.class = options.class +' info'; |
|
80 | options.class = options.class +' info'; | |
81 | var timeout = timeout || 3500; |
|
81 | var timeout = timeout || 3500; | |
82 | this.set_message(msg, timeout, click_callback, options); |
|
82 | this.set_message(msg, timeout, click_callback, options); | |
83 | } |
|
83 | } | |
84 | NotificationWidget.prototype.warning = function (msg, timeout, click_callback, options) { |
|
84 | NotificationWidget.prototype.warning = function (msg, timeout, click_callback, options) { | |
85 | var options = options || {}; |
|
85 | var options = options || {}; | |
86 | options.class = options.class +' warning'; |
|
86 | options.class = options.class +' warning'; | |
87 | this.set_message(msg, timeout, click_callback, options); |
|
87 | this.set_message(msg, timeout, click_callback, options); | |
88 | } |
|
88 | } | |
89 | NotificationWidget.prototype.danger = function (msg, timeout, click_callback, options) { |
|
89 | NotificationWidget.prototype.danger = function (msg, timeout, click_callback, options) { | |
90 | var options = options || {}; |
|
90 | var options = options || {}; | |
91 | options.class = options.class +' danger'; |
|
91 | options.class = options.class +' danger'; | |
92 | this.set_message(msg, timeout, click_callback, options); |
|
92 | this.set_message(msg, timeout, click_callback, options); | |
93 | } |
|
93 | } | |
94 |
|
94 | |||
95 |
|
95 | |||
96 | NotificationWidget.prototype.get_message = function () { |
|
96 | NotificationWidget.prototype.get_message = function () { | |
97 | return this.inner.html(); |
|
97 | return this.inner.html(); | |
98 | }; |
|
98 | }; | |
99 |
|
99 | |||
100 | // For backwards compatibility. |
|
100 | // For backwards compatibility. | |
101 | IPython.NotificationWidget = NotificationWidget; |
|
101 | IPython.NotificationWidget = NotificationWidget; | |
102 |
|
102 | |||
103 | return {'NotificationWidget': NotificationWidget}; |
|
103 | return {'NotificationWidget': NotificationWidget}; | |
104 | }); |
|
104 | }); |
@@ -1,31 +1,31 | |||||
1 | .notification_widget { |
|
1 | .notification_widget { | |
2 | color: @navbar-default-link-color; |
|
2 | color: @navbar-default-link-color; | |
3 | padding: 1px 12px; |
|
3 | padding: 1px 12px; | |
4 | margin: 2px 4px; |
|
4 | margin: 2px 4px; | |
5 | z-index: 10; |
|
5 | z-index: 10; | |
6 | border-radius: @border-radius-base; |
|
6 | border-radius: @border-radius-base; | |
7 | background: @notification_widget_bg; |
|
7 | background: @notification_widget_bg; | |
8 | .pull-right(); |
|
8 | .pull-right(); | |
9 | .border-box-sizing(); |
|
9 | .border-box-sizing(); | |
10 | .btn(); |
|
10 | .btn(); | |
11 | .btn-default(); |
|
11 | .btn-default(); | |
12 | .btn-xs(); |
|
12 | .btn-xs(); | |
13 |
|
13 | |||
14 | &.span { |
|
14 | &.span { | |
15 | padding-right:2px; |
|
15 | padding-right:2px; | |
16 | } |
|
16 | } | |
17 | } |
|
17 | } | |
18 |
|
18 | |||
19 | .notification_widget.warning { |
|
19 | .notification_widget.warning { | |
20 | .btn-warning() |
|
20 | .btn-warning(); | |
21 | } |
|
21 | } | |
22 | .notification_widget.success { |
|
22 | .notification_widget.success { | |
23 | .btn-success() |
|
23 | .btn-success(); | |
24 | } |
|
24 | } | |
25 | .notification_widget.info { |
|
25 | .notification_widget.info { | |
26 | .btn-info() |
|
26 | .btn-info(); | |
27 | } |
|
27 | } | |
28 | .notification_widget.danger { |
|
28 | .notification_widget.danger { | |
29 | .btn-danger() |
|
29 | .btn-danger(); | |
30 | } |
|
30 | } | |
31 |
|
31 |
General Comments 0
You need to be logged in to leave comments.
Login now