• Jump To … +
    SafariTabs.js Tab.js TabContainer.js main.js
  • Tab.js

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

    Represents a tab with title bar, image of the website and eventing logic to close and select a tab.

  • ¶

    The Tab emits close and select events. Closing a tab removes it from the Scrollview, and selecting a tab toggles a fullscreen mode.

        var Tab = View.extend({
            defaults: {
                src: '',
                title: '',
                titleHeightRatio: 0.06
            },
            initialize: function (options) {
  • ¶

    Create the title bar

                this.title = new Surface({
                    proportions : [1, options.titleHeightRatio],
                    content: options.title,
                    classes: ['title']
                });
  • ¶

    Create the close button

                this.close = new Surface({
                    proportions : [1, options.titleHeightRatio],
                    size: [40, false],
                    content: '×',
                    classes: ['close']
                });
  • ¶

    On click emit a close event that the TabContainer will respond to

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

    Create the tab from an image

                this.content = new Surface({
                    proportions : [1, 1 - options.titleHeightRatio],
                    classes : ['tab'],
                    origin : [0,1],
                    attributes : {src : options.src},
                    tagName : 'img'
                });
  • ¶

    On click emit a select event that the TabContainer will respond to

                this.content.on('click', function(){
                    this.emit('select');
                }.bind(this));
  • ¶

    Build the render sub tree, aligning the content to the bottom

                this.add(this.title);
                this.add(this.close);
                this.add({align : [0,1]}).add(this.content);
            },
  • ¶

    Remove the tab. This will remove the DOM content for later reuse. Note: this API is currently experimental and will be fleshed out in a later version.

            remove : function(){
                this.content.remove();
                this.title.remove();
                this.close.remove();
            }
        });
    
        module.exports = Tab;
    });