SafariTabs.js

Jump To … +

SafariTabs.js Tab.js TabContainer.js main.js

SafariTabs.js

define(function (require, exports, module) {
    var View = require('samsara/core/View');
    var Surface = require('samsara/dom/Surface');
    var Scrollview = require('samsara/layouts/Scrollview');
    var TabContainer = require('./TabContainer');

A Scrollview consisting of tabs. Tabs can be selected by clicking on them, bringing them to fullscreen, or removed from the scrollview by clicking their close button. The resizing of the scrollview as tabs are made fullscreen or removed is handled automatically by animating the tabs’ size streams.

    var SafariTabs = View.extend({
        defaults: {
            tabData : [],
            tab : {
                titleHeightRatio: 0.06,
                angle: -Math.PI / 5,
                spacing: 150,
                height: 400
            },
            perspective : 1000,
            selectTransition: {duration: 200},
            deselectTransition: {duration: 200}
        },
        initialize: function (options) {

Create the scrollview

            var scrollview = new Scrollview({
                direction: Scrollview.DIRECTION.Y,
                marginBottom: 200 // leaves 200px of space at the bottom of the scrollview
            });

Set a perspective on the scrollview

            scrollview.setPerspective(options.perspective);

Create the tabs

            var tabs = [];
            for (var i = 0; i < options.tabData.length; i++) {
                var tab = new TabContainer({
                    src: options.tabData[i].src,
                    title: options.tabData[i].title,
                    index: i,
                    titleHeightRatio: options.tab.titleHeightRatio,
                    angle: options.tab.angle,
                    spacing : options.tab.spacing,
                    height : options.tab.height,
                    selectTransition : options.selectTransition,
                    deselectTransition: options.deselectTransition
                });

¶

Tabs must listen to the scrollview to create a receding effect as the scrollview is scrolled.
```
                tab.subscribe(scrollview);
```
¶

The scrollview listens to the goto event from the tabs to animate the scrollview to the currently selected tab
```
                scrollview.subscribe(tab);

                tabs.push(tab);
            }
```
¶

Add the tabs to the scrollview
```
            scrollview.addItems(tabs);
```

Animate the scrollview to the currently selected tab when a tab is clicked

            scrollview.input.on('goto', function (index) {
                scrollview.goTo(index, options.selectTransition);
            });

Build the render subtree consisting of only the scrollview

            this.add(scrollview);
        }
    });

    module.exports = SafariTabs;
});