80 lines
3.1 KiB
JavaScript
80 lines
3.1 KiB
JavaScript
define(["jquery", "underscore", "backbone", "js/utils/handle_iframe_binding"],
|
|
function ($, _, Backbone, IframeUtils) {
|
|
/*
|
|
This view is extended from backbone to provide useful functionality for all Studio views.
|
|
This functionality includes:
|
|
- automatic expand and collapse of elements with the 'ui-toggle-expansion' class specified
|
|
- additional control of rendering by overriding 'beforeRender' or 'afterRender'
|
|
|
|
Note: the default 'afterRender' function calls a utility function 'iframeBinding' which modifies
|
|
iframe src urls on a page so that they are rendered as part of the DOM.
|
|
*/
|
|
|
|
var BaseView = Backbone.View.extend({
|
|
events: {
|
|
"click .ui-toggle-expansion": "toggleExpandCollapse"
|
|
},
|
|
|
|
//override the constructor function
|
|
constructor: function(options) {
|
|
_.bindAll(this, 'beforeRender', 'render', 'afterRender');
|
|
var _this = this;
|
|
this.render = _.wrap(this.render, function (render, options) {
|
|
_this.beforeRender();
|
|
render(options);
|
|
_this.afterRender();
|
|
return _this;
|
|
});
|
|
|
|
//call Backbone's own constructor
|
|
Backbone.View.prototype.constructor.apply(this, arguments);
|
|
},
|
|
|
|
beforeRender: function() {
|
|
},
|
|
|
|
render: function() {
|
|
return this;
|
|
},
|
|
|
|
afterRender: function() {
|
|
IframeUtils.iframeBinding(this);
|
|
},
|
|
|
|
toggleExpandCollapse: function(event) {
|
|
var target = $(event.target);
|
|
// Don't propagate the event as it is possible that two views will both contain
|
|
// this element, e.g. clicking on the element of a child view container in a parent.
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
target.closest('.expand-collapse').toggleClass('expand').toggleClass('collapse');
|
|
target.closest('.is-collapsible, .window').toggleClass('collapsed');
|
|
target.closest('.is-collapsible').children('article').slideToggle();
|
|
},
|
|
|
|
showLoadingIndicator: function() {
|
|
$('.ui-loading').show();
|
|
},
|
|
|
|
hideLoadingIndicator: function() {
|
|
$('.ui-loading').hide();
|
|
},
|
|
|
|
/**
|
|
* Loads the named template from the page, or logs an error if it fails.
|
|
* @param name The name of the template.
|
|
* @returns The loaded template.
|
|
*/
|
|
loadTemplate: function(name) {
|
|
var templateSelector = "#" + name + "-tpl",
|
|
templateText = $(templateSelector).text();
|
|
if (!templateText) {
|
|
console.error("Failed to load " + name + " template");
|
|
}
|
|
return _.template(templateText);
|
|
}
|
|
});
|
|
|
|
return BaseView;
|
|
});
|