79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
|
var _ = require('underscore');
|
||
|
|
var CoreView = require('backbone/core-view');
|
||
|
|
var template = require('./onboarding.tpl');
|
||
|
|
|
||
|
|
// Ought to match the duration of the .Dialog.is-closing animation.
|
||
|
|
var CLOSE_DELAY_MS = 120;
|
||
|
|
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
className: 'Onboarding is-opening',
|
||
|
|
|
||
|
|
initialize: function () {
|
||
|
|
this.listenTo(this.model, 'change:show', this._onShowChange);
|
||
|
|
this.listenTo(this.model, 'destroy', this._onDestroy);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
this.clearSubViews();
|
||
|
|
this.$el.html(template());
|
||
|
|
|
||
|
|
var view = this.model.createContentView();
|
||
|
|
this.$el.addClass(this.model.getContentClasses());
|
||
|
|
this.addView(view);
|
||
|
|
|
||
|
|
view.bind('customEvent', this._onCustomEvent, this);
|
||
|
|
view.bind('close', this._onClose, this);
|
||
|
|
|
||
|
|
view.render();
|
||
|
|
this.$('.js-content').append(view.el);
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function () {
|
||
|
|
this.model.show();
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function () {
|
||
|
|
this.model.hide();
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function () {
|
||
|
|
// 'remove' would be a better name ofc, but there is already an internal method with that name in CoreView
|
||
|
|
this.model.destroy();
|
||
|
|
},
|
||
|
|
|
||
|
|
_onShowChange: function (m, show) {
|
||
|
|
if (show) {
|
||
|
|
this.$el.show();
|
||
|
|
this.$el.removeClass('is-closing').addClass('is-opening');
|
||
|
|
} else {
|
||
|
|
this.$el.removeClass('is-opening').addClass('is-closing');
|
||
|
|
this._delayDueToAnimation(function () {
|
||
|
|
this.$el.hide();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_onClose: function () {
|
||
|
|
this.destroy();
|
||
|
|
},
|
||
|
|
|
||
|
|
_onCustomEvent: function (customEventName) {
|
||
|
|
this.destroy();
|
||
|
|
this.trigger('customEvent', customEventName, this);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onDestroy: function () {
|
||
|
|
this.hide();
|
||
|
|
_.invoke(this._subviews, 'allOff');
|
||
|
|
this._delayDueToAnimation(function () {
|
||
|
|
this.clean();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_delayDueToAnimation: function (fn) {
|
||
|
|
setTimeout(fn.bind(this), CLOSE_DELAY_MS);
|
||
|
|
}
|
||
|
|
});
|