@brandup/ui 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +25 -64
- package/dist/cjs/index.js.map +1 -1
- package/dist/mjs/index.js +26 -65
- package/dist/mjs/index.js.map +1 -1
- package/dist/types.d.ts +5 -11
- package/package.json +2 -17
package/dist/cjs/index.js
CHANGED
|
@@ -67,15 +67,6 @@ class UIElement {
|
|
|
67
67
|
isExecuting: false
|
|
68
68
|
};
|
|
69
69
|
}
|
|
70
|
-
registerAsyncCommand(name, delegate, canExecute) {
|
|
71
|
-
name = this.verifyCommandName(name);
|
|
72
|
-
this.__commandHandlers[name] = {
|
|
73
|
-
name: name,
|
|
74
|
-
delegate,
|
|
75
|
-
canExecute,
|
|
76
|
-
isExecuting: false
|
|
77
|
-
};
|
|
78
|
-
}
|
|
79
70
|
hasCommand(name) {
|
|
80
71
|
return name.toLowerCase() in this.__commandHandlers;
|
|
81
72
|
}
|
|
@@ -83,71 +74,48 @@ class UIElement {
|
|
|
83
74
|
if (!this.__element)
|
|
84
75
|
throw new Error("UIElement is not set HTMLElement.");
|
|
85
76
|
const key = name.toLowerCase();
|
|
86
|
-
|
|
77
|
+
const handler = this.__commandHandlers[key];
|
|
78
|
+
if (!handler)
|
|
87
79
|
throw new Error(`Command "${name}" is not registered.`);
|
|
88
80
|
const context = {
|
|
89
81
|
target: elem,
|
|
90
82
|
uiElem: this,
|
|
91
83
|
transparent: false
|
|
92
84
|
};
|
|
93
|
-
const handler = this.__commandHandlers[key];
|
|
94
85
|
if (handler.isExecuting)
|
|
95
|
-
return {
|
|
86
|
+
return { status: "already", context };
|
|
96
87
|
handler.isExecuting = true;
|
|
97
88
|
if (!this._onCanExecCommand(name, elem)) {
|
|
98
89
|
handler.isExecuting = false;
|
|
99
|
-
return {
|
|
90
|
+
return { status: "disallow", context };
|
|
100
91
|
}
|
|
101
|
-
if (handler.canExecute && !handler.canExecute(
|
|
92
|
+
if (handler.canExecute && !handler.canExecute(context)) {
|
|
102
93
|
handler.isExecuting = false;
|
|
103
|
-
return {
|
|
94
|
+
return { status: "disallow", context };
|
|
104
95
|
}
|
|
105
96
|
this.raiseEvent("command", {
|
|
106
97
|
name: handler.name,
|
|
107
98
|
uiElem: this,
|
|
108
99
|
elem: this.__element
|
|
109
100
|
});
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
101
|
+
let isAsync;
|
|
102
|
+
try {
|
|
103
|
+
const handlerResult = handler.execute(context);
|
|
104
|
+
if (handlerResult && handlerResult instanceof Promise) {
|
|
105
|
+
isAsync = true;
|
|
106
|
+
elem.classList.add(CommandExecutingCssClassName);
|
|
107
|
+
handlerResult
|
|
108
|
+
.finally(() => {
|
|
109
|
+
elem.classList.remove(CommandExecutingCssClassName);
|
|
110
|
+
handler.isExecuting = false;
|
|
111
|
+
});
|
|
117
112
|
}
|
|
118
113
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
elem.classList.add(CommandExecutingCssClassName);
|
|
122
|
-
let timeoutId = 0;
|
|
123
|
-
const endFunc = () => {
|
|
114
|
+
finally {
|
|
115
|
+
if (!isAsync)
|
|
124
116
|
handler.isExecuting = false;
|
|
125
|
-
elem.classList.remove(CommandExecutingCssClassName);
|
|
126
|
-
};
|
|
127
|
-
const asyncContext = {
|
|
128
|
-
target: elem,
|
|
129
|
-
uiElem: this,
|
|
130
|
-
transparent: context.transparent,
|
|
131
|
-
complate: () => {
|
|
132
|
-
clearTimeout(timeoutId);
|
|
133
|
-
endFunc();
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
|
-
const handlerResult = handler.delegate(asyncContext);
|
|
137
|
-
if (handlerResult && handlerResult instanceof Promise)
|
|
138
|
-
handlerResult.finally(() => asyncContext.complate());
|
|
139
|
-
if (handler.isExecuting && asyncContext.timeout) {
|
|
140
|
-
timeoutId = window.setTimeout(() => {
|
|
141
|
-
if (asyncContext.timeoutCallback)
|
|
142
|
-
asyncContext.timeoutCallback();
|
|
143
|
-
endFunc();
|
|
144
|
-
}, asyncContext.timeout);
|
|
145
|
-
}
|
|
146
|
-
context.transparent = asyncContext.transparent;
|
|
147
117
|
}
|
|
148
|
-
|
|
149
|
-
throw new Error("Not set command execute flow.");
|
|
150
|
-
return { result: exports.CommandsExecStatus.Success, context: context };
|
|
118
|
+
return { status: "success", context: context };
|
|
151
119
|
}
|
|
152
120
|
verifyCommandName(name) {
|
|
153
121
|
const key = name.toLowerCase();
|
|
@@ -170,12 +138,6 @@ class UIElement {
|
|
|
170
138
|
delete elem[ElemPropertyName];
|
|
171
139
|
}
|
|
172
140
|
}
|
|
173
|
-
exports.CommandsExecStatus = void 0;
|
|
174
|
-
(function (CommandsExecStatus) {
|
|
175
|
-
CommandsExecStatus[CommandsExecStatus["NotAllow"] = 1] = "NotAllow";
|
|
176
|
-
CommandsExecStatus[CommandsExecStatus["AlreadyExecuting"] = 2] = "AlreadyExecuting";
|
|
177
|
-
CommandsExecStatus[CommandsExecStatus["Success"] = 3] = "Success";
|
|
178
|
-
})(exports.CommandsExecStatus || (exports.CommandsExecStatus = {}));
|
|
179
141
|
const fundUiElementByCommand = (elem, commandName) => {
|
|
180
142
|
while (elem) {
|
|
181
143
|
if (elem.dataset[ElemAttributeName]) {
|
|
@@ -207,14 +169,13 @@ const commandClickHandler = (e) => {
|
|
|
207
169
|
if (!commandName)
|
|
208
170
|
throw new Error("Command data attribute is not have value.");
|
|
209
171
|
const uiElem = fundUiElementByCommand(commandElem, commandName);
|
|
210
|
-
if (uiElem
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
else {
|
|
214
|
-
const commandResult = uiElem.execCommand(commandName, commandElem);
|
|
215
|
-
if (commandResult.context.transparent)
|
|
172
|
+
if (uiElem) {
|
|
173
|
+
const result = uiElem.execCommand(commandName, commandElem);
|
|
174
|
+
if (result.status == "success" && result.context.transparent)
|
|
216
175
|
return;
|
|
217
176
|
}
|
|
177
|
+
else
|
|
178
|
+
console.warn(`Not find handler for command "${commandName}".`);
|
|
218
179
|
e.preventDefault();
|
|
219
180
|
e.stopPropagation();
|
|
220
181
|
e.stopImmediatePropagation();
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/mjs/index.js
CHANGED
|
@@ -65,15 +65,6 @@ class UIElement {
|
|
|
65
65
|
isExecuting: false
|
|
66
66
|
};
|
|
67
67
|
}
|
|
68
|
-
registerAsyncCommand(name, delegate, canExecute) {
|
|
69
|
-
name = this.verifyCommandName(name);
|
|
70
|
-
this.__commandHandlers[name] = {
|
|
71
|
-
name: name,
|
|
72
|
-
delegate,
|
|
73
|
-
canExecute,
|
|
74
|
-
isExecuting: false
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
68
|
hasCommand(name) {
|
|
78
69
|
return name.toLowerCase() in this.__commandHandlers;
|
|
79
70
|
}
|
|
@@ -81,71 +72,48 @@ class UIElement {
|
|
|
81
72
|
if (!this.__element)
|
|
82
73
|
throw new Error("UIElement is not set HTMLElement.");
|
|
83
74
|
const key = name.toLowerCase();
|
|
84
|
-
|
|
75
|
+
const handler = this.__commandHandlers[key];
|
|
76
|
+
if (!handler)
|
|
85
77
|
throw new Error(`Command "${name}" is not registered.`);
|
|
86
78
|
const context = {
|
|
87
79
|
target: elem,
|
|
88
80
|
uiElem: this,
|
|
89
81
|
transparent: false
|
|
90
82
|
};
|
|
91
|
-
const handler = this.__commandHandlers[key];
|
|
92
83
|
if (handler.isExecuting)
|
|
93
|
-
return {
|
|
84
|
+
return { status: "already", context };
|
|
94
85
|
handler.isExecuting = true;
|
|
95
86
|
if (!this._onCanExecCommand(name, elem)) {
|
|
96
87
|
handler.isExecuting = false;
|
|
97
|
-
return {
|
|
88
|
+
return { status: "disallow", context };
|
|
98
89
|
}
|
|
99
|
-
if (handler.canExecute && !handler.canExecute(
|
|
90
|
+
if (handler.canExecute && !handler.canExecute(context)) {
|
|
100
91
|
handler.isExecuting = false;
|
|
101
|
-
return {
|
|
92
|
+
return { status: "disallow", context };
|
|
102
93
|
}
|
|
103
94
|
this.raiseEvent("command", {
|
|
104
95
|
name: handler.name,
|
|
105
96
|
uiElem: this,
|
|
106
97
|
elem: this.__element
|
|
107
98
|
});
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
99
|
+
let isAsync;
|
|
100
|
+
try {
|
|
101
|
+
const handlerResult = handler.execute(context);
|
|
102
|
+
if (handlerResult && handlerResult instanceof Promise) {
|
|
103
|
+
isAsync = true;
|
|
104
|
+
elem.classList.add(CommandExecutingCssClassName);
|
|
105
|
+
handlerResult
|
|
106
|
+
.finally(() => {
|
|
107
|
+
elem.classList.remove(CommandExecutingCssClassName);
|
|
108
|
+
handler.isExecuting = false;
|
|
109
|
+
});
|
|
115
110
|
}
|
|
116
111
|
}
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
elem.classList.add(CommandExecutingCssClassName);
|
|
120
|
-
let timeoutId = 0;
|
|
121
|
-
const endFunc = () => {
|
|
112
|
+
finally {
|
|
113
|
+
if (!isAsync)
|
|
122
114
|
handler.isExecuting = false;
|
|
123
|
-
elem.classList.remove(CommandExecutingCssClassName);
|
|
124
|
-
};
|
|
125
|
-
const asyncContext = {
|
|
126
|
-
target: elem,
|
|
127
|
-
uiElem: this,
|
|
128
|
-
transparent: context.transparent,
|
|
129
|
-
complate: () => {
|
|
130
|
-
clearTimeout(timeoutId);
|
|
131
|
-
endFunc();
|
|
132
|
-
}
|
|
133
|
-
};
|
|
134
|
-
const handlerResult = handler.delegate(asyncContext);
|
|
135
|
-
if (handlerResult && handlerResult instanceof Promise)
|
|
136
|
-
handlerResult.finally(() => asyncContext.complate());
|
|
137
|
-
if (handler.isExecuting && asyncContext.timeout) {
|
|
138
|
-
timeoutId = window.setTimeout(() => {
|
|
139
|
-
if (asyncContext.timeoutCallback)
|
|
140
|
-
asyncContext.timeoutCallback();
|
|
141
|
-
endFunc();
|
|
142
|
-
}, asyncContext.timeout);
|
|
143
|
-
}
|
|
144
|
-
context.transparent = asyncContext.transparent;
|
|
145
115
|
}
|
|
146
|
-
|
|
147
|
-
throw new Error("Not set command execute flow.");
|
|
148
|
-
return { result: CommandsExecStatus.Success, context: context };
|
|
116
|
+
return { status: "success", context: context };
|
|
149
117
|
}
|
|
150
118
|
verifyCommandName(name) {
|
|
151
119
|
const key = name.toLowerCase();
|
|
@@ -168,12 +136,6 @@ class UIElement {
|
|
|
168
136
|
delete elem[ElemPropertyName];
|
|
169
137
|
}
|
|
170
138
|
}
|
|
171
|
-
var CommandsExecStatus;
|
|
172
|
-
(function (CommandsExecStatus) {
|
|
173
|
-
CommandsExecStatus[CommandsExecStatus["NotAllow"] = 1] = "NotAllow";
|
|
174
|
-
CommandsExecStatus[CommandsExecStatus["AlreadyExecuting"] = 2] = "AlreadyExecuting";
|
|
175
|
-
CommandsExecStatus[CommandsExecStatus["Success"] = 3] = "Success";
|
|
176
|
-
})(CommandsExecStatus || (CommandsExecStatus = {}));
|
|
177
139
|
const fundUiElementByCommand = (elem, commandName) => {
|
|
178
140
|
while (elem) {
|
|
179
141
|
if (elem.dataset[ElemAttributeName]) {
|
|
@@ -205,19 +167,18 @@ const commandClickHandler = (e) => {
|
|
|
205
167
|
if (!commandName)
|
|
206
168
|
throw new Error("Command data attribute is not have value.");
|
|
207
169
|
const uiElem = fundUiElementByCommand(commandElem, commandName);
|
|
208
|
-
if (uiElem
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
else {
|
|
212
|
-
const commandResult = uiElem.execCommand(commandName, commandElem);
|
|
213
|
-
if (commandResult.context.transparent)
|
|
170
|
+
if (uiElem) {
|
|
171
|
+
const result = uiElem.execCommand(commandName, commandElem);
|
|
172
|
+
if (result.status == "success" && result.context.transparent)
|
|
214
173
|
return;
|
|
215
174
|
}
|
|
175
|
+
else
|
|
176
|
+
console.warn(`Not find handler for command "${commandName}".`);
|
|
216
177
|
e.preventDefault();
|
|
217
178
|
e.stopPropagation();
|
|
218
179
|
e.stopImmediatePropagation();
|
|
219
180
|
};
|
|
220
181
|
window.addEventListener("click", commandClickHandler, false);
|
|
221
182
|
|
|
222
|
-
export { CommandAttributeName, CommandExecutingCssClassName,
|
|
183
|
+
export { CommandAttributeName, CommandExecutingCssClassName, ElemAttributeName, ElemPropertyName, UIElement };
|
|
223
184
|
//# sourceMappingURL=index.js.map
|
package/dist/mjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -2,9 +2,8 @@ declare const ElemAttributeName = "uiElement";
|
|
|
2
2
|
declare const ElemPropertyName = "brandupUiElement";
|
|
3
3
|
declare const CommandAttributeName = "command";
|
|
4
4
|
declare const CommandExecutingCssClassName = "executing";
|
|
5
|
-
type CommandDelegate = (
|
|
6
|
-
type CommandCanExecuteDelegate = (
|
|
7
|
-
type CommandAsyncDelegate = (context: CommandAsyncContext) => void | Promise<void>;
|
|
5
|
+
type CommandDelegate = (context: CommandContext) => void | Promise<void | any>;
|
|
6
|
+
type CommandCanExecuteDelegate = (context: CommandContext) => boolean;
|
|
8
7
|
declare abstract class UIElement {
|
|
9
8
|
private __element;
|
|
10
9
|
private __events;
|
|
@@ -19,7 +18,6 @@ declare abstract class UIElement {
|
|
|
19
18
|
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
20
19
|
dispatchEvent(event: Event): boolean;
|
|
21
20
|
registerCommand(name: string, execute: CommandDelegate, canExecute?: CommandCanExecuteDelegate): void;
|
|
22
|
-
registerAsyncCommand(name: string, delegate: CommandAsyncDelegate, canExecute?: CommandCanExecuteDelegate): void;
|
|
23
21
|
hasCommand(name: string): boolean;
|
|
24
22
|
execCommand(name: string, elem: HTMLElement): CommandExecutionResult;
|
|
25
23
|
private verifyCommandName;
|
|
@@ -44,7 +42,7 @@ interface CommandContext {
|
|
|
44
42
|
transparent: boolean;
|
|
45
43
|
}
|
|
46
44
|
interface CommandExecutionResult {
|
|
47
|
-
|
|
45
|
+
status: CommandExecStatus;
|
|
48
46
|
context: CommandContext;
|
|
49
47
|
}
|
|
50
48
|
interface CommandAsyncContext extends CommandContext {
|
|
@@ -52,10 +50,6 @@ interface CommandAsyncContext extends CommandContext {
|
|
|
52
50
|
complate: VoidFunction;
|
|
53
51
|
timeoutCallback?: VoidFunction;
|
|
54
52
|
}
|
|
55
|
-
|
|
56
|
-
NotAllow = 1,
|
|
57
|
-
AlreadyExecuting = 2,
|
|
58
|
-
Success = 3
|
|
59
|
-
}
|
|
53
|
+
type CommandExecStatus = "disallow" | "already" | "success";
|
|
60
54
|
|
|
61
|
-
export { type CommandAsyncContext,
|
|
55
|
+
export { type CommandAsyncContext, CommandAttributeName, type CommandCanExecuteDelegate, type CommandContext, type CommandDelegate, type CommandEventArgs, type CommandExecStatus, CommandExecutingCssClassName, type CommandExecutionResult, ElemAttributeName, ElemPropertyName, type EventOptions, UIElement };
|
package/package.json
CHANGED
|
@@ -22,27 +22,12 @@
|
|
|
22
22
|
"email": "it@brandup.online"
|
|
23
23
|
},
|
|
24
24
|
"license": "Apache-2.0",
|
|
25
|
-
"version": "1.0.
|
|
25
|
+
"version": "1.0.2",
|
|
26
26
|
"main": "dist/cjs/index.js",
|
|
27
27
|
"module": "dist/mjs/index.js",
|
|
28
28
|
"types": "dist/types.d.ts",
|
|
29
|
-
"devDependencies": {
|
|
30
|
-
"@rollup/plugin-commonjs": "^25.0.8",
|
|
31
|
-
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
32
|
-
"@rollup/plugin-terser": "^0.4.4",
|
|
33
|
-
"rollup": "^4.19.0",
|
|
34
|
-
"rollup-plugin-dts": "^6.1.1",
|
|
35
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
36
|
-
"rollup-plugin-typescript2": "^0.36.0",
|
|
37
|
-
"tslib": "^2.6.3",
|
|
38
|
-
"typescript": "^5.5.3"
|
|
39
|
-
},
|
|
40
29
|
"files": [
|
|
41
30
|
"dist",
|
|
42
31
|
"README.md"
|
|
43
|
-
]
|
|
44
|
-
"scripts": {
|
|
45
|
-
"build": "rollup -c --bundleConfigAsCjs",
|
|
46
|
-
"watch": "rollup -c -w --bundleConfigAsCjs"
|
|
47
|
-
}
|
|
32
|
+
]
|
|
48
33
|
}
|