@zekibu/ctxmenu 0.1.0

package/index.d.ts

@@ -0,0 +1,36 @@
+interface MenuOption {
+	/**
+	 * 菜单项显示的文本
+	 */
+	name: string;
+	/**
+	 * Font Awesome 图标类名，如果不需要图标则为 false
+	 */
+	icon?: string | false;
+	/**
+	 * 是否在右侧显示，默认 false
+	 */
+	right?: boolean;
+	/**
+	 * 点击菜单项时的回调函数
+	 */
+	click?: ((e: MouseEvent, target: HTMLElement) => void) | false;
+	/**
+	 * 自定义样式
+	 */
+	style?: string | false;
+	/**
+	 * 是否禁用该菜单项，默认 false
+	 */
+	disabled?: boolean;
+}
+
+/**
+ * 初始化右键菜单
+ * @param el - 目标元素或选择器
+ * @param option - 菜单选项数组
+ * @param close - 菜单关闭时的回调函数
+ */
+declare function init(el: string | HTMLElement, option: (MenuOption | string)[], close?: () => void): void;
+
+export default init;

package/index.js

@@ -0,0 +1,415 @@
+/*
+ * @Author: ZekiNotFound     <root@zekibu.im>
+ * @Description:鼠标右键菜单
+ */
+
+const SRC_FA = '//cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css';
+export default init = (el, option = [], close = () => { }) => {
+    if (!el) return console.error('目标元素不存在');
+    el = typeof el != 'string' ? el : document.querySelector(el);
+    if (!el) return console.error('目标元素不存在');
+    if (option.length <= 0) return;
+    let options = [],
+        i = 0;
+    for (let v of option) {
+        if (typeof v == 'string') {
+            options[i] = {
+                name: v,
+                icon: false,
+                right: false,
+                click: false,
+                style: false,
+                disabled: false
+            }
+        } else {
+            options[i] = {
+                name: typeof v.name == 'undefined' ? '' : v.name,
+                icon: typeof v.icon == 'undefined' ? false : v.icon,
+                right: typeof v.right == 'undefined' ? false : v.right,
+                click: typeof v.click != 'function' ? false : v.click,
+                style: typeof v.style == 'undefined' ? false : v.style,
+                disabled: typeof v.disabled == 'undefined' ? false : v.disabled
+            }
+        }
+        // 如果有任何一个icon则加载fa图标库
+        if (options[i].icon !== false && options[i].icon != '') {
+            loadCss(SRC_FA);
+        }
+        i++;
+    }
+
+    el.oncontextmenu = event => {
+        event.preventDefault();
+        event.stopPropagation();
+        const { clientX, clientY } = event;
+        let index = (new Date).getTime();
+        el.dataset.ctxmenuIndex = index;
+        let box = createDom(index, options, clientX, clientY, event.target, getSelect());
+        if (el.dataset.ctxmenuIndexOld != undefined && el.dataset.ctxmenuIndexOld != index) {
+            let dom = document.querySelector(`[data-index="${el.dataset.ctxmenuIndexOld}"]`);
+            if (dom) {
+                dom.remove();
+                if (typeof close == 'function') close();
+            }
+        }
+        el.dataset.ctxmenuIndexOld = box.dataset.index;
+    }
+};
+
+/**
+ * @description: 创建Dom
+ * @param {*} index
+ * @param {*} options
+ * @param {*} x
+ * @param {*} y
+ * @param {*} target
+ * @param {*} select
+ * @return {*}
+ */
+function createDom(index, options, x, y, target, select) {
+    let box = document.createElement('div'),
+        onclickOld = document.body.onclick || (() => { }),
+        i = 0,
+        fun = [];
+    box.className = 'zk-ctxmenu zk-ctxmenu-in';
+    box.id = 'zk_ctxmenu_' + document.querySelectorAll('.zk-ctxmenu').length.toString();
+    box.dataset.index = index;
+    box.style.display = 'none';
+    box.oncontextmenu = event => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    document.body.appendChild(box);
+    for (let v of options) {
+        let name, icon, right, style = '';
+        let item = document.createElement('div');
+        let rightBox = null, rightItem = '', clickFun = [];
+        if (v.disabled !== false) {
+            item.className = 'zk-ctxmenu-item zk-ctxmenu-disabled';
+            if (typeof v.disabled == 'string') {
+                item.title = v.disabled;
+            }
+        } else {
+            item.className = 'zk-ctxmenu-item';
+        }
+        if (v.name == '') {
+            name = `<span class="zk-ctxmenu-name"></span>`;
+            item.className += ' zk-ctxmenu-no-hover';
+        } else if (v.name == '-') {
+            name = `<span class="zk-ctxmenu-name"><hr/></span>`;
+            item.className += ' zk-ctxmenu-no-hover';
+        } else {
+            if (v.name.length > 20) v.name = v.name.substr(0, 20) + '...';
+            name = `<span class="zk-ctxmenu-name">${v.name}</span>`;
+        }
+        if (v.icon === false || v.icon == '') {
+            icon = '<i></i>';
+        } else {
+            icon = `<i class="zk-ctxmenu-icon fa-solid fa-${v.icon}"></i>`;
+        }
+        if (v.right === false || v.right == '') {
+            right = `<span></span>`;
+        } else if (typeof v.right == 'string') {
+            right = `<span class="zk-ctxmenu-right">${v.right}</span>`;
+        } else if (typeof v.right == 'object') {
+            let rightDom = document.createElement('i');
+            rightBox = document.createElement('ul');
+            rightBox.className = 'zk-ctxmenu-ul';
+            rightBox.style.display = 'none';
+            rightBox.dataset.show = 'false';
+            rightDom.className = 'zk-ctxmenu-right fa-solid fa-angle-right';
+            if (v.right.length != undefined) {
+                let _right = {};
+                for (let k in v.right) _right[v.right[k]] = '';
+                v.right = _right;
+            }
+            for (let k in v.right) {
+                let _rightItem = document.createElement('li');
+                _rightItem.className = 'zk-ctxmenu-li';
+                _rightItem.dataset.funIndex = k;
+                _rightItem.innerText = k.length > 9 ? k.substring(0, 9) + '...' : k;
+                rightItem += _rightItem.outerHTML;
+                if (typeof v.right[k] == 'function') {
+                    clickFun[k] = v.right[k];
+                }
+            }
+            rightBox.innerHTML = rightItem;
+            right = rightDom.outerHTML;
+        } else {
+            right = '';
+        }
+        if (v.style === false) {
+            style = '';
+        }
+        if (typeof v.style == 'function') {
+            v.style = v.style();
+        }
+        if (typeof v.style == 'string') {
+            style = v.style;
+        }
+        if (typeof v.style == 'object') {
+            style = '';
+            for (let k in v.style) {
+                item.style[k] = v.style[k];
+            }
+        }
+        item.innerHTML = icon + name + right;
+        if (style != '') item.style.cssText = style;
+        item.onclick = event => {
+            if (event.target && event.target.nodeName === 'LI') {
+                let _isClose = true;
+                if (typeof clickFun[event.target.dataset.funIndex] == 'function') {
+                    _isClose = clickFun[event.target.dataset.funIndex]();
+                }
+                if (_isClose !== false) box.remove();
+
+                return;
+            }
+            let isClose = true;
+            if (typeof v.click == 'function' && item.className.indexOf('zk-ctxmenu-disabled') == -1) {
+                isClose = v.click(target, select);
+            }
+            if (isClose !== false && item.className.indexOf('zk-ctxmenu-disabled') == -1) box.remove();
+        }
+        box.appendChild(item);
+        if (rightBox && rightItem != '') {
+            item.appendChild(rightBox);
+            fun[i] = () => {
+                let itemBoxObj = item.getBoundingClientRect();
+                rightBox.style.left = itemBoxObj.width + 'px';
+                let rightBoxObj = rightBox.getBoundingClientRect(),
+                    rightX = itemBoxObj.x + itemBoxObj.width - 2,
+                    rightY = itemBoxObj.y - 10;
+                if (rightX + rightBoxObj.width > document.body.offsetWidth) {
+                    rightX = rightX - itemBoxObj.width - rightBoxObj.width + 2;
+                }
+                if (rightY + rightBoxObj.height > document.body.offsetHeight) {
+                    rightY = rightY + itemBoxObj.height - rightBoxObj.height + 20;
+                }
+
+                rightBox.style.left = rightX + 'px';
+                rightBox.style.top = rightY + 'px';
+            }
+
+            let isIn = false;
+            item.onmouseover = () => {
+                rightBox.style.display = 'block';
+                rightBox.style.zIndex += document.querySelectorAll('.zk-ctxmenu-ul[data-show="true"]').length;
+                rightBox.dataset.show = 'true';
+                isIn = true;
+            }
+            item.onmouseout = () => {
+                setTimeout(() => {
+                    if (!isIn) {
+                        rightBox.style.display = 'none';
+                        rightBox.dataset.show = 'false';
+                    }
+                }, 500);
+                isIn = false;
+            }
+        }
+        i++;
+    }
+    if (x + box.offsetWidth > document.body.offsetWidth) {
+        x = x - box.offsetWidth;
+    }
+    if (y + box.offsetHeight > document.body.offsetHeight) {
+        y = y - box.offsetHeight;
+    }
+    box.style.top = y + 'px';
+    box.style.left = x + 'px';
+    for (let v of fun) {
+        if (typeof v == 'function') v();
+    }
+    document.body.onclick = event => {
+        onclickOld();
+        if (event && event.target != box && event.target.className.indexOf('zk-ctxmenu') == -1) {
+            box.remove();
+            document.body.onclick = onclickOld;
+        }
+    }
+
+    return box;
+}
+
+/**
+ * @description: 获取选中的文本
+ * @return {*}
+ */
+function getSelect() {
+    let selectedText = '';
+    if (window.getSelection) {
+        selectedText = window.getSelection().toString();
+    } else if (document.selection && document.selection.type != 'Control') {
+        selectedText = document.selection.createRange().text;
+    }
+    return selectedText;
+}
+function createElement(tagName, attr = {}) {
+    if (!tagName) {
+        throw new Error('[tagName] 不能为空');
+    }
+    const tag = document.createElement(tagName);
+
+    setAttr(tag, attr);
+    return tag;
+};
+function setAttr(tag, attr = {}) {
+    for (let k in attr) {
+        if (typeof attr[k] === 'object' && !Array.isArray(attr[k])) {
+            setAttr(tag[k], attr[k]);
+        } else if (k in tag) {
+            tag[k] = (!k.startsWith('on') && typeof attr[k] === 'function') ? attr[k](tag, attr, k) : attr[k];
+        } else if (typeof attr[k] === 'function') {
+            tag.setAttribute(k, attr[k]());
+        } else {
+            try {
+                tag.setAttribute(k, attr[k]);
+            } catch (e) {
+                tag[k] = attr[k];
+            }
+        }
+    }
+}
+const head = document.querySelector('head');
+function loadCss(href) {
+    const style = createElement('style', {
+        type: 'text/css',
+        rel: 'stylesheet',
+        'data-npm': '@zekibu/ctxmenu',
+        href: href
+    });
+    head.appendChild(style);
+}
+
+const CSS = `
+.zk-ctxmenu {
+    position: fixed;
+    z-index: 19991111;
+    min-width: 200px;
+    max-height: 80vh;
+    max-width: 80vw;
+    border: 1px solid #eee;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);
+    border-radius: 2px;
+    display: block !important;
+    padding: 10px 0;
+    user-select: none;
+    --webkit-user-select: none;
+}
+
+.zk-ctxmenu-in {
+    animation-name: fadeIn;
+    animation-fill-mode: both;
+    animation-duration: .1s
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        /* transform: scale(.5); */
+    }
+
+    100% {
+        opacity: 1;
+        /* transform: scale(1); */
+    }
+}
+
+.zk-ctxmenu-item {
+    width: 100%;
+    height: 35px;
+    line-height: 35px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: grid;
+    grid-template-columns: 40px auto 100px;
+    align-items: center;
+    position: relative;
+}
+
+.zk-ctxmenu-disabled {
+    cursor: not-allowed !important;
+    background-color: #f2f2f2;
+}
+
+.zk-ctxmenu-disabled>* {
+    color: #8d8d8d;
+}
+
+.zk-ctxmenu-item.zk-ctxmenu-no-hover {
+    height: 20px;
+}
+
+.zk-ctxmenu-item:not(.zk-ctxmenu-no-hover) {
+    cursor: pointer;
+}
+
+.zk-ctxmenu-item:not(.zk-ctxmenu-no-hover):not(.zk-ctxmenu-disabled):hover,
+.zk-ctxmenu-li:hover {
+    background-color: #F2F2F2;
+}
+
+.zk-ctxmenu-name,
+.zk-ctxmenu-li {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    min-width: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.zk-ctxmenu-icon {
+    justify-self: center;
+    font-size: 14px;
+    color: #444;
+}
+
+.zk-ctxmenu-right {
+    justify-self: end;
+    padding-right: 15px;
+    font-size: 12px;
+    color: #777;
+}
+
+.zk-ctxmenu-name>hr {
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background-color: #D3E3FD;
+    border: none;
+    left: 0;
+    transform: scaleY(0.5);
+}
+
+.zk-ctxmenu-ul {
+    background-color: #fff;
+    position: fixed;
+    z-index: 19991111;
+    border: 1px solid #eee;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);
+    padding: 10px 0;
+    margin: 0;
+    list-style: none;
+    border-radius: 5px;
+    max-width: 150px;
+    overflow: hidden;
+    transition: opacity .2s;
+}
+
+.zk-ctxmenu-li {
+    min-width: 0;
+    padding: 0 15px;
+    max-width: 80%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+`;
+const style = createElement('style', {
+    innerText: CSS,
+    'data-npm': '@zekibu/ctxmenu'
+});
+head.appendChild(style);

package/package.json

@@ -0,0 +1,11 @@
+{
+	"name": "@zekibu/ctxmenu",
+	"version": "0.1.0",
+	"description": "轻量化右键菜单",
+	"main": "./index.js",
+	"type": "module",
+	"types": "./index.d.ts",
+	"keywords": [],
+	"author": "ZekiNotFound <root@zekibu.im>",
+	"license": "ISC"
+}