Wanikani: Dashboard Level

Adds level back to the dashboard header

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Wanikani: Dashboard Level
// @namespace    http://tampermonkey.net/
// @version      1.2.2
// @description  Adds level back to the dashboard header
// @author       Kumirei
// @include      /^https://(www|preview).wanikani.com/(dashboard)?$/
// @grant        none
// ==/UserScript==

(function(wkof) {
    // If wkof is installed, then add settings
    let display_setting = "both";
    if (wkof) {
        wkof.include('Menu,Settings');
        wkof.ready('Menu,Settings')
            .then(load_settings)
            .then(retrieve_settings)
            .then(install_menu)
            .then(display);
    }
    else display();

    // Do the stuff
    function display() {
        // Don't do anything if there's no header
        let header = document.getElementsByClassName('global-header')[0];
        if (!header) return;
        // Find user info
        let level = document.getElementsByClassName('user-summary__attribute')[0].children[0].href.split('/level/')[1];
        let subscription = document.getElementsByClassName('user-summary__attribute')[1].children[0].innerHTML.trim().toLowerCase();
        if (level==60) subscription = "gold";
        // Display
        if (display_setting=="forum" || display_setting=="both") add_forum_level(header, level, subscription);
        if (display_setting=="traditional" || display_setting=="both") add_regular_level(level);
    }

    // Adds the forum type level display
    function add_forum_level(header, level, sub) {
        header.getElementsByClassName('sitemap__section-header--account')[0].insertAdjacentHTML('beforebegin', '<div id="dashboard-level" class="'+sub+'"><span>'+level+'</span></div>');
        document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', `
<style id="DashboardLevelCSS-forum">
#dashboard-level {
    width: 19px;
    height: 19px;
    z-index: 1;
    position: absolute;
    right: 5px;
    transform: translateX(50%);
    bottom: -10px;
    border-radius: 100%;
    text-align: center;
    background-color: #f1f3f5;
}
#dashboard-level.recurring {background-color: #80d5ff;}
#dashboard-level.lifetime {background-color: #d580ff;}
#dashboard-level.gold {background-color: #fbc042;}
#dashboard-level > span {
    color: rgb(240, 240, 240) !important;
    text-shadow: 1px 1px rgba(42, 42, 42, 0.5) !important;
    font-size: 12px;
    font-weight: bold;
    display: block;
}
</style>`);
    }

    // Adds the traditional level display
    function add_regular_level(level) {
        let levels_btn = document.querySelector('.sitemap__section-header[aria-controls="sitemap__levels"]:not(.sitemap__section-header--help)');
        levels_btn.children.forEach(span=>{span.insertAdjacentHTML('afterBegin', '<span class="dashboard-level">'+level+'</span>');});
        document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', `
<style id="DashboardLevelCSS-traditional">
.sitemap__section-header[aria-controls="sitemap__levels"]:not(.sitemap__section-header--help) {
    overflow: visible;
    border-color: rgba(0,0,0,0.1);
    padding-left: 0;
    border-left: none;
    margin-left: -8px;
    margin-right: 8px;
}
.dashboard-level {
    display: inline-block;
    background-color: #a0f;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 1px 8px 0 8px;
    margin-right: 12px;
    border-radius: 4px 0 0 4px;
    line-height: 31px;
    float: left;
    min-widht: 16px;
}
#level-duration {
    margin-bottom: -3px;
    margin-top: 10px !important;
}
</style>`);
    }

    // Load WKOF settings
    function load_settings() {
        let defaults = {display: "both",};
        return wkof.Settings.load('dashboard_level', defaults);
    }

    // Updates the global setting variable
    function retrieve_settings() {
        display_setting = wkof.settings.dashboard_level.display;
    }

    // Add settings to the menu
    function install_menu() {
        var config = {
            name: 'dashboard_level',
            submenu: 'Settings',
            title: 'Dashboard Level',
            on_click: open_settings
        };
        wkof.Menu.insert_script_link(config);
    }

    // Define settings menu layout
    function open_settings(items) {
        var config = {
            script_id: 'dashboard_level',
            title: 'Dashboard Level',
            content: {
                display: {
                    type: 'list',
                    label: 'Display',
                    default: 'both',
                    hover_tip: 'Select how you want the level to display',
                    size: 3,
                    content: {
                        both: "Both",
                        traditional: "Like lesson and review counts",
                        forum: "Like on the forum",
                    },
                },
            },
        }
        let dialog = new wkof.Settings(config);
        dialog.open();
    }
})(window.wkof);