admin/mixly3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): 优化Mixly.DropdownMenu实例化时的输入参数

Browse Source
This commit is contained in:
王立帮
2025-05-02 16:31:56 +08:00
parent e1204b3e57
commit b5a3a836cb
4 changed files with 80 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
common/modules/mixly-modules/common/context-menu.js
View File

@@ -41,10 +41,11 @@ class ContextMenu {
}
}
#selector_ = null;
#menus_ = new Registry();
#events_ = new Events(['getMenu']);
constructor(selector, config = {}) {
this.selector = selector;
this.#selector_ = selector;
this.menu = $.contextMenu({
selector,
build: ($trigger) => {
@@ -67,20 +68,20 @@ class ContextMenu {
return ContextMenu.generate(menu, $trigger, e);
}
dispose() {
$.contextMenu('destroy', this.selector);
this.#events_.reset();
this.#menus_.reset();
this.menu = null;
this.selector = null;
}
show() {
$(this.selector).contextMenu();
$(this.#selector_).contextMenu();
}
hide() {
$(this.selector).contextMenu('hide');
$(this.#selector_).contextMenu('hide');
}
dispose() {
$.contextMenu('destroy', this.#selector_);
this.#events_.reset();
this.#menus_.reset();
this.menu = null;
this.#selector_ = null;
}
bind(type, func) {

98
common/modules/mixly-modules/common/dropdown-menu.js
View File

@@ -1,35 +1,66 @@
goog.loadJs('common', () => {
goog.require('tippy');
goog.require('Mixly.IdGenerator');
goog.require('Mixly.ContextMenu');
goog.provide('Mixly.DropdownMenu');
const { ContextMenu } = Mixly;
const {
IdGenerator,
ContextMenu
} = Mixly;
class DropdownMenu extends ContextMenu {
#contextMenu_ = null;
#layer_ = null;
static {
this.$container = $('<div class="mixly-dropdown-menus"></div>');
$(document.body).append(this.$container);
}
#shown_ = false;
constructor(selector) {
#layer_ = null;
#contextMenuId_ = '';
#$contextMenuElem_ = null;
constructor(elem) {
const layer = tippy(elem, {
allowHTML: true,
content: '',
trigger: 'click',
interactive: true,
maxWidth: 'none',
offset: [0, 0],
appendTo: document.body,
arrow: false,
placement: 'bottom-start',
delay: 0,
duration: [0, 0],
onCreate: (instance) => {
$(instance.popper).addClass('mixly-drapdown-menu');
},
onMount: () => {
this.show();
},
onHide: () => {
this.#shown_ && this.hide();
}
});
const contextMenuId = IdGenerator.generate();
const selector = `body > .mixly-dropdown-menus > div[m-id="${contextMenuId}"]`;
super(selector, {
trigger: 'none',
appendTo: $(layer.popper).children().children(),
zIndex: 1001,
position: (opt) => {
opt.$menu.css({
top: 0,
left: 0,
position: 'relative',
margin: 0
});
opt.$menu.css('margin', 0);
},
events: {
show: (opt) => {
opt.$menu.detach();
$('body > .mixly-drapdown-menu > .tippy-box > .tippy-content').empty().append(opt.$menu);
this.#layer_.setProps({});
show: () => {
this.#shown_ = true;
this.#layer_.setProps({});
},
hide: (opt) => {
hide: () => {
this.#shown_ = false;
if (this.#layer_.state.isShown) {
this.#layer_.hide();
@@ -38,33 +69,26 @@ class DropdownMenu extends ContextMenu {
}
});
this.#layer_ = tippy($(selector)[0], {
allowHTML: true,
content: '',
trigger: 'click',
interactive: true,
maxWidth: 'none',
offset: [ 0, 0 ],
appendTo: document.body,
arrow: false,
placement: 'bottom-start',
delay: 0,
duration: [ 0, 0 ],
onCreate: (instance) => {
$(instance.popper).addClass('mixly-drapdown-menu');
},
onMount: (instance) => {
this.show();
},
onHide: () => {
this.#shown_ && this.hide();
}
});
this.#$contextMenuElem_ = $(`<div m-id="${contextMenuId}"><div>`);
DropdownMenu.$container.append(this.#$contextMenuElem_);
this.#contextMenuId_ = contextMenuId;
this.#layer_ = layer;
}
show() {
this.#$contextMenuElem_.contextMenu();
}
hide() {
this.#$contextMenuElem_.contextMenu('hide');
}
dispose() {
super.dispose();
this.#layer_.destroy();
this.#layer_ = null;
this.#$contextMenuElem_.remove();
this.#$contextMenuElem_ = null;
}
}

8
common/modules/mixly-modules/common/statusbars-manager.js
View File

@@ -86,6 +86,7 @@ class StatusBarsManager extends PagesManager {
#shown_ = false;
#dropdownMenu_ = null;
#$dropdownBtn_ = null;
constructor(element) {
const managerHTMLTemplate = HTMLTemplate.get('html/statusbar/statusbars-manager.html');
@@ -103,6 +104,7 @@ class StatusBarsManager extends PagesManager {
this.tabId = tabHTMLTemplate.id;
this.id = IdGenerator.generate();
this.addEventsType(['show', 'hide', 'onSelectMenu', 'getMenu']);
this.#$dropdownBtn_ = $tab.find('.statusbar-dropdown-menu > button');
$tab.find('.statusbar-close > button').click(() => this.hide());
this.#addDropdownMenu_();
this.#addEventsListener_();
@@ -146,7 +148,6 @@ class StatusBarsManager extends PagesManager {
}
#addDropdownMenu_() {
const selector = `div[m-id="${this.tabId}"] > .statusbar-dropdown-menu > .layui-btn`;
let menu = new Menu();
let serialChildMenu = new Menu(true);
menu.add({
@@ -239,7 +240,7 @@ class StatusBarsManager extends PagesManager {
});
}
});
this.#dropdownMenu_ = new DropdownMenu(selector);
this.#dropdownMenu_ = new DropdownMenu(this.#$dropdownBtn_[0]);
this.#dropdownMenu_.register('menu', menu);
this.#dropdownMenu_.bind('getMenu', () => 'menu');
}
@@ -277,6 +278,9 @@ class StatusBarsManager extends PagesManager {
dispose() {
StatusBarsManager.remove(this);
this.#dropdownMenu_.dispose();
this.#$dropdownBtn_.remove();
this.#$dropdownBtn_ = null;
super.dispose();
}
}

1
common/modules/mixly-modules/deps.json
View File

@@ -190,6 +190,7 @@
"path": "/common/dropdown-menu.js",
"require": [
"tippy",
"Mixly.IdGenerator",
"Mixly.ContextMenu"
],
"provide": [