ibms-dome/Frontend/js/yourteam/plugins/yt-navbar/yt-navbar.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 || {};


$(function () {
    initNavBarByEle();
})

/**
 * 初始全頁面 yt tab
 * */
function initNavBarByEle() {
    /*_ytTabInited = [];*/
    $(".yt-navbar").each(function (index, value) {
        let type = null;
        if ($(value).hasClass("yt-left-navbar")) {
            type = "left";
        }
        let option = { element: value, type: type };
        let navbar = new YourTeamNavbar(option);
    })
}

class YourTeamNavbar {
    constructor(option = {}) {
        this.element = option.element;
        this.type = option.type ?? "left";
        this.isOpen = false;
        this.init();
    }

    init = function () {
        this.initClose();
        this.checkIsOpen();
        $(this.element)[0]._ytNavbar = this;
        this.chkTrigger();
    }

    checkIsOpen = function () {
        if ($(this.element).is(":visible")) {
            this.isOpen = true;
        } else {
            this.isOpen = false;
        }
    }

    open = function () {
        if (this.type == "left") {
            let curLeft = parseInt($(this.element).css("left").split("px")[0]);
            if (curLeft >= 0) {
                $(this.element).css("opacity", 0);
                $(this.element).show();
                let width = $(this.element)[0].offsetWidth;
                $(this.element).css("left",0 -  width);
                $(this.element).hide();
                $(this.element).css("opacity", 1);
            }
            $(this.element).show();
            $(this.element).animate({ left: 0}, 200, () => {
                this.checkIsOpen();
            })
        }
       
    }

    close = function () {
        let width = $(this.element)[0].offsetWidth;
        if (this.type == "left") {
            $(this.element).animate({ left: 0 - width }, 200, () => {
                $(this.element).hide();
                this.checkIsOpen();
            })
        }
    }

    initClose = function () {
        
        let width = $(this.element)[0].offsetWidth;
        if (this.type == "left") {
            $(this.element).css("left", 0 - width);
            $(this.element).hide();
        }
    }

    toggle = function () {
        if (this.isOpen) {
            this.close();
        } else {
            this.open();
        }
    }

    chkTrigger = function () {
        $("[data-toggle=navbar]").each((idx, ele) => {
            let target = $(ele).data("target");
            if ($(this.element)[0] == $(target)[0]) {
                $(ele).on("click", () => {
                    this.toggle();
                })
            }
        })
    }

}

$.fn.YTNavbar = function (method) {
    let nbObj = $(this)[0]._ytNavbar;
    let target = $(this).data("target");
    if (!nbObj && $(target).length != 0) { 
        nbObj = $(target)[0]._ytNavbar;
    }

    if (!nbObj) return this;

    if (method == "show") {
        nbObj.open();
    } else if (method == "hide") {
        nbObj.close();
    } else if (method == "init") {
        nbObj.init();
    }

    return nbObj;
    
}

function getTogNavbar() {
    $("[data-toggle=navbar]").each((idx, ele) => {
        let target = $(ele).data("target");

        $(ele).off("click").on("click", function () {
            let ngObj = $(target)[0]._ytNavbar;
            ngObj.toggle();
        })
    })

}

YT.NavBar = YT.NavBar || YourTeamNavbar;