// ==UserScript==
// @name         eye-protection
// @name:zh-CN   护眼模式
// @noframes     true
// @namespace    https://github.com/jackdizhu
// @version      0.1.1
// @description:zh-CN  所有网站开启护眼模式
// @description:en     All websites turn on eye protection mode
// @author       jackdizhu
// @match        *
// @include      *
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @run-at       document-end
// @description 所有网站开启护眼模式
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    var dataKey = {
      color: 'eye-protection-color'
    }
    var defColor = 'rgb(204, 232, 207)';
    var curColor = defColor;
    var $el = document.createElement('div');
    $el.style = `
      position: fixed;
      pointer-events: none;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: ${getDbColor()};
      opacity: 0.2;
      z-index: 999999999;
    `;
    // 从数据库取配置数据
    function getDbColor () {
      var color = GM_getValue(dataKey.color) || defColor;
      return color;
    }
    // 关闭菜单
    function closeMenu() {
      var oldEditBox = document.querySelector('#eye-protection-setMenu');
      if (oldEditBox) {
        oldEditBox.parentNode.removeChild(oldEditBox);
      }
      $el.style.background = curColor
    }
    // 保存选项
    function saveSetting() {
      curColor = document.querySelector('#eye-protection-setMenuTextArea').value;
      curColor = curColor.replace(/(^\s)|(\s$)/, '');
      GM_setValue(dataKey.color, curColor);
      closeMenu();
    }
    // 重置
    function reset() {
      curColor = defColor
      GM_setValue(dataKey.color, curColor);
      closeMenu();
    }
    // 打开菜单
    function openMenu() {
      var oldEditBox = document.querySelector('#eye-protection-setMenu');
      if (oldEditBox) {
        oldEditBox.parentNode.removeChild(oldEditBox);
        return;
      }
      var color = getDbColor();
      var $dom = document.createElement('div');
      $dom.id = 'eye-protection-setMenu';
      $dom.style.cssText = `
          position: fixed;
          top: 100px;
          left: 50px;
          padding: 10px;
          background: #fff;
          border-radius: 4px;
      `;
      GM_addStyle(`
          #eye-protection-setMenu {
            font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
            font-size: 14px;
            z-index: 999999999;
            border: 1px solid #dedede;
          }
          
          #eye-protection-setMenu .button {
            padding: 3px 6px;
            line-height: 16px;
            margin-right: 10px;
            display: inline-block;
            border: 1px solid #999;
            border-radius: 3px;
            display: inline-block;
          }
          #eye-protection-setMenu p {
            margin: 0;
          }
          #eye-protection-setMenu textarea {
              border: 1px solid;
              padding: 4px;
              overflow: auto;
              border-radius: 4px;
              margin-bottom: 10px;
              margin-top: 10px;
          }
          #eye-protection-setMenu .input-color {
            padding-bottom: 10px;
          }
          #eye-protection-setMenu .input-color span {
            display: inline-block;
            line-height: 28px;
            vertical-align: bottom;
          }
      `);
      var inColor = '#cddc39'
      function getHtml (color) {
        color = color || curColor
        if (/^\#/.test(color)) {
          inColor = color
        }
        return `
          <p>护眼模式自定义颜色,如：rgb(204, 232, 207) 或者 #cddc39</P>
          <textarea id="eye-protection-setMenuTextArea" wrap='off' cols='45' rows='5' value="${color}">${color}</textarea>
          <p class="input-color">
          <input type="color" id="eye-protection-color-input" value="${inColor}">
          <span>${inColor}</span>
          </p>
          <p>
          <span class="button" id='eye-protection-setMenuSave'>保存</span>
          <span class="button" id='eye-protection-setMenureset'>重置</span>
          <span class="button" id='eye-protection-setMenuClose' title='如果无法关闭 请刷新界面'>关闭</span>
          </p>
      `;
      }
      
      var innerH = getHtml()
      function colorChange (e) {
        inColor = e.target.value
        $dom.innerHTML = getHtml(inColor);
      }
      $dom.innerHTML = innerH;
      document.body.appendChild($dom);

      function eventFn (event, fn, id) {
        if (event.target.id === id) {
          fn(event)
        }
      }

      $dom.addEventListener('click', function (event) {
        eventFn(event, saveSetting, 'eye-protection-setMenuSave')
      }, false);
      $dom.addEventListener('click', function (event) {
        eventFn(event, reset, 'eye-protection-setMenureset')
      }, false);
      $dom.addEventListener('click', function (event) {
        eventFn(event, closeMenu, 'eye-protection-setMenuClose')
      }, false);
      $dom.addEventListener('change', function (event) {
        eventFn(event, colorChange, 'eye-protection-color-input')
      }, false);
    }
    GM_registerMenuCommand('自定义颜色', openMenu); // 设置油猴插件的菜单

    document.body.appendChild($el)
})();