Skip to content

Commit

Permalink
更新ccmd功能，版本升级到4.30
Browse files Browse the repository at this point in the history 
- 为自定义右键选单（动态）加入返回对象menu
- menu对象具有add方法：添加选单项目，以方便插件添加选项到选单
- menu对象具有remove方法：移除选单指定项目
  • Loading branch information
@velade
velade authored Apr 28, 2024
1 parent ab513a1 commit e72fd47
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 27 deletions.
27 changes: 22 additions & 5 deletions Help/Developer Manual.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@

<head>
<meta charset="utf-8">
<title>VelFun4开发者手册 - 4.20</title>
<title>VelFun4开发者手册 - 4.30</title>
<link rel="stylesheet" href="help_data/styles/style.css?ver=2.50" />
<link rel="stylesheet" href="help_data/styles/w3.css" />
<script src="help_data/scripts/velfun4.js?ver=4.20" type="text/javascript"></script>
<script src="help_data/scripts/velfun4.js?ver=4.30" type="text/javascript"></script>
<script src="help_data/scripts/help.js" type="text/javascript"></script>
<script src="help_data/scripts/w3codecolor.js" type="text/javascript"></script>
<style id="vel_needed_styles">
Expand Down Expand Up @@ -43,7 +43,7 @@
<body>
<div class="top">
<img src="help_data/images/Logo.png" alt="VelFun4" />
<div class="version">Ver 4.20</div>
<div class="version">Ver 4.30</div>
</div>
<div class="menu">
<div class="type">
Expand Down Expand Up @@ -374,7 +374,7 @@ <h4>引入VelFun4</h4>
<span class="content">
<div class="w3-panel w3-card w3-light-vel">
<pre class="w3-code jsHigh notranslate">
_(<元素>).CustomContextmenuDynamic({<br />
let menu = _(<元素>).CustomContextmenuDynamic({<br />
"选择器1":{
"选项1":function(){<br />
//选项1的操作<br />
Expand All @@ -395,7 +395,7 @@ <h4>引入VelFun4</h4>
.<br />
.<br />
});<br />
//你也可以使用缩写ccmd<br />
// 你也可以使用缩写ccmd<br />
_(<元素>).ccmd({<br />
"选择器1":{
"选项1":function(){<br />
Expand All @@ -417,6 +417,8 @@ <h4>引入VelFun4</h4>
.<br />
.<br />
});
menu.add(<选择器>, <选项名>,<方法/事件回调>,<在某项之前>);<br />
menu.remove(<选择器>, <选项名>);<br />
</pre>
<button id="test_rightclick">右键单击这里试试</button>
<ul>
Expand All @@ -425,6 +427,21 @@ <h4>引入VelFun4</h4>
<li>选项：选项的标题，其中可以使用icon(url)来为选单项目添加小图标，也可以在尾部使用
if(条件)来限定显示的条件，你也可以用---作为标题，它将为菜单添加一条分割线，如果要添加多条分割线你可以用"---1" "---2"或是任何以「--- +
不同字符」作为标题，这是因为Object类型的key不允许重复</li>
<li>返回menu对象，可用于动态操作</li>
<li>通过menu.add方法可以向选单添加选项：
<ul>
<li>选择器：需要与已有选单的选择器完全一致（包括空格），才能添加到具体选单</li>
<li>选项名：同ccmd，如果选项名与已有的选项相同，则会覆盖功能，而不会额外添加</li>
<li>方法：按下时执行的操作</li>
<li>在某项之前：可选，通过选项名指定在哪项之前插入，分隔线也有效。但要与选项名完全一致（包括空格）默认会添加到选单尾部</li>
</ul>
</li>
<li>通过menu.remove方法可以从选单移除选项：
<ul>
<li>选择器：需要与已有选单的选择器完全一致（包括空格）</li>
<li>选项名：通过选项名只指定要删除的项目，要与目标选项名完全一致（包括空格）</li>
</ul>
</li>
</ul>
</div>
</span>
Expand Down
64 changes: 53 additions & 11 deletions Help/help_data/scripts/velfun4.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
/********************
腳本名:VelFun
版本號:4-4.20
版本號:4-4.30
通 道:Release
作　者:龍翔翎(Velade)
更新日期:2024-04-20
更新日期:2024-04-25
********************/
; (function (window, undefined) {
var isOffline = !location.origin.match(/^(http:|https:)\/\//);
var version = "4-4.20";
var version = "4-4.30";
var channel = "Release";
var author = "Velade";
var releaseDate = "2024-04-20";
var releaseDate = "2024-04-25";

/**
* @typedef {object} velfunEle VelFun元素
Expand Down Expand Up @@ -944,32 +944,37 @@
var vel_dynamic_menus = new Object();
/**
* 为动态对象绑定上下文选单（右键选单），需要将此功能绑定到静态的父级，然后通过funarr中的选择器自动应用在动态添加的子元素上。
* @param {object} funarr JSON格式的对象，具体格式请参考官网手册
* @param {object | map} funarr JSON格式的对象，具体格式请参考官网手册
*/
velfun.fn.CustomContextmenuDynamic = velfun.fn.ccmd = function (funarr) {
if (this.length == 0) return this;
var _this = this;
let _this = this;
let menuids = [];
for (var index = 0; index < _this.length; index++) {
var vel_funthis = _(_this[index]);
var vel_funthisid = Math.floor(Math.random() * 89999999 + 10000000);
var vel_funthisid = null;
do {
vel_funthisid = Math.floor(Math.random() * 89999999 + 10000000);
} while (vel_dynamic_menus[vel_funthisid]);
vel_funthis.attr("data-contextmenuid", vel_funthisid);

vel_dynamic_menus[vel_funthisid] = funarr;
menuids.push(vel_funthisid);

_(_this).bind("contextmenu", function (e) {
e.preventDefault();
})

_("[data-contextmenuid='" + vel_funthisid + "']").bind("mousedown", function (e, self) {
if (e.button == 2) {
_("body ._Velfun_Contextmenu_[dynamic]").remove();
_(`body ._Velfun_Contextmenu_[dynamic]`).remove();
var thisid = _(self).attr("data-contextmenuid");
var trueTarget = "";
if (this[0] == self) {
trueTarget = "self";
} else {
for (var s in vel_dynamic_menus[thisid]) {
if (Object.values(_(s)).includes(e.target)) {
if (e.target.matches(s)) {
trueTarget = s;
break;
}
Expand All @@ -985,7 +990,7 @@
backgroundStyle = "background-color: var(--bg-color-blur);";
}
_("body").append("<ul class='_Velfun_Contextmenu_' style='" + backgroundStyle + "' for='" + thisid + "' dynamic></ul>");
var _ul = _("body ._Velfun_Contextmenu_[dynamic]");
var _ul = _(`body ._Velfun_Contextmenu_[dynamic]`);
for (var i in funarr) {
if (i.match(/^\-{3}/)) {
_ul.append(`<li style="width:calc(100% - 10px);height:1px;background-color:#DDD;margin:5px auto;padding: 0 10px;"></li>`);
Expand Down Expand Up @@ -1039,8 +1044,45 @@

}
})

}
let menu = new Object(menuids);
/**
* 向右键选单添加项目
* @param {string} selector 选择器，因为cmmd每个选择器下是独立的一个选单，因此只能向某个选择器下的具体选单添加项目。
* @param {string} key 项目的的key，也就是显示的选项
* @param {function} func 按下时的回调
* @param {string} before 在某一项之前添加，默认会添加到选单尾部，传递已有的选项的key
*/
menu.add = function (selector, key, func, before="") {
let nowMenu = vel_dynamic_menus[this[0]][selector];
let newMenu = new Map();
for (const k in nowMenu) {
const v = nowMenu[k];
if(before != "" && before == k) {
newMenu.set(key,func);
}
newMenu.set(k,v);
}
for (let i = 0; i < this.length; i++) {
const menuid = this[i];
vel_dynamic_menus[menuid][selector] = Object.fromEntries(newMenu);
}
}
/**
*
* @param {string} selector 选择器，因为cmmd每个选择器下是独立的一个选单，因此只能从某个选择器下的具体选单移除项目
* @param {string} key 要移除的选单的key
*/
menu.remove = function (selector, key) {
let nowMenu = vel_dynamic_menus[this[0]][selector];
delete nowMenu[key];
nowMenu = nowMenu.filter(Boolean);
for (let i = 0; i < this.length; i++) {
const menuid = this[i];
vel_dynamic_menus[menuid][selector] = nowMenu;
}
}
return menu;
}
/**
* 设定可变色图标的颜色，需要搭配 变色图标 的html标签一同使用
Expand Down
64 changes: 53 additions & 11 deletions velfun4.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
/********************
腳本名:VelFun
版本號:4-4.20
版本號:4-4.30
通 道:Release
作　者:龍翔翎(Velade)
更新日期:2024-04-20
更新日期:2024-04-25
********************/
; (function (window, undefined) {
var isOffline = !location.origin.match(/^(http:|https:)\/\//);
var version = "4-4.20";
var version = "4-4.30";
var channel = "Release";
var author = "Velade";
var releaseDate = "2024-04-20";
var releaseDate = "2024-04-25";

/**
* @typedef {object} velfunEle VelFun元素
Expand Down Expand Up @@ -944,32 +944,37 @@
var vel_dynamic_menus = new Object();
/**
* 为动态对象绑定上下文选单（右键选单），需要将此功能绑定到静态的父级，然后通过funarr中的选择器自动应用在动态添加的子元素上。
* @param {object} funarr JSON格式的对象，具体格式请参考官网手册
* @param {object | map} funarr JSON格式的对象，具体格式请参考官网手册
*/
velfun.fn.CustomContextmenuDynamic = velfun.fn.ccmd = function (funarr) {
if (this.length == 0) return this;
var _this = this;
let _this = this;
let menuids = [];
for (var index = 0; index < _this.length; index++) {
var vel_funthis = _(_this[index]);
var vel_funthisid = Math.floor(Math.random() * 89999999 + 10000000);
var vel_funthisid = null;
do {
vel_funthisid = Math.floor(Math.random() * 89999999 + 10000000);
} while (vel_dynamic_menus[vel_funthisid]);
vel_funthis.attr("data-contextmenuid", vel_funthisid);

vel_dynamic_menus[vel_funthisid] = funarr;
menuids.push(vel_funthisid);

_(_this).bind("contextmenu", function (e) {
e.preventDefault();
})

_("[data-contextmenuid='" + vel_funthisid + "']").bind("mousedown", function (e, self) {
if (e.button == 2) {
_("body ._Velfun_Contextmenu_[dynamic]").remove();
_(`body ._Velfun_Contextmenu_[dynamic]`).remove();
var thisid = _(self).attr("data-contextmenuid");
var trueTarget = "";
if (this[0] == self) {
trueTarget = "self";
} else {
for (var s in vel_dynamic_menus[thisid]) {
if (Object.values(_(s)).includes(e.target)) {
if (e.target.matches(s)) {
trueTarget = s;
break;
}
Expand All @@ -985,7 +990,7 @@
backgroundStyle = "background-color: var(--bg-color-blur);";
}
_("body").append("<ul class='_Velfun_Contextmenu_' style='" + backgroundStyle + "' for='" + thisid + "' dynamic></ul>");
var _ul = _("body ._Velfun_Contextmenu_[dynamic]");
var _ul = _(`body ._Velfun_Contextmenu_[dynamic]`);
for (var i in funarr) {
if (i.match(/^\-{3}/)) {
_ul.append(`<li style="width:calc(100% - 10px);height:1px;background-color:#DDD;margin:5px auto;padding: 0 10px;"></li>`);
Expand Down Expand Up @@ -1039,8 +1044,45 @@

}
})

}
let menu = new Object(menuids);
/**
* 向右键选单添加项目
* @param {string} selector 选择器，因为cmmd每个选择器下是独立的一个选单，因此只能向某个选择器下的具体选单添加项目。
* @param {string} key 项目的的key，也就是显示的选项
* @param {function} func 按下时的回调
* @param {string} before 在某一项之前添加，默认会添加到选单尾部，传递已有的选项的key
*/
menu.add = function (selector, key, func, before="") {
let nowMenu = vel_dynamic_menus[this[0]][selector];
let newMenu = new Map();
for (const k in nowMenu) {
const v = nowMenu[k];
if(before != "" && before == k) {
newMenu.set(key,func);
}
newMenu.set(k,v);
}
for (let i = 0; i < this.length; i++) {
const menuid = this[i];
vel_dynamic_menus[menuid][selector] = Object.fromEntries(newMenu);
}
}
/**
*
* @param {string} selector 选择器，因为cmmd每个选择器下是独立的一个选单，因此只能从某个选择器下的具体选单移除项目
* @param {string} key 要移除的选单的key
*/
menu.remove = function (selector, key) {
let nowMenu = vel_dynamic_menus[this[0]][selector];
delete nowMenu[key];
nowMenu = nowMenu.filter(Boolean);
for (let i = 0; i < this.length; i++) {
const menuid = this[i];
vel_dynamic_menus[menuid][selector] = nowMenu;
}
}
return menu;
}
/**
* 设定可变色图标的颜色，需要搭配 变色图标 的html标签一同使用
Expand Down

0 comments on commit e72fd47

Please sign in to comment.