User:Irukaza/common.js

/**
 * 侧边栏隐藏工具
 * 本工具参考自维百的同功能小工具——https://zh.wikipedia.org/wiki/MediaWiki:Gadget-CollapsibleSidebar.js
 * 但[[User:AnnAngela]]做了一点改进
 * 此处代码已转化为可通过mw检测的格式，源码可在 https://zh.moegirl.org.cn/User:AnnAngela/js/sidebarHidden.js 找到
 */
/* eslint-disable prefer-arrow-callback */
/* eslint-disable prefer-template */
/* eslint-disable comma-dangle */
/* eslint-disable no-var */
/* global $, mw, localforage*/
"use strict";
$(function () {
    if (mw.config.get("skin") !== "vector" || mw.config.get("wgCanonicalSpecialPageName") === "Blankpage" || getComputedStyle(document.body).direction !== "ltr") {
        return;
    }
    mw.loader.using(["ext.gadget.localforage"]).then(function () {
        var test = localforage.createInstance({
            name: "AnnTools",
            storeName: "IndexedDB-test",
            driver: [localforage.INDEXEDDB]
        });
        return new Promise(function (res) {
            var random = Math.random().toString().substring(2);
            var fired = false;
            test.setItem("test", random).then(function () {
                return test.getItem("test");
            }).then(function (result) {
                if (!fired) {
                    fired = true;
                    res(result === random);
                }
            });
            setTimeout(function () {
                if (!fired) {
                    fired = true;
                    res(false);
                }
            }, 137);
        });
    }).then(function (indexedDBCanRun) {
        var store = localforage.createInstance({
            name: "AnnTools",
            storeName: "SidebarHidden",
            driver: indexedDBCanRun ? [localforage.INDEXEDDB] : [localforage.LOCALSTORAGE]
        });
        store.getItem("hidden").then(function (_hidden) {
            var hidden = _hidden;
            var saving = false;
            var generateImageObject = function (svg) {
                return URL.createObjectURL(new Blob([svg], {
                    type: "image/svg+xml"
                }));
            };
            var logoPic = "https://www.hmoegirl.com/images/b/bc/Hmoegirl_logo.png";
            var arrowRightSvg = generateImageObject('<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48"><polygon fill="#2196F3" points="17.1,5 14,8.1 29.9,24 14,39.9 17.1,43 36,24"/></svg>');
            var arrowLeftSvg = generateImageObject('<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48"><polygon fill="#2196F3" points="30.9,43 34,39.9 18.1,24 34,8.1 30.9,5 12,24"/></svg>');
            var $body = $(document.body);
            var $mwNavigation = $("#mw-navigation");
            var $mwWikiLogo = $(".mw-wiki-logo");
            var $logoLink = $mwWikiLogo.clone(false);
            var $logo = $("<img>").attr({
                id: "sidebarHidden-logo",
                src: logoPic
            });
            var $arrow = $("<img>").attr({
                id: "sidebarHidden-arrow",
                src: arrowLeftSvg
            });
            $logoLink.empty().removeAttr("class").attr("id", "sidebarHidden-logo-link").append($logo);
            var hide = function () {
                if (saving) {
                    return;
                }
                hidden = true;
                saving = true;
                $body.addClass("sidebarHidden");
                $arrow.attr("src", arrowRightSvg);
                store.setItem("hidden", hidden).then(function () {
                    saving = false;
                });
            };
            var show = function () {
                if (saving) {
                    return;
                }
                saving = true;
                hidden = false;
                $body.removeClass("sidebarHidden");
                $arrow.attr("src", arrowLeftSvg);
                store.setItem("hidden", hidden).then(function () {
                    saving = false;
                });
            };
            $mwNavigation.append($arrow).append($logoLink);
            if (hidden) {
                hide();
            }
            $arrow.on("click", function () {
                (hidden ? show : hide)();
            });
        });
    });
});