//= require ./container
Lib.ns('Views.Inputs', function(Inputs) {
'use strict';
var Empty = Mn.ItemView.extend({
tagName: 'li',
template: function() { return ''; }
});
var Tab = Mn.ItemView.extend({
tagName: 'li',
template: function() { return '<a href=""></a>'; },
bindings: {
a: 'title',
':el': {classes: {'with-errors': {observe: 'valid', onGet: function(x) { return x === false; }}}}
},
onRender: function() { this.stickit(); }
});
var Tabs = Mn.CollectionView.extend({
tagName: 'ul',
className: 'special',
childView: Tab,
});
var Parent = Inputs.Container;
Inputs.Tabs = Parent.extend({
className: 'uk-width-1-1 form-tabs',
defaultChild: Empty,
template: '#Inputs-TabsTemplate',
childEvents: {
next: 'nextHandler'
},
initialize: function() {
this.index = -1;
this.visible = false;
Parent.prototype.initialize.apply(this, arguments);
this.collection = this.model.get('fields');
if (this.collection) {
this.listenTo(this.collection, 'reset', this.tabsChangeHandler);
this.listenTo(this.collection, 'update', this.tabsChangeHandler);
}
},
childViewContainer: function() {
return '[data-ui="' + this.cid + '-panes"]';
},
ui: function() {
return {
tabs: '[data-ui="' + this.cid + '-tabs"]',
panes: '[data-ui="' + this.cid + '-panes"]'
};
},
childViewOptions: function(item) {
var opts = Parent.prototype.childViewOptions.apply(this, arguments);
opts.tagName = 'li';
opts.showTitle = item.has('showTitle') ? item.get('showTitle') : false;
opts.formSection = false;
return opts;
},
select: function(index) {
if (!this.switcher) { return; }
this.switcher.show(index);
this.index = index;
},
onRender: function() {
//Parent.prototype.onRender.apply(this, arguments);
this.ui.tabs.html('');
this.tabs = new Tabs({collection: this.collection});
this.tabs.render();
this.ui.tabs.append(this.tabs.$el);
_.defer(function(view) {
view.switcher = UIkit.switcher(view.tabs.$el, {
connect: view.ui.panes,
animation: 'slide-horizontal'
});
//view.switcher.on('show.uk.switcher', _.bind(view.switchHandler, view));
}, this);
},
/*onAfterShow: function() {
this.visible = true;
if (this.index >= 0) { return this.switchHandler(this.index); }
},
switchHandler: function(event, item) {
this.index = typeof event === 'number' ? event : $(item).index();
if (!this.visible) { return; }
var step = this.children.findByIndex(this.index);
if (step) {
_.delay(_.bind(step.triggerMethod, step), 300, 'after:show');
}
},
notifyChildren: function() {
var args = _.toArray(arguments);
var event = args.shift();
if (event !== 'after:show') {
return Parent.prototype.notifyChildren.apply(this, arguments);
}
if (this.index < 0) { return; }
var child = this.children.findByIndex(this.index);
if (!child) { return; }
child.triggerMethod.apply(child, arguments);
},*/
nextHandler: function(view) {
if (this.children.last() === view) {
this.triggerMethod('next');
return;
}
var index = this.collection.indexOf(view.model);
if (index >= 0) { this.select(index + 1); }
},
tabsChangeHandler: function() {
this.render();
}
});
});