tab.js - Ubuntu HTML5 API

# Ubuntu HTML5 API: tab.js

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;
        }
    };