MediaWiki:Vector.js

/* 这个文件内的JavaScript源码将影响使用Vector皮肤的用户，并在每次页面载入时加载 */
/* 这些源码执行和希顶WIKI相同的 “知识共享署名-相同方式共享 4.0” 协议 */

/* 这里的代码将运行并用于处理Vector皮肤上特异的页面调整和响应式适配 */
/* 需要注意MeadiaWiki的代码预处理器仅支持较旧的JavaScript语法，如for of语句在此环境下不可用 */
/* 需要在dom加载完后执行或需等待局部加载完毕执行的函数请在本文件末尾的指定位置调用 */

function setMobileBody() { //处理移动端响应式适配
    if (window.screen.width <= 500) { //检查是否在手机上运行
        //页面缩放处理
        document.querySelector("body")
            .style.position = "absolute";
        document.querySelector("body")
            .style.transform = "scale(" + (window.screen.width / 500) + ")";
        document.querySelector("body").style.left = (-(500 - window.screen.width) / 2) + "px";
        document.querySelector("body").style.top = (-(document.querySelector("body").clientHeight - document.querySelector("body").clientHeight * (window.screen.width / 500)) / 2) + "px";
    }
}

function injectPageBase() { //处理大页面边距，和css配合实现
    var mwPageBase = document.querySelector("#mw-page-base")
    if (mwPageBase) {
        var clonedPageBase = mwPageBase.cloneNode(true);
        //clonedPageBase.setAttribute("id", "cloned-page-base");
        clonedPageBase.setAttribute("style", "position: absolute; top: 0; width: 100%; left: 0;"); //css属性，浮动在背后提供背景
        mwPageBase.parentNode.insertBefore(clonedPageBase, mwPageBase);
        return true;
    } else return false;
}

var isShowPanel = false; //信息栏标志
function infoMethod() { //移动端信息栏响应函数
    if (!isShowPanel) {
        isShowPanel = true;
        document.querySelector("#mw-panel")
            .style.display = "block";
        document.querySelector("#ca-nstab-project")
            .style.backgroundImage = "linear-gradient(to top,#77c1f6 0,#e8f2f8 1px,#ffffff 100%)";
    } else {
        isShowPanel = false;
        document.querySelector("#mw-panel")
            .style.display = "none";
        document.querySelector("#ca-nstab-project")
            .style.backgroundImage = "linear-gradient(to top,#ffffff 0,#ffffff 100%)";
    }
}

function injectInfos() { //注入移动端信息栏
    if (window.screen.width <= 500 && document.querySelector("#p-namespaces > div > ul")) { //如果在手机上并且加载完毕
        var myInfos = document.createElement('li');
        myInfos.setAttribute("id", "infos");
        myInfos.setAttribute("class", "selected");
        myInfos.innerHTML = "<a id='ininfos' href='javascript:void(0);' onclick='infoMethod()'>☰</a>";
        document.querySelector("#p-namespaces > div > ul")
            .insertBefore(myInfos, document.querySelector("#p-namespaces > div > ul")
                .firstElementChild);
        return true;
    } else return false;
}


/*************定时执行块*************/
//定时控制变量，用于处理部分延迟元素的后加载
var isjectPageBase = false;
var isjectInfos = false;

var XwVectorInterval = setInterval(function () {
    isjectPageBase = (!isjectPageBase) ? injectPageBase() : true;
    isjectInfos = (!isjectInfos) ? injectInfos() : true;
}, 300);
var XwVectorInterval2 = setInterval(setMobileBody, 3);

//销毁定时
setTimeout(function () {
    clearInterval(XwVectorInterval);
    clearInterval(XwVectorInterval2);
},
    15000);


/*************页面执行块*************/
//dom执行完成后加载
$(function () {
    //处理移动端响应式适配
    setMobileBody();
    //处理大页面边距
    injectPageBase();
});

/*************内部包含反响*************/
//需要mw参数时用，回调函数外部无法取值
(function (mw) {

})(mediaWiki);