// ==UserScript==
// @name         eye-protection
// @name:zh-CN   护眼模式
// @noframes     true
// @namespace    https://github.com/jackdizhu
// @version      0.1.0
// @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('#csx-setMenu');
      if (oldEditBox) {
        oldEditBox.parentNode.removeChild(oldEditBox);
      }
      $el.style.background = curColor
    }
    // 保存选项
    function saveSetting() {
      curColor = document.querySelector('#csx-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('#csx-setMenu');
      if (oldEditBox) {
        oldEditBox.parentNode.removeChild(oldEditBox);
        return;
      }
      var color = getDbColor();
      var odom = document.createElement('div');
      odom.id = 'csx-setMenu';
      odom.style.cssText = `
          position: fixed;
          top: 100px;
          left: 50px;
          padding: 10px;
          background: #fff;
          border-radius: 4px;
      `;
      GM_addStyle(`
          #csx-setMenuSave,
          #csx-setMenureset,
          #csx-setMenuClose {
              margin: 0;
              padding: 0 2px;
              border: none;
              border-radius: 2px;
              cursor: pointer;
              background: #fff;
              color: #000;
              font: 14px/2em "微软雅黑", "Microsoft YaHei";
          }
          #csx-setMenureset {
              border: 1px solid #666;
          }
          #csx-setMenuSave {
              border: 1px solid green;
          }
          #csx-setMenuClose {
              border: 1px solid red;
          }
          #csx-setMenu {
              text-align: left;
              font-size: 14px;
              z-index: 999999;
              border: 1px solid cornflowerblue;
          }
          #csx-setMenu p {
              margin: 5px auto;
          }
          #csx-setMenu #csx-setMenuTextArea {
              border: 1px solid;
              padding: 4px;
              overflow: auto;
              border-radius: 4px;
          }
      `);
      var innerH = `
          <p>护眼模式自定义颜色,如：rgb(204, 232, 207) 或者 #cddc39</P>
          <textarea id='csx-setMenuTextArea' wrap='off' cols='45' rows='15'>${color}</textarea>
          <csxbutton id='csx-setMenuSave'>保存</csxbutton> &nbsp;&nbsp;&nbsp;
          <csxbutton id='csx-setMenureset'>重置</csxbutton> &nbsp;&nbsp;&nbsp;
          <csxbutton id='csx-setMenuClose' title='如果无法关闭 请刷新界面'>关闭</csxbutton> &nbsp;&nbsp;&nbsp;
      `;
      odom.innerHTML = innerH;
      document.body.appendChild(odom);
      document.querySelector('#csx-setMenuSave').addEventListener('click', saveSetting);
      document.querySelector('#csx-setMenureset').addEventListener('click', reset);
      document.querySelector('#csx-setMenuClose').addEventListener('click', closeMenu);
    }
    GM_registerMenuCommand('自定义颜色', openMenu); // 设置油猴插件的菜单

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