// ==UserScript==
// @name         Better Medium for Korean
// @version      0.1
// @description  Supply a font setting dialog for Medium
// @author       lqez
// @include      https://medium.com/@*
// @grant        GM.setValue
// @grant        GM.getValue
// @namespace https://greasyfork.org/users/318416
// @downloadURL none
// ==/UserScript==
(function() {
    'use strict';

    var state = {
        fontFamily: 'system',
        fontSize: 21,
        contentWidth: 728,
        lineHeight: 1.58,
    };

    function addGlobalStyle(css) {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }

    function apply(key) {
        var nodes = document.querySelectorAll("article section > div, article section [data-selectable-paragraph]");
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];

            switch(key) {
                case 'fontFamily':
                    node.style.fontFamily = state.fontFamily;
                    break;
                case 'fontSize':
                    node.style.fontSize = state.fontSize + 'px';
                    break;
                case 'contentWidth':
                    node.style.maxWidth = state.contentWidth + 'px';
                    node.style.width = state.contentWidth + 'px';
                    node.style.padding = '0';
                    break;
                case 'lineHeight':
                    node.style.lineHeight = state.lineHeight;
                    break;
            }
        }
    }

    function set(key, value) {
        switch(key) {
            case 'fontFamily':
                state.fontFamily = value;
                break;
            case 'fontSize':
                state.fontSize = parseInt(state.fontSize) + parseInt(value);
                break;
            case 'contentWidth':
                state.contentWidth = parseInt(state.contentWidth) + parseInt(value);
                break;
            case 'lineHeight':
                state.lineHeight = Math.round((parseFloat(state.lineHeight) + parseFloat(value)) * 10) / 10;
                break;
        }
        apply(key);
        savePref(key, state[key]);
    }


    function loadPref(key, value) {
        return GM.getValue(key, value).then((v) => {
            if (v != null && !isNaN(v)) {
                state[key] = v;
                apply(key);
            }
        });
    }

    function savePref(key, value) {
        GM.setValue(key, value);
    }

    addGlobalStyle(`
        @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo&display=swap');
        .bmk {
          position: fixed;
          right: 0;
          top: 0;
          margin: 8px;
          padding: 8px;
          background: #f1f1f1;
          color: #666;
          border-radius: 50%;
          font-size: 14px;
          cursor: pointer;
          user-select: none;
          z-index: 1000;
        }

        .bmk-row {
          display: flex;
          flex-direction: row;
        }

        .bmk-row + .bmk-row {
            margin-top: 1px;
        }

        .bmk-hidden {
            visibility: hidden;
        }

        .bmk-popup {
            position: fixed;
            right: 48px;
            top: 8px;
            display: flex;
            flex-direction: column;
            background: #ddd;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 0.5px 3px 1px rgba(0,0,0,.1);
            z-index: 1001;
        }

        .bmk-button {
            color: #222;
            width: 80px;
            height: 48px;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: white;
            cursor: pointer;
            user-select: none;
            flex-grow:1
        }

        .bmk-button:hover {
            background: #efefef;
        }

        .bmk-button + .bmk-button {
            margin-left: 1px;
        }

        .bmk-line-height {
            display: flex;
            flex-direction: column;
        }
    `);

    document.body.appendChild(new DOMParser().parseFromString(`<div>
        <div class="bmk" id="bmk">Aa</div>
        <div class="bmk-popup bmk-hidden" id="bmk-popup">
            <div class="bmk-row">
                <div class="bmk-button" style="font-family: sans-serif" data-key="fontFamily" data-value="">기본</div>
                <div class="bmk-button" style="font-family: 'Nanum Gothic'"
                     data-key="fontFamily" data-value="'Nanum Gothic', sans-serif">나눔고딕</div>
                <div class="bmk-button" style="font-family: 'Nanum Myeongjo'"
                     data-key="fontFamily" data-value="'Nanum Myeongjo', serif">나눔명조</div>
            </div>
            <div class="bmk-row">
                <div class="bmk-button" data-key="fontSize" data-value="+1">&#43;</div>
                <div class="bmk-button" data-key="fontSize" data-value="-1">&#8722;</div>
            </div>
            <div class="bmk-row">
                <div class="bmk-button" data-key="contentWidth" data-value="+40">← →</div>
                <div class="bmk-button" data-key="contentWidth" data-value="-40">→←</div>
            </div>
            <div class="bmk-row">
                <div class="bmk-button" data-key="lineHeight" data-value="+0.1">
                    <div class="bmk-line-height" style="line-height: 0.38"><span>—</span><span>—</span><span>—</span></div></div>
                <div class="bmk-button" data-key="lineHeight" data-value="-0.1">
                    <div class="bmk-line-height" style="line-height: 0.25"><span>—</span><span>—</span><span>—</span></div></div>
            </div>
        </div>
    </div>`, 'text/html').getRootNode().body.firstChild);

    document.getElementById("bmk").addEventListener("click", function () {
        var popup = document.getElementById("bmk-popup");
        popup.classList.toggle("bmk-hidden");
    });

    var buttons = document.getElementsByClassName("bmk-button");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function(event) {
            var elem = event.currentTarget;
            var key = elem.getAttribute("data-key");
            var value = elem.getAttribute("data-value");
            console.log("BMK", key, value);
            set(key, value);
        }, false);
    }

    Object.keys(state).forEach(key => {
        loadPref(key, state[key]);
    });
})();