☰

mzLibMenu

一个居中显示的菜单，使用 ctrl + m 快捷键打开，供其他脚本调用；

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/460056/1149985/mzLibMenu.js 

  1. /* eslint-disable */
  2.  
  3. (function (global, factory) {
  4.   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  5.   typeof define === 'function' && define.amd ? define(factory) :
  6.   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.mzLibMenu = factory());
  7. })(this, (function () { 'use strict';
  8.  
  9.   function styleInject(css, ref) {
  10.     if ( ref === void 0 ) ref = {};
  11.     var insertAt = ref.insertAt;
  12.  
  13.     if (!css || typeof document === 'undefined') { return; }
  14.  
  15.     var head = document.head || document.getElementsByTagName('head')[0];
  16.     var style = document.createElement('style');
  17.     style.type = 'text/css';
  18.  
  19.     if (insertAt === 'top') {
  20.       if (head.firstChild) {
  21.         head.insertBefore(style, head.firstChild);
  22.       } else {
  23.         head.appendChild(style);
  24.       }
  25.     } else {
  26.       head.appendChild(style);
  27.     }
  28.  
  29.     if (style.styleSheet) {
  30.       style.styleSheet.cssText = css;
  31.     } else {
  32.       style.appendChild(document.createTextNode(css));
  33.     }
  34.   }
  35.  
  36.   var css_248z = "/** mturco/context-menu: A small JavaScript library for adding context menus to any HTML element **/\n/** https://github.com/mturco/context-menu **/\n.mzLibMenu {\n  list-style: none;\n  display: none;\n  max-width: 250px;\n  min-width: 125px;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n  padding: 2px 0;\n}\n.mzLibMenu--theme-default {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);\n  font-size: 13px;\n  outline: 0;\n}\n.mzLibMenu--theme-default .mzLibMenu-item {\n  padding: 6px 12px;\n}\n.mzLibMenu--theme-default .mzLibMenu-item:hover,\n.mzLibMenu--theme-default .mzLibMenu-item:focus {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.mzLibMenu--theme-default .mzLibMenu-item:focus {\n  outline: 0;\n}\n.mzLibMenu--theme-default .mzLibMenu-divider {\n  background-color: rgba(0, 0, 0, 0.15);\n}\n.mzLibMenu.is-open {\n  display: block;\n}\n.mzLibMenu-item {\n  cursor: pointer;\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mzLibMenu-divider {\n  height: 1px;\n  margin: 4px 0;\n}\n";
  37.   styleInject(css_248z);
  38.  
  39.   // mturco/context-menu: A small JavaScript library for adding context menus to any HTML element
  40.   // https://github.com/mturco/context-menu
  41.  
  42.   // Fires custom event on given element
  43.   function emit(el, type, data = {}) {
  44.     const event = new CustomEvent(type, {
  45.       detail: data,
  46.     });
  47.     el.dispatchEvent(event);
  48.   }
  49.  
  50.   class mzLibMenu {
  51.     constructor({
  52.       items = [],
  53.       options = {
  54.         className: "",
  55.         minimalStyling: false,
  56.       },
  57.     }) {
  58.       this.items = [...items, {
  59.         name: "关闭（close）",
  60.         fn(cls) {
  61.           cls.hide();
  62.         },
  63.       }];
  64.       this.options = options;
  65.       this.create();
  66.     }
  67.  
  68.     // Creates DOM elements, sets up event listeners
  69.     create() {
  70.       // Create the menu
  71.       this.menu = document.createElement("ul");
  72.       this.menu.className = "mzLibMenu";
  73.       // Create the menu items
  74.       this.items.forEach((item, index) => {
  75.         const li = document.createElement("li");
  76.  
  77.         if (!("name" in item)) {
  78.           // Insert a divider
  79.           li.className = "mzLibMenu-divider";
  80.         } else {
  81.           li.className = "mzLibMenu-item";
  82.           li.innerHTML = item.name;
  83.           li.setAttribute("data-ItemIndex", index);
  84.           li.addEventListener("click", this.select.bind(this, li));
  85.         }
  86.         this.menu.appendChild(li);
  87.       });
  88.       //
  89.       if (!this.options.minimalStyling) {
  90.         this.menu.classList.add("mzLibMenu--theme-default");
  91.       }
  92.       if (this.options.className) {
  93.         this.options.className
  94.           .split(" ")
  95.           .forEach(cls => this.menu.classList.add(cls));
  96.       }
  97.  
  98.       // Add root element to the <body>
  99.       document.body.appendChild(this.menu);
  100.  
  101.       // 创建后绑定事件
  102.       this.on("created", () => {
  103.         // console.log(this.menu);
  104.         const $menu = this.menu;
  105.         // ctrl + m
  106.         document.addEventListener("keydown", function (e) {
  107.           if (e.ctrlKey && e.key === "m") {
  108.             $menu.classList.toggle("is-open");
  109.           }
  110.         });
  111.       });
  112.  
  113.       emit(this.menu, "created");
  114.     }
  115.  
  116.     // Selects the given item and calls its handler
  117.     select(item) {
  118.       const itemId = item.getAttribute("data-ItemIndex");
  119.       if (this.items[itemId]) {
  120.         this.items[itemId].fn(this);
  121.       }
  122.       this.hide();
  123.       emit(this.menu, "itemselected");
  124.     }
  125.  
  126.     // hides the menu
  127.     hide() {
  128.       this.menu.classList.remove("is-open");
  129.       emit(this.menu, "hidden");
  130.     }
  131.  
  132.     // Convenience method for adding an event listener
  133.     on(type, fn) {
  134.       this.menu.addEventListener(type, fn);
  135.     }
  136.  
  137.     // Convenience method for removing an event listener
  138.     off(type, fn) {
  139.       this.menu.removeEventListener(type, fn);
  140.     }
  141.   }
  142.  
  143.   return mzLibMenu;
  144.  
  145. }));