mzLibMenu

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

Este script no debería instalarse directamente. Es una biblioteca que utilizan otros scripts mediante la meta-directiva de inclusión // @require https://update.greasyfork.org/scripts/460056/1149985/mzLibMenu.js

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

/* eslint-disable */

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.mzLibMenu = factory());
})(this, (function () { 'use strict';

  function styleInject(css, ref) {
    if ( ref === void 0 ) ref = {};
    var insertAt = ref.insertAt;

    if (!css || typeof document === 'undefined') { return; }

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';

    if (insertAt === 'top') {
      if (head.firstChild) {
        head.insertBefore(style, head.firstChild);
      } else {
        head.appendChild(style);
      }
    } else {
      head.appendChild(style);
    }

    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
  }

  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";
  styleInject(css_248z);

  // mturco/context-menu: A small JavaScript library for adding context menus to any HTML element
  // https://github.com/mturco/context-menu

  // Fires custom event on given element
  function emit(el, type, data = {}) {
    const event = new CustomEvent(type, {
      detail: data,
    });
    el.dispatchEvent(event);
  }

  class mzLibMenu {
    constructor({
      items = [],
      options = {
        className: "",
        minimalStyling: false,
      },
    }) {
      this.items = [...items, {
        name: "关闭(close)",
        fn(cls) {
          cls.hide();
        },
      }];
      this.options = options;
      this.create();
    }

    // Creates DOM elements, sets up event listeners
    create() {
      // Create the menu
      this.menu = document.createElement("ul");
      this.menu.className = "mzLibMenu";
      // Create the menu items
      this.items.forEach((item, index) => {
        const li = document.createElement("li");

        if (!("name" in item)) {
          // Insert a divider
          li.className = "mzLibMenu-divider";
        } else {
          li.className = "mzLibMenu-item";
          li.innerHTML = item.name;
          li.setAttribute("data-ItemIndex", index);
          li.addEventListener("click", this.select.bind(this, li));
        }
        this.menu.appendChild(li);
      });
      //
      if (!this.options.minimalStyling) {
        this.menu.classList.add("mzLibMenu--theme-default");
      }
      if (this.options.className) {
        this.options.className
          .split(" ")
          .forEach(cls => this.menu.classList.add(cls));
      }

      // Add root element to the <body>
      document.body.appendChild(this.menu);

      // 创建后绑定事件
      this.on("created", () => {
        // console.log(this.menu);
        const $menu = this.menu;
        // ctrl + m
        document.addEventListener("keydown", function (e) {
          if (e.ctrlKey && e.key === "m") {
            $menu.classList.toggle("is-open");
          }
        });
      });

      emit(this.menu, "created");
    }

    // Selects the given item and calls its handler
    select(item) {
      const itemId = item.getAttribute("data-ItemIndex");
      if (this.items[itemId]) {
        this.items[itemId].fn(this);
      }
      this.hide();
      emit(this.menu, "itemselected");
    }

    // hides the menu
    hide() {
      this.menu.classList.remove("is-open");
      emit(this.menu, "hidden");
    }

    // Convenience method for adding an event listener
    on(type, fn) {
      this.menu.addEventListener(type, fn);
    }

    // Convenience method for removing an event listener
    off(type, fn) {
      this.menu.removeEventListener(type, fn);
    }
  }

  return mzLibMenu;

}));