A “container” is necessary since the tab’s size is independent from the size
the Scrollview
reads. For instance, the tab is initially taller than the
spacing the Scrollview
allocates. Also, upon deleting a tab, the TabContainer's
size is shrunk, while the Tab's
size remains unchanged.
var TabContainer = View.extend({
defaults : {
src : '',
title : '',
index : 0,
titleHeightRatio: 0.06,
angle : -Math.PI / 5,
spacing : 150,
height : 400,
selectTransition : {duration : 200},
deselectTransition : {duration : 200}
},
initialize: function (options) {
this.angle = new Transitionable(options.angle);
this.deleteShift = new Transitionable(0);
this.selected = false;
this.parentSize = new Transitionable([undefined, options.spacing]);
this.tabSize = new Transitionable([false, options.height]);
this.proportions = new Transitionable([.9, false]);
this.parentHeight = options.spacing;
this._size.on('resize', function(size){
this.parentHeight = size[1];
}.bind(this));