define([
'require',
'exports',
'module',
'debug',
'views/setting-options',
'views/setting',
'view',
'lib/bind'
], function (require, exports, module) {
'use strict';
var debug = require('debug')('view:settings');
var OptionsView = require('views/setting-options');
var SettingView = require('views/setting');
var View = require('view');
var bind = require('lib/bind');
module.exports = View.extend({
name: 'settings',
fadeTime: 150,
initialize: function (options) {
this.OptionsView = options.OptionsView || OptionsView;
this.items = options.items;
this.children = [];
this.on('destroy', this.onDestroy);
bind(this.el, 'click', this.onClick);
},
onClick: function (e) {
e.stopPropagation();
},
onItemClick: function (view) {
this.showSetting(view.model);
},
showSetting: function (model) {
this.optionsView = new this.OptionsView({ model: model }).render().appendTo(this.els.pane2).on('click:option', this.firer('click:option')).on('click:back', this.goBack);
this.showPane(2);
},
onDestroy: function () {
this.children.forEach(this.destroyChild);
this.destroyOptionsView();
debug('destroyed');
},
render: function () {
this.el.innerHTML = this.template();
this.els.items = this.find('.js-items');
this.els.pane2 = this.find('.js-pane-2');
this.els.close = this.find('.js-close');
this.items.forEach(this.addItem);
delete this.template;
debug('rendered');
return this.bindEvents();
},
bindEvents: function () {
bind(this.els.close, 'click', this.firer('click:close'));
return this;
},
goBack: function () {
this.showPane(1);
this.destroyOptionsView();
},
destroyChild: function (view) {
view.destroy();
debug('destroyed child');
},
destroyOptionsView: function () {
if (this.optionsView) {
this.optionsView.destroy();
this.optionsView = null;
debug('options view destroyed');
}
},
addItem: function (model) {
var setting = new SettingView({ model: model }).render().appendTo(this.els.items).on('click', this.onItemClick);
this.children.push(setting);
debug('add item key: %s', model.key);
},
showPane: function (name) {
this.el.setAttribute('show-pane', 'pane-' + name);
},
fadeIn: function (done) {
setTimeout(this.show);
if (!done) {
return;
}
setTimeout(done, this.fadeTime);
},
fadeOut: function (done) {
this.hide();
if (!done) {
return;
}
setTimeout(done, this.fadeTime);
},
template: function () {
return '' + '' + '';
}
});
});