native-document 1.0.89 → 1.0.91
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/native-document.components.min.js +43 -69
- package/dist/native-document.dev.js +44 -72
- package/dist/native-document.dev.js.map +1 -1
- package/dist/native-document.devtools.min.js +1 -1
- package/dist/native-document.min.js +1 -1
- package/package.json +1 -1
- package/src/core/data/ObservableChecker.js +4 -4
- package/src/core/data/ObservableItem.js +22 -33
- package/src/core/data/ObservableWhen.js +2 -2
- package/src/core/wrappers/AttributesWrapper.js +17 -33
- package/src/core/wrappers/prototypes/bind-class-extensions.js +3 -7
|
@@ -57,7 +57,7 @@ ObservableItem.prototype.intercept = function(callback) {
|
|
|
57
57
|
};
|
|
58
58
|
|
|
59
59
|
ObservableItem.prototype.triggerFirstListener = function(operations) {
|
|
60
|
-
this.$firstListener
|
|
60
|
+
this.$firstListener(this.$currentValue, this.$previousValue, operations || {});
|
|
61
61
|
};
|
|
62
62
|
|
|
63
63
|
ObservableItem.prototype.triggerListeners = function(operations) {
|
|
@@ -67,25 +67,24 @@ ObservableItem.prototype.triggerListeners = function(operations) {
|
|
|
67
67
|
|
|
68
68
|
operations = operations || DEFAULT_OPERATIONS;
|
|
69
69
|
for(let i = 0, length = $listeners.length; i < length; i++) {
|
|
70
|
-
|
|
71
|
-
listener.callback($currentValue, $previousValue, operations, listener.context);
|
|
70
|
+
$listeners[i]($currentValue, $previousValue, operations);
|
|
72
71
|
}
|
|
73
72
|
};
|
|
74
73
|
|
|
75
74
|
const handleWatcherCallback = function(callbacks, value) {
|
|
76
|
-
if(callbacks
|
|
77
|
-
callbacks
|
|
75
|
+
if(typeof callbacks === "function") {
|
|
76
|
+
callbacks(value);
|
|
78
77
|
return;
|
|
79
78
|
}
|
|
80
79
|
if (callbacks.set) {
|
|
81
80
|
callbacks.set(value);
|
|
82
81
|
return;
|
|
83
82
|
}
|
|
84
|
-
callbacks.
|
|
85
|
-
callback
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
83
|
+
for(let i = 0, length = callbacks.length; i < length; i++) {
|
|
84
|
+
const callback = callbacks[i];
|
|
85
|
+
callback.set ? callback.set(value) : callback(value);
|
|
86
|
+
|
|
87
|
+
}
|
|
89
88
|
};
|
|
90
89
|
|
|
91
90
|
ObservableItem.prototype.triggerWatchers = function() {
|
|
@@ -97,12 +96,12 @@ ObservableItem.prototype.triggerWatchers = function() {
|
|
|
97
96
|
const $previousValue = this.$previousValue;
|
|
98
97
|
const $currentValue = this.$currentValue;
|
|
99
98
|
|
|
100
|
-
|
|
101
|
-
|
|
99
|
+
const $currentValueCallbacks = $watchers.get($currentValue);
|
|
100
|
+
const $previousValueCallbacks = $watchers.get($previousValue);
|
|
101
|
+
if($currentValueCallbacks) {
|
|
102
102
|
handleWatcherCallback($currentValueCallbacks, true);
|
|
103
103
|
}
|
|
104
|
-
if($
|
|
105
|
-
const $previousValueCallbacks = $watchers.get($previousValue);
|
|
104
|
+
if($previousValueCallbacks) {
|
|
106
105
|
handleWatcherCallback($previousValueCallbacks, false);
|
|
107
106
|
}
|
|
108
107
|
};
|
|
@@ -114,7 +113,7 @@ ObservableItem.prototype.triggerAll = function(operations) {
|
|
|
114
113
|
|
|
115
114
|
ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
|
|
116
115
|
this.triggerWatchers();
|
|
117
|
-
this.
|
|
116
|
+
this.triggerFirstListener(operations);
|
|
118
117
|
};
|
|
119
118
|
|
|
120
119
|
ObservableItem.prototype.assocTrigger = function() {
|
|
@@ -213,11 +212,10 @@ ObservableItem.prototype.cleanup = function() {
|
|
|
213
212
|
/**
|
|
214
213
|
*
|
|
215
214
|
* @param {Function} callback
|
|
216
|
-
* @param {?Object} context
|
|
217
215
|
* @param {any} target
|
|
218
216
|
* @returns {(function(): void)}
|
|
219
217
|
*/
|
|
220
|
-
ObservableItem.prototype.subscribe = function(callback,
|
|
218
|
+
ObservableItem.prototype.subscribe = function(callback, target = null) {
|
|
221
219
|
this.$listeners = this.$listeners ?? [];
|
|
222
220
|
if (this.$isCleanedUp) {
|
|
223
221
|
DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
|
|
@@ -227,15 +225,13 @@ ObservableItem.prototype.subscribe = function(callback, context = null, target =
|
|
|
227
225
|
throw new NativeDocumentError('Callback must be a function');
|
|
228
226
|
}
|
|
229
227
|
|
|
230
|
-
|
|
231
|
-
const finalCallback = { callback, context };
|
|
232
|
-
this.$listeners.push(finalCallback);
|
|
228
|
+
this.$listeners.push(callback);
|
|
233
229
|
this.assocTrigger();
|
|
234
230
|
if(process.env.NODE_ENV === 'development') {
|
|
235
231
|
PluginsManager.emit('ObservableSubscribe', this, target);
|
|
236
232
|
}
|
|
237
233
|
return () => {
|
|
238
|
-
this.unsubscribe(
|
|
234
|
+
this.unsubscribe(callback);
|
|
239
235
|
this.assocTrigger();
|
|
240
236
|
if(process.env.NODE_ENV === 'development') {
|
|
241
237
|
PluginsManager.emit('ObservableUnsubscribe', this);
|
|
@@ -243,24 +239,23 @@ ObservableItem.prototype.subscribe = function(callback, context = null, target =
|
|
|
243
239
|
};
|
|
244
240
|
};
|
|
245
241
|
|
|
246
|
-
ObservableItem.prototype.on = function(value, callback
|
|
242
|
+
ObservableItem.prototype.on = function(value, callback) {
|
|
247
243
|
this.$watchers = this.$watchers ?? new Map();
|
|
248
244
|
|
|
249
245
|
let watchValueList = this.$watchers.get(value);
|
|
250
|
-
const finalCallback = { callback, context };
|
|
251
246
|
|
|
252
247
|
if(!watchValueList) {
|
|
253
|
-
this.$watchers.set(value,
|
|
248
|
+
this.$watchers.set(value, callback);
|
|
254
249
|
} else if(!Validator.isArray(watchValueList)) {
|
|
255
|
-
watchValueList = [watchValueList,
|
|
250
|
+
watchValueList = [watchValueList, callback];
|
|
256
251
|
this.$watchers.set(value, watchValueList);
|
|
257
252
|
} else {
|
|
258
|
-
watchValueList.push(
|
|
253
|
+
watchValueList.push(callback);
|
|
259
254
|
}
|
|
260
255
|
|
|
261
256
|
this.assocTrigger();
|
|
262
257
|
return () => {
|
|
263
|
-
const index = watchValueList.indexOf(
|
|
258
|
+
const index = watchValueList.indexOf(callback);
|
|
264
259
|
watchValueList?.splice(index, 1);
|
|
265
260
|
if(watchValueList.size === 1) {
|
|
266
261
|
this.$watchers.set(value, watchValueList[0]);
|
|
@@ -315,12 +310,6 @@ ObservableItem.prototype.when = function(value) {
|
|
|
315
310
|
return new ObservableWhen(this, value);
|
|
316
311
|
};
|
|
317
312
|
|
|
318
|
-
ObservableItem.prototype.toString = function() {
|
|
319
|
-
if(!this.$memoryId) {
|
|
320
|
-
MemoryManager.register(this);
|
|
321
|
-
}
|
|
322
|
-
return '{{#ObItem::(' +this.$memoryId+ ')}}';
|
|
323
|
-
};
|
|
324
313
|
ObservableItem.prototype.equals = function(other) {
|
|
325
314
|
if(Validator.isObservable(other)) {
|
|
326
315
|
return this.$currentValue === other.$currentValue;
|
|
@@ -6,8 +6,8 @@ export const ObservableWhen = function(observer, value) {
|
|
|
6
6
|
|
|
7
7
|
ObservableWhen.prototype.__$isObservableWhen = true;
|
|
8
8
|
|
|
9
|
-
ObservableWhen.prototype.subscribe = function(callback
|
|
10
|
-
return this.$observer.on(this.$target, callback
|
|
9
|
+
ObservableWhen.prototype.subscribe = function(callback) {
|
|
10
|
+
return this.$observer.on(this.$target, callback);
|
|
11
11
|
};
|
|
12
12
|
|
|
13
13
|
ObservableWhen.prototype.val = function() {
|
|
@@ -1,30 +1,24 @@
|
|
|
1
1
|
import Validator from "../utils/validator";
|
|
2
|
+
import NativeDocumentError from "../errors/NativeDocumentError";
|
|
2
3
|
import {BOOLEAN_ATTRIBUTES} from "./constants.js";
|
|
3
4
|
import {Observable} from "../data/Observable";
|
|
4
5
|
|
|
5
|
-
export const handleElementAttributeClass = function(shouldAdd, _, __, context) {
|
|
6
|
-
context.element.classes.toggle(context.className, shouldAdd);
|
|
7
|
-
};
|
|
8
6
|
/**
|
|
9
7
|
*
|
|
10
8
|
* @param {HTMLElement} element
|
|
11
9
|
* @param {Object} data
|
|
12
10
|
*/
|
|
13
11
|
export function bindClassAttribute(element, data) {
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
for(let i = 0, length = classNames.length; i < length; i++) {
|
|
17
|
-
const className = classNames[i];
|
|
12
|
+
for(const className in data) {
|
|
18
13
|
const value = data[className];
|
|
19
14
|
if(value.__$isObservable) {
|
|
20
15
|
element.classes.toggle(className, value.val());
|
|
21
|
-
value.subscribe(
|
|
22
|
-
// value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
|
|
16
|
+
value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
|
|
23
17
|
continue;
|
|
24
18
|
}
|
|
25
19
|
if(value.__$isObservableWhen) {
|
|
26
20
|
element.classes.toggle(className, value.isMath());
|
|
27
|
-
value.subscribe(
|
|
21
|
+
value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
|
|
28
22
|
continue;
|
|
29
23
|
}
|
|
30
24
|
if(value.$hydrate) {
|
|
@@ -33,6 +27,7 @@ export function bindClassAttribute(element, data) {
|
|
|
33
27
|
}
|
|
34
28
|
element.classes.toggle(className, value)
|
|
35
29
|
}
|
|
30
|
+
data = null;
|
|
36
31
|
}
|
|
37
32
|
|
|
38
33
|
/**
|
|
@@ -41,9 +36,7 @@ export function bindClassAttribute(element, data) {
|
|
|
41
36
|
* @param {Object} data
|
|
42
37
|
*/
|
|
43
38
|
export function bindStyleAttribute(element, data) {
|
|
44
|
-
const
|
|
45
|
-
for(let i = 0, length = keys.length; i < length; i++) {
|
|
46
|
-
const styleName = keys[i];
|
|
39
|
+
for(const styleName in data) {
|
|
47
40
|
const value = data[styleName];
|
|
48
41
|
if(value.__$isObservable) {
|
|
49
42
|
element.style[styleName] = value.val();
|
|
@@ -63,8 +56,7 @@ export function bindStyleAttribute(element, data) {
|
|
|
63
56
|
export function bindBooleanAttribute(element, attributeName, value) {
|
|
64
57
|
const isObservable = value.__$isObservable;
|
|
65
58
|
const defaultValue = isObservable? value.val() : value;
|
|
66
|
-
|
|
67
|
-
if(isBoolValue) {
|
|
59
|
+
if(Validator.isBoolean(defaultValue)) {
|
|
68
60
|
element[attributeName] = defaultValue;
|
|
69
61
|
}
|
|
70
62
|
else {
|
|
@@ -72,13 +64,13 @@ export function bindBooleanAttribute(element, attributeName, value) {
|
|
|
72
64
|
}
|
|
73
65
|
if(isObservable) {
|
|
74
66
|
if(attributeName === 'checked') {
|
|
75
|
-
if(
|
|
67
|
+
if(typeof defaultValue === 'boolean') {
|
|
76
68
|
element.addEventListener('input', () => value.set(element[attributeName]));
|
|
77
|
-
value.subscribe((newValue) => element[attributeName] = newValue);
|
|
78
|
-
return;
|
|
79
69
|
}
|
|
80
|
-
|
|
81
|
-
|
|
70
|
+
else {
|
|
71
|
+
element.addEventListener('input', () => value.set(element.value));
|
|
72
|
+
}
|
|
73
|
+
value.subscribe((newValue) => element[attributeName] = newValue);
|
|
82
74
|
return;
|
|
83
75
|
}
|
|
84
76
|
value.subscribe((newValue) => element[attributeName] = (newValue === element.value));
|
|
@@ -93,14 +85,14 @@ export function bindBooleanAttribute(element, attributeName, value) {
|
|
|
93
85
|
* @param {Observable} value
|
|
94
86
|
*/
|
|
95
87
|
export function bindAttributeWithObservable(element, attributeName, value) {
|
|
88
|
+
const applyValue = attributeName === 'value' ? (newValue) => element.value = newValue : (newValue) => element.setAttribute(attributeName, newValue);
|
|
89
|
+
value.subscribe(applyValue);
|
|
90
|
+
|
|
96
91
|
if(attributeName === 'value') {
|
|
97
|
-
value.subscribe((newValue) => element.value = newValue);
|
|
98
92
|
element.value = value.val();
|
|
99
93
|
element.addEventListener('input', () => value.set(element.value));
|
|
100
94
|
return;
|
|
101
95
|
}
|
|
102
|
-
|
|
103
|
-
value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
|
|
104
96
|
element.setAttribute(attributeName, value.val());
|
|
105
97
|
}
|
|
106
98
|
|
|
@@ -111,13 +103,9 @@ export function bindAttributeWithObservable(element, attributeName, value) {
|
|
|
111
103
|
*/
|
|
112
104
|
export default function AttributesWrapper(element, attributes) {
|
|
113
105
|
|
|
114
|
-
|
|
115
|
-
Validator.validateAttributes(attributes);
|
|
116
|
-
}
|
|
117
|
-
const attributeNames = Object.keys(attributes);
|
|
106
|
+
Validator.validateAttributes(attributes);
|
|
118
107
|
|
|
119
|
-
for(
|
|
120
|
-
const originalAttributeName = attributeNames[i];
|
|
108
|
+
for(const originalAttributeName in attributes) {
|
|
121
109
|
const attributeName = originalAttributeName.toLowerCase();
|
|
122
110
|
let value = attributes[originalAttributeName];
|
|
123
111
|
if(value == null) {
|
|
@@ -142,10 +130,6 @@ export default function AttributesWrapper(element, attributes) {
|
|
|
142
130
|
continue;
|
|
143
131
|
}
|
|
144
132
|
|
|
145
|
-
if(attributeName === 'value') {
|
|
146
|
-
element.value = value;
|
|
147
|
-
continue;
|
|
148
|
-
}
|
|
149
133
|
element.setAttribute(attributeName, value);
|
|
150
134
|
}
|
|
151
135
|
return element;
|
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
import ObservableItem from "../../../core/data/ObservableItem";
|
|
2
|
+
import {toggleElementClass} from "../AttributesWrapper";
|
|
2
3
|
import {ObservableWhen} from "../../data/ObservableWhen";
|
|
3
4
|
import TemplateBinding from "../../../core/wrappers/TemplateBinding";
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
export const handleElementAttributeClass = function(shouldAdd, _, __, context) {
|
|
7
|
-
context.element.classes.toggle(context.className, shouldAdd);
|
|
8
|
-
};
|
|
9
|
-
|
|
10
6
|
ObservableItem.prototype.bindNdClass = function(element, className) {
|
|
11
7
|
element.classes.toggle(className, this.val());
|
|
12
|
-
this.subscribe(
|
|
8
|
+
this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
|
|
13
9
|
};
|
|
14
10
|
|
|
15
11
|
ObservableWhen.prototype.bindNdClass = function(element, className) {
|
|
16
12
|
element.classes.toggle(className, this.isMath());
|
|
17
|
-
this.subscribe(
|
|
13
|
+
this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
|
|
18
14
|
};
|
|
19
15
|
|
|
20
16
|
TemplateBinding.prototype.bindNdClass = function(element, className) {
|