HF Story Controls

// ==UserScript==
// @name         HF Story mode
// @namespace    http://www.hentai-foundry.com/
// @version      0.2.1
// @description  Controls for story reading in HF
// @author       martixy
// @match        https://www.hentai-foundry.com/stories/user/*/Chapter*
// @match        http://www.hentai-foundry.com/stories/user/*/Chapter*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @copyright    2016+, martixy
// ==/UserScript==
/* jshint -W097 */
//'use strict';

/* CHANGELOG:
v0.1 Initial version
 + Controls to change text size and width
 + Remembers settings between sessions
v0.2 22-04-2017
 + Added colour controls.
 + Also helpful titles for everything.
 * Fixed mangled comments.
v0.2.1 13-01-2018
 * Fixed url match to https
 * Fixed changed jQuery selector
*/

GM_addStyle('\
    .text-controls {\
        float: right;\
        display: inline-block;\
    }\
    .boxtitle {\
        display: inline-block;\
    }\
    .text-controls > span {\
        cursor: pointer;\
    }\
    .color-box {\
        display: inline-block;\
        height: 1.4em;\
        width: 1.4em;\
        padding: 0;\
        vertical-align: text-top;\
        margin-right: 0.3em;\
        border: 1px solid #272822;\
    }\
    ');

var controls = $('<div class="text-controls"><input type="color" class="color-box" name="Background Color" id="HFSM_bgColor" title="Change background colour"/><input type="color" class="color-box" name="Text Color" id="HFSM_fontColor" title="Change text colour"/><span id="largerText" title="Increase text size">A</span> <span id="smallerText" title="Decrease text size">a</span> <span id="largerMargin" title="Increase Margin">↦</span> <span id="smallerMargin" title="Decrease Margin">↤</span> </div>');

$('#viewChapter > .boxheader').append(controls);
var body = $('#viewChapter > .boxbody');
var fontSize = GM_getValue('HFSM_fontSize', 1);
var marginWidth = GM_getValue('HFSM_marginWidth', 0);
var fontColorDefault = rgb2hex(body.css('color'));
var bgColorDefault = rgb2hex(body.css('background-color'));
var fontColor = GM_getValue('HFSM_fontColor', fontColorDefault);
var bgColor = GM_getValue('HFSM_bgColor', bgColorDefault);


body.css('font-size', fontSize + "em");
body.css('padding', "0 " + marginWidth + "px");
body.css('color', fontColor);
body.css('background-color', bgColor);
$('#HFSM_fontColor').val(fontColor);
$('#HFSM_bgColor').val(bgColor);

$(document).on('keydown', routeKeys);
$('.boxheader').on('click', '#largerText', increaseFontSize);

$('.boxheader').on('click', '#smallerText', decreaseFontSize);

$('.boxheader').on('click', '#largerMargin', increaseMargin);

$('.boxheader').on('click', '#smallerMargin', decreaseMargin);

$('.boxheader').on('change', '#HFSM_fontColor', changeFontColor);

$('.boxheader').on('change', '#HFSM_bgColor', changeBgColor);

function increaseFontSize(ev) {
    fontSize += 0.1;
    GM_setValue('HFSM_fontSize', fontSize);
    body.css('font-size', fontSize + "em");
}

function decreaseFontSize(ev) {
    fontSize -= 0.1;
    GM_setValue('HFSM_fontSize', fontSize);
    body.css('font-size', fontSize + "em");
}

function increaseMargin(ev) {
    marginWidth += 50;
    GM_setValue('HFSM_marginWidth', marginWidth);
    body.css('padding', "0 " + marginWidth + "px");
}

function decreaseMargin(ev) {
    marginWidth = Math.max(0, marginWidth-50);
    GM_setValue('HFSM_marginWidth', marginWidth);
    body.css('padding', "0 " + marginWidth + "px");
}

function changeFontColor(ev) {
    fontColor = $(this).val();
    GM_setValue('HFSM_fontColor', fontColor);
    body.css('color', fontColor);
}

function changeBgColor(ev) {
    bgColor = $(this).val();
    GM_setValue('HFSM_bgColor', bgColor);
    body.css('background-color', bgColor);
}

function reset(ev) {
    fontSize = 1;
    marginWidth = 0;
    GM_setValue('HFSM_fontSize', fontSize);
    GM_setValue('HFSM_marginWidth', marginWidth);
    GM_setValue('HFSM_fontColor', fontColorDefault);
    GM_setValue('HFSM_bgColor', bgColorDefault);

    body.css('font-size', fontSize + "em");
    body.css('padding', "0 " + marginWidth + "px");
    body.css('color', fontColorDefault);
    body.css('background-color', bgColorDefault);

    $('#HFSM_fontColor').val(fontColorDefault);
    $('#HFSM_bgColor').val(bgColorDefault);
}

function routeKeys(ev) {
    if(ev.type == 'keydown') {
        switch(ev.keyCode) {
            case 39: increaseMargin(); break;
            case 37: decreaseMargin(); break;
            case 221: increaseFontSize(); break;
            case 219: decreaseFontSize(); break;
            case 27: reset(); break;
        }
    }
}
// 37 = left
// 39 = right
// 38 = up
// 40 = down
// 221 = ]
// 219 = [

// Keycode tester
// https://css-tricks.com/snippets/javascript/javascript-keycodes/

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}