MediaWiki:Vector.js: Unterschied zwischen den Versionen

Aktuelle Version vom 22. Februar 2023, 15:21 Uhr

/* Das folgende JavaScript wird für Benutzer der Vector-Benutzeroberfläche geladen. */



//--------------------------------------------- Parameters



// ------------ Parameter

var scroll_x;
var scroll_y;


// ------------ Start

addScrollButton();
modifySearch();
incrementInlist();
categoryImprovements();
handleLiveChatButtons();
handleExpandables();
handleInfoButtons();
openHash(getURLHash());

// Listen for URL Change
window.addEventListener('hashchange', function() {
	openHash(getURLHash());
})

//--------------------------------------------- Scroll Actions



//--------------------------------------------- Add Scroll to top button
function addScrollButton(){
    window.addEventListener("scroll", function(event) {
        scroll_y = this.scrollY;
        scroll_x = this.scrollX;

        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            $(sc_t).fadeIn();
        } else {
            $(sc_t).fadeOut();
        }
    });

    sc_t = document.createElement("div");
    sc_t.id = "scroll-top-button";
    sc_t.classList.add("_button");
    document.querySelector("body").append(sc_t);
    sc_t.addEventListener("click", topFunction);
}

function topFunction() {
    $("html, body").animate({ scrollTop: "0" });
}

function scrollToAnchorByURL(){
    var url = window.location.href;
    if(url.includes("#")){
        var id = url.split("#")[1];
        var anchor = $("#"+id);
        scrollToElement(anchor);
    }
}

function scrollToElement(elem){
    $('html,body').animate({scrollTop: elem.offset().top});
}

// ---------------- Navigation

var panels = document.querySelectorAll(".vector-menu-portal");
for(var i=0; i<panels.length;i++){
    panels[i].style.display = "none";
}

document.querySelector("#mw-panel").addEventListener("mouseover", function(event) {
    var panels = document.querySelectorAll(".vector-menu-portal");
    for(var i=0; i<panels.length;i++){
        panels[i].style.display = "block";
    }
}, "false");

document.querySelector("#mw-panel").addEventListener("mouseout", function(event) {
    var panels = document.querySelectorAll(".vector-menu-portal");
    for(var i=0; i<panels.length;i++){
        panels[i].style.display = "none";
    }
}, "false");

//--------------------------------------------- Search Field
function modifySearch(){
    document.querySelector("#searchInput").placeholder = "Suche…";
}

//-----------Add Search query to href of result link
injectSearchResult();
function injectSearchResult(){
    var results = document.querySelectorAll(".mw-search-result");
    for(var i=0; i< results.length;i++){
        var match = results[i].querySelector(".searchmatch").innerHTML;
        match = "?search=%22" + match.replace(/ /g, "+") + "%22";
        var link = results[i].querySelector(".mw-search-result-heading").querySelector("a");
        link.dataset.searchmatch = match;
        link.href = link.href + match;
    }
}

//-----------Look for search query and try to open parent expandable
showSearchMatch();
function showSearchMatch(){
    var url = window.location.href;
    if(url.includes("?search=")){
        var matchParts = url.split("?search=")[1].split("%22")[1].split("+");
        var match = ""
        for(var i=0; i< matchParts.length;i++){
            match = match + " " + matchParts[i];
        }
        var html = document.querySelector("body").innerHTML;
        var expandableTitlesBefore = html.split(match)[0].split('id="expandable-title"');
        var lastExpandable = expandableTitlesBefore[expandableTitlesBefore.length - 1];
        var id = lastExpandable.split('id="')[1].split('">')[0];
        openHash(id);
        var elem = $("#"+id)
        scrollToElement(elem);
    }

}


//--------------------------------------------- Link Styling (Inactive via CSS)
function addCustomStyles(){
    var links = document.querySelectorAll("a");
    for(var i=0; i<links.length;i++){
        var link = links[i];
        if(link.getElementsByTagName("img").length==0){
            link.classList.add("adbk-link");
        }
    }
}

//--------------------------------------------- Inlist Incrementor

function incrementInlist(){
    var inlists = document.querySelectorAll(".inlist");
    for (var i = 0; i < inlists.length; i++){
        var inlist = inlists[i];
        addListClasses(inlist);
        handleInlist(inlist, 0);
    }
}

function addListClasses(inlist_div){
    var l = inlist_div.querySelectorAll("ul");
    for(var i=0;i<l.length;i++){
        l[i].classList.add("inlist-list");
    }
    l = inlist_div.querySelectorAll("ol");
    for(var i=0;i<l.length;i++){
        l[i].classList.add("inlist-list");
    }
}

function handleInlist(inlist, p_listindex){
    var list = inlist.getElementsByClassName("inlist-list");
    var children = list[0].children;
    for (var i = 0; i < children.length; i ++){
        var listindex = p_listindex + i + 1;
        var li = children[i];
        if(li.getElementsByClassName("inlist-list").length > 0){
            handleInlist(li, listindex*10);
        }
        var str = listindex.toString();
        var str_n = "";
        for (var c = 0; c < str.length; c++){
            str_n = str_n + "." + str.charAt(c);
        }
        str_n = str_n.slice(1)
        li.setAttribute('data-listindex', str_n);
    }
}


//--------------------------------------------- Infobutton-URL

function handleInfoButtons(){
    var infobuttons = document.querySelectorAll("#infobutton-url");
    for (var i = 0; i < infobuttons.length; i++){
        infobuttons[i].addEventListener("click", function(event) {
            var infobutton = getParentByClass(event.target, "infobutton-url");
            var url = infobutton.getAttribute('data-url');
            window.open(url);
        })
    }
}

//--------------------------------------------- Category Improvements
function categoryImprovements(){
    var head = document.getElementById("firstHeading")
    var head_str = head.innerHTML;
    var head_arr = head_str.split(":");
    var head_new = "";
    for(var i=0;i<head_arr.length;i++){
        head_new = head_new + head_arr[i] + ": ";
    }
    head.innerHTML = cutLast(cutLast(head_new));
}

//--------------------------------------------- Rocket.Chat Livechat

(function(w, d, s, u) {
		w.RocketChat = function(c) { w.RocketChat._.push(c) }; w.RocketChat._ = []; w.RocketChat.url = u;
		var h = d.getElementsByTagName(s)[0], j = d.createElement(s);
		j.async = true; 
        j.src = 'https://chat.adbk-nuernberg.de/livechat/rocketchat-livechat.min.js?_=201903270000';
		//h.parentNode.insertBefore(j, h);
        document.body.appendChild(j);
	})(window, document, 'script', 'https://chat.adbk-nuernberg.de/livechat');

function openLiveChat() {
   newwindow=window.open("https://chat.adbk-nuernberg.de/livechat?mode=popout","chat.adbk-nuernberg.de",'height=700,width=480');
   if (window.focus) {newwindow.focus()}
   return false;
}


function handleLiveChatButtons(){
    var liveChatButtons = document.querySelectorAll(".livechat");
    for (var i = 0; i < liveChatButtons.length; i++){
        var liveChatButton = liveChatButtons[i];
        liveChatButton.addEventListener("click", openLiveChat, false);
    }
}



//--------------------------------------------- Expandable

function handleExpandables(){
    var expandables = document.querySelectorAll(".expandable");
    for (var i = 0; i < expandables.length; i++){
        checkHeadline(expandables[i]);
        var title = expandables[i].querySelector("#expandable-title");
        title.addEventListener("click", function(event) {
            toggleTitle(event.target);
        }, false);
        var clipboard = expandables[i].querySelector("#expandable-clipboard");
        clipboard.addEventListener("click", function(event) {
            copyURL(event.target);
        }, false);
    }
}

function getURLHash(){
    var url = window.location.href;
    return url.split("#")[1];   
}

function openHash(hash){
    close_all_expandables()
    var section = document.getElementById(hash);
    var bubbleList = [];
    try {
    while (section.tagName != "BODY") {
        bubbleList.push(section);
        section = section.parentElement;
    }  
    for (var i = 0; i < bubbleList.length; i++){
        try {
            if($(bubbleList[i]).hasClass("expandable")){
                open_expandable(bubbleList[i]);
            }
        } catch (err) {}
    }
    } catch (err) {}
}

function copyURL(elem){
    var url = window.location.href;
    var baseURL = url.split("#")[0];
    var e = getParentByClass(elem, "expandable");
    try {
        var id = e.querySelector("#expandable-title").firstChild.firstChild.id;
        var url = baseURL + "#" + id;
        navigator.clipboard.writeText(url);
    } catch (err) {}
}

function checkHeadline(e){
    try {
        var h = e.querySelector("#expandable-title").querySelector("h");
    } catch (err) {hideClipboardButton(e);}
}

function hideClipboardButton(exp){
    exp.querySelector("#expandable-clipboard").style.display = "None";
}

function close_all_expandables(){
    var expandables = document.querySelectorAll(".expandable");
    for (var i = 0; i < expandables.length; i++){
        close_expandable(expandables[i]);
    }
}

function close_expandable(elem){
    var content = elem.querySelector("#expandable-content");
    var title = elem.querySelector("#expandable-title");
    title.classList.remove('arrow-down');
    title.classList.add('arrow-right');
    content.dataset.visible = "false";
    content.style.display = "none";
}

function open_expandable(elem){
    var content = elem.querySelector("#expandable-content");
    var title = elem.querySelector("#expandable-title");
    title.classList.add('arrow-down');
    title.classList.remove('arrow-right');
    content.dataset.visible = "true";
    content.style.display = "inherit";
    scrollToAnchorByURL();
}

function toggle_expandable(elem){
    var content = elem.querySelector("#expandable-content");
    var visible = content.getAttribute('data-visible');
    if (visible == "true") {
        close_expandable(elem)
    } else {
        open_expandable(elem)
    }
}

function toggleTitle(elem){
    var exp = getParentByClass(elem, "expandable");
    var t = exp.querySelector("#expandable-title");    
    var c = exp.querySelector("#expandable-content");
    var v = c.getAttribute('data-visible');
    if (v == "true") {
        t.classList.remove('arrow-down');
        t.classList.add('arrow-right');
        c.dataset.visible = "false";
        c.parentElement.querySelector("#expandable-content").style.display = "none";
    } else {
        t.classList.add('arrow-down');
        t.classList.remove('arrow-right');
        c.dataset.visible = "true";
        c.parentElement.querySelector("#expandable-content").style.display = "inherit";
        modifyURL(t);
    }
}


function modifyURL(elem){
    try {
    var t = elem.firstChild.firstChild;
    var sect = "#" + t.id;
    window.history.replaceState(null, document.title, sect)
    } catch (err) {}
}

//--------------------------------------------- Functions

function cutFirst(str){
   return str.slice(1)
}

function cutLast(str){
   return str.slice(0, -1)
}

function getParentByClass(elem, _class){
    var t = elem;
    while (!$(t).hasClass(_class)) {
        t = t.parentElement;
    }
    return t;
}