dom-render 1.0.44 → 1.0.48
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/Config.d.ts +2 -0
- package/DomRenderProxy.d.ts +1 -1
- package/DomRenderProxy.js +38 -23
- package/README.MD +264 -101
- package/RawSet.js +3 -1
- package/assets/banner.png +0 -0
- package/dist/Config.d.ts +2 -0
- package/dist/DomRenderProxy.d.ts +1 -1
- package/dist/bundle.js +185 -51
- package/dist/bundle.js.map +1 -1
- package/dist/events/EventManager.d.ts +4 -2
- package/dist/lifecycle/OnBeforeReturnGet.d.ts +3 -0
- package/dist/lifecycle/OnBeforeReturnSet.d.ts +3 -0
- package/dist/types/Types.d.ts +3 -0
- package/dist/utils/dom/DomUtils.d.ts +4 -4
- package/events/EventManager.d.ts +4 -2
- package/events/EventManager.js +102 -28
- package/lifecycle/OnBeforeReturnGet.d.ts +3 -0
- package/lifecycle/OnBeforeReturnGet.js +1 -0
- package/lifecycle/OnBeforeReturnSet.d.ts +3 -0
- package/lifecycle/OnBeforeReturnSet.js +1 -0
- package/package.json +1 -1
- package/types/Types.d.ts +3 -0
- package/types/Types.js +6 -1
- package/utils/dom/DomUtils.d.ts +4 -4
- package/utils/dom/DomUtils.js +3 -1
- package/Shield.d.ts +0 -3
- package/Shield.js +0 -6
- package/dist/Shield.d.ts +0 -3
package/events/EventManager.js
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import { ScriptUtils } from '../utils/script/ScriptUtils';
|
2
|
+
import { DomUtils } from '../utils/dom/DomUtils';
|
2
3
|
export var eventManager = new (function () {
|
3
4
|
function class_1() {
|
4
5
|
var _this = this;
|
@@ -6,8 +7,9 @@ export var eventManager = new (function () {
|
|
6
7
|
this.eventNames = [
|
7
8
|
'click', 'mousedown', 'mouseup', 'dblclick', 'mouseover', 'mouseout', 'mousemove', 'mouseenter', 'mouseleave', 'contextmenu',
|
8
9
|
'keyup', 'keydown', 'keypress',
|
9
|
-
'change', 'input', 'submit', 'resize'
|
10
|
+
'change', 'input', 'submit', 'resize', 'focus', 'blur'
|
10
11
|
];
|
12
|
+
this.eventParam = this.attrPrefix + 'event';
|
11
13
|
this.attrNames = [
|
12
14
|
this.attrPrefix + 'value',
|
13
15
|
this.attrPrefix + 'value-link',
|
@@ -15,17 +17,21 @@ export var eventManager = new (function () {
|
|
15
17
|
this.attrPrefix + 'style',
|
16
18
|
this.attrPrefix + 'class',
|
17
19
|
this.attrPrefix + 'window-event-popstate',
|
18
|
-
this.attrPrefix + 'on-init'
|
20
|
+
this.attrPrefix + 'on-init',
|
21
|
+
this.eventParam
|
19
22
|
];
|
20
23
|
this.eventNames.forEach(function (it) {
|
21
24
|
_this.attrNames.push(_this.attrPrefix + 'event-' + it);
|
22
25
|
});
|
23
26
|
window.addEventListener('popstate', function (e) {
|
24
27
|
document.querySelectorAll('[dr-window-event-popstate]').forEach(function (it) {
|
25
|
-
var _a;
|
26
28
|
var script = it.getAttribute('dr-window-event-popstate');
|
27
29
|
if (script) {
|
28
|
-
(
|
30
|
+
ScriptUtils.eval("const $target = this.__render.target; " + script + " ", Object.assign(it.obj, {
|
31
|
+
__render: Object.freeze({
|
32
|
+
target: it
|
33
|
+
})
|
34
|
+
}));
|
29
35
|
}
|
30
36
|
});
|
31
37
|
});
|
@@ -44,8 +50,9 @@ export var eventManager = new (function () {
|
|
44
50
|
class_1.prototype.applyEvent = function (obj, childNodes, config) {
|
45
51
|
var _this = this;
|
46
52
|
this.eventNames.forEach(function (it) {
|
47
|
-
_this.
|
53
|
+
_this.addDrEvents(obj, it, childNodes);
|
48
54
|
});
|
55
|
+
this.addDrEventPram(obj, this.eventParam, childNodes);
|
49
56
|
this.procAttr(childNodes, this.attrPrefix + 'value', function (it, attribute) {
|
50
57
|
var script = attribute;
|
51
58
|
if (script) {
|
@@ -110,68 +117,134 @@ export var eventManager = new (function () {
|
|
110
117
|
}
|
111
118
|
});
|
112
119
|
this.procAttr(elements, this.attrPrefix + 'attr', function (it, attribute) {
|
113
|
-
var _a;
|
114
120
|
var script = attribute;
|
115
121
|
if (script) {
|
116
122
|
script = 'return ' + script;
|
117
123
|
}
|
118
124
|
if (_this.isUsingThisVar(script, varName) || varName === undefined) {
|
119
|
-
var data = (
|
120
|
-
|
121
|
-
|
125
|
+
var data = ScriptUtils.eval("const $target=this.__render.target; " + script + " ", Object.assign(obj, {
|
126
|
+
__render: Object.freeze({
|
127
|
+
target: it
|
128
|
+
})
|
129
|
+
}));
|
130
|
+
for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
|
131
|
+
var _b = _a[_i], key = _b[0], value = _b[1];
|
122
132
|
it.setAttribute(key, String(value));
|
123
133
|
}
|
124
134
|
}
|
125
135
|
});
|
126
136
|
this.procAttr(elements, this.attrPrefix + 'style', function (it, attribute) {
|
127
|
-
var _a;
|
128
137
|
var script = attribute;
|
129
138
|
if (script) {
|
130
139
|
script = 'return ' + script;
|
131
140
|
}
|
132
141
|
if (_this.isUsingThisVar(script, varName) || varName === undefined) {
|
133
|
-
var data = (
|
134
|
-
|
135
|
-
|
142
|
+
var data = ScriptUtils.eval("const $target = this.__render.target; " + script + " ", Object.assign(obj, {
|
143
|
+
__render: Object.freeze({
|
144
|
+
target: it
|
145
|
+
})
|
146
|
+
}));
|
147
|
+
if (typeof data === 'string') {
|
148
|
+
if (it instanceof HTMLElement) {
|
149
|
+
it.removeAttribute('style');
|
150
|
+
it.setAttribute('style', data);
|
151
|
+
}
|
152
|
+
}
|
153
|
+
else if (Array.isArray(data)) {
|
136
154
|
if (it instanceof HTMLElement) {
|
137
|
-
it.style
|
155
|
+
it.removeAttribute('style');
|
156
|
+
it.setAttribute('style', data.join(';'));
|
157
|
+
}
|
158
|
+
}
|
159
|
+
else {
|
160
|
+
for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
|
161
|
+
var _b = _a[_i], key = _b[0], value = _b[1];
|
162
|
+
if (it instanceof HTMLElement) {
|
163
|
+
it.style[key] = String(value);
|
164
|
+
}
|
138
165
|
}
|
139
166
|
}
|
140
167
|
}
|
141
168
|
});
|
142
169
|
this.procAttr(elements, this.attrPrefix + 'class', function (it, attribute) {
|
143
|
-
var _a;
|
144
170
|
var script = attribute;
|
145
171
|
if (script) {
|
146
172
|
script = 'return ' + script;
|
147
173
|
}
|
148
174
|
if (_this.isUsingThisVar(script, varName) || varName === undefined) {
|
149
|
-
var data = (
|
150
|
-
|
151
|
-
|
175
|
+
var data = ScriptUtils.eval("const $target = this.$target; " + script + " ", Object.assign(obj, {
|
176
|
+
__render: Object.freeze({
|
177
|
+
target: it
|
178
|
+
})
|
179
|
+
}));
|
180
|
+
if (typeof data === 'string') {
|
152
181
|
if (it instanceof HTMLElement) {
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
182
|
+
it.removeAttribute('class');
|
183
|
+
it.setAttribute('class', data);
|
184
|
+
}
|
185
|
+
}
|
186
|
+
else if (Array.isArray(data)) {
|
187
|
+
if (it instanceof HTMLElement) {
|
188
|
+
it.removeAttribute('class');
|
189
|
+
it.setAttribute('class', data.join(' '));
|
190
|
+
}
|
191
|
+
}
|
192
|
+
else {
|
193
|
+
for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
|
194
|
+
var _b = _a[_i], key = _b[0], value = _b[1];
|
195
|
+
if (it instanceof HTMLElement) {
|
196
|
+
if (value) {
|
197
|
+
it.classList.add(key);
|
198
|
+
}
|
199
|
+
else {
|
200
|
+
it.classList.remove(key);
|
201
|
+
}
|
158
202
|
}
|
159
203
|
}
|
160
204
|
}
|
161
205
|
}
|
162
206
|
});
|
163
207
|
};
|
164
|
-
class_1.prototype.
|
208
|
+
class_1.prototype.addDrEvents = function (obj, eventName, elements) {
|
165
209
|
var attr = this.attrPrefix + 'event-' + eventName;
|
166
210
|
this.procAttr(elements, attr, function (it, attribute) {
|
167
211
|
var script = attribute;
|
168
212
|
it.addEventListener(eventName, function (event) {
|
169
|
-
|
170
|
-
|
171
|
-
|
213
|
+
ScriptUtils.eval("const $event=this.__render.event; const $target=$event.target; " + script + " ", Object.assign(obj, {
|
214
|
+
__render: Object.freeze({
|
215
|
+
event: event
|
216
|
+
})
|
217
|
+
}));
|
172
218
|
});
|
173
219
|
});
|
174
220
|
};
|
221
|
+
class_1.prototype.addDrEventPram = function (obj, attr, elements) {
|
222
|
+
this.procAttr(elements, attr, function (it, attribute, attributes) {
|
223
|
+
var bind = attributes[attr + ':bind'];
|
224
|
+
if (bind) {
|
225
|
+
var script_1 = attribute;
|
226
|
+
var params_1 = {};
|
227
|
+
var prefix_1 = attr + ':';
|
228
|
+
Object.entries(attributes).filter(function (_a) {
|
229
|
+
var k = _a[0], v = _a[1];
|
230
|
+
return k.startsWith(prefix_1);
|
231
|
+
}).forEach(function (_a) {
|
232
|
+
var k = _a[0], v = _a[1];
|
233
|
+
params_1[k.slice(prefix_1.length)] = v;
|
234
|
+
});
|
235
|
+
bind.split(',').forEach(function (eventName) {
|
236
|
+
it.addEventListener(eventName.trim(), function (event) {
|
237
|
+
ScriptUtils.eval("const $params = this.__render.params; const $event=this.__render.event; const $target=$event.target; " + script_1 + " ", Object.assign(obj, {
|
238
|
+
__render: Object.freeze({
|
239
|
+
event: event,
|
240
|
+
params: params_1
|
241
|
+
})
|
242
|
+
}));
|
243
|
+
});
|
244
|
+
});
|
245
|
+
}
|
246
|
+
});
|
247
|
+
};
|
175
248
|
class_1.prototype.procAttr = function (elements, attrName, callBack) {
|
176
249
|
if (elements === void 0) { elements = new Set(); }
|
177
250
|
var sets = new Set();
|
@@ -189,8 +262,9 @@ export var eventManager = new (function () {
|
|
189
262
|
});
|
190
263
|
sets.forEach(function (it) {
|
191
264
|
var attr = it.getAttribute(attrName);
|
265
|
+
var attrs = DomUtils.getAttributeToObject(it);
|
192
266
|
if (attr) {
|
193
|
-
callBack(it, attr);
|
267
|
+
callBack(it, attr, attrs);
|
194
268
|
}
|
195
269
|
});
|
196
270
|
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
package/package.json
CHANGED
package/types/Types.d.ts
CHANGED
package/types/Types.js
CHANGED
package/utils/dom/DomUtils.d.ts
CHANGED
@@ -5,9 +5,9 @@ export declare type Attr = {
|
|
5
5
|
export declare class DomUtils {
|
6
6
|
static selectorElements(selector: string, element?: Element | Document): Element[];
|
7
7
|
static selectorNodes(selector: string, element?: Element | Document): NodeListOf<Element>;
|
8
|
-
static removeAttribute(result:
|
9
|
-
static setAttribute(result:
|
10
|
-
static setAttributeAttr(result:
|
11
|
-
static getAttributeToObject(input:
|
8
|
+
static removeAttribute(result: Element, attrs: string[]): void;
|
9
|
+
static setAttribute(result: Element, attrs: string[]): void;
|
10
|
+
static setAttributeAttr(result: Element, attrs: Attr[]): void;
|
11
|
+
static getAttributeToObject(input: Element): any;
|
12
12
|
static getStyleToObject(input: HTMLElement): any;
|
13
13
|
}
|
package/utils/dom/DomUtils.js
CHANGED
@@ -26,7 +26,9 @@ var DomUtils = (function () {
|
|
26
26
|
};
|
27
27
|
DomUtils.getAttributeToObject = function (input) {
|
28
28
|
var attribute = {};
|
29
|
-
input.getAttributeNames().forEach(function (ait) {
|
29
|
+
input.getAttributeNames().forEach(function (ait) {
|
30
|
+
attribute[ait] = input.getAttribute(ait);
|
31
|
+
});
|
30
32
|
return attribute;
|
31
33
|
};
|
32
34
|
DomUtils.getStyleToObject = function (input) {
|
package/Shield.d.ts
DELETED
package/Shield.js
DELETED
package/dist/Shield.d.ts
DELETED