ibms-dome/Frontend/js/yourteam/plugins/yt-tab/yt-tab.js

/**
 * YourTeam 上方 Tab 頁籤
 * 
 * 使用方式：
 * <button type="button" data-tabname="testTab" data-target="testDiv1">頁籤按鈕1</button>
 * <button type="button" data-tabname="testTab" data-target="testDiv2">頁籤按鈕2</button>
 * 
 * <div id="testDiv1" data-tabname="testTab" data-tabrole="child"></div>
 * <div id="testDiv2" data-tabname="testTab" data-tabrole="child"></div>
 * */
var YT = YT || {};

var _ytTabInited = [];

$(function () {
})

/**
 * 初始全頁面 yt tab
 * */
function initTabsByEle() {
    /*_ytTabInited = [];*/
    $("[data-tabname]:not([data-tabrole=child])").each(function (index, value) {
        let tabName = $(value).data("tabname");
        if (_ytTabInited.indexOf(tabName) == -1) {
            var ytTab = new YT.Tab({ tabName: tabName })
            _ytTabInited.push(tabName);
        }

    })
}

class YourTeamTab {
    constructor(option = {}) {
        this.tabName = option.tabName ?? null;
        this.activeEle = null;
        this.eventArg = { cancel: false };
        this.init()

    }

    init = function () {
        if (_ytTabInited.indexOf(this.tabName) != -1) {
            _ytTabInited.splice($.inArray(this.tabName, _ytTabInited), 1);
            $(`[data-tabname=${this.tabName}][data-target]`).off("click").unbind("click");
        }
        this.event();
        $(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
        if ($(`[data-tabname=${this.tabName}][data-target].active`).length == 0) {
            let parTabEle = $(`[data-tabname=${this.tabName}][data-target]`).first();
            if (parTabEle.data("toggle") == "tab" || !parTabEle.data("toggle")) { 
                $(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click");
            }
        } else {
            $(`[data-tabname=${this.tabName}][data-target].active`).first().trigger("click");
        }
        
        _ytTabInited.push(this.tabName);
        this.setThisObj();
    }

    setThisObj = function () {
        $(`[data-tabname=${this.tabName}]`).each((idx, ele) => {
            $(ele)[0]._ytTab = this;
        })
    }

    setActItem = function (element) {
        
        this.activeEle = element;
    }

    updActClass = function () {
        $(`[data-tabname=${this.tabName}]:not([data-tabrole=child])`).removeClass("active");
        $(this.activeEle).addClass("active");
    }

    event = function () {
        let clsObj = this;

        // Tab Item 按鈕 click
        $(`[data-tabname=${this.tabName}]`).on("click", function (e) {
            let target = $(this).data("target");
            let obj = this;
            clsObj.eventArg.cancel = false;
            $(obj).trigger("yt:tab:prechange", clsObj.eventArg)
            
            if (clsObj.eventArg.cancel) {
                return;
            }
            clsObj.activeEle = obj;
            clsObj.updActClass();
            // 觸發 yt:tab:change事件
            $(obj).trigger("yt:tab:change");
            if (target) {
                let tabName = $(target).data("tabname");
                if (tabName) {
                    // 找出該觸發對象 block
                    if ($(target).data("tabrole") == "child") {
                        $(obj).trigger("yt:tab:show");
                        $(`[data-tabname='${tabName}'][data-tabrole='child']`).css("opacity", 0).hide();
                        $(target).show().animate({ opacity: 1 }, 200, function () {
                            $(obj).trigger("yt:tab:shown");
                        });
                    }
                }
            }
        })
    }
}

$.fn.YTTab = function (method,...arg) {
    let tabObj = $(this)[0]._ytTab;

    if (!tabObj) {
        let tabName = $(this).data("tabname");
        if (tabName && _ytTabInited.indexOf(tabName) == -1) {
            let ytTab = new YT.Tab({ tabName: tabName })
            _ytTabInited.push(tabName);
            tabObj = ytTab;
        } else {
            return this;
        }
    }
    
    if (method == "set") {
        tabObj.setActItem(this);
        tabObj.updActClass();
    } else if (method == "setAndClick") {
        tabObj.setActItem(this);
        $(this).click();
    }

    return tabObj;

}

YT.Tab = YT.Tab || YourTeamTab;