Merge pull request #6200 from SylvainCorlay/widget-changes

Partial update of DOMWidgetView styling and simplification of containers.
Jonathan Frederic 12 years ago
commit 0ee948efca

@ -405,17 +405,19 @@ define(["widgets/js/manager",
var DOMWidgetView = WidgetView.extend({
initialize: function (options) {
initialize: function (parameters) {
// Public constructor
// In the future we may want to make changes more granular
// (e.g., trigger on visible:change).
this.model.on('change', this.update, this);
this.model.on('msg:custom', this.on_msg, this);
DOMWidgetView.__super__.initialize.apply(this, arguments);
DOMWidgetView.__super__.initialize.apply(this, [parameters]);
this.on('displayed', this.show, this);
this.after_displayed(function() {
this.update_visible(this.model, this.model.get("visible"));
this.update_css(this.model, this.model.get("_css"));
}, this);
this.model.on('msg:custom', this.on_msg, this);
this.model.on('change:visible', this.update_visible, this);
this.model.on('change:_css', this.update_css, this);
},
on_msg: function(msg) {
// Handle DOM specific msgs.
switch(msg.msg_type) {
@ -432,25 +434,20 @@ define(["widgets/js/manager",
// Add a DOM class to an element.
this._get_selector_element(selector).addClass(class_list);
},
remove_class: function (selector, class_list) {
// Remove a DOM class from an element.
this._get_selector_element(selector).removeClass(class_list);
},
update: function () {
// Update the contents of this view
//
// Called when the model is changed. The model may have been
// changed by another view or by a state update from the back-end.
// The very first update seems to happen before the element is
// finished rendering so we use setTimeout to give the element time
// to render
update_visible: function(model, value) {
// Update visibility
this.$el.toggle(value);
},
update_css: function (model, css) {
// Update the css styling of this view.
var e = this.$el;
var visible = this.model.get('visible');
setTimeout(function() {e.toggle(visible);},0);
var css = this.model.get('_css');
if (css === undefined) {return;}
for (var i = 0; i < css.length; i++) {
// Apply the css traits to all elements that match the selector.

@ -8,21 +8,23 @@ define([
], function(widget, $){
var ContainerView = widget.DOMWidgetView.extend({
render: function(){
// Called when view is rendered.
this.$el.addClass('widget-container')
.addClass('vbox');
initialize: function(){
// Public constructor
ContainerView.__super__.initialize.apply(this, arguments);
this.update_children([], this.model.get('children'));
this.model.on('change:children', function(model, value, options) {
this.model.on('change:children', function(model, value) {
this.update_children(model.previous('children'), value);
}, this);
this.update();
},
render: function(){
// Called when view is rendered.
this.$el.addClass('widget-container').addClass('vbox');
},
update_children: function(old_list, new_list) {
// Called when the children list changes.
this.do_diff(old_list,
new_list,
this.do_diff(old_list, new_list,
$.proxy(this.remove_child_model, this),
$.proxy(this.add_child_model, this));
},
@ -37,19 +39,11 @@ define([
var view = this.create_child_view(model);
this.$el.append(view.$el);
// Trigger the displayed event once this view is displayed.
// Trigger the displayed event of the child view.
this.after_displayed(function() {
view.trigger('displayed');
});
},
update: function(){
// Update the contents of this view
//
// Called when the model is changed. The model may have been
// changed by another view or by a state update from the back-end.
return ContainerView.__super__.update.apply(this);
},
});
@ -163,10 +157,9 @@ define([
this.popped_out = true;
this.update_children([], this.model.get('children'));
this.model.on('change:children', function(model, value, options) {
this.model.on('change:children', function(model, value) {
this.update_children(model.previous('children'), value);
}, this);
this.update();
},
hide: function() {
@ -213,8 +206,7 @@ define([
update_children: function(old_list, new_list) {
// Called when the children list is modified.
this.do_diff(old_list,
new_list,
this.do_diff(old_list, new_list,
$.proxy(this.remove_child_model, this),
$.proxy(this.add_child_model, this));
},
@ -229,7 +221,7 @@ define([
var view = this.create_child_view(model);
this.$body.append(view.$el);
// Trigger the displayed event once this view is displayed.
// Trigger the displayed event of the child view.
this.after_displayed(function() {
view.trigger('displayed');
});

@ -30,14 +30,6 @@ define([
var that = this;
this.on('displayed', function() {
this.update_titles();
// Trigger model displayed events for any models that are child to
// this model when this model is displayed.
that.is_displayed = true;
for (var property in that.child_views) {
if (that.child_views.hasOwnProperty(property)) {
that.child_views[property].trigger('displayed');
}
}
}, this);
},
@ -127,10 +119,10 @@ define([
this.update();
this.update_titles();
// Trigger the displayed event if this model is displayed.
if (this.is_displayed) {
// Trigger the displayed event of the child view.
this.after_displayed(function() {
view.trigger('displayed');
}
});
},
});
@ -158,17 +150,6 @@ define([
this.model.on('change:children', function(model, value, options) {
this.update_children(model.previous('children'), value);
}, this);
// Trigger model displayed events for any models that are child to
// this model when this model is displayed.
this.on('displayed', function(){
that.is_displayed = true;
for (var property in that.child_views) {
if (that.child_views.hasOwnProperty(property)) {
that.child_views[property].trigger('displayed');
}
}
});
},
update_children: function(old_list, new_list) {
@ -222,10 +203,10 @@ define([
.appendTo(this.$tab_contents);
view.parent_container = contents_div;
// Trigger the displayed event if this model is displayed.
if (this.is_displayed) {
// Trigger the displayed event of the child view.
this.after_displayed(function() {
view.trigger('displayed');
}
});
},
update: function(options) {

Loading…
Cancel
Save