☰

碧蓝幻想书签

none

目前为 2019-04-05 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         碧蓝幻想书签
  3. // @namespace    https://github.com/biuuu/gbf-bookmark
  4. // @version      0.0.9
  5. // @description  none
  6. // @author       biuuu
  7. // @match        *://game.granbluefantasy.jp/*
  8. // @match        *://gbf.game.mbga.jp/*
  9. // @run-at       document-start
  10. // @supportURL   https://github.com/biuuu/gbf-bookmark/issues
  11. // ==/UserScript==
  12. (function () {
  13.   'use strict';
  14.  
  15.   var data = {
  16.     list: [{
  17.       url: '#mypage',
  18.       name: '首页',
  19.       index: 3,
  20.       background: '#297fc8'
  21.     }, {
  22.       url: '#quest/assist',
  23.       name: '副本列表',
  24.       index: 7,
  25.       background: '#c96883'
  26.     }, {
  27.       url: '#quest/assist/event',
  28.       name: '活动副本',
  29.       index: 8,
  30.       background: '#8dc3dd'
  31.     }, {
  32.       url: '#quest/fate',
  33.       name: 'Fate',
  34.       index: 9,
  35.       background: '#fff'
  36.     }, {
  37.       url: '#sidestory',
  38.       name: 'SIDE STORY',
  39.       index: 10,
  40.       background: '#eee3c8'
  41.     }, {
  42.       url: '#arcarum2',
  43.       name: '塔罗首页',
  44.       index: 12,
  45.       background: '#ff972d'
  46.     }, {
  47.       url: 'back',
  48.       name: '后退',
  49.       index: 16,
  50.       background: '#FFEB3B'
  51.     }, {
  52.       url: 'reload',
  53.       name: '刷新',
  54.       index: 18,
  55.       background: '#5fc829'
  56.     }]
  57.   };
  58.  
  59.   var getLocalData = function getLocalData() {
  60.     try {
  61.       var str = localStorage.getItem('gbf-bookmark:data');
  62.  
  63.       if (str) {
  64.         var obj = JSON.parse(str);
  65.  
  66.         if (obj && obj.length) {
  67.           data.list = obj.sort(function (prev, next) {
  68.             return prev.index - next.index;
  69.           });
  70.         }
  71.       }
  72.     } catch (e) {}
  73.   };
  74.  
  75.   getLocalData();
  76.  
  77.   var config = {
  78.     position: 'left',
  79.     hideDelay: 10,
  80.     animation: true,
  81.     margin: 4,
  82.     size: 2
  83.   };
  84.  
  85.   var getLocalConfig = function getLocalConfig() {
  86.     try {
  87.       var _config = JSON.parse(localStorage.getItem('gbf-bookmark:config'));
  88.  
  89.       if (_config) {
  90.         if (_config.hideDelay) {
  91.           _config.hideDelay = _config.hideDelay | 0;
  92.         }
  93.  
  94.         if (_config.margin) {
  95.           _config.margin = _config.margin | 0;
  96.         }
  97.  
  98.         Object.assign(config, _config);
  99.       }
  100.     } catch (e) {}
  101.   };
  102.  
  103.   getLocalConfig();
  104.  
  105.   var applyConfig = function applyConfig() {
  106.     var cont = document.getElementById('gbf-bookmark-lacia');
  107.  
  108.     if (config.position === 'left') {
  109.       cont.classList.remove('bookmark-right');
  110.     } else {
  111.       cont.classList.add('bookmark-right');
  112.     }
  113.  
  114.     cont.classList.remove('autohide-bookmark');
  115.     cont.classList.remove('keep-bookmark');
  116.  
  117.     if (config.hideDelay === 0) {
  118.       cont.classList.add('autohide-bookmark');
  119.     } else if (config.hideDelay < 0) {
  120.       cont.classList.add('keep-bookmark');
  121.     }
  122.  
  123.     cont.style.opacity = null;
  124.  
  125.     if (!config.animation) {
  126.       cont.classList.add('bookmark-remove-anime');
  127.     } else {
  128.       cont.classList.remove('bookmark-remove-anime');
  129.     }
  130.  
  131.     cont.classList.remove('size-1', 'size-2', 'size-3');
  132.     cont.classList.add("size-".concat(config.size));
  133.     var styleTag = document.getElementById('style-gbf-bookmark');
  134.  
  135.     if (!styleTag) {
  136.       styleTag = document.createElement('style');
  137.       styleTag.id = 'style-gbf-bookmark';
  138.       document.body.appendChild(styleTag);
  139.     }
  140.  
  141.     var width = 67;
  142.     if (config.size === 1) width = 84;
  143.     if (config.size === 3) width = 59;
  144.     var left = width - config.margin;
  145.     if (left > width) left = width;
  146.     if (left < 0) left = 0;
  147.     styleTag.innerHTML = "\n  body #gbf-bookmark-lacia".concat(config.position === 'right' ? '.bookmark-right' : '', " {\n    ").concat(config.position, ": -").concat(left, "px;\n  }\n  ");
  148.   };
  149.  
  150.   var initIpt = function initIpt() {
  151.     var iptPosition = document.getElementById('ipt-position-bookmark');
  152.     var iptHidedelay = document.getElementById('ipt-hidedelay-bookmark');
  153.     var iptMargin = document.getElementById('ipt-margin-bookmark');
  154.     var iptAnimation = document.getElementById('ipt-animation-bookmark');
  155.     var iptSize = document.getElementById('ipt-size-bookmark');
  156.     iptPosition.value = config.position;
  157.     iptHidedelay.value = config.hideDelay;
  158.     iptMargin.value = config.margin;
  159.     iptAnimation.value = config.animation ? 'open' : 'close';
  160.     iptSize.value = config.size;
  161.   };
  162.  
  163.   var saveConfig = function saveConfig() {
  164.     try {
  165.       localStorage.setItem('gbf-bookmark:config', JSON.stringify(config));
  166.     } catch (e) {}
  167.   };
  168.  
  169.   function _toConsumableArray(arr) {
  170.     return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
  171.   }
  172.  
  173.   function _arrayWithoutHoles(arr) {
  174.     if (Array.isArray(arr)) {
  175.       for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
  176.  
  177.       return arr2;
  178.     }
  179.   }
  180.  
  181.   function _iterableToArray(iter) {
  182.     if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
  183.   }
  184.  
  185.   function _nonIterableSpread() {
  186.     throw new TypeError("Invalid attempt to spread non-iterable instance");
  187.   }
  188.  
  189.   var fontColor = function fontColor(rgb) {
  190.     var str = rgb.slice(1);
  191.     var r, g, b;
  192.  
  193.     if (str.length === 6) {
  194.       r = parseInt(str.slice(0, 2), 16);
  195.       g = parseInt(str.slice(2, 4), 16);
  196.       b = parseInt(str.slice(4, 6), 16);
  197.     } else {
  198.       r = str.slice(0, 1);
  199.       r = parseInt("".concat(r).concat(r), 16);
  200.       g = str.slice(1, 2);
  201.       g = parseInt("".concat(g).concat(g), 16);
  202.       b = str.slice(2, 3);
  203.       b = parseInt("".concat(b).concat(b), 16);
  204.     }
  205.  
  206.     var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  207.  
  208.     if (luminance > 0.7) {
  209.       return '#000';
  210.     } else {
  211.       return '#fff';
  212.     }
  213.   };
  214.  
  215.   var colors = ['#ff972d', '#297fc8', '#5fc829', '#FFEB3B', '#c96883', '#8dc3dd', '#ffffff', '#eee3c8', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#607D8B'];
  216.  
  217.   var randomColor = function randomColor() {
  218.     return colors[Math.floor(Math.random() * colors.length)];
  219.   };
  220.  
  221.   var renderTag = function renderTag() {
  222.     var html = '';
  223.     data.list.forEach(function (item, index) {
  224.       var bg = item.background || '#297fc8';
  225.       var color = item.color || fontColor(bg);
  226.       html += "<div style=\"background-color:".concat(bg, ";color:").concat(color, "\"\n    class=\"paper-shadow2 bookmark-tag\"><div class=\"idx-tag\"><span>").concat(item.index, "</span></div>\n    <span class=\"edit-tag\" data-index=\"").concat(index, "\">\u6539</span><span class=\"delete-tag\" data-index=\"").concat(index, "\">\u5220</span>\n    ").concat(item.name || 'NoName', "</div>");
  227.     });
  228.     return html;
  229.   };
  230.  
  231.   var renderList = function renderList() {
  232.     var str = '';
  233.     var bookmarks = data.list;
  234.  
  235.     if (bookmarks.length) {
  236.       var indexList = bookmarks.map(function (item) {
  237.         return item.index;
  238.       });
  239.       var maxIndex = Math.max.apply(Math, _toConsumableArray(indexList));
  240.       var list = new Array(maxIndex > 100 ? 100 : maxIndex).fill({});
  241.       indexList.forEach(function (tag, idx) {
  242.         list[tag - 1] = bookmarks[idx];
  243.       });
  244.       list.forEach(function (item) {
  245.         if (item.url) {
  246.           var bg = item.background || '#297fc8';
  247.           var color = item.color || fontColor(bg);
  248.  
  249.           if (item.url === 'reload') {
  250.             str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"bookmark-item-lacia paper-shadow\" onclick=\"location.reload()\"><div>").concat(item.name || 'NoName', "</div></a>");
  251.           } else if (item.url === 'back') {
  252.             str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"bookmark-item-lacia paper-shadow\" onclick=\"history.back()\"><div>").concat(item.name || 'NoName', "</div></a>");
  253.           } else if (item.url === 'forward') {
  254.             str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"bookmark-item-lacia paper-shadow\" onclick=\"history.forward()\"><div>").concat(item.name || 'NoName', "</div></a>");
  255.           } else {
  256.             str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"bookmark-item-lacia paper-shadow\" href=\"").concat(item.url, "\"><div>").concat(item.name || 'NoName', "</div></a>");
  257.           }
  258.         } else {
  259.           str += "<div class=\"bookmark-item-lacia\"></div>";
  260.         }
  261.       });
  262.     }
  263.  
  264.     if (!str) {
  265.       str += "<a style=\"background-color:".concat(randomColor(), ";color:#fff\" class=\"bookmark-item-lacia paper-shadow\"><div>\u8BBE\u7F6E</div></a>");
  266.     }
  267.  
  268.     return str;
  269.   };
  270.  
  271.   var setIndex = function setIndex() {
  272.     var index = 1;
  273.     data.list.forEach(function (item) {
  274.       if (item.index === index) {
  275.         index = item.index + 1;
  276.       }
  277.     });
  278.     return index;
  279.   };
  280.  
  281.   var renderAll = function renderAll() {
  282.     document.getElementById('bookmark-cont').innerHTML = renderTag();
  283.     document.getElementById('gbf-bookmark-lacia').innerHTML = renderList();
  284.   };
  285.  
  286.   var saveData = function saveData() {
  287.     try {
  288.       localStorage.setItem('gbf-bookmark:data', JSON.stringify(data.list));
  289.     } catch (e) {}
  290.   };
  291.  
  292.   var css = "\n#gbf-bookmark-lacia {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 2px;\n  height: 100%;\n  z-index: 9999999;\n  left: -65px;\n  pointer-events: none;\n  transition: left 0.1s, right 0.1s;\n}\n#show-setting-bookmark {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 10px;\n  height: 10px;\n  z-index: 10000000;\n  cursor: pointer;\n}\n#gbf-bookmark-lacia.bookmark-remove-anime,\n#gbf-bookmark-lacia.bookmark-remove-anime a.bookmark-item-lacia {\n  transition: none;\n}\n#gbf-bookmark-lacia.autohide-bookmark {\n  opacity: 0;\n}\n#gbf-bookmark-lacia:hover {\n  left: 0;\n}\n#gbf-bookmark-lacia.autohide-bookmark:hover {\n  opacity: 1;\n}\n#gbf-bookmark-lacia:hover .bookmark-item-lacia {\n  box-shadow: none;\n}\n#gbf-bookmark-lacia.size-1 .bookmark-item-lacia {\n  width: 26px;\n  height: 30px;\n  line-height: 30px;\n  padding-left: 11px;\n}\n#gbf-bookmark-lacia.size-1 a.bookmark-item-lacia {\n  width: 85px;\n  font-size: 11px;\n}\n#gbf-bookmark-lacia.size-1:hover a.bookmark-item-lacia:nth-child(2n) {\n  width: 87px;\n}\n#gbf-bookmark-lacia.size-3 .bookmark-item-lacia {\n  width: 18px;\n  height: 20px;\n  line-height: 20px;\n  padding-left: 6px;\n}\n#gbf-bookmark-lacia.size-3 a.bookmark-item-lacia {\n  width: 60px;\n  font-size: 7px;\n}\n#gbf-bookmark-lacia.size-3:hover a.bookmark-item-lacia:nth-child(2n) {\n  width: 62px;\n}\n.bookmark-item-lacia {\n  width: 20px;\n  height: 24px;\n  line-height: 24px;\n  padding-left: 8px;\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  pointer-events: auto;\n}\n#gbf-bookmark-lacia:hover a.bookmark-item-lacia:nth-child(2n) {\n  width: 70px;\n}\na.bookmark-item-lacia:focus {\n  outline: 0;\n}\na.bookmark-item-lacia {\n  width: 68px;\n  background-color: #fff;\n  text-decoration: none;\n  white-space: nowrap;\n  color: #000;\n  font-size: 9px;\n  font-family: -apple-system, -apple-system-font, \"Microsoft JHengHei\", HelveticaNeue, \"Helvetica Neue\", Helvetica, sans-serif;\n  font-weight: 100;\n  cursor: pointer;\n  pointer-events: auto;\n  z-index: 1;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);\n  transition: all 0.3s;\n}\n.bookmark-item-lacia>div {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 100%;\n}\na.bookmark-item-lacia:hover {\n  filter: brightness(0.9);\n}\na.bookmark-item-lacia:active {\n  filter: brightness(0.8);\n  mix-blend-mode: multiply;\n}\na.bookmark-item-lacia:active:before, a.bookmark-item-lacia:active:after {\n  display: none;\n}\n.paper-shadow:before, .paper-shadow:after {\n\tcontent: '';\n  position: absolute;\n  z-index: 1;\n\tleft: 0;\n\tbox-shadow: 0 0 10px rgba(0,0,0,0.35);\n\tborder-radius: 50%;\n\twidth: 100%;\n\theight: 20px;\n\tdisplay: none;\n}\n.paper-shadow:before {\n\tdisplay: block;\n\ttop: 0px;\n\tclip: rect(-40px auto 0 auto);\n}\n.paper-shadow:after {\n\tdisplay: block;\n\tbottom: 0px;\n\tclip: rect(20px auto 40px auto);\n}\n#gbf-bookmark-lacia.bookmark-right {\n  left: auto;\n  right: -65px;\n}\n#gbf-bookmark-lacia.bookmark-right:hover {\n  left: auto;\n  right: 0;\n}\n#gbf-bookmark-lacia.bookmark-right .bookmark-item-lacia {\n  float: right;\n}\n.paper-shadow.dark-shadow:before,.paper-shadow.dark-shadow:after {\n  box-shadow: 0 0 10px rgb(0, 0, 0, 0.5);\n}\n#gbf-bookmark-setting {\n  position: fixed;\n  z-index: 9999998;\n  width: 280px;\n  padding-bottom: 30px;\n  min-height: 290px;\n  max-height: calc(100% - 200px);\n  top: 60px;\n  left: 20px;\n  background: #fffbe1;\n  font-family: -apple-system, -apple-system-font, \"Microsoft JHengHei\", HelveticaNeue, \"Helvetica Neue\", Helvetica, sans-serif;\n  font-weight: 100;\n  display: none;\n}\n#gbf-bookmark-setting.show-setting {\n  display: block;\n}\n#gbf-bookmark-setting .s-paper {\n  position: absolute;\n  bottom: -2px;\n  width: calc(100% - 2px);\n  left: 1px;\n  height: 2px;\n  background: #e8e4cb;\n}\n.tab-bookmark-setting {\n  position: absolute;\n  height: 24px;\n  line-height: 24px;\n  background: #e8e4cb;\n  top: -24px;\n  left: 1px;\n  padding: 0 20px;\n  font-size: 10px;\n  z-index: 0;\n  letter-spacing: 0.2em;\n  cursor: pointer;\n}\n.tab-bookmark-setting:after {\n  display: none;\n}\n.option-bookmark {\n  left: 76px;\n}\n.option-bookmark.active-bookmark {\n  left: 75px;\n}\n.active-bookmark {\n  z-index: 2;\n  background: #fffbe1;\n  height: 25px;\n  line-height: 25px;\n  padding: 0 21px;\n  left: 0px;\n}\n.footer-bookmark-setting {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  left: 0;\n  padding: 10px 0;\n  text-align: center;\n}\n.footer-bookmark-setting .btn-bookmark {\n  margin: 0 10px;\n}\n.btn-bookmark {\n  padding: 4px 12px;\n  font-size: 8px;\n  cursor: pointer;\n  display: inline-block;\n  box-shadow: 0 0 1px rgba(0,0,0,0.05);\n  background-color: #FFEB3B;\n}\n.btn-bookmark:hover {\n  background-color: #fff280;\n}\n.btn-bookmark:active {\n  background-color: #fff492;\n}\n.btn-bookmark.btn-add {\n  padding: 2px 8px;\n  color: #fff;\n  background-color: #8BC34A;\n}\n.setting-box-bookmark {\n  padding: 10px;\n  display: none;\n}\n.setting-box-bookmark.box-active {\n  display: block;\n}\n#bookmark-cont {\n  margin: 4px -4px;\n  overflow-y: auto;\n  max-height: 320px;\n}\n.setting-box-bookmark .bookmark-tag {\n  padding: 4px 12px;\n  margin: 4px;\n  float: left;\n  font-size: 10px;\n}\n.setting-box-bookmark .idx-tag {\n  position: absolute;\n  left: 2px;\n  top: 2px;\n  font-size: 6px;\n  padding: 0 2px;\n}\n.setting-box-bookmark .edit-tag, .setting-box-bookmark .delete-tag {\n  position: absolute;\n  height: 100%;\n  font-size: 8px;\n  top: 0;\n  right: 0;\n  background: #FF9800;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  width: 20px;\n  color: #fff;\n  cursor: pointer;\n}\n.setting-box-bookmark .edit-tag:hover, .setting-box-bookmark .delete-tag:hover {\n  filter: brightness(0.9);\n}\n.setting-box-bookmark .edit-tag {\n  right: 20px;\n  background: #2196F3;\n}\n.bookmark-tag:hover .edit-tag, .bookmark-tag:hover .delete-tag {\n  display: inline-flex;\n}\n.paper-shadow2 {\n  position: relative;\n}\n.paper-shadow2:before, .paper-shadow2:after {\n  z-index: -1;\n  position: absolute;\n  content: '';\n  bottom: 5px;\n  width: calc(50% - 1px);\n  height: 8px;\n  background: rgb(0, 0, 0, 0);\n  box-shadow: 0px 5px 2px 0px rgba(0, 0, 0, 0.38);\n}\n.paper-shadow2:before {\n  transform: rotate(-3deg);\n  left: 1px;\n}\n.paper-shadow2:after {\n  transform: rotate(3deg);\n  right: 1px;\n}\n#gbf-bookmark-tagmodal {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 200px;\n  background-color: #03A9F4;\n  font-size: 9px;\n  padding: 0 10px;\n  box-shadow: 0 0 1px 0.1px rgba(0,0,0,0.2);\n  display: none;\n}\n#gbf-bookmark-tagmodal.bookmark-active {\n  display: block;\n}\n#gbf-bookmark-tagmodal > div {\n  margin: 10px 0;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n}\n#gbf-bookmark-tagmodal .btn-bookmark {\n  margin: 0 10px;\n  background: #fff;\n}\n.setting-option-bookmark {\n  font-size: 9px;\n}\n.setting-option-bookmark>div {\n  margin: 10px 0;\n  padding: 0 10px;\n}\n.setting-option-bookmark .btn-bookmark {\n  background: #03A9F4;\n  color: #fff;\n}\n#gbf-bookmark-setting .label-setting, #gbf-bookmark-setting .label-tagmodal {\n  background: #fff;\n  height: 20px;\n  line-height: 20px;\n  padding: 0 8px;\n  width: 40px;\n  display: inline-block;\n  margin-right: 10px;\n}\n.ipt-setting-cont, .ipt-tagmodal-cont {\n  display: inline-block;\n}\n.setting-option-bookmark .hint-bookmark {\n  display: block;\n  margin-top: 10px;\n  color: #777;\n  width: 188px;\n  font-weight: normal;\n}\n#gbf-bookmark-setting .ipt-setting-bookmark, #gbf-bookmark-setting .ipt-tagmodal {\n  background: #fff;\n  height: 20px;\n  line-height: 20px;\n  padding: 0 0 0 8px;\n  margin: 0;\n  border: 0;\n  width: 112px;\n  color: #666;\n}\n#gbf-bookmark-setting .ipt-setting-bookmark::placeholder, .ipt-tagmodal::placeholder {\n  color: #aaa;\n}\n#gbf-bookmark-setting .ipt-setting-bookmark:focus, .ipt-tagmodal:focus {\n  outline: 0;\n}\n";
  293.  
  294.   function tempalte() {
  295.     var html = "\n  <style>".concat(css, "</style>\n  <div id=\"show-setting-bookmark\"></div>\n  <div id=\"gbf-bookmark-lacia\">").concat(renderList(), "</div>\n  <div id=\"gbf-bookmark-setting\" class=\"paper-shadow dark-shadow\">\n  <div class=\"tab-bookmark-setting active-bookmark paper-shadow\">\u4E66\u7B7E</div>\n  <div class=\"tab-bookmark-setting option-bookmark paper-shadow\">\u9009\u9879</div>\n  <div class=\"setting-box-bookmark box-active\">\n    <div id=\"btn-add-bookmark\" class=\"btn-bookmark btn-add paper-shadow2\">\u6DFB\u52A0</div>\n    <div id=\"bookmark-cont\">").concat(renderTag(), "</div>\n  </div>\n  <div class=\"setting-box-bookmark setting-option-bookmark\">\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u4F4D\u7F6E</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n        <select id=\"ipt-position-bookmark\" class=\"ipt-setting-bookmark\">\n        <option value=\"left\">\u5DE6\u8FB9</option>\n        <option value=\"right\">\u53F3\u8FB9</option>\n        </select>\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u8FB9\u8DDD</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n        <input id=\"ipt-margin-bookmark\" class=\"ipt-setting-bookmark\" value=\"2\" type=\"number\" min=\"0\" max=\"100\">\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u52A8\u753B</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n      <select id=\"ipt-animation-bookmark\" class=\"ipt-setting-bookmark\">\n        <option value=\"open\">\u542F\u7528</option>\n        <option value=\"close\">\u7981\u6B62</option>\n      </select>\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u5C3A\u5BF8</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n      <select id=\"ipt-size-bookmark\" class=\"ipt-setting-bookmark\">\n        <option value=\"1\">\u5927</option>\n        <option value=\"2\">\u4E2D</option>\n        <option value=\"3\">\u5C0F</option>\n      </select>\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u81EA\u52A8\u9690\u85CF</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n        <input id=\"ipt-hidedelay-bookmark\" class=\"ipt-setting-bookmark\" value=\"10\" type=\"number\" min=\"-1\" max=\"60\">\n      </div>\n      <span class=\"hint-bookmark\">\u7B49\u5F85\u6307\u5B9A\u79D2\u6570\u540E\u81EA\u52A8\u9690\u85CF\uFF0C\u8BBE\u4E3A0\u76F4\u63A5\u9690\u85CF\uFF0C\u8BBE\u4E3A-1\u5219\u59CB\u7EC8\u663E\u793A</span>\n    </div>\n    <div><div class=\"btn-bookmark paper-shadow2\" id=\"btn-save-setting\">\u4FDD\u5B58</div></div>\n  </div>\n  <div class=\"footer-bookmark-setting\">\n    <div class=\"btn-bookmark paper-shadow2\" id=\"btn-close-bookmark\">\u5173\u95ED</div>\n  </div>\n  <div id=\"gbf-bookmark-tagmodal\" class=\"paper-shadow\">\n    <div>\n    <span class=\"label-tagmodal paper-shadow2\">\u4E66\u7B7E\u540D</span>\n    <div class=\"paper-shadow2 ipt-tagmodal-cont\"><input id=\"ipt-name-bookmark\" class=\"ipt-tagmodal\" placeholder=\"\u8BF7\u8F93\u5165\u4E66\u7B7E\u7684\u540D\u5B57\" type=\"text\"></div>\n    </div>\n    <div>\n    <span class=\"label-tagmodal paper-shadow2\">\u7F51\u5740</span>\n    <div class=\"paper-shadow2 ipt-tagmodal-cont\"><input id=\"ipt-url-bookmark\" class=\"ipt-tagmodal\" placeholder=\"\u8BF7\u8F93\u5165\u4E66\u7B7E\u5730\u5740\" type=\"text\"></div>\n    </div>\n    <div>\n    <span class=\"label-tagmodal paper-shadow2\">\u989C\u8272</span>\n    <div class=\"paper-shadow2 ipt-tagmodal-cont\"><input id=\"ipt-bgcolor-bookmark\" class=\"ipt-tagmodal\" value=\"#00BCD4\" type=\"color\"></div>\n    </div>\n    <div>\n    <span class=\"label-tagmodal paper-shadow2\">\u5E8F\u53F7</span>\n    <div class=\"paper-shadow2 ipt-tagmodal-cont\"><input id=\"ipt-index-bookmark\" class=\"ipt-tagmodal\" min=\"1\" max=\"100\" type=\"number\"></div>\n    </div>\n    <div>\n    <div class=\"btn-bookmark paper-shadow2\" id=\"btn-save-tagmodal\">\u4FDD\u5B58</div>\n    <div class=\"btn-bookmark paper-shadow2\" id=\"btn-close-tagmodal\">\u53D6\u6D88</div>\n    </div>\n  </div>\n  <div class=\"s-paper\"></div>\n  </div>\n  ");
  296.     return html;
  297.   }
  298.  
  299.   function event () {
  300.     var tabs = document.querySelectorAll('#gbf-bookmark-setting .tab-bookmark-setting');
  301.     var boxes = document.querySelectorAll('#gbf-bookmark-setting .setting-box-bookmark');
  302.     tabs.forEach(function (tab, index) {
  303.       tab.addEventListener('click', function () {
  304.         if (!tab.classList.contains('active-bookmark')) {
  305.           tab.classList.add('active-bookmark');
  306.  
  307.           if (index === 0) {
  308.             tabs[1].classList.remove('active-bookmark');
  309.             boxes[1].classList.remove('box-active');
  310.           } else {
  311.             tabs[0].classList.remove('active-bookmark');
  312.             boxes[0].classList.remove('box-active');
  313.           }
  314.  
  315.           boxes[index].classList.add('box-active');
  316.         }
  317.       });
  318.     });
  319.     var setting = document.querySelector('#gbf-bookmark-setting');
  320.     var closeBtn = document.querySelector('#btn-close-bookmark');
  321.     var bookmark = document.querySelector('#gbf-bookmark-lacia');
  322.     var btnShowSetting = document.querySelector('#show-setting-bookmark');
  323.  
  324.     bookmark.oncontextmenu = function (e) {
  325.       e.preventDefault();
  326.     };
  327.  
  328.     bookmark.addEventListener('mouseup', function (e) {
  329.       if (e.button === 2) {
  330.         showSetting();
  331.       }
  332.     });
  333.     btnShowSetting.addEventListener('click', function () {
  334.       showSetting();
  335.     });
  336.  
  337.     var hideSetting = function hideSetting() {
  338.       setting.classList.remove('show-setting');
  339.     };
  340.  
  341.     var showSetting = function showSetting() {
  342.       return setting.classList.toggle('show-setting');
  343.     };
  344.  
  345.     closeBtn.addEventListener('click', hideSetting);
  346.     var btnModalClose = document.querySelector('#btn-close-tagmodal');
  347.     var tagModal = document.querySelector('#gbf-bookmark-tagmodal');
  348.     var btnAddBookmark = document.querySelector('#btn-add-bookmark');
  349.     var btnSaveTag = document.querySelector('#btn-save-tagmodal');
  350.     var iptName = document.querySelector('#ipt-name-bookmark');
  351.     var iptUrl = document.querySelector('#ipt-url-bookmark');
  352.     var iptBgcolor = document.querySelector('#ipt-bgcolor-bookmark');
  353.     var iptIndex = document.querySelector('#ipt-index-bookmark');
  354.     btnModalClose.addEventListener('click', function () {
  355.       tagModal.classList.remove('bookmark-active');
  356.     });
  357.     var tagModalStatus = {
  358.       type: 'add',
  359.       index: 1
  360.     };
  361.     btnAddBookmark.addEventListener('click', function () {
  362.       tagModal.classList.add('bookmark-active');
  363.       iptName.value = '';
  364.       iptUrl.value = location.hash || '';
  365.       iptBgcolor.value = randomColor();
  366.       iptIndex.value = setIndex();
  367.       tagModalStatus.type = 'add';
  368.     });
  369.     btnSaveTag.addEventListener('click', function () {
  370.       var url = iptUrl.value;
  371.       var name = iptName.value || url.replace(/^#/, '');
  372.       if (!url.trim()) return alert('缺少书签地址');
  373.       var background = iptBgcolor.value;
  374.       var index = iptIndex.value | 0;
  375.  
  376.       if (tagModalStatus.type === 'add') {
  377.         data.list.push({
  378.           name: name,
  379.           url: url,
  380.           background: background,
  381.           index: index
  382.         });
  383.       } else {
  384.         data.list[tagModalStatus.index] = {
  385.           name: name,
  386.           url: url,
  387.           background: background,
  388.           index: index
  389.         };
  390.       }
  391.  
  392.       tagModal.classList.remove('bookmark-active');
  393.       renderAll();
  394.       saveData();
  395.     });
  396.     var bookmarkCont = document.querySelector('#bookmark-cont');
  397.     bookmarkCont.addEventListener('click', function (e) {
  398.       var elemt = e.target;
  399.  
  400.       if (elemt.classList.contains('edit-tag')) {
  401.         tagModalStatus.type = 'edit';
  402.         var index = tagModalStatus.index = elemt.dataset.index | 0;
  403.         var item = data.list[index];
  404.         tagModal.classList.add('bookmark-active');
  405.         iptName.value = item.name || '';
  406.         iptUrl.value = item.url || '';
  407.         iptBgcolor.value = item.background || randomColor();
  408.         iptIndex.value = item.index || setIndex();
  409.       } else if (elemt.classList.contains('delete-tag')) {
  410.         if (!confirm('确定要删除这个书签吗？')) return;
  411.  
  412.         var _index = elemt.dataset.index | 0;
  413.  
  414.         data.list.splice(_index, 1);
  415.         renderAll();
  416.         saveData();
  417.       }
  418.     });
  419.     var btnSaveSetting = document.querySelector('#btn-save-setting');
  420.     var iptPosition = document.getElementById('ipt-position-bookmark');
  421.     var iptHidedelay = document.getElementById('ipt-hidedelay-bookmark');
  422.     var iptMargin = document.getElementById('ipt-margin-bookmark');
  423.     var iptAnimation = document.getElementById('ipt-animation-bookmark');
  424.     var iptSize = document.getElementById('ipt-size-bookmark');
  425.     btnSaveSetting.addEventListener('click', function () {
  426.       config.position = iptPosition.value;
  427.       config.hideDelay = iptHidedelay.value | 0;
  428.       config.margin = iptMargin.value | 0;
  429.       config.animation = iptAnimation.value === 'open';
  430.       config.size = iptSize.value | 0;
  431.       applyConfig();
  432.       saveConfig();
  433.       alert('保存成功');
  434.     });
  435.   }
  436.  
  437.   var recordTime = function recordTime() {
  438.     localStorage.setItem('gbf-bookmark:time', Date.now());
  439.   };
  440.  
  441.   var getTime = function getTime() {
  442.     var time = 0;
  443.  
  444.     try {
  445.       var _time = parseInt(localStorage.getItem('gbf-bookmark:time'), 10);
  446.  
  447.       if (_time) time = _time;
  448.     } catch (e) {}
  449.  
  450.     return time;
  451.   };
  452.  
  453.   var parentElmt = function parentElmt() {
  454.     // let elmt = document.getElementById('mobage-game-container')
  455.     // if (!elmt) elmt = document.body
  456.     // return elmt
  457.     return document.body;
  458.   };
  459.  
  460.   var main = function main() {
  461.     try {
  462.       var html = tempalte(data.list);
  463.       parentElmt().insertAdjacentHTML('beforeend', html);
  464.       var container = document.getElementById('gbf-bookmark-lacia');
  465.       var time = getTime();
  466.       var hideTimer;
  467.  
  468.       var delayHide = function delayHide() {
  469.         if (config.hideDelay <= 0) return;
  470.         clearTimeout(hideTimer);
  471.         hideTimer = setTimeout(function () {
  472.           container.style.opacity = 0;
  473.         }, config.hideDelay * 1000);
  474.       };
  475.  
  476.       container.addEventListener('mouseenter', function () {
  477.         if (config.hideDelay <= 0) return;
  478.         recordTime();
  479.         clearTimeout(hideTimer);
  480.         container.style.opacity = 1;
  481.       });
  482.       container.addEventListener('mouseleave', function () {
  483.         if (config.hideDelay <= 0) return;
  484.         recordTime();
  485.         delayHide();
  486.       });
  487.       event();
  488.       initIpt();
  489.       applyConfig();
  490.  
  491.       if (Date.now() - time > config.hideDelay * 1000 && config.hideDelay > 0) {
  492.         container.style.opacity = 0;
  493.       } else {
  494.         delayHide();
  495.       }
  496.  
  497.       setTimeout(function () {
  498.         try {
  499.           var elemt1 = document.getElementById('show-setting-bookmark');
  500.           var elemt2 = document.getElementById('gbf-bookmark-lacia');
  501.           var elemt3 = document.getElementById('gbf-bookmark-setting');
  502.           elemt1.style.zoom = deviceRatio;
  503.           elemt2.style.zoom = deviceRatio;
  504.           elemt3.style.zoom = deviceRatio;
  505.         } catch (e) {
  506.           console.error(e);
  507.         }
  508.       }, 100);
  509.     } catch (e) {
  510.       console.error(e);
  511.     }
  512.   };
  513.  
  514.   document.addEventListener('DOMContentLoaded', main);
  515.  
  516. }());

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址