NavBar.js

Jump To … +

App.js Content.js Drawer.js NavBar.js main.js

NavBar.js

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

¶

Defines the navigation bar. Listens to the Drawer Layout and sends these events to the navigation items.
```
    var NavBar = View.extend({
        initialize : function(){
```

Define how the nav fades out for the “back”, “middle” and “leftArrow” surfaces as input goes from 0 to 1

            var fadeOut = this.input.map(function(data){
                return Math.pow(1 - data.progress, 4);
            });

Define how the nav fades in for the “hide” and “messages” surfaces as input goes from 0 to 1

            var fadeIn = this.input.map(function(data){
                return data.progress;
            });

The origin and alignment of the “back” and “messages” surfaces will go from [0,0] to [.5,0] as the input goes from 0 to 1

            var leftAlignAndOrigin = this.input.map(function (data) {
                var progress = Math.max(data.progress, 0);
                return [0.5 * progress, 0]
            });

The origin and alignment of the “middle” surface will go from [0.5,0] to [1,0] as the input goes from 0 to 1

            var middleAlignAndOrigin = this.input.map(function (data) {
                var progress = Math.max(data.progress, 0);
                return [0.5 * (1 + progress), 0]
            });

Create a surface with faint blue color to be a background of the navigation bar

            var background = new Surface({
                classes : ['navBackground']
            });

Create a “back” surface

            var back = new Surface({
                size: [true, undefined],  // width = HTML width, height inherits from navBar
                content: 'Back',
                classes: ['nav', 'back', 'center'],
                origin: leftAlignAndOrigin,
                opacity: fadeOut
            });

Emit an open event when the back button is clicked

            back.on('click', function () {
                this.emit('open');
            }.bind(this));

Create a “messages” surface

            var messages = new Surface({
                size: [true, undefined],
                content: 'Messages',
                classes: ['nav', 'center'],
                origin: leftAlignAndOrigin,
                opacity: fadeIn
            });

¶

Create back arrow surface. Here instead of creating a <div> we create an <img> tag.

Note: we scale down this element and manually center it as opposed to applying the center CSS class.

            var backArrow = new Surface({
                size: [true, false],
                proportions: [false, 0.4],
                tagName: 'img',
                classes: ['nav', 'backArrow'],
                attributes: {
                    src: './assets/chevron-left.svg'
                },
                origin: [0, 0.5],
                opacity: fadeOut
            });

Create a “hide” surface

            var hide = new Surface({
                size: [true, undefined],
                content: 'Hide',
                classes: ['nav', 'hide', 'center'],
                opacity: fadeIn
            });

Emit a close event when the “hide” surface is clicked

            hide.on('click', function () {
                this.emit('close');
            }.bind(this));

Create a “middle” surface

            var middle = new Surface({
                size: [true, undefined],
                content: 'saṃsāra',
                classes: ['nav', 'middle', 'center'],
                origin: middleAlignAndOrigin,
                opacity: fadeOut
            });

Create the render subtree

            this.add(background);
            this.add(hide);
            this.add({align: [0, 0.5]}).add(backArrow);
            this.add({align: leftAlignAndOrigin}).add(back);
            this.add({align: leftAlignAndOrigin}).add(messages);
            this.add({align : middleAlignAndOrigin}).add(middle);
        }
    });

    module.exports = NavBar;
});