Skip to content

JQuery dependency and backbone view #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
SylvainCorlay wants to merge 3 commits into from
Closed

JQuery dependency and backbone view #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
78b1983
Remove jquery calls in widget manager and base widget class
SylvainCorlay Apr 11, 2015
91d2b89
separate interfaces
SylvainCorlay Apr 11, 2015
ed3ec6b
no reference to view. in manager
SylvainCorlay Apr 12, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion jupyter_notebook/static/notebook/js/codecell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ define([
var that = this;
return view_promise.then(function(view) {
that.widget_area.show();
dummy.replaceWith(view.$el);
dummy.replaceWith(view.el);
that.widget_views.push(view);

// Check the live state of the view's model.
Expand Down
1 change: 1 addition & 0 deletions jupyter_notebook/static/notebook/js/keyboardmanager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@ define([
};

KeyboardManager.prototype.register_events = function (e) {
e = $(e);
var that = this;
var handle_focus = function () {
that.disable();
Expand Down
13 changes: 6 additions & 7 deletions jupyter_notebook/static/widgets/js/manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@
define([
"underscore",
"backbone",
"jquery",
"base/js/utils",
"base/js/namespace",
"services/kernels/comm"
], function (_, Backbone, $, utils, IPython, comm) {
], function (_, Backbone, utils, IPython, comm) {
"use strict";
//--------------------------------------------------------------------
// WidgetManager class
Expand All @@ -27,7 +26,7 @@ define([
this._models = {}; /* Dictionary of model ids and model instance promises */

// Register with the comm manager.
this.comm_manager.register_target(this.comm_target_name, $.proxy(this._handle_comm_open, this));
this.comm_manager.register_target(this.comm_target_name, _.bind(this._handle_comm_open, this));

// Load the initial state of the widget manager if a load callback was
// registered.
Expand Down Expand Up @@ -163,7 +162,7 @@ define([
* Note, this is only done on the outer most widgets.
*/
if (this.keyboard_manager) {
this.keyboard_manager.register_events(view.$el);
this.keyboard_manager.register_events(view.el);

if (view.additional_elements) {
for (var i = 0; i < view.additional_elements.length; i++) {
Expand Down Expand Up @@ -247,8 +246,8 @@ define([
var handle_output = null;
var handle_clear_output = null;
if (cell.output_area) {
handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
handle_output = _.bind(cell.output_area.handle_output, cell.output_area);
handle_clear_output = _.bind(cell.output_area.handle_clear_output, cell.output_area);
}

// Create callback dictionary using what is known
Expand Down Expand Up @@ -301,7 +300,7 @@ define([
* model_name: 'WidgetModel',
* widget_class: 'jupyter_notebook.widgets.widget_int.IntSlider'})
* .then(function(model) { console.log('Create success!', model); },
* $.proxy(console.error, console));
* _.bind(console.error, console));
*
* Parameters
* ----------
Expand Down
85 changes: 44 additions & 41 deletions jupyter_notebook/static/widgets/js/widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,17 @@
define(["widgets/js/manager",
"underscore",
"backbone",
"jquery",
"base/js/utils",
"base/js/namespace",
], function(widgetmanager, _, Backbone, $, utils, IPython){
], function(widgetmanager, _, Backbone, utils, IPython){
"use strict";

var unpack_models = function unpack_models(value, model) {
/**
* Replace model ids with models recursively.
*/
var unpacked;
if ($.isArray(value)) {
if (_.isArray(value)) {
unpacked = [];
_.each(value, function(sub_value, key) {
unpacked.push(unpack_models(sub_value, model));
Expand Down Expand Up @@ -65,8 +64,8 @@ define(["widgets/js/manager",
comm.model = this;

// Hook comm messages up to model.
comm.on_close($.proxy(this._handle_comm_closed, this));
comm.on_msg($.proxy(this._handle_comm_msg, this));
comm.on_close(_.bind(this._handle_comm_closed, this));
comm.on_msg(_.bind(this._handle_comm_msg, this));

// Assume the comm is alive.
this.set_comm_live(true);
Expand Down Expand Up @@ -274,7 +273,7 @@ define(["widgets/js/manager",
// Backbone only remembers the diff of the most recent set()
// operation. Calling set multiple times in a row results in a
// loss of diff information. Here we keep our own running diff.
this._buffered_state_diff = $.extend(this._buffered_state_diff, this.changedAttributes() || {});
this._buffered_state_diff = _.extend(this._buffered_state_diff, this.changedAttributes() || {});
return return_value;
},

Expand Down Expand Up @@ -336,7 +335,7 @@ define(["widgets/js/manager",
// Combine updates if it is a 'patch' sync, otherwise replace updates
switch (method) {
case 'patch':
this.msg_buffer = $.extend(this.msg_buffer || {}, attrs);
this.msg_buffer = _.extend(this.msg_buffer || {}, attrs);
break;
case 'update':
case 'create':
Expand All @@ -355,7 +354,7 @@ define(["widgets/js/manager",
this.pending_msgs++;
}
}
// Since the comm is a one-way communication, assume the message
// Since the comm is a one-way communication, assume the message
// arrived. Don't call success since we don't have a model back from the server
// this means we miss out on the 'sync' event.
this._buffered_state_diff = {};
Expand All @@ -369,7 +368,7 @@ define(["widgets/js/manager",
// being the value or the promise of the serialized value
var serializers = this.constructor.serializers;
if (serializers) {
for (var k in attrs) {
for (k in attrs) {
if (serializers[k] && serializers[k].serialize) {
attrs[k] = (serializers[k].serialize)(attrs[k], this);
}
Expand All @@ -383,13 +382,11 @@ define(["widgets/js/manager",
for (var i=0; i<keys.length; i++) {
var key = keys[i];
var value = state[key];
if (value) {
if (value.buffer instanceof ArrayBuffer
|| value instanceof ArrayBuffer) {
buffers.push(value);
buffer_keys.push(key);
delete state[key];
}
if (value.buffer instanceof ArrayBuffer
|| value instanceof ArrayBuffer) {
buffers.push(value);
buffer_keys.push(key);
delete state[key];
}
}
that.comm.send({method: 'backbone', sync_data: state, buffer_keys: buffer_keys}, callbacks, {}, buffers);
Expand All @@ -398,7 +395,7 @@ define(["widgets/js/manager",
return (utils.reject("Couldn't send widget sync message", true))(error);
});
},

save_changes: function(callbacks) {
/**
* Push this model's state to the back-end
Expand All @@ -412,7 +409,7 @@ define(["widgets/js/manager",
/**
* on_some_change(["key1", "key2"], foo, context) differs from
* on("change:key1 change:key2", foo, context).
* If the widget attributes key1 and key2 are both modified,
* If the widget attributes key1 and key2 are both modified,
* the second form will result in foo being called twice
* while the first will call foo only once.
*/
Expand All @@ -435,7 +432,7 @@ define(["widgets/js/manager",
widgetmanager.WidgetManager.register_widget_model('WidgetModel', WidgetModel);


var WidgetView = Backbone.View.extend({
var WidgetInterface = {
initialize: function(parameters) {
/**
* Public constructor.
Expand Down Expand Up @@ -469,7 +466,7 @@ define(["widgets/js/manager",
* Create and promise that resolves to a child view of a given model
*/
var that = this;
options = $.extend({ parent: this }, options || {});
options = _.extend({ parent: this }, options || {});
return this.model.widget_manager.create_view(child_model, options).catch(utils.reject("Couldn't create child view", true));
},

Expand Down Expand Up @@ -516,10 +513,9 @@ define(["widgets/js/manager",
WidgetView.__super__.remove.apply(this, arguments);
this.trigger('remove');
}
});

};

var DOMWidgetView = WidgetView.extend({
var DOMWidgetInterface = {
initialize: function (parameters) {
/**
* Public constructor
Expand Down Expand Up @@ -612,7 +608,7 @@ define(["widgets/js/manager",
/**
* Set a css attr of the widget view.
*/
this.$el.css(name, value);
this.el.style[name] = value;
},

update_visible: function(model, value) {
Expand All @@ -621,11 +617,13 @@ define(["widgets/js/manager",
*/
switch(value) {
case null: // python None
this.$el.show().css('visibility', 'hidden'); break;
this.el.style.display = '';
this.el.style.visibility = 'hidden'; break;
case false:
this.$el.hide(); break;
this.el.style.display = 'none'; break;
case true:
this.$el.show().css('visibility', ''); break;
this.el.style.display = '';
this.el.style.visibility = ''; break;
}
},

Expand All @@ -641,23 +639,25 @@ define(["widgets/js/manager",
if (elements.length > 0) {
var trait_key = css[i][1];
var trait_value = css[i][2];
elements.css(trait_key ,trait_value);
_.each(elements, function(e) {
e.style[trait_key] = trait_value;
});
}
}
},

update_classes: function (old_classes, new_classes, $el) {
update_classes: function (old_classes, new_classes, el) {
/**
* Update the DOM classes applied to an element, default to this.$el.
* Update the DOM classes applied to an element, default to this.el.
*/
if ($el===undefined) {
$el = this.$el;
if (el===undefined) {
el = this.el;
}
_.difference(old_classes, new_classes).map(function(c) {$el.removeClass(c);})
_.difference(new_classes, old_classes).map(function(c) {$el.addClass(c);})
_.difference(old_classes, new_classes).map(function(c) { el.classList.remove(c); });
_.difference(new_classes, old_classes).map(function(c) { el.classList.add(c); });
},

update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) {
update_mapped_classes: function(class_map, trait_name, previous_trait_value, el) {
/**
* Update the DOM classes applied to the widget based on a single
* trait's value.
Expand All @@ -681,7 +681,7 @@ define(["widgets/js/manager",
* Name of the trait to check the value of.
* previous_trait_value: optional string, default ''
* Last trait value
* $el: optional jQuery element handle, defaults to this.$el
* el: optional DOM element, defaults to this.el
* Element that the classes are applied to.
*/
var key = previous_trait_value;
Expand All @@ -692,7 +692,7 @@ define(["widgets/js/manager",
key = this.model.get(trait_name);
var new_classes = class_map[key] ? class_map[key] : [];

this.update_classes(old_classes, new_classes, $el || this.$el);
this.update_classes(old_classes, new_classes, el || this.el);
},

_get_selector_element: function (selector) {
Expand All @@ -701,17 +701,17 @@ define(["widgets/js/manager",
*/
var elements;
if (!selector) {
elements = this.$el;
elements = [this.el];
} else {
elements = this.$el.find(selector).addBack(selector);
elements = this.el.querySelectorAll(selector);
}
return elements;
},

typeset: function(element, text){
utils.typeset.apply(null, arguments);
},
});
};


var ViewList = function(create_view, remove_view, context) {
Expand Down Expand Up @@ -793,6 +793,9 @@ define(["widgets/js/manager",
},
});

var WidgetView = Backbone.View.extend(WidgetInterface);
var DOMWidgetView = WidgetView.extend(DOMWidgetInterface);

var widget = {
'unpack_models': unpack_models,
'WidgetModel': WidgetModel,
Expand All @@ -802,7 +805,7 @@ define(["widgets/js/manager",
};

// For backwards compatability.
$.extend(IPython, widget);
_.extend(IPython, widget);

return widget;
});
2 changes: 1 addition & 1 deletion jupyter_notebook/static/widgets/js/widget_box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ define([
warning: ['alert', 'alert-warning'],
danger: ['alert', 'alert-danger']
};
this.update_mapped_classes(class_map, 'box_style', previous_trait_value, this.$box);
this.update_mapped_classes(class_map, 'box_style', previous_trait_value, this.$box[0]);
},

add_child_model: function(model) {
Expand Down
2 changes: 1 addition & 1 deletion jupyter_notebook/static/widgets/js/widget_int.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,7 @@ define([
warning: ['progress-bar-warning'],
danger: ['progress-bar-danger']
};
this.update_mapped_classes(class_map, 'bar_style', previous_trait_value, this.$bar);
this.update_mapped_classes(class_map, 'bar_style', previous_trait_value, this.$bar[0]);
},

update_attr: function(name, value) {
Expand Down
6 changes: 3 additions & 3 deletions jupyter_notebook/static/widgets/js/widget_selection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ define([
warning: ['btn-warning'],
danger: ['btn-danger']
};
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$droplabel);
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$dropbutton);
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$droplabel[0]);
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$dropbutton[0]);
},

update_attr: function(name, value) {
Expand Down Expand Up @@ -411,7 +411,7 @@ define([
warning: ['btn-warning'],
danger: ['btn-danger']
};
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$buttongroup.find('button'));
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$buttongroup.find('button')[0]);
},

handle_click: function (e) {
Expand Down