Remove $el_to_style from the widget javascript code; '' now defaults to this.$el

This seems to make it easiest to select the top-level element.  An alternative is to use special syntax for top-level elements, like in https://github.com/ipython/ipython/pull/6185

This will be followed up by other fixes that let the user set specific common properties of different elements.

This change also adds the .addBack() call, which means that nonempty selectors now apply to this.$el and its descendants, rather than just the descendants of this.$el.
pull/37/head
Jason Grout 12 years ago
parent c007debe3a
commit eccc20ce1a

@ -466,19 +466,11 @@ define(["widgets/js/manager",
_get_selector_element: function (selector) {
// Get the elements via the css selector.
// If the selector is blank, apply the style to the $el_to_style
// element. If the $el_to_style element is not defined, use apply
// the style to the view's element.
var elements;
if (!selector) {
if (this.$el_to_style === undefined) {
elements = this.$el;
} else {
elements = this.$el_to_style;
}
elements = this.$el;
} else {
elements = this.$el.find(selector);
elements = this.$el.find(selector).addBack(selector);
}
return elements;
},

@ -21,7 +21,6 @@ define([
.appendTo(this.$el)
.click($.proxy(this.handle_click, this));
this.$el_to_style = this.$checkbox; // Set default element to style
this.update(); // Set defaults.
},

@ -158,7 +158,6 @@ define([
that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
});
this.$el_to_style = this.$body;
this._shown_once = false;
this.popped_out = true;
@ -272,7 +271,7 @@ define([
// "modal" - select the modal div
// "modal [selector]" - select element(s) within the modal div.
// "[selector]" - select elements within $el
// "" - select the $el_to_style
// "" - select the $el
if (selector.substring(0, 5) == 'modal') {
if (selector == 'modal') {
return this.$window;

@ -24,7 +24,6 @@ define([
this.$slider_container = $('<div />')
.addClass('widget-hslider')
.append(this.$slider);
this.$el_to_style = this.$slider_container; // Set default element to style
this.$el.append(this.$slider_container);
this.$readout = $('<div/>')
@ -158,7 +157,6 @@ define([
.addClass('form-control')
.addClass('widget-numeric-text')
.appendTo(this.$el);
this.$el_to_style = this.$textbox; // Set default element to style
this.update(); // Set defaults.
},
@ -262,7 +260,6 @@ define([
.addClass('progress')
.addClass('widget-progress')
.appendTo(this.$el);
this.$el_to_style = this.$progress; // Set default element to style
this.$bar = $('<div />')
.addClass('progress-bar')
.css('width', '50%')

@ -21,7 +21,6 @@ define([
.addClass('widget_item')
.addClass('btn-group')
.appendTo(this.$el);
this.$el_to_style = this.$buttongroup; // Set default element to style
this.$droplabel = $('<button />')
.addClass('btn btn-default')
.addClass('widget-combo-btn')
@ -119,7 +118,6 @@ define([
this.$container = $('<div />')
.appendTo(this.$el)
.addClass('widget-radio-box');
this.$el_to_style = this.$container; // Set default element to style
this.update();
},
@ -210,7 +208,6 @@ define([
.addClass('btn-group')
.attr('data-toggle', 'buttons-radio')
.appendTo(this.$el);
this.$el_to_style = this.$buttongroup; // Set default element to style
this.update();
},
@ -302,7 +299,6 @@ define([
.addClass('widget-listbox form-control')
.attr('size', 6)
.appendTo(this.$el);
this.$el_to_style = this.$listbox; // Set default element to style
this.update();
},

@ -56,7 +56,6 @@ define([
.attr('rows', 5)
.addClass('widget-text form-control')
.appendTo(this.$el);
this.$el_to_style = this.$textbox; // Set default element to style
this.update(); // Set defaults.
this.model.on('msg:custom', $.proxy(this._handle_textarea_msg, this));
@ -140,7 +139,6 @@ define([
.addClass('input')
.addClass('widget-text form-control')
.appendTo(this.$el);
this.$el_to_style = this.$textbox; // Set default element to style
this.update(); // Set defaults.
this.model.on('change:placeholder', function(model, value, options) {
this.update_placeholder(value);

@ -392,10 +392,7 @@ class DOMWidget(Widget):
selector: unicode (optional, kwarg only)
JQuery selector to use to apply the CSS key/value. If no selector
is provided, an empty selector is used. An empty selector makes the
front-end try to apply the css to a default element. The default
element is an attribute unique to each view, which is a DOM element
of the view that should be styled with common CSS (see
`$el_to_style` in the Javascript code).
front-end try to apply the css to the top-level element.
"""
if value is None:
css_dict = dict_or_key

Loading…
Cancel
Save