API Docs for: HTML-14.04-dev~bzr202

tab.js

/*
 * Copyright (C) 2014 Canonical Ltd
 *
 * This file is part of ubuntu-html5-ui-toolkit.
 *
 * This package is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation; either version 3 of the
 * License, or
 * (at your option) any later version.

 * This package is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU Lesser General Public
 * License along with this program. If not, see
 * <http://www.gnu.org/licenses/>.
 */

/**
 * One of the navigation pattern that can be used within an Ubuntu App is the flat navigation. Tabs are the standard way to provide such a navigation pattern from within your application.

A Tab represents the UI element that hosts your tab content. This UI element is being activated by the user selecting it as part of the Header element.

 * @class Tab
 * @constructor
 * @namespace UbuntuUI
 * @example
      </body>

        <div data-role="mainview">
          <header data-role="header" id="headerID">
            <ul data-role="tabs">
              <li data-role="tabitem" data-page="tabID">
                Main
              </li>
              <li data-role="tabitem" data-page="page2">
                Two
              </li>
            </ul>
          </header>

          <div data-role="content">
              <div data-role="tab" id="tabID">
                [...]
              </div>
              <div data-role="tab" id="page2">
                [...]
              </div>
          </div>

        </div>
      </body>

      JavaScript access:
      var tab = UI.tab("tabID");
 */
var Tab = function (id) {
    this.id = id;
};

Tab.prototype = {
    /**
     * Returns the DOM element associated with the selector this widget is bind to.
     * @method element
     * @return {DOMElement}
     * @example
       var mytab = UI.tab("tabid").element();
    */
    element: function () {
        return document.getElementById(this.id);
    },

    /**
     * Deactivates the current tab.
     * @method {} deactivate
     */
    deactivate: function () {
        this.__updateVisibleState('none');
    },

    /**
     * Activates the current tab.
     * @method {} activate
     */
    activate: function (id) {
        this.__hideVisibleSibling();
        this.__updateVisibleState('block');

    },

    /**
     * Validates that a given DOM node element is a Ubuntu UI Tab.
     * @method {DOM Element} isTab
     * @return {Boolean} if the DOM element is a tab
     */
    isTab: function (element) {
        return element.tagName.toLowerCase() === 'div' &&
            element.hasAttribute('data-role') &&
            element.getAttribute('data-role') === 'tab';
    },

    /**
     * @private
     */
    __updateVisibleState: function (displayStyle) {
        if (!this.__isValidId(this.id))
            return;
        var tab = document.getElementById(this.id);
        if (!this.isTab(tab)) {
            return;
        }
        tab.style.display = displayStyle;

        [].forEach.call( document.querySelectorAll('[data-role="actions-wrapper"]'), function(el) {
           el.style.display = 'none';
        });

        var tab_actions = document.getElementById("actions_" + this.id);

        if (tab_actions !== null) {
            tab_actions.style.display = 'block';
        }
    },

    /**
     * @private
     */
    __hideVisibleSibling: function () {
        if (!this.__isValidId(this.id))
            return;
        var tab = document.getElementById(this.id);
        if (!this.isTab(tab)) {
            return;
        }
        var children = tab.parentNode.children;
        for (var idx = 0; idx < children.length; ++idx) {
            if (this.isTab(children[idx])) {
                children[idx].style.display = 'none';
            }
        }
    },

    /**
     * @private
     */
    __isValidId: function (id) {
        return id && typeof (id) === 'string';
    },

    /**
     * @private
     */
    get __thisSelector() {
        return "#" + this.id;
    }
};