##// END OF EJS Templates
upstream » ipython
RSS

Clone from https://github.com/ipython/ipython.git

Use require.js to load widget manager.
Jonathan Frederic -
Show More
Show file before | Show file after | Hide comments
@@ -1,17 +1,19
1 var ContainerModel = IPython.WidgetModel.extend({});
1 require(["notebook/js/widget"], function () {
2 IPython.notebook.widget_manager.register_widget_model('container_widget', ContainerModel);
2 var ContainerModel = IPython.WidgetModel.extend({});
3 IPython.notebook.widget_manager.register_widget_model('container_widget', ContainerModel);
3
4
4 var ContainerView = IPython.WidgetView.extend({
5 var ContainerView = IPython.WidgetView.extend({
5
6
6 render : function(){
7 render : function(){
7 this.$el.html('');
8 this.$el.html('');
8 this.$container = $('<div />')
9 this.$container = $('<div />')
9 .addClass('container')
10 .addClass('container')
10 .addClass(this.model.comm.comm_id);
11 .addClass(this.model.comm.comm_id);
11 this.$el.append(this.$container);
12 this.$el.append(this.$container);
12 },
13 },
13
14
14 update : function(){},
15 update : function(){},
15 });
16 });
16
17
17 IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView);
18 IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView);
19 }); No newline at end of file
Show file before | Show file after | Hide comments
@@ -1,119 +1,121
1 var FloatRangeWidgetModel = IPython.WidgetModel.extend({});
1 require(["notebook/js/widget"], function () {
2 IPython.notebook.widget_manager.register_widget_model('FloatRangeWidgetModel', FloatRangeWidgetModel);
2 var FloatRangeWidgetModel = IPython.WidgetModel.extend({});
3 IPython.notebook.widget_manager.register_widget_model('FloatRangeWidgetModel', FloatRangeWidgetModel);
3
4
4 var FloatSliderView = IPython.WidgetView.extend({
5 var FloatSliderView = IPython.WidgetView.extend({
5
6 // Called when view is rendered.
7 render : function(){
8 this.$el
9 .html('')
10 .addClass(this.model.comm.comm_id);
11 this.$slider = $('<div />')
12 .slider({})
13 .addClass('slider');
14
6
15 // Put the slider in a container
7 // Called when view is rendered.
16 this.$slider_container = $('<div />')
8 render : function(){
17 .css('padding-top', '4px')
9 this.$el
18 .css('padding-bottom', '4px')
10 .html('')
19 .append(this.$slider);
11 .addClass(this.model.comm.comm_id);
20 this.$el.append(this.$slider_container);
12 this.$slider = $('<div />')
13 .slider({})
14 .addClass('slider');
15
16 // Put the slider in a container
17 this.$slider_container = $('<div />')
18 .css('padding-top', '4px')
19 .css('padding-bottom', '4px')
20 .append(this.$slider);
21 this.$el.append(this.$slider_container);
22
23 // Set defaults.
24 this.update();
25 },
21
26
22 // Set defaults.
27 // Handles: Backend -> Frontend Sync
23 this.update();
28 // Frontent -> Frontend Sync
24 },
29 update : function(){
25
30 // Slider related keys.
26 // Handles: Backend -> Frontend Sync
31 var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
27 // Frontent -> Frontend Sync
32 for (var index in _keys) {
28 update : function(){
33 var key = _keys[index];
29 // Slider related keys.
34 if (this.model.get(key) != undefined) {
30 var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
35 this.$slider.slider("option", key, this.model.get(key));
31 for (var index in _keys) {
36 }
32 var key = _keys[index];
33 if (this.model.get(key) != undefined) {
34 this.$slider.slider("option", key, this.model.get(key));
35 }
37 }
36 }
38 },
37 },
39
38
40 // Handles: User input
39 // Handles: User input
41 events: { "slide" : "handleSliderChange" },
40 events: { "slide" : "handleSliderChange" },
42 handleSliderChange: function(e, ui) {
41 handleSliderChange: function(e, ui) {
43 this.model.set('value', ui.value);
42 this.model.set('value', ui.value);
44 this.model.apply(this);
43 this.model.apply(this);
45 },
44 },
46 });
45 });
46
47
47 IPython.notebook.widget_manager.register_widget_view('FloatSliderView', FloatSliderView);
48 IPython.notebook.widget_manager.register_widget_view('FloatSliderView', FloatSliderView);
48
49
49
50
50 var FloatTextView = IPython.WidgetView.extend({
51 var FloatTextView = IPython.WidgetView.extend({
51
52 // Called when view is rendered.
53 render : function(){
54 this.$el
55 .html('')
56 .addClass(this.model.comm.comm_id);
57 this.$textbox = $('<input type="text" />')
58 .addClass('input')
59 .appendTo(this.$el);
60 this.update(); // Set defaults.
61 },
62
63 // Handles: Backend -> Frontend Sync
64 // Frontent -> Frontend Sync
65 update : function(){
66 var value = this.model.get('value');
67 if (!this.changing && parseFloat(this.$textbox.val()) != value) {
68 this.$textbox.val(value);
69 }
70
52
71 if (this.model.get('disabled')) {
53 // Called when view is rendered.
72 this.$textbox.attr('disabled','disabled');
54 render : function(){
73 } else {
55 this.$el
74 this.$textbox.removeAttr('disabled');
56 .html('')
75 }
57 .addClass(this.model.comm.comm_id);
76 },
58 this.$textbox = $('<input type="text" />')
77
59 .addClass('input')
78
60 .appendTo(this.$el);
79 events: {"keyup input" : "handleChanging",
61 this.update(); // Set defaults.
80 "paste input" : "handleChanging",
62 },
81 "cut input" : "handleChanging",
63
82 "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
64 // Handles: Backend -> Frontend Sync
83
65 // Frontent -> Frontend Sync
84 // Handles and validates user input.
66 update : function(){
85 handleChanging: function(e) {
67 var value = this.model.get('value');
68 if (!this.changing && parseFloat(this.$textbox.val()) != value) {
69 this.$textbox.val(value);
70 }
71
72 if (this.model.get('disabled')) {
73 this.$textbox.attr('disabled','disabled');
74 } else {
75 this.$textbox.removeAttr('disabled');
76 }
77 },
86
78
87 // Try to parse value as a float.
88 var numericalValue = 0.0;
89 if (e.target.value != '') {
90 numericalValue = parseFloat(e.target.value);
91 }
92
79
93 // If parse failed, reset value to value stored in model.
80 events: {"keyup input" : "handleChanging",
94 if (isNaN(numericalValue)) {
81 "paste input" : "handleChanging",
95 e.target.value = this.model.get('value');
82 "cut input" : "handleChanging",
96 } else if (!isNaN(numericalValue)) {
83 "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
97 numericalValue = Math.min(this.model.get('max'), numericalValue);
84
98 numericalValue = Math.max(this.model.get('min'), numericalValue);
85 // Handles and validates user input.
86 handleChanging: function(e) {
99
87
100 // Apply the value if it has changed.
88 // Try to parse value as a float.
101 if (numericalValue != this.model.get('value')) {
89 var numericalValue = 0.0;
102 this.changing = true;
90 if (e.target.value != '') {
103 this.model.set('value', numericalValue);
91 numericalValue = parseFloat(e.target.value);
104 this.model.apply(this);
92 }
105 this.changing = false;
93
94 // If parse failed, reset value to value stored in model.
95 if (isNaN(numericalValue)) {
96 e.target.value = this.model.get('value');
97 } else if (!isNaN(numericalValue)) {
98 numericalValue = Math.min(this.model.get('max'), numericalValue);
99 numericalValue = Math.max(this.model.get('min'), numericalValue);
100
101 // Apply the value if it has changed.
102 if (numericalValue != this.model.get('value')) {
103 this.changing = true;
104 this.model.set('value', numericalValue);
105 this.model.apply(this);
106 this.changing = false;
107 }
108 }
109 },
110
111 // Applies validated input.
112 handleChanged: function(e) {
113 // Update the textbox
114 if (this.model.get('value') != e.target.value) {
115 e.target.value = this.model.get('value');
106 }
116 }
107 }
117 }
108 },
118 });
109
110 // Applies validated input.
111 handleChanged: function(e) {
112 // Update the textbox
113 if (this.model.get('value') != e.target.value) {
114 e.target.value = this.model.get('value');
115 }
116 }
117 });
118
119
119 IPython.notebook.widget_manager.register_widget_view('FloatTextView', FloatTextView);
120 IPython.notebook.widget_manager.register_widget_view('FloatTextView', FloatTextView);
121 }); No newline at end of file
Show file before | Show file after | Hide comments
@@ -1,117 +1,119
1 var IntRangeWidgetModel = IPython.WidgetModel.extend({});
1 require(["notebook/js/widget"], function () {
2 IPython.notebook.widget_manager.register_widget_model('IntRangeWidgetModel', IntRangeWidgetModel);
2 var IntRangeWidgetModel = IPython.WidgetModel.extend({});
3 IPython.notebook.widget_manager.register_widget_model('IntRangeWidgetModel', IntRangeWidgetModel);
3
4
4 var IntSliderView = IPython.WidgetView.extend({
5 var IntSliderView = IPython.WidgetView.extend({
5
6 // Called when view is rendered.
7 render : function(){
8 this.$el.html('');
9 this.$slider = $('<div />')
10 .slider({})
11 .addClass('slider');
12
6
13 // Put the slider in a container
7 // Called when view is rendered.
14 this.$slider_container = $('<div />')
8 render : function(){
15 .css('padding-top', '4px')
9 this.$el.html('');
16 .css('padding-bottom', '4px')
10 this.$slider = $('<div />')
17 .addClass(this.model.comm.comm_id)
11 .slider({})
18 .append(this.$slider);
12 .addClass('slider');
19 this.$el.append(this.$slider_container);
13
14 // Put the slider in a container
15 this.$slider_container = $('<div />')
16 .css('padding-top', '4px')
17 .css('padding-bottom', '4px')
18 .addClass(this.model.comm.comm_id)
19 .append(this.$slider);
20 this.$el.append(this.$slider_container);
21
22 // Set defaults.
23 this.update();
24 },
20
25
21 // Set defaults.
26 // Handles: Backend -> Frontend Sync
22 this.update();
27 // Frontent -> Frontend Sync
23 },
28 update : function(){
24
29 // Slider related keys.
25 // Handles: Backend -> Frontend Sync
30 var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
26 // Frontent -> Frontend Sync
31 for (var index in _keys) {
27 update : function(){
32 var key = _keys[index];
28 // Slider related keys.
33 if (this.model.get(key) != undefined) {
29 var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
34 this.$slider.slider("option", key, this.model.get(key));
30 for (var index in _keys) {
35 }
31 var key = _keys[index];
32 if (this.model.get(key) != undefined) {
33 this.$slider.slider("option", key, this.model.get(key));
34 }
36 }
35 }
37 },
36 },
38
37
39 // Handles: User input
38 // Handles: User input
40 events: { "slide" : "handleSliderChange" },
39 events: { "slide" : "handleSliderChange" },
41 handleSliderChange: function(e, ui) {
40 handleSliderChange: function(e, ui) {
42 this.model.set('value', ~~ui.value); // Double bit-wise not to truncate decimel
41 this.model.set('value', ~~ui.value); // Double bit-wise not to truncate decimel
43 this.model.apply(this);
42 this.model.apply(this);
44 },
43 },
45 });
44 });
45
46
46 IPython.notebook.widget_manager.register_widget_view('IntSliderView', IntSliderView);
47 IPython.notebook.widget_manager.register_widget_view('IntSliderView', IntSliderView);
47
48
48 var IntTextView = IPython.WidgetView.extend({
49 var IntTextView = IPython.WidgetView.extend({
49
50 // Called when view is rendered.
51 render : function(){
52 this.$el
53 .html('')
54 .addClass(this.model.comm.comm_id);
55 this.$textbox = $('<input type="text" />')
56 .addClass('input')
57 .appendTo(this.$el);
58 this.update(); // Set defaults.
59 },
60
61 // Handles: Backend -> Frontend Sync
62 // Frontent -> Frontend Sync
63 update : function(){
64 var value = this.model.get('value');
65 if (!this.changing && parseInt(this.$textbox.val()) != value) {
66 this.$textbox.val(value);
67 }
68
50
69 if (this.model.get('disabled')) {
51 // Called when view is rendered.
70 this.$textbox.attr('disabled','disabled');
52 render : function(){
71 } else {
53 this.$el
72 this.$textbox.removeAttr('disabled');
54 .html('')
73 }
55 .addClass(this.model.comm.comm_id);
74 },
56 this.$textbox = $('<input type="text" />')
75
57 .addClass('input')
76
58 .appendTo(this.$el);
77 events: {"keyup input" : "handleChanging",
59 this.update(); // Set defaults.
78 "paste input" : "handleChanging",
60 },
79 "cut input" : "handleChanging",
61
80 "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
62 // Handles: Backend -> Frontend Sync
81
63 // Frontent -> Frontend Sync
82 // Handles and validates user input.
64 update : function(){
83 handleChanging: function(e) {
65 var value = this.model.get('value');
66 if (!this.changing && parseInt(this.$textbox.val()) != value) {
67 this.$textbox.val(value);
68 }
69
70 if (this.model.get('disabled')) {
71 this.$textbox.attr('disabled','disabled');
72 } else {
73 this.$textbox.removeAttr('disabled');
74 }
75 },
84
76
85 // Try to parse value as a float.
86 var numericalValue = 0;
87 if (e.target.value != '') {
88 numericalValue = parseInt(e.target.value);
89 }
90
77
91 // If parse failed, reset value to value stored in model.
78 events: {"keyup input" : "handleChanging",
92 if (isNaN(numericalValue)) {
79 "paste input" : "handleChanging",
93 e.target.value = this.model.get('value');
80 "cut input" : "handleChanging",
94 } else if (!isNaN(numericalValue)) {
81 "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
95 numericalValue = Math.min(this.model.get('max'), numericalValue);
82
96 numericalValue = Math.max(this.model.get('min'), numericalValue);
83 // Handles and validates user input.
84 handleChanging: function(e) {
97
85
98 // Apply the value if it has changed.
86 // Try to parse value as a float.
99 if (numericalValue != this.model.get('value')) {
87 var numericalValue = 0;
100 this.changing = true;
88 if (e.target.value != '') {
101 this.model.set('value', numericalValue);
89 numericalValue = parseInt(e.target.value);
102 this.model.apply(this);
90 }
103 this.changing = false;
91
92 // If parse failed, reset value to value stored in model.
93 if (isNaN(numericalValue)) {
94 e.target.value = this.model.get('value');
95 } else if (!isNaN(numericalValue)) {
96 numericalValue = Math.min(this.model.get('max'), numericalValue);
97 numericalValue = Math.max(this.model.get('min'), numericalValue);
98
99 // Apply the value if it has changed.
100 if (numericalValue != this.model.get('value')) {
101 this.changing = true;
102 this.model.set('value', numericalValue);
103 this.model.apply(this);
104 this.changing = false;
105 }
106 }
107 },
108
109 // Applies validated input.
110 handleChanged: function(e) {
111 // Update the textbox
112 if (this.model.get('value') != e.target.value) {
113 e.target.value = this.model.get('value');
104 }
114 }
105 }
115 }
106 },
116 });
107
108 // Applies validated input.
109 handleChanged: function(e) {
110 // Update the textbox
111 if (this.model.get('value') != e.target.value) {
112 e.target.value = this.model.get('value');
113 }
114 }
115 });
116
117
117 IPython.notebook.widget_manager.register_widget_view('IntTextView', IntTextView);
118 IPython.notebook.widget_manager.register_widget_view('IntTextView', IntTextView);
119 }); No newline at end of file
Show file before | Show file after | Hide comments
@@ -1,128 +1,130
1 var SelectionWidgetModel = IPython.WidgetModel.extend({});
1 require(["notebook/js/widget"], function () {
2 IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
2 var SelectionWidgetModel = IPython.WidgetModel.extend({});
3 IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
3
4
4 var DropdownView = IPython.WidgetView.extend({
5 var DropdownView = IPython.WidgetView.extend({
5
6 // Called when view is rendered.
7 render : function(){
8
6
9 this.$el
7 // Called when view is rendered.
10 .html('')
8 render : function(){
11 .addClass(this.model.comm.comm_id);
12 this.$buttongroup = $('<div />')
13 .addClass('btn-group')
14 .appendTo(this.$el);
15 this.$droplabel = $('<button />')
16 .addClass('btn')
17 .appendTo(this.$buttongroup);
18 this.$dropbutton = $('<button />')
19 .addClass('btn')
20 .addClass('dropdown-toggle')
21 .attr('data-toggle', 'dropdown')
22 .html('<span class="caret"></span>')
23 .appendTo(this.$buttongroup);
24 this.$droplist = $('<ul />')
25 .addClass('dropdown-menu')
26 .appendTo(this.$buttongroup);
27
28 // Set defaults.
29 this.update();
30 },
31
32 // Handles: Backend -> Frontend Sync
33 // Frontent -> Frontend Sync
34 update : function(){
35 this.$droplabel.html(this.model.get('value'));
36
37 var items = this.model.get('values');
38 this.$droplist.html('');
39 for (var index in items) {
40 var that = this;
41 var item_button = $('<a href="#"/>')
42 .html(items[index])
43 .on('click', function(e){
44 that.model.set('value', $(e.target).html(), this );
45 })
46
9
47 this.$droplist.append($('<li />').append(item_button))
10 this.$el
48 }
11 .html('')
49
12 .addClass(this.model.comm.comm_id);
50 if (this.model.get('disabled')) {
13 this.$buttongroup = $('<div />')
51 this.$buttongroup.attr('disabled','disabled');
14 .addClass('btn-group')
52 this.$droplabel.attr('disabled','disabled');
15 .appendTo(this.$el);
53 this.$dropbutton.attr('disabled','disabled');
16 this.$droplabel = $('<button />')
54 this.$droplist.attr('disabled','disabled');
17 .addClass('btn')
55 } else {
18 .appendTo(this.$buttongroup);
56 this.$buttongroup.removeAttr('disabled');
19 this.$dropbutton = $('<button />')
57 this.$droplabel.removeAttr('disabled');
20 .addClass('btn')
58 this.$dropbutton.removeAttr('disabled');
21 .addClass('dropdown-toggle')
59 this.$droplist.removeAttr('disabled');
22 .attr('data-toggle', 'dropdown')
60 }
23 .html('<span class="caret"></span>')
61 },
24 .appendTo(this.$buttongroup);
62
25 this.$droplist = $('<ul />')
63 });
26 .addClass('dropdown-menu')
64
27 .appendTo(this.$buttongroup);
65 IPython.notebook.widget_manager.register_widget_view('DropdownView', DropdownView);
28
66 var RadioButtonView = IPython.WidgetView.extend({
29 // Set defaults.
67
30 this.update();
68 // Called when view is rendered.
31 },
69 render : function(){
70 this.$el
71 .html('')
72 .addClass(this.model.comm.comm_id);
73 this.update();
74 },
75
76 // Handles: Backend -> Frontend Sync
77 // Frontent -> Frontend Sync
78 update : function(){
79
32
80 // Add missing items to the DOM.
33 // Handles: Backend -> Frontend Sync
81 var items = this.model.get('values');
34 // Frontent -> Frontend Sync
82 for (var index in items) {
35 update : function(){
83 var item_query = ' :input[value="' + items[index] + '"]';
36 this.$droplabel.html(this.model.get('value'));
84 if (this.$el.find(item_query).length == 0) {
37
85 var $label = $('<label />')
38 var items = this.model.get('values');
86 .addClass('radio')
39 this.$droplist.html('');
87 .html(items[index])
40 for (var index in items) {
88 .appendTo(this.$el);
89
90 var that = this;
41 var that = this;
91 $('<input />')
42 var item_button = $('<a href="#"/>')
92 .attr('type', 'radio')
43 .html(items[index])
93 .addClass(this.model)
94 .val(items[index])
95 .prependTo($label)
96 .on('click', function(e){
44 .on('click', function(e){
97 that.model.set('value', $(e.target).val(), this);
45 that.model.set('value', $(e.target).html(), this );
98 that.model.apply();
46 })
99 });
47
48 this.$droplist.append($('<li />').append(item_button))
100 }
49 }
101
50
102 if (this.model.get('value') == items[index]) {
51 if (this.model.get('disabled')) {
103 this.$el.find(item_query).prop('checked', true);
52 this.$buttongroup.attr('disabled','disabled');
53 this.$droplabel.attr('disabled','disabled');
54 this.$dropbutton.attr('disabled','disabled');
55 this.$droplist.attr('disabled','disabled');
104 } else {
56 } else {
105 this.$el.find(item_query).prop('checked', false);
57 this.$buttongroup.removeAttr('disabled');
58 this.$droplabel.removeAttr('disabled');
59 this.$dropbutton.removeAttr('disabled');
60 this.$droplist.removeAttr('disabled');
106 }
61 }
107 }
62 },
108
63
109 // Remove items that no longer exist.
64 });
110 this.$el.find('input').each(function(i, obj) {
65
111 var value = $(obj).val();
66 IPython.notebook.widget_manager.register_widget_view('DropdownView', DropdownView);
112 var found = false;
67 var RadioButtonView = IPython.WidgetView.extend({
68
69 // Called when view is rendered.
70 render : function(){
71 this.$el
72 .html('')
73 .addClass(this.model.comm.comm_id);
74 this.update();
75 },
76
77 // Handles: Backend -> Frontend Sync
78 // Frontent -> Frontend Sync
79 update : function(){
80
81 // Add missing items to the DOM.
82 var items = this.model.get('values');
113 for (var index in items) {
83 for (var index in items) {
114 if (items[index] == value) {
84 var item_query = ' :input[value="' + items[index] + '"]';
115 found = true;
85 if (this.$el.find(item_query).length == 0) {
116 break;
86 var $label = $('<label />')
87 .addClass('radio')
88 .html(items[index])
89 .appendTo(this.$el);
90
91 var that = this;
92 $('<input />')
93 .attr('type', 'radio')
94 .addClass(this.model)
95 .val(items[index])
96 .prependTo($label)
97 .on('click', function(e){
98 that.model.set('value', $(e.target).val(), this);
99 that.model.apply();
100 });
101 }
102
103 if (this.model.get('value') == items[index]) {
104 this.$el.find(item_query).prop('checked', true);
105 } else {
106 this.$el.find(item_query).prop('checked', false);
117 }
107 }
118 }
108 }
119
109
120 if (!found) {
110 // Remove items that no longer exist.
121 $(obj).parent().remove();
111 this.$el.find('input').each(function(i, obj) {
122 }
112 var value = $(obj).val();
123 });
113 var found = false;
124 },
114 for (var index in items) {
125
115 if (items[index] == value) {
126 });
116 found = true;
117 break;
118 }
119 }
120
121 if (!found) {
122 $(obj).parent().remove();
123 }
124 });
125 },
126
127 });
127
128
128 IPython.notebook.widget_manager.register_widget_view('RadioButtonView', RadioButtonView);
129 IPython.notebook.widget_manager.register_widget_view('RadioButtonView', RadioButtonView);
130 }); No newline at end of file
Show file before | Show file after | Hide comments
@@ -1,74 +1,77
1 var StringWidgetModel = IPython.WidgetModel.extend({});
1 require(["notebook/js/widget"], function () {
2 IPython.notebook.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel);
2 var StringWidgetModel = IPython.WidgetModel.extend({});
3 IPython.notebook.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel);
3
4
4 var TextareaView = IPython.WidgetView.extend({
5 var TextareaView = IPython.WidgetView.extend({
5
6
6 // Called when view is rendered.
7 // Called when view is rendered.
7 render : function(){
8 render : function(){
8 this.$el
9 this.$el
9 .html('')
10 .html('')
10 .addClass(this.model.comm.comm_id);
11 .addClass(this.model.comm.comm_id);
11 this.$textbox = $('<textarea />')
12 this.$textbox = $('<textarea />')
12 .attr('rows', 5)
13 .attr('rows', 5)
13 .appendTo(this.$el);
14 .appendTo(this.$el);
14 this.update(); // Set defaults.
15 this.update(); // Set defaults.
15 },
16 },
16
17
17 // Handles: Backend -> Frontend Sync
18 // Handles: Backend -> Frontend Sync
18 // Frontent -> Frontend Sync
19 // Frontent -> Frontend Sync
19 update : function(){
20 update : function(){
20 if (!this.user_invoked_update) {
21 if (!this.user_invoked_update) {
21 this.$textbox.val(this.model.get('value'));
22 this.$textbox.val(this.model.get('value'));
22 }
23 }
23 },
24 },
24
25
25 events: {"keyup textarea" : "handleChanging",
26 events: {"keyup textarea" : "handleChanging",
26 "paste textarea" : "handleChanging",
27 "paste textarea" : "handleChanging",
27 "cut textarea" : "handleChanging"},
28 "cut textarea" : "handleChanging"},
28
29
29 // Handles and validates user input.
30 // Handles and validates user input.
30 handleChanging: function(e) {
31 handleChanging: function(e) {
31 this.user_invoked_update = true;
32 this.user_invoked_update = true;
32 this.model.set('value', e.target.value);
33 this.model.set('value', e.target.value);
33 this.model.apply(this);
34 this.model.apply(this);
34 this.user_invoked_update = false;
35 this.user_invoked_update = false;
35 },
36 },
36 });
37 });
37
38
38 IPython.notebook.widget_manager.register_widget_view('TextareaView', TextareaView);
39 IPython.notebook.widget_manager.register_widget_view('TextareaView', TextareaView);
39
40
40 var TextboxView = IPython.WidgetView.extend({
41 var TextboxView = IPython.WidgetView.extend({
41
42
42 // Called when view is rendered.
43 // Called when view is rendered.
43 render : function(){
44 render : function(){
44 this.$el
45 this.$el
45 .html('')
46 .html('')
46 .addClass(this.model.comm.comm_id);
47 .addClass(this.model.comm.comm_id);
47 this.$textbox = $('<input type="text" />')
48 this.$textbox = $('<input type="text" />')
48 .addClass('input')
49 .addClass('input')
49 .appendTo(this.$el);
50 .appendTo(this.$el);
50 this.update(); // Set defaults.
51 this.update(); // Set defaults.
51 },
52 },
52
53
53 // Handles: Backend -> Frontend Sync
54 // Handles: Backend -> Frontend Sync
54 // Frontent -> Frontend Sync
55 // Frontent -> Frontend Sync
55 update : function(){
56 update : function(){
56 if (!this.user_invoked_update) {
57 if (!this.user_invoked_update) {
57 this.$textbox.val(this.model.get('value'));
58 this.$textbox.val(this.model.get('value'));
58 }
59 }
59 },
60 },
60
61
61 events: {"keyup input" : "handleChanging",
62 events: {"keyup input" : "handleChanging",
62 "paste input" : "handleChanging",
63 "paste input" : "handleChanging",
63 "cut input" : "handleChanging"},
64 "cut input" : "handleChanging"},
64
65
65 // Handles and validates user input.
66 // Handles and validates user input.
66 handleChanging: function(e) {
67 handleChanging: function(e) {
67 this.user_invoked_update = true;
68 this.user_invoked_update = true;
68 this.model.set('value', e.target.value);
69 this.model.set('value', e.target.value);
69 this.model.apply(this);
70 this.model.apply(this);
70 this.user_invoked_update = false;
71 this.user_invoked_update = false;
71 },
72 },
72 });
73 });
73
74
74 IPython.notebook.widget_manager.register_widget_view('TextboxView', TextboxView);
75 IPython.notebook.widget_manager.register_widget_view('TextboxView', TextboxView);
76
77 }); No newline at end of file
General Comments 0
You need to be logged in to leave comments. Login now