Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory : /var/www/html/libs/absol-full/dist/js/
Upload File :
Current File : /var/www/html/libs/absol-full/dist/js/mdls__absol-form__js__fragment__CMDTool.js
/*** module: node_modules/absol-form/js/fragment/CMDTool.js ***/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CMDToolDelegate = CMDToolDelegate;
exports.default = void 0;
var _FCore = _interopRequireDefault(require("../core/FCore"));
require("../../css/cmdtool.css");
var _OOP = _interopRequireDefault(require("absol/src/HTML5/OOP"));
var _RibbonButton = _interopRequireDefault(require("absol-acomp/js/RibbonButton"));
var _CmdDescriptors = _interopRequireDefault(require("../cmds/CmdDescriptors"));
var _Fragment = _interopRequireDefault(require("absol/src/AppPattern/Fragment"));
var _RibbonSplitButton = _interopRequireDefault(require("absol-acomp/js/RibbonSplitButton"));
var _SolidColorPicker = _interopRequireDefault(require("absol-acomp/js/colorpicker/SolidColorPicker"));
var _utils = require("absol-acomp/js/utils");
var _Rectangle = _interopRequireDefault(require("absol/src/Math/Rectangle"));
var _Dom = require("absol/src/HTML5/Dom");
var _StaticTabbar = _interopRequireDefault(require("absol-acomp/js/StaticTabbar"));
var _ResizeSystem = _interopRequireDefault(require("absol/src/HTML5/ResizeSystem"));
var _EventEmitter = require("absol/src/HTML5/EventEmitter");
var _ = _FCore.default._;
var $ = _FCore.default.$;
/**
* @typedef {Object} CMDTabListNodeDeclaration
* @property {"tab_list"} type
* @property {CMDTabNodeDeclaration[]} children
*/
/**
* @typedef {Object} CMDTabNodeDeclaration
* @property {"tab"} type
* @property {string} name
* @property {CMDGrupX2NodeDeclaration[]|CMDgroup_x1NodeDeclaration[]} children
*/
/**
* @typedef {Object} CMDGrupX2NodeDeclaration
* @property {"group_x2"} type
* @property {CMDGrupX2NodeDeclaration[]|CMDgroup_x1NodeDeclaration[]} children
*/
/**
* @typedef {Object} CMDgroup_x1NodeDeclaration
* @property {"group_x1"} type
* @property {CMDGrupX2NodeDeclaration[]|CMDgroup_x1NodeDeclaration[]} children
*/
/**
* @typedef {Object} CMDCommandNodeDeclaration
* @property {"trigger"|"font"|"color"} type
*/
/**
* @extends Fragment
* @constructor
*/
function CMDTool() {
_Fragment.default.call(this);
this.$nodes = {};
_OOP.default.drillProperty(this, this, '$buttons', '$nodes'); //adapt old version
this.updateVisibility = this.updateVisibility.bind(this);
}
_OOP.default.mixClass(CMDTool, _Fragment.default);
/**
* @param {import('../editor/editor').default} editor
*/
CMDTool.prototype.bindWithEditor = function (editor) {
if (!this._oldDelegate) {
this._oldDelegate = new OldCMDToolDelegate();
}
this.delegate = this._oldDelegate;
this._oldDelegate.bindWithEditor(editor);
};
CMDTool.prototype.onStart = function () {
this.getView();
};
/**
*
* if param is empty, update all buttons
*/
CMDTool.prototype.updateVisibility = function (...args) {
var delegate = this.delegate;
if (!delegate) return;
var keys = [];
if (args.length === 0) {
keys = Object.keys(this.$nodes);
} else {
keys = args.reduce((ac, cr) => {
if (Array.isArray(cr)) ac = ac.concat(cr);else if (typeof cr === "string") ac.push(cr);
return ac;
}, []);
}
keys.forEach(name => {
if (!this.$nodes[name]) return;
var descriptor = delegate.getCmdDescriptor(name);
if (!descriptor) return;
this.updateNode(this.$nodes[name], descriptor);
});
};
CMDTool.prototype.onResume = function () {
this.updateVisibility();
};
CMDTool.prototype.getView = function () {
if (this.$view) return this.$view;
this.$view = _({
tag: 'bscroller',
class: "as-form-cmd-tool"
});
this.refresh();
return this.$view;
};
CMDTool.prototype.createNode = function (nd, par) {
var handler;
if (Array.isArray(nd)) {
nd = {
type: 'group_x2',
children: nd
};
handler = this.cmdNodeHandlers[nd.type];
} else if (typeof nd === "string") {
nd = Object.assign({
name: nd,
type: 'trigger'
}, this.delegate.getCmdDescriptor(nd));
handler = this.cmdNodeHandlers[nd.type];
} else handler = this.cmdNodeHandlers[nd.type];
var nodeElt = null;
if (handler) {
nodeElt = handler.create.call(this, nd, par);
nodeElt.descriptor = nd;
nodeElt.parentDescriptor = par;
this.$nodes[nd.name] = nodeElt;
} else {
console.error("Not support node type: ", nd.type, nd);
}
return nodeElt;
};
CMDTool.prototype.updateNode = function (nodeElt, nd) {
if (!nodeElt) return;
nd = Object.assign({}, nodeElt.descriptor, nd);
nodeElt.descriptor = nd;
var par = nodeElt.parentDescriptor;
var handler = this.cmdNodeHandlers[nd.type];
if (handler) {
if (handler.update) handler.update.call(this, nd, par, nodeElt);
} else {
console.error("Not support node type: ", nd.type, nd);
}
};
CMDTool.prototype.refresh = function () {
var delegate = this.delegate;
if (!delegate) return;
this.getView();
this.$view.clearChild();
this.$nodes = {};
var groupTree = delegate.getCmdGroupTree();
var visit = node => {
return this.createNode(node, null);
};
this.$view.addChild(visit(groupTree));
};
CMDTool.prototype.cmdNodeHandlers = {
tab_list: {
/**
* @this {CMDTool}
* @param nd
* @param par
*/
create: function (nd, par) {
var items = nd.children.map((ch, idx) => {
return {
text: ch.name,
value: idx + ''
};
});
if (!this.$tabBar) {
this.$tabBar = _({
tag: _StaticTabbar.default,
style: {
display: 'inline-block',
fontSize: 12 / 0.7 + 'px',
marginBottom: '5px'
},
props: {
value: '0'
},
on: {
change: () => {
var idx = parseInt(this.$tabBar.value);
this.$frames.forEach((frame, i) => {
frame.addStyle('display', i === idx ? '' : 'none');
});
_ResizeSystem.default.updateUp(this.$tabBar);
}
}
});
this.$tabBarCtn = _({
style: {
textAlign: 'center',
backgroundColor: 'rgba(169, 169, 169, 0.15)'
},
child: [this.$tabBar]
});
}
this.$tabBar.items = items;
if (!items[this.$tabBar.value]) this.$tabBar.value = '0';
if (!this.$tabList) {
this.$tabList = _({});
}
this.$tabList.clearChild();
this.$tabList.addChild(this.$tabBarCtn);
this.$frames = nd.children.map((ch, idx) => {
return this.createNode(ch, nd).addStyle('display', idx + '' === this.$tabBar.value ? '' : 'none').addStyle('textAlign', 'left');
});
this.$tabList.addChild(this.$frames);
return this.$tabList;
},
/**
* @this {CMDTool}
* @param nd
* @param par
*/
update: function (nd, par) {}
},
tab: {
/**
* @this {CMDTool}
* @param nd
* @param par
*/
create: function (nd, par) {
return _({
class: 'as-cmd-tool-tab',
attr: {
'data-name': nd.name
},
child: (nd.children || []).map(ch => {
return this.createNode(ch, nd);
})
});
},
/**
* @this {CMDTool}
* @param nd
* @param par
*/
update: function (nd, par) {}
},
group_x2: {
/**
* @this {CMDTool}
* @param nd
* @param par
*/
create: function (nd, par) {
return _({
class: 'as-cmd-tool-group-x2',
child: (nd.children || []).map(ch => {
return this.createNode(ch, nd);
})
});
},
/**
* @this {CMDTool}
* @param nd
* @param par
*/
update: function (nd, par) {}
},
group_x1: {
/**
* @this {CMDTool}
* @param nd
* @param par
*/
create: function (nd, par) {
return _({});
},
/**
* @this {CMDTool}
* @param nd
* @param par
*/
update: function (nd, par) {}
},
trigger: {
/**
* @this {CMDTool}
* @param nd
* @param par
*/
create: function (nd, par) {
var extClasses = !par || ['array', 'group_x2'].indexOf(par.type) >= 0 ? ['as-big'] : [];
var title = nd.desc;
var btn = _({
tag: _RibbonButton.default,
class: extClasses,
attr: {
title: title,
'data-cmd-name': nd.name
},
props: {
disabled: !!nd.disabled,
descriptor: nd,
text: nd.desc,
icon: nd.icon
},
on: {
click: () => {
this.execCmd.apply(this, [nd.name].concat(btn.descriptor.args || []));
}
}
});
this.$nodes[nd.name] = btn;
return btn;
},
/**
* @this {CMDTool}
* @param nd
* @param par
* @param nodeElt
*/
update: function (nd, par, nodeElt) {
nodeElt.disabled = !!nd.disabled;
nodeElt.text = nd.desc;
nodeElt.icon = nd.icon;
}
},
toggle_switch: {
/**
* @this {CMDTool}
*/
create: function (nd, par) {
var name = nd.name;
var self = this;
var title = nd.desc;
var btn = _({
tag: _RibbonButton.default,
class: ['as-type-toggle-switch', 'as-big'],
attr: {
title: title,
'data-group': nd.group,
"data-name": name,
'data-cmd-name': name
},
props: {
text: nd.desc,
icon: nd.icon,
disabled: !!nd.disabled,
descriptor: nd
},
on: {
click: function () {
var newChecked = !this.hasClass('as-checked');
if (newChecked && nd.group) Object.keys(self.$nodes).forEach(function (otherName) {
var otherBtn = self.$nodes[otherName];
if (otherName === name) return;
if (otherBtn.hasClass('as-type-toggle-switch') && otherBtn.descriptor.group === nd.group && otherBtn.hasClass('as-checked')) {
otherBtn.removeClass('as-checked');
self.execCmd.apply(self, [otherBtn.attr('data-name'), false].concat(otherBtn.descriptor.args || []));
}
});
if (newChecked) {
this.addClass('as-checked');
} else {
this.removeClass('as-checked');
}
self.execCmd.apply(self, [name, newChecked].concat(nd.args || []));
}
}
});
if (nd.checked) btn.addClass('as-checked');
return btn;
},
/**
* @this {CMDTool}
* @param nd
* @param par
* @param nodeElt
*/
update: function (nd, par, nodeElt) {
if (nd.checked) nodeElt.addClass('as-checked');else {
nodeElt.removeClass('as-checked');
}
nodeElt.disabled = !!nd.disabled;
nodeElt.text = nd.desc;
nodeElt.icon = nd.icon;
}
},
ribbon: {
create: function (nd, par) {
var self = this;
var btn = _({
tag: _RibbonButton.default.tag,
class: 'as-big',
attr: {
'data-cmd-name': name
},
props: {
icon: nd.icon || nd.items[0].icon,
items: nd.items,
descriptor: nd,
disabled: !!nd.disabled
},
on: {
select: function (event) {
//select a item in menu
var item = event.item;
this.icon = item.icon;
self.execCmd.apply(self, [name].concat(item.args || []).concat(this.descriptor.args || []));
}
}
});
return btn;
},
update: function (nd, par, nodeElt) {
nodeElt.items = nd.items;
}
},
color: {
create: function (nd, par) {
var name = nd.name;
var btn = _({
tag: _RibbonButton.default,
class: ['as-big', 'as-type-color'],
style: {
'--value': nd.value || 'black'
},
props: {
icon: nd.icon,
descriptor: nd,
text: nd.desc
}
});
btn.on('click', () => {
if (btn.hasClass('as-checked')) return;
btn.addClass('as-checked');
var onClickOut = event => {
if ((0, _EventEmitter.hitElement)(picker, event)) return;
finish();
};
var finish = () => {
btn.removeClass('as-checked');
picker.remove();
document.removeEventListener('click', onClickOut);
};
setTimeout(() => {
document.addEventListener('click', onClickOut);
}, 100);
var applyValue = value => {
btn.addStyle('--value', value.toString('hex6')); //todo: call cmd
this.execCmd(name, value);
};
var picker = _({
tag: _SolidColorPicker.default,
style: {
position: 'fixed',
left: '0px',
top: '0px',
zIndex: (0, _utils.findMaxZIndex)(btn) + 1 + '',
visibility: 'hidden'
},
props: {
value: nd.value || 'black'
}
}).addTo(document.body);
var pickerBound = _Rectangle.default.fromClientRect(picker.getBoundingClientRect());
var btnBound = _Rectangle.default.fromClientRect(btn.getBoundingClientRect());
var screenSize = (0, _Dom.getScreenSize)();
var screenBound = new _Rectangle.default(0, 0, screenSize.width, screenSize.height);
var aBounds = [new _Rectangle.default(btnBound.x, btnBound.y + btnBound.height, pickerBound.width, pickerBound.height), new _Rectangle.default(btnBound.x + btnBound.width - pickerBound.width, btnBound.y + btnBound.height, pickerBound.width, pickerBound.height), new _Rectangle.default(btnBound.x, btnBound.y - pickerBound.height, pickerBound.width, pickerBound.height), new _Rectangle.default(btnBound.x + btnBound.width - pickerBound.width, btnBound.y - pickerBound.height, pickerBound.width, pickerBound.height)];
var bestSquare = 0;
var bestBound;
var square;
for (var i = 0; i < aBounds.length; ++i) {
square = aBounds[i].collapsedSquare(screenBound);
if (square > bestSquare) {
bestSquare = square;
bestBound = aBounds[i];
}
}
picker.addStyle({
left: bestBound.x + 'px',
top: bestBound.y + 'px',
visibility: 'visible'
});
picker.on('change', event => {
applyValue(picker.value);
});
picker.on('submit', event => {
finish();
});
});
return btn;
},
update: function (nd, par, nodeElt) {
nodeElt.addStyle('--value', nd.value || 'black');
}
},
font: {
create: function (nd, par) {
var btn = _({
tag: _RibbonButton.default,
props: {
icon: nd.icon,
text: nd.desc
}
});
return btn;
},
update: function (nd, par, nodeElt) {}
}
}; //
// CMDTool.prototype.makeCmdBtn = function (name) {
// var descriptor = this.delegate.getCmdDescriptor(name);
// switch (descriptor.type) {
// case 'trigger':
// return this.makeTriggerBtn(name, descriptor);
// case 'toggle_switch':
// return this.makeToggleSwitchBtn(name, descriptor);
// case 'ribbon':
// return this.makeRibbonBtn(name, descriptor);
// case 'font':
// return this.makeFontSelect(name, descriptor);
// case 'color':
// return this.makeColorSelect(name, descriptor);
// default:
// return this.makeTriggerBtn(name, descriptor);
// }
// };
//
//
// CMDTool.prototype.makeFontSelect = function (name, descriptor) {
// var btn = _({
// tag: RibbonSplitButton,
//
// props: {
// icon: descriptor.icon,
// descriptor: descriptor
// }
// });
//
// return btn;
// };
//
CMDTool.prototype.execCmd = function () {
if (this._delegate) this._delegate.execCmd.apply(this._delegate, arguments);
};
CMDTool.prototype.ev_cmdKeyDown = function (event) {
this._delegate.ev_cmdKeyDown(event); //repeat event
};
Object.defineProperty(CMDTool.prototype, 'delegate', {
/**
*
* @param {CMDToolDelegate} value
*/
set: function (value) {
if (this._delegate) {
this._delegate.cmdToolPartner = null;
}
this._delegate = value;
if (this._delegate) {
this._delegate.cmdToolPartner = this;
}
},
get: function () {
return this._delegate;
}
});
var _default = CMDTool;
exports.default = _default;
function CMDToolDelegate() {
/**
*
* @type {null|CMDTool}
*/
this.cmdToolPartner = null;
/**
* @type {null|CMDRunner}
* @name cmdRunner
* @memberOf CMDToolDelegate#
*/
}
/**
*
* @returns {*[]}
*/
CMDToolDelegate.prototype.getCmdGroupTree = function () {
return [];
};
CMDToolDelegate.prototype.getCmdDescriptor = function (name) {
return _CmdDescriptors.default[name] || {
type: 'trigger',
icon: 'span.mdi.mdi-command',
desc: name
};
};
CMDToolDelegate.prototype.execCmd = function (name, ...args) {
var _this$cmdRunner;
if (this.cmdRunner) return (_this$cmdRunner = this.cmdRunner).invoke.apply(_this$cmdRunner, [name].concat(args));
};
CMDToolDelegate.prototype.refresh = function () {
if (this.cmdToolPartner) this.cmdToolPartner.refresh();
};
CMDToolDelegate.prototype.updateVisibility = function (...args) {
var _this$cmdToolPartner;
if (this.cmdToolPartner) (_this$cmdToolPartner = this.cmdToolPartner).updateVisibility.apply(_this$cmdToolPartner, args);
};
CMDToolDelegate.prototype.ev_cmdKeyDown = function (event) {
if (this.cmdToolPartner && this.cmdToolPartner.ev_cmdKeyDown) {
this.cmdToolPartner.ev_cmdKeyDown(event);
}
};
/**
* @extends CMDToolDelegate
* @constructor
*/
function OldCMDToolDelegate() {
CMDToolDelegate.call(this);
this.editor = null;
this.refresh = this.refresh.bind(this);
this.updateVisibility = this.updateVisibility.bind(this);
}
_OOP.default.mixClass(OldCMDToolDelegate, CMDToolDelegate);
OldCMDToolDelegate.prototype.bindWithEditor = function (editor) {
if (this.editor) {
this.editor.off('cmddescriptorschange', this.updateVisibility);
this.editor.off('cmdchange', this.refresh);
}
this.editor = editor;
if (this.editor) {
this.editor.on('cmdchange', this.refresh);
this.editor.on("cmddescriptorschange", this.updateVisibility);
}
this.refresh();
};
OldCMDToolDelegate.prototype.execCmd = function (name, ...args) {
var _this$editor$cmdRunne;
console.log('execCmd', name, args);
return (_this$editor$cmdRunne = this.editor.cmdRunner).invoke.apply(_this$editor$cmdRunne, [name].concat(args));
};
OldCMDToolDelegate.prototype.getCmdGroupTree = function () {
return this.editor.getCmdGroupTree();
};
OldCMDToolDelegate.prototype.getCmdDescriptor = function (name) {
if (this.editor && this.editor.getCmdDescriptor) return this.editor.getCmdDescriptor(name);
return CMDToolDelegate.prototype.getCmdDescriptor.apply(this, arguments);
};
Server : Apache/2.4.41 (Ubuntu)