Greasy Fork is available in English.

monkey-box

A simple ui framework for monkey script

Tính đến 02-06-2018. Xem phiên bản mới nhất.

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/368779/602185/monkey-box.js 

// ==UserScript==
// @name monkey-box
// @author <bramblex/qjnight@gmail.com>
// @version 0.0.1
// @description A simple ui framework for monkey script
// @supportURL https://github.com/bramblex/MonkeyBox
// @license MIT
// @date 2018-5-30
// @modified 2018-05-31
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_removeValue
// ==/UserScript==
'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var MonkeyBox = function () {

  var monkey_style = '\n    #monkey-main { position: fixed; background-color: #EFEFEF; min-width: 200px; right: 0; top: 80px; z-index: 10000; }\n    #monkey-main.monkey-hide { min-width: 0; width: 0; }\n    #monkey-button { margin-left: -1.5em; cursor: pointer; }\n    #monkey-container { width: 100%; overflow-x: hidden; }\n    #monkey-container.monkey-hide { display: none; }\n    #monkey-title { border-bottom: black 1px solid; font-size: 1.2em; }\n    .monkey-box { border-bottom: black 1px solid; }\n    .monkey-box-title { cursor: pointer; border-bottom: white 2px solid; text-align: center; }\n    .monkey-box-hide { overflow-y: hidden; height: 0; }\n  ';

  var monkey_template = '\n    <div id="monkey-main" class="monkey-hide">\n      <div id="monkey-title"> <b id="monkey-button"> M </b> | MonkeyBox </div>\n      <div id="monkey-container" class="monkey-hide"></div>\n    </div>\n  ';

  function addIdToStyle(id, style) {
    return style.replace(/(^|})\s*([^]*?)\s*\{/g, '$1\n#' + id + ' $2 {').trim();
  }

  function createElement(html) {
    var el = document.createElement('div');
    el.innerHTML = html.trim();
    return el.firstChild;
  }

  function createMonkeyBox() {
    var style = createElement('<style>' + monkey_style + '</style>');
    var main = createElement(monkey_template);

    document.body.appendChild(style);
    document.body.appendChild(main);

    document.getElementById('monkey-button').onclick = function () {
      return showHide();
    };
  }

  function showHide() {
    var main = document.getElementById('monkey-main');
    if (main.className === 'monkey-hide') {
      main.className = '';
      localStorage.setItem('monkey-main-show', '1');
    } else {
      main.className = 'monkey-hide';
      localStorage.removeItem('monkey-main-show');
    }
    document.getElementById('monkey-container').className = main.className;
  }

  function _loadLocalData(id) {
    try {
      return JSON.parse(localStorage.getItem('monkey-box-' + id + '-data'));
    } catch (err) {
      console.warn(err);
      return null;
    }
  }

  function _loadGlobalData(id) {
    try {
      return JSON.parse(GM_getValue('monkey-box-' + id + '-data'));
    } catch (err) {
      console.warn(err);
      return null;
    }
  }

  function _saveLocalData(id, data) {
    localStorage.setItem('monkey-box-' + id + '-data', JSON.stringify(data));
  }

  function _saveGlobalData(id, data) {
    GM_setValue('monkey-box-' + id + '-data', JSON.stringify(data));
  }

  function _clearLocalData(id, data) {
    localStorage.removeItem('monkey-box-' + id + '-data');
  }

  function _clearGlobalData(id, data) {
    GM_removeValue('monkey-box-' + id + '-data');
  }

  function addBox(id, box) {
    var name = box.name || id;
    var template = '\n      <div id="monkey-box-wapper" class="monkey-box">\n          ' + (box.style ? '<style>' + addIdToStyle('monkey-box-' + id, box.style) + '</style>' : '') + ' \n          <div id="monkey-box-' + id + '-title" class="monkey-box-title">' + name + '</div>\n          <div id="monkey-box-' + id + '"></div>\n      </div>\n    ';
    var tmp = document.createElement('div');
    tmp.innerHTML = template.trim();
    document.getElementById('monkey-container').appendChild(tmp.firstChild);

    document.getElementById('monkey-box-' + id + '-title').onclick = function () {
      var box = document.getElementById('monkey-box-' + id);
      if (box.className === 'monkey-box-hide') {
        box.className = '';
        localStorage.setItem('monkey-box-' + id + '-show', '1');
      } else {
        box.className = 'monkey-box-hide';
        localStorage.removeItem('monkey-box-' + id + '-show');
      }
    };

    var isShow = localStorage.getItem('monkey-box-' + id + '-show');

    var data = {};
    if (box.autosave === 'local') {
      data = _loadLocalData(id) || data;
    } else if (box.autosave === 'global') {
      data = _loadGlobalData(id) || data;
    }

    var mixin = {
      data: box.data,
      methods: {
        loadGlobalData: function loadGlobalData() {
          return _loadGlobalData(id);
        },
        loadLocalData: function loadLocalData() {
          return _loadLocalData(id);
        },
        saveGlobalData: function saveGlobalData(data) {
          return _saveGlobalData(id, data);
        },
        saveLocalData: function saveLocalData(data) {
          return _saveLocalData(id, data);
        },
        clearLocalData: function clearLocalData() {
          return _clearLocalData(id);
        },
        clearGlobalData: function clearGlobalData() {
          return _clearGlobalData(id);
        }
      }
    };

    var vm = new Vue(_extends({}, box, {
      data: data,
      el: '#monkey-box-' + id,
      template: '<div id="monkey-box-' + id + '" class="' + (isShow ? '' : 'monkey-box-hide') + '">' + box.template + '</div>',
      mixins: [mixin]
    }));

    if (box.autosave) {
      (function () {
        var timer = null;

        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = Object.keys(vm.$data)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var key = _step.value;

            vm.$watch(key, function () {
              var _this = this;

              clearTimeout(timer);
              timer = setTimeout(function () {
                if (box.autosave === 'local') {
                  _this.saveLocalData(_this.$data);
                } else if (box.autosave === 'global') {
                  _this.saveGlobalData(_this.$data);
                }
              }, 300);
            }, { deep: true });
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator.return) {
              _iterator.return();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }
      })();
    }

    return vm;
  }

  if (!document.getElementById('monkey-main')) {
    createMonkeyBox();
    if (localStorage.getItem('monkey-main-show')) showHide();
  }

  return { addBox: addBox, showHide: showHide };
}();