ibms-MCUT/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.onlyOneOpen = false;
        this.init();
    }

    init = function (option = {}) {
        // this = Object.assign(option ?? {});
        Object.keys(option).forEach(k => {
            this[k] = option[k];
        });
        this.initClose();
        this.checkIsOpen();
        $(this.element)[0]._ytNavbar = this;
        this.chkTrigger();
        this.eventLoad();
    }

    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", (e) => {
                    this.toggle();
                })
            }
        })
    }

    eventLoad = function(){
        $(this.element).find("[data-nb-node-type=parent]").on("click",this.nbNodeParentOnClick.bind(this))
    }

    closeParentCollapse(ele,isAnimation = true){
        $(ele).data("nb-node-status","close").attr("data-nb-node-status","close");
        $(ele).next("ul").css({transform:"translateY(-5%)"});
        if(isAnimation){
        $(ele).next("ul").animate({
            opacity:0,
            },200, () => {
                $(ele).next("ul").hide();
            })
        } else {
            $(ele).next("ul").css({opacity:0}).hide();
        }
    }

    openParentCollapse(ele){
        $(ele).data("nb-node-status","open").attr("data-nb-node-status","open");
            $(ele).next("ul").show();
            $(ele).next("ul").animate({
                opacity:1,
            },200)
            $(ele).next("ul").css({transform:"translateY(0%)"});
       
    }

    nbNodeParentOnClick(e){
        if(this.chkNbNodeParentIsOpen(e.target)){
            
            this.closeParentCollapse(e.target);
            
        } else {
            
            if(this.onlyOneOpen === true){
                this.closeParentCollapse($(this.element).find("[data-nb-node-type=parent]").filter((i,ele) => ele != e.target),false);
            }
            
            this.openParentCollapse(e.target)
            
        }
    }

    chkNbNodeParentIsOpen(ele){
        return $(ele).is("[data-nb-node-status=open]");
    }

    openAllCollapse(){
        $(this.element).find("[data-nb-node-type=parent]").each((i,ele) => {
            if(!this.chkNbNodeParentIsOpen(ele)){
                $(this.element).find("[data-nb-node-type=parent]").click();
            }
        })
    }
}

$.fn.YTNavbar = function (method,...arg) {
    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(arg[0]);
    } else if(method == "openAllCollapse") {
        nbObj.openAllCollapse();
    }

    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;