wms-pda-app/js/segmented-controllers.js

/**
 * segmented-controllers
 * @param {type} $
 * @param {type} window
 * @param {type} document
 * @param {type} undefined
 * @returns {undefined}
 */
(function($, window, document, name, undefined) {

    var CLASS_CONTROL_ITEM = $.className('control-item');
    var CLASS_SEGMENTED_CONTROL = $.className('segmented-control');
    var CLASS_SEGMENTED_CONTROL_VERTICAL = $.className('segmented-control-vertical');
    var CLASS_CONTROL_CONTENT = $.className('control-content');
    var CLASS_TAB_BAR = $.className('bar-tab');
    var CLASS_TAB_ITEM = $.className('tab-item');
    var CLASS_SLIDER_ITEM = $.className('slider-item');

   var handle = function(event, target) {
        if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
            if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
                //vertical 如果preventDefault会导致无法滚动
            } else {

                    event.preventDefault();      
                    // if(target.tagName == 'A') {
                    //     // fixed 底部选项卡href 无法跳转 && stop hash change
                    //     var curr_href = location.hostname + location.pathname,
                    //         target_href = target.hostname + target.pathname;
                   
                    //     if (curr_href == target_href && target.hash !== "") {
                    //         event.preventDefault();
                    //         return target;
                    //     }else{
                    //             return false
                    //     }
                    // }
            }
            //          if (target.hash) {
            return target;
            //          }
        }
        return false;
    };

    $.registerTarget({
        name: name,
        index: 80,
        handle: handle,
        target: false
    });

    window.addEventListener('tap', function(e) {

        var targetTab = $.targets.tab;
        if (!targetTab) {
            return;
        }
        var activeTab;
        var activeBodies;
        var targetBody;
        var className = $.className('active');
        var classSelector = '.' + className;
        var segmentedControl = targetTab.parentNode;

        for (; segmentedControl && segmentedControl !== document; segmentedControl = segmentedControl.parentNode) {
            if (segmentedControl.classList.contains(CLASS_SEGMENTED_CONTROL)) {
                activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_CONTROL_ITEM);
                break;
            } else if (segmentedControl.classList.contains(CLASS_TAB_BAR)) {
                activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_TAB_ITEM);
            }
        }

        if (activeTab) {
            activeTab.classList.remove(className);
        }

        var isLastActive = targetTab === activeTab;
        if (targetTab) {
            targetTab.classList.add(className);
        }

        if (!targetTab.hash) {
            return;
        }
        targetBody = document.getElementById(targetTab.hash.replace('#', ''));

        if (!targetBody) {
            return;
        }
        if (!targetBody.classList.contains(CLASS_CONTROL_CONTENT)) { //tab bar popover
            targetTab.classList[isLastActive ? 'remove' : 'add'](className);
            return;
        }
        if (isLastActive) { //same
            return;
        }
        var parentNode = targetBody.parentNode;
        activeBodies = parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT + classSelector);
        for (var i = 0; i < activeBodies.length; i++) {
            var activeBody = activeBodies[i];
            activeBody.parentNode === parentNode && activeBody.classList.remove(className);
        }

        targetBody.classList.add(className);

        var contents = [];
        var _contents = parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT);
        for (var i = 0; i < _contents.length; i++) { //查找直属子节点
            _contents[i].parentNode === parentNode && (contents.push(_contents[i]));
        }
        $.trigger(targetBody, $.eventName('shown', name), {
            tabNumber: Array.prototype.indexOf.call(contents, targetBody)
        });
        e.detail && e.detail.gesture.preventDefault(); //fixed hashchange
    });

})(mui, window, document, 'tab');