Show More
@@ -25,17 +25,22 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||
|
25 | 25 | .appendTo(this.$el) |
|
26 | 26 | .addClass('widget-hlabel') |
|
27 | 27 | .hide(); |
|
28 | ||
|
28 | 29 | this.$slider = $('<div />') |
|
29 | 30 | .slider({}) |
|
30 | 31 | .addClass('slider'); |
|
31 | ||
|
32 | 32 | // Put the slider in a container |
|
33 | 33 | this.$slider_container = $('<div />') |
|
34 | 34 | .addClass('widget-hslider') |
|
35 |
.append(this.$slider) |
|
|
35 | .append(this.$slider) | |
|
36 | 36 | this.$el_to_style = this.$slider_container; // Set default element to style |
|
37 | 37 | this.$el.append(this.$slider_container); |
|
38 | 38 | |
|
39 | this.$readout = $('<div/>') | |
|
40 | .appendTo(this.$el) | |
|
41 | .addClass('widget-hreadout') | |
|
42 | .hide(); | |
|
43 | ||
|
39 | 44 | // Set defaults. |
|
40 | 45 | this.update(); |
|
41 | 46 | }, |
@@ -71,6 +76,7 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||
|
71 | 76 | this.$slider.slider('option', 'orientation', orientation); |
|
72 | 77 | value = this.model.get('value'); |
|
73 | 78 | this.$slider.slider('option', 'value', value); |
|
79 | this.$readout.text(value); | |
|
74 | 80 | |
|
75 | 81 | // Use the right CSS classes for vertical & horizontal sliders |
|
76 | 82 | if (orientation=='vertical') { |
@@ -83,6 +89,9 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||
|
83 | 89 | this.$label |
|
84 | 90 | .removeClass('widget-hlabel') |
|
85 | 91 | .addClass('widget-vlabel'); |
|
92 | this.$readout | |
|
93 | .removeClass('widget-hreadout') | |
|
94 | .addClass('widget-vreadout'); | |
|
86 | 95 | |
|
87 | 96 | } else { |
|
88 | 97 | this.$slider_container |
@@ -94,6 +103,9 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||
|
94 | 103 | this.$label |
|
95 | 104 | .removeClass('widget-vlabel') |
|
96 | 105 | .addClass('widget-hlabel'); |
|
106 | this.$readout | |
|
107 | .removeClass('widget-vreadout') | |
|
108 | .addClass('widget-hreadout'); | |
|
97 | 109 | } |
|
98 | 110 | |
|
99 | 111 | var description = this.model.get('description'); |
@@ -103,6 +115,13 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||
|
103 | 115 | this.$label.text(description); |
|
104 | 116 | this.$label.show(); |
|
105 | 117 | } |
|
118 | ||
|
119 | var readout = this.model.get('readout'); | |
|
120 | if (readout) { | |
|
121 | this.$readout.show(); | |
|
122 | } else { | |
|
123 | this.$readout.hide(); | |
|
124 | } | |
|
106 | 125 | } |
|
107 | 126 | return IntSliderView.__super__.update.apply(this); |
|
108 | 127 | }, |
@@ -117,7 +136,9 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||
|
117 | 136 | |
|
118 | 137 | // Calling model.set will trigger all of the other views of the |
|
119 | 138 | // model to update. |
|
120 |
|
|
|
139 | var actual_value = this._validate_slide_value(ui.value); | |
|
140 | this.model.set('value', actual_value, {updated_view: this}); | |
|
141 | this.$readout.text(actual_value); | |
|
121 | 142 | this.touch(); |
|
122 | 143 | }, |
|
123 | 144 |
@@ -46,6 +46,20 b'' | |||
|
46 | 46 | vertical-align : text-bottom; |
|
47 | 47 | } |
|
48 | 48 | |
|
49 | .widget-hreadout { | |
|
50 | padding-left : 8px; | |
|
51 | padding-top : 3px; | |
|
52 | text-align : left; | |
|
53 | vertical-align : text-top; | |
|
54 | } | |
|
55 | ||
|
56 | .widget-vreadout { | |
|
57 | /* Vertical Label */ | |
|
58 | padding-top : 5px; | |
|
59 | text-align : center; | |
|
60 | vertical-align : text-top; | |
|
61 | } | |
|
62 | ||
|
49 | 63 | .slide-track { |
|
50 | 64 | /* Slider Track */ |
|
51 | 65 | border : 1px solid #CCCCCC; |
@@ -167,6 +167,8 b' div.cell.text_cell.rendered{padding:0}' | |||
|
167 | 167 | .widget-area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch}.widget-area .widget-subarea{padding:.44em .4em .4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2} |
|
168 | 168 | .widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top} |
|
169 | 169 | .widget-vlabel{padding-bottom:5px;text-align:center;vertical-align:text-bottom} |
|
170 | .widget-hreadout{padding-left:8px;padding-top:3px;text-align:left;vertical-align:text-top} | |
|
171 | .widget-vreadout{padding-top:5px;text-align:center;vertical-align:text-top} | |
|
170 | 172 | .slide-track{border:1px solid #ccc;background:#fff;border-radius:4px;} |
|
171 | 173 | .widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #ccc;background:#fff;border-radius:4px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch}.widget-hslider .ui-slider{border:0 !important;background:none !important;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important} |
|
172 | 174 | .widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #ccc;background:#fff;border-radius:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%}.widget-vslider .ui-slider{border:0 !important;background:none !important;margin-left:-4px;margin-top:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px} |
@@ -1381,6 +1381,8 b' div.cell.text_cell.rendered{padding:0}' | |||
|
1381 | 1381 | .widget-area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch}.widget-area .widget-subarea{padding:.44em .4em .4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2} |
|
1382 | 1382 | .widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top} |
|
1383 | 1383 | .widget-vlabel{padding-bottom:5px;text-align:center;vertical-align:text-bottom} |
|
1384 | .widget-hreadout{padding-left:8px;padding-top:3px;text-align:left;vertical-align:text-top} | |
|
1385 | .widget-vreadout{padding-top:5px;text-align:center;vertical-align:text-top} | |
|
1384 | 1386 | .slide-track{border:1px solid #ccc;background:#fff;border-radius:4px;} |
|
1385 | 1387 | .widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #ccc;background:#fff;border-radius:4px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch}.widget-hslider .ui-slider{border:0 !important;background:none !important;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important} |
|
1386 | 1388 | .widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #ccc;background:#fff;border-radius:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%}.widget-vslider .ui-slider{border:0 !important;background:none !important;margin-left:-4px;margin-top:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px} |
@@ -53,6 +53,7 b' class FloatSliderWidget(_BoundedFloatWidget):' | |||
|
53 | 53 | _view_name = Unicode('FloatSliderView', sync=True) |
|
54 | 54 | orientation = Enum([u'horizontal', u'vertical'], u'horizontal', |
|
55 | 55 | help="Vertical or horizontal.", sync=True) |
|
56 | readout = Bool(False, help="Display the current value of the slider next to it.", sync=True) | |
|
56 | 57 | |
|
57 | 58 | |
|
58 | 59 | class FloatProgressWidget(_BoundedFloatWidget): |
@@ -53,6 +53,7 b' class IntSliderWidget(_BoundedIntWidget):' | |||
|
53 | 53 | _view_name = Unicode('IntSliderView', sync=True) |
|
54 | 54 | orientation = Enum([u'horizontal', u'vertical'], u'horizontal', |
|
55 | 55 | help="Vertical or horizontal.", sync=True) |
|
56 | readout = Bool(False, help="Display the current value of the slider next to it.", sync=True) | |
|
56 | 57 | |
|
57 | 58 | |
|
58 | 59 | class IntProgressWidget(_BoundedIntWidget): |
General Comments 0
You need to be logged in to leave comments.
Login now