SharePoint-Tabbed-News.html

<div id="placeholder">
</div>
<style>
    #placeholder {

        xmargin: 20px;
        xborder: 5px solid grey;
        xpadding: 20px;
        border-bottom: 1px solid #cccccc;
    }

    ul.zbar-tabs {

        list-style: none;
        margin: 0;
        padding: 0;
        margin-bottom: 10px;

    }

    li.zbar-tab {
        font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
        font-size: 14px;
        font-weight: 700;
        display: inline;
        margin-left: 5px;
        margin-right: 5px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 5px;
        cursor: pointer;
        border-bottom: 3px solid #00FF0000
    }

    li.zbar-tab:hover {
        border-bottom: 3px solid #005776;
        margin-left: 0;
        margin-right: 0;
        padding-left: 25px;
        padding-right: 25px;


    }


    .zbar-active {

        border-bottom: 3px solid #005776 !important;

    }
</style>

<script>
    function makeTab(){
    var newsParts = {};
    var zbarSelectedTab = null;
    var tabs = []
    var webParts = document.querySelectorAll(".ControlZone")
    //debugger
    function ToggleTabContent(){
        [...webParts].forEach(webPart => {
            var featureTag = webPart.querySelectorAll('[data-sp-feature-tag]');
            if (featureTag && featureTag[0] && featureTag[0].attributes) {
                try {
                    console.log("Found",featureTag[0].attributes[0].value )
                    if (featureTag[0].attributes[0].value === "NewsWebPart web part (News)") {

                        var dataAutomation = webPart.querySelectorAll("[data-automation-id='captionElement']");

                        if (dataAutomation) {
                            var tabName = dataAutomation[0].innerText;
                            dataAutomation[0].style.display = "none";
                            newsParts[tabName] = webPart
                        }
                        if (!zbarSelectedTab) {
                            zbarSelectedTab = tabName
                        }

                        webPart.style.display = (zbarSelectedTab === tabName ? "block" : "none")

                        //var texts =     webPart.innerText.split("\n");

                        //newsParts.push(texts[0])
                    }
                } catch (error) {
                    console.log("Reading feature tags",error.message)
                    // debugger
                }

            }

        });
    }
    ToggleTabContent();
    
    

    [...webParts].forEach(webPart => {
        var featureTag = webPart.querySelectorAll('[data-sp-feature-tag]');
        var hasTabs = false
        if (featureTag) {
            try {
                if (featureTag[0].attributes[0].value === "NewsWebPart web part (News)") {
                    var tab = document.createElement("div");
                    tab.id = "ztickybar-tab";
                    tab.innerHTML = "<h1>Tabbed ...</h1>";
                    tabs = Object.getOwnPropertyNames(newsParts).map(title => title)
                    //tab.innerHTML = "<ul>"+Object.getOwnPropertyNames(newsParts).map(title=>"<li>"+ title +"</li>").join().replace(",","")+"</ul>";
                    if (!document.getElementById("ztickybar-tab")) {
                        //webPart.parentElement.prepend(tab);
                    }
                }
            } catch (error) {
                // debugger
            }
        }
    })


    var zbarSelectedTab = 0

    var tabsHTML = `<ul class="zbar-tabs">`

    tabs.forEach((tab, ix) => {
        tabsHTML += `<li class="zbar-tab  ${ix===zbarSelectedTab ?"zbar-active":""}" id="zbar-tab${ix}">${tab}</li>`
    })

    tabsHTML += `</ul>`



    var div = document.createElement("div")
    var placeholder = document.getElementById("placeholder")
    placeholder.parentElement.parentElement.parentElement.style.backgroundColor = "#00000000"
    div.innerHTML = tabsHTML

    placeholder.parentElement.prepend(div)


    tabs.forEach((tab, ix) => {
        var tabElement = document.getElementById(`zbar-tab${ix}`);
        tabElement.addEventListener("click", x => {

            document.getElementsByClassName("zbar-active")[0].classList.remove("zbar-active");
            x.target.classList.add("zbar-active");
            
            zbarSelectedTab =x.target.innerHTML
            ToggleTabContent();

        })
    })
}

setTimeout(makeTab,2000)
var editMode = document.location.href.indexOf("Mode=Edit")===-1 ? false : true
if (pageChrome && !editMode) {
	pageChrome.style.height = "10000px"; 
	setTimeout(()=>{
		var pageChrome = document.querySelector(".SPPageChrome");
		pageChrome.style.height = "100%";
        makeTab()
	},2000)
	
}


</script>