targetj 1.0.154 → 1.0.155
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/README.md +8 -8
- package/build/App.js +25 -17
- package/build/BaseModel.js +0 -1
- package/build/LocationManager.js +3 -2
- package/build/TModelUtil.js +66 -0
- package/build/TargetManager.js +2 -1
- package/build/TargetUtil.js +1 -66
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
[](https://github.com/livetrails/targetjs/stargazers)
|
|
6
6
|
[](https://www.npmjs.com/package/targetj)
|
|
7
7
|
|
|
8
|
-
TargetJS is a modern JavaScript UI framework designed to simplify front-end development by introducing a unique paradigm
|
|
8
|
+
TargetJS is a modern JavaScript UI framework designed to simplify front-end development by introducing a unique paradigm based on literal objects and extending their properties and methods with lifecycles and functional pipelines. The framework provides a unified solution for UI rendering, animations, API interactions, state management, and event handling, leading to more compact code and a stronger focus on user experience. TargetJS is also a highly performant web framework, as shown in the [framework benchmark](https://krausest.github.io/js-framework-benchmark/current.html).
|
|
9
9
|
## What Problems Does TargetJS Solve?
|
|
10
10
|
|
|
11
11
|
TargetJS addresses several common pain points in front-end development:
|
|
@@ -55,7 +55,7 @@ npm install targetj
|
|
|
55
55
|
|
|
56
56
|
## Key Features and Concepts
|
|
57
57
|
|
|
58
|
-
* **Targets:** The fundamental building blocks of TargetJS. Targets provide a unified interface for
|
|
58
|
+
* **Targets:** The fundamental building blocks of TargetJS. Targets provide a unified interface for properties and methods with built-in lifecycles. They can:
|
|
59
59
|
* Iterate towards values (useful for animations and transitions).
|
|
60
60
|
* Execute conditionally.
|
|
61
61
|
* Manage repeated executions.
|
|
@@ -70,7 +70,7 @@ npm install targetj
|
|
|
70
70
|
|
|
71
71
|
* **Unique computational paradigm:** TargetJS introduces a novel computational model by integrating multiple paradigms: Turing Completeness, the Von Neumann Execution Model, and Functional Programming. This results in:
|
|
72
72
|
|
|
73
|
-
* Deterministic Execution Flow: Targets execute based on their activation order, initially following their order in the code. They run in sequence as part of the
|
|
73
|
+
* Deterministic Execution Flow: Targets execute based on their activation order, initially following their order in the code. They run in sequence as part of the framework execution cycle. Everything in TargetJS is synchronous, and targets cannot be called directly.
|
|
74
74
|
* Powerful Functional Pipeline: Targets can be structured as a functional pipeline with enhanced capabilities.
|
|
75
75
|
|
|
76
76
|
* **Easy Integration:** Can be used as a library within existing projects.
|
|
@@ -154,9 +154,9 @@ App({
|
|
|
154
154
|
|
|
155
155
|
| Feature | TargetJS | Reactive Model Frameworks |
|
|
156
156
|
|--------------------------------------|-----------------------------------------------------------------|------------------------------------------------------|
|
|
157
|
-
| **Component Basic Structure** | Components consist of Targets, providing a unified interface for methods and
|
|
158
|
-
| **Execution Order** |
|
|
159
|
-
| **Function Calls** | Targets cannot be called directly. Execution is part of a
|
|
157
|
+
| **Component Basic Structure** | Components consist of Targets, providing a unified interface for methods and properties. | Components consist of methods and variables.
|
|
158
|
+
| **Execution Order** | Targets are executed based on their activation order, which initially follows their appearance in the code. They run in a sequential and predictable manner | Primarily data-driven, less predictable. |
|
|
159
|
+
| **Function Calls** | Targets cannot be called directly. Execution is part of a framework execution cycle. | Functions execute reactively or are called imperatively. |
|
|
160
160
|
| **Autonomous Execution** | Targets can self-activate and operate autonomously. | Functions do not execute autonomously. |
|
|
161
161
|
| **Execution Pipeline** | Targets can form controlled pipelines; a target can activate when the preceding target executes or completes. | Functions are called whenever dependencies update. Execution order is not based on code appearance. |
|
|
162
162
|
| **Event Handling** | Primarily by activating Targets, making event handling consistent with the core execution model. | Events are handled through event listeners, subscriptions, or reactive bindings. |
|
|
@@ -177,7 +177,7 @@ TargetJS leverages ES2015's guaranteed property order to ensure that target exec
|
|
|
177
177
|
## Anatomy of a Target
|
|
178
178
|
|
|
179
179
|
Each target consists of the following:
|
|
180
|
-
1. Target Value and Actual Value. The target value refers to the value assigned to a
|
|
180
|
+
1. Target Value and Actual Value. The target value refers to the value assigned to a property or the output produced by the `value()` method associated with the target defined in your program. The actual value is the value used by the rest of the application. When the target value differs from the actual value, TargetJS iteratively updates the actual value until it matches the target value. This process is managed by two additional variables: `step`, which dictates the number of iterations, and `interval`, which specifies the duration (in milliseconds) the system waits before executing the next iteration.
|
|
181
181
|
|
|
182
182
|
2. State: Targets have four states that control their lifecycles: `active`, `inactive`, `updating`, and `complete`.
|
|
183
183
|
- `active`: This is the default state for all targets. It indicates that the target is ready to be executed, and the target value needs to be initialized from the variable it represents or its `value()` method needs to be executed to calculate its output.
|
|
@@ -519,7 +519,7 @@ App({
|
|
|
519
519
|
},
|
|
520
520
|
page2() {
|
|
521
521
|
return {
|
|
522
|
-
...this.val('page')
|
|
522
|
+
...this.val('page'),
|
|
523
523
|
background: "#B388FF",
|
|
524
524
|
html: 'page2'
|
|
525
525
|
};
|
package/build/App.js
CHANGED
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.tRoot = exports.tApp = exports.isRunning = exports.getVisibles = exports.getScreenWidth = exports.getScreenHeight = exports.getRunScheduler = exports.getResizeLastUpdate = exports.getPager = exports.getManager = exports.getLocationManager = exports.getLoader = exports.getEvents = exports.getBrowser = exports.App = void 0;
|
|
7
|
+
exports.tRoot = exports.tApp = exports.isRunning = exports.getVisibles = exports.getScreenWidth = exports.getScreenHeight = exports.getRunScheduler = exports.getResizeLastUpdate = exports.getPager = exports.getManager = exports.getLocationManager = exports.getLoader = exports.getEvents = exports.getBrowser = exports.fetchImage = exports.fetch = exports.App = void 0;
|
|
8
8
|
var _$Dom = require("./$Dom.js");
|
|
9
9
|
var _TModel = require("./TModel.js");
|
|
10
10
|
var _Browser = require("./Browser.js");
|
|
@@ -194,36 +194,44 @@ var getLoader = exports.getLoader = function getLoader() {
|
|
|
194
194
|
var _tApp4;
|
|
195
195
|
return (_tApp4 = tApp) === null || _tApp4 === void 0 ? void 0 : _tApp4.loader;
|
|
196
196
|
};
|
|
197
|
-
var
|
|
197
|
+
var fetch = exports.fetch = function fetch(tmodel, url, query, cacheId) {
|
|
198
198
|
var _tApp5;
|
|
199
|
-
return (_tApp5 = tApp) === null || _tApp5 === void 0 ? void 0 : _tApp5.
|
|
199
|
+
return (_tApp5 = tApp) === null || _tApp5 === void 0 || (_tApp5 = _tApp5.loader) === null || _tApp5 === void 0 ? void 0 : _tApp5.fetch(tmodel, url, query, cacheId);
|
|
200
200
|
};
|
|
201
|
-
var
|
|
201
|
+
var fetchImage = exports.fetchImage = function fetchImage(tmodel, src) {
|
|
202
202
|
var _tApp6;
|
|
203
|
-
return (_tApp6 = tApp) === null || _tApp6 === void 0 ? void 0 : _tApp6.
|
|
203
|
+
return (_tApp6 = tApp) === null || _tApp6 === void 0 || (_tApp6 = _tApp6.loader) === null || _tApp6 === void 0 ? void 0 : _tApp6.fetchImage(tmodel, src);
|
|
204
204
|
};
|
|
205
|
-
var
|
|
205
|
+
var getManager = exports.getManager = function getManager() {
|
|
206
206
|
var _tApp7;
|
|
207
|
-
return (_tApp7 = tApp) === null || _tApp7 === void 0 ? void 0 : _tApp7.
|
|
207
|
+
return (_tApp7 = tApp) === null || _tApp7 === void 0 ? void 0 : _tApp7.manager;
|
|
208
208
|
};
|
|
209
|
-
var
|
|
209
|
+
var getRunScheduler = exports.getRunScheduler = function getRunScheduler() {
|
|
210
210
|
var _tApp8;
|
|
211
|
-
return (_tApp8 = tApp) === null || _tApp8 === void 0 ? void 0 : _tApp8.
|
|
211
|
+
return (_tApp8 = tApp) === null || _tApp8 === void 0 ? void 0 : _tApp8.runScheduler;
|
|
212
|
+
};
|
|
213
|
+
var getLocationManager = exports.getLocationManager = function getLocationManager() {
|
|
214
|
+
var _tApp9;
|
|
215
|
+
return (_tApp9 = tApp) === null || _tApp9 === void 0 ? void 0 : _tApp9.locationManager;
|
|
216
|
+
};
|
|
217
|
+
var getBrowser = exports.getBrowser = function getBrowser() {
|
|
218
|
+
var _tApp10;
|
|
219
|
+
return (_tApp10 = tApp) === null || _tApp10 === void 0 ? void 0 : _tApp10.browser;
|
|
212
220
|
};
|
|
213
221
|
var getScreenWidth = exports.getScreenWidth = function getScreenWidth() {
|
|
214
|
-
var _tApp$tRoot$getWidth,
|
|
215
|
-
return (_tApp$tRoot$getWidth = (
|
|
222
|
+
var _tApp$tRoot$getWidth, _tApp11;
|
|
223
|
+
return (_tApp$tRoot$getWidth = (_tApp11 = tApp) === null || _tApp11 === void 0 || (_tApp11 = _tApp11.tRoot) === null || _tApp11 === void 0 ? void 0 : _tApp11.getWidth()) !== null && _tApp$tRoot$getWidth !== void 0 ? _tApp$tRoot$getWidth : 0;
|
|
216
224
|
};
|
|
217
225
|
var getScreenHeight = exports.getScreenHeight = function getScreenHeight() {
|
|
218
|
-
var _tApp$tRoot$getHeight,
|
|
219
|
-
return (_tApp$tRoot$getHeight = (
|
|
226
|
+
var _tApp$tRoot$getHeight, _tApp12;
|
|
227
|
+
return (_tApp$tRoot$getHeight = (_tApp12 = tApp) === null || _tApp12 === void 0 || (_tApp12 = _tApp12.tRoot) === null || _tApp12 === void 0 ? void 0 : _tApp12.getHeight()) !== null && _tApp$tRoot$getHeight !== void 0 ? _tApp$tRoot$getHeight : 0;
|
|
220
228
|
};
|
|
221
229
|
var getVisibles = exports.getVisibles = function getVisibles() {
|
|
222
|
-
var
|
|
223
|
-
return (
|
|
230
|
+
var _tApp13;
|
|
231
|
+
return (_tApp13 = tApp) === null || _tApp13 === void 0 || (_tApp13 = _tApp13.manager) === null || _tApp13 === void 0 ? void 0 : _tApp13.lists.visible;
|
|
224
232
|
};
|
|
225
233
|
var getResizeLastUpdate = exports.getResizeLastUpdate = function getResizeLastUpdate() {
|
|
226
|
-
var
|
|
227
|
-
return (
|
|
234
|
+
var _tApp14;
|
|
235
|
+
return (_tApp14 = tApp) === null || _tApp14 === void 0 ? void 0 : _tApp14.resizeLastUpdate;
|
|
228
236
|
};
|
|
229
237
|
window.t = window.t || _SearchUtil.SearchUtil.find;
|
package/build/BaseModel.js
CHANGED
package/build/LocationManager.js
CHANGED
|
@@ -90,6 +90,7 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
|
|
|
90
90
|
if (!_this2.hasLocationMap[child.oid]) {
|
|
91
91
|
_this2.addToLocationList(child);
|
|
92
92
|
}
|
|
93
|
+
child.activatedTargets.length = 0;
|
|
93
94
|
};
|
|
94
95
|
while (i < this.activatedList.length) {
|
|
95
96
|
_loop();
|
|
@@ -226,12 +227,12 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
|
|
|
226
227
|
_App.tApp.targetManager.setActualValues(tmodel);
|
|
227
228
|
if (tmodel.hasDom()) {
|
|
228
229
|
if (_TModelUtil.TModelUtil.shouldMeasureWidthFromDom(tmodel)) {
|
|
229
|
-
|
|
230
|
+
_TModelUtil.TModelUtil.setWidthFromDom(tmodel);
|
|
230
231
|
}
|
|
231
232
|
}
|
|
232
233
|
if (tmodel.hasDom()) {
|
|
233
234
|
if (_TModelUtil.TModelUtil.shouldMeasureHeightFromDom(tmodel)) {
|
|
234
|
-
|
|
235
|
+
_TModelUtil.TModelUtil.setHeightFromDom(tmodel);
|
|
235
236
|
}
|
|
236
237
|
}
|
|
237
238
|
tmodel.isNowVisible = false;
|
package/build/TModelUtil.js
CHANGED
|
@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.TModelUtil = void 0;
|
|
7
7
|
var _TUtil = require("./TUtil.js");
|
|
8
8
|
var _TargetData = require("./TargetData.js");
|
|
9
|
+
var _App = require("./App.js");
|
|
9
10
|
var _$Dom = require("./$Dom.js");
|
|
11
|
+
var _ColorUtil = require("./ColorUtil.js");
|
|
10
12
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
11
13
|
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
12
14
|
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
|
|
@@ -148,6 +150,70 @@ var TModelUtil = exports.TModelUtil = /*#__PURE__*/function () {
|
|
|
148
150
|
tmodel.styleTargetMap = {};
|
|
149
151
|
tmodel.styleTargetList.length = 0;
|
|
150
152
|
}
|
|
153
|
+
}, {
|
|
154
|
+
key: "setWidthFromDom",
|
|
155
|
+
value: function setWidthFromDom(child) {
|
|
156
|
+
var timestamp = child.domWidthTimestamp;
|
|
157
|
+
var parent = child.getParent();
|
|
158
|
+
var domParent = child.getDomParent();
|
|
159
|
+
var rerender = false;
|
|
160
|
+
if ((0, _App.getManager)().needsRerender(child)) {
|
|
161
|
+
child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
|
|
162
|
+
rerender = true;
|
|
163
|
+
}
|
|
164
|
+
if (rerender || parent && timestamp <= parent.getDimLastUpdate() || domParent && timestamp <= domParent.getDimLastUpdate()) {
|
|
165
|
+
child.$dom.width('auto');
|
|
166
|
+
var width = child.$dom.width();
|
|
167
|
+
child.domWidthTimestamp = _TUtil.TUtil.now();
|
|
168
|
+
child.val('width', width);
|
|
169
|
+
if (width > 0 || width === 0 && child.lastVal('width') > 0) {
|
|
170
|
+
child.addToStyleTargetList('width');
|
|
171
|
+
}
|
|
172
|
+
(0, _App.getRunScheduler)().schedule(15, 'resize');
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}, {
|
|
176
|
+
key: "setHeightFromDom",
|
|
177
|
+
value: function setHeightFromDom(child) {
|
|
178
|
+
var timestamp = child.domHeightTimestamp;
|
|
179
|
+
var parent = child.getParent();
|
|
180
|
+
var domParent = child.getDomParent();
|
|
181
|
+
var rerender = false;
|
|
182
|
+
if ((0, _App.getManager)().needsRerender(child)) {
|
|
183
|
+
child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
|
|
184
|
+
rerender = true;
|
|
185
|
+
}
|
|
186
|
+
if (rerender || parent && timestamp <= parent.getDimLastUpdate() || domParent && timestamp <= domParent.getDimLastUpdate()) {
|
|
187
|
+
child.$dom.height('auto');
|
|
188
|
+
var height = child.$dom.height();
|
|
189
|
+
child.domHeightTimestamp = _TUtil.TUtil.now();
|
|
190
|
+
child.val('height', height);
|
|
191
|
+
if (height > 0 || height === 0 && child.lastVal('height') > 0) {
|
|
192
|
+
child.addToStyleTargetList('height');
|
|
193
|
+
}
|
|
194
|
+
(0, _App.getRunScheduler)().schedule(15, 'resize');
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}, {
|
|
198
|
+
key: "morph",
|
|
199
|
+
value: function morph(tmodel, key, fromValue, toValue, step) {
|
|
200
|
+
var easing = tmodel.getTargetEasing(key);
|
|
201
|
+
var easingStep = easing ? easing(tmodel.getTargetStepPercent(key, step)) : tmodel.getTargetStepPercent(key, step);
|
|
202
|
+
if (_TargetData.TargetData.colorMap[key]) {
|
|
203
|
+
var targetColors = _ColorUtil.ColorUtil.color2Integers(toValue);
|
|
204
|
+
var lastColors = fromValue ? _ColorUtil.ColorUtil.color2Integers(fromValue) : _ColorUtil.ColorUtil.color2Integers('#fff');
|
|
205
|
+
if (targetColors && lastColors) {
|
|
206
|
+
var red = Math.floor(targetColors[0] * easingStep + lastColors[0] * (1 - easingStep));
|
|
207
|
+
var green = Math.floor(targetColors[1] * easingStep + lastColors[1] * (1 - easingStep));
|
|
208
|
+
var blue = Math.floor(targetColors[2] * easingStep + lastColors[2] * (1 - easingStep));
|
|
209
|
+
return "rgb(".concat(red, ",").concat(green, ",").concat(blue, ")");
|
|
210
|
+
} else {
|
|
211
|
+
return toValue;
|
|
212
|
+
}
|
|
213
|
+
} else {
|
|
214
|
+
return typeof toValue === 'number' ? toValue * easingStep + fromValue * (1 - easingStep) : toValue;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
151
217
|
}, {
|
|
152
218
|
key: "fixAsyncStyle",
|
|
153
219
|
value: function fixAsyncStyle(tmodel) {
|
package/build/TargetManager.js
CHANGED
|
@@ -8,6 +8,7 @@ var _TargetExecutor = require("./TargetExecutor.js");
|
|
|
8
8
|
var _App = require("./App.js");
|
|
9
9
|
var _TUtil = require("./TUtil.js");
|
|
10
10
|
var _TargetUtil = require("./TargetUtil.js");
|
|
11
|
+
var _TModelUtil = require("./TModelUtil.js");
|
|
11
12
|
var _SearchUtil = require("./SearchUtil.js");
|
|
12
13
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
13
14
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
@@ -175,7 +176,7 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
|
|
|
175
176
|
initialValue = _TUtil.TUtil.isDefined(tmodel.val(key)) ? tmodel.val(key) : typeof theValue === 'number' ? 0 : undefined;
|
|
176
177
|
tmodel.setTargetInitialValue(key, initialValue);
|
|
177
178
|
}
|
|
178
|
-
tmodel.val(key,
|
|
179
|
+
tmodel.val(key, _TModelUtil.TModelUtil.morph(tmodel, key, initialValue, theValue, step, steps));
|
|
179
180
|
tmodel.addToStyleTargetList(key);
|
|
180
181
|
tmodel.setActualValueLastUpdate(key);
|
|
181
182
|
tmodel.setTargetMethodName(key, 'value');
|
package/build/TargetUtil.js
CHANGED
|
@@ -7,7 +7,6 @@ exports.TargetUtil = void 0;
|
|
|
7
7
|
var _TargetData = require("./TargetData.js");
|
|
8
8
|
var _App = require("./App.js");
|
|
9
9
|
var _TUtil = require("./TUtil.js");
|
|
10
|
-
var _ColorUtil = require("./ColorUtil.js");
|
|
11
10
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
12
11
|
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
13
12
|
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
|
|
@@ -112,7 +111,7 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
|
|
|
112
111
|
target.originalTargetName = TargetUtil.currentTargetName;
|
|
113
112
|
target.originalTModel = TargetUtil.currentTModel;
|
|
114
113
|
var cleanKey = TargetUtil.getTargetName(key);
|
|
115
|
-
if (doesNextTargetUsePrevValue) {
|
|
114
|
+
if (doesNextTargetUsePrevValue && !target.activateNextTarget) {
|
|
116
115
|
target.activateNextTarget = nextKey.slice(0, -1);
|
|
117
116
|
}
|
|
118
117
|
var stepPattern = /^on[A-Za-z]+Step$/;
|
|
@@ -380,69 +379,5 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
|
|
|
380
379
|
}
|
|
381
380
|
}
|
|
382
381
|
}
|
|
383
|
-
}, {
|
|
384
|
-
key: "morph",
|
|
385
|
-
value: function morph(tmodel, key, fromValue, toValue, step) {
|
|
386
|
-
var easing = tmodel.getTargetEasing(key);
|
|
387
|
-
var easingStep = easing ? easing(tmodel.getTargetStepPercent(key, step)) : tmodel.getTargetStepPercent(key, step);
|
|
388
|
-
if (_TargetData.TargetData.colorMap[key]) {
|
|
389
|
-
var targetColors = _ColorUtil.ColorUtil.color2Integers(toValue);
|
|
390
|
-
var lastColors = fromValue ? _ColorUtil.ColorUtil.color2Integers(fromValue) : _ColorUtil.ColorUtil.color2Integers('#fff');
|
|
391
|
-
if (targetColors && lastColors) {
|
|
392
|
-
var red = Math.floor(targetColors[0] * easingStep + lastColors[0] * (1 - easingStep));
|
|
393
|
-
var green = Math.floor(targetColors[1] * easingStep + lastColors[1] * (1 - easingStep));
|
|
394
|
-
var blue = Math.floor(targetColors[2] * easingStep + lastColors[2] * (1 - easingStep));
|
|
395
|
-
return "rgb(".concat(red, ",").concat(green, ",").concat(blue, ")");
|
|
396
|
-
} else {
|
|
397
|
-
return toValue;
|
|
398
|
-
}
|
|
399
|
-
} else {
|
|
400
|
-
return typeof toValue === 'number' ? toValue * easingStep + fromValue * (1 - easingStep) : toValue;
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
}, {
|
|
404
|
-
key: "setWidthFromDom",
|
|
405
|
-
value: function setWidthFromDom(child) {
|
|
406
|
-
var timestamp = child.domWidthTimestamp;
|
|
407
|
-
var parent = child.getParent();
|
|
408
|
-
var domParent = child.getDomParent();
|
|
409
|
-
var rerender = false;
|
|
410
|
-
if ((0, _App.getManager)().needsRerender(child)) {
|
|
411
|
-
child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
|
|
412
|
-
rerender = true;
|
|
413
|
-
}
|
|
414
|
-
if (rerender || parent && timestamp <= parent.getDimLastUpdate() || domParent && timestamp <= domParent.getDimLastUpdate()) {
|
|
415
|
-
child.$dom.width('auto');
|
|
416
|
-
var width = child.$dom.width();
|
|
417
|
-
child.domWidthTimestamp = _TUtil.TUtil.now();
|
|
418
|
-
child.val('width', width);
|
|
419
|
-
if (width > 0 || width === 0 && child.lastVal('width') > 0) {
|
|
420
|
-
child.addToStyleTargetList('width');
|
|
421
|
-
}
|
|
422
|
-
(0, _App.getRunScheduler)().schedule(15, 'resize');
|
|
423
|
-
}
|
|
424
|
-
}
|
|
425
|
-
}, {
|
|
426
|
-
key: "setHeightFromDom",
|
|
427
|
-
value: function setHeightFromDom(child) {
|
|
428
|
-
var timestamp = child.domHeightTimestamp;
|
|
429
|
-
var parent = child.getParent();
|
|
430
|
-
var domParent = child.getDomParent();
|
|
431
|
-
var rerender = false;
|
|
432
|
-
if ((0, _App.getManager)().needsRerender(child)) {
|
|
433
|
-
child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
|
|
434
|
-
rerender = true;
|
|
435
|
-
}
|
|
436
|
-
if (rerender || parent && timestamp <= parent.getDimLastUpdate() || domParent && timestamp <= domParent.getDimLastUpdate()) {
|
|
437
|
-
child.$dom.height('auto');
|
|
438
|
-
var height = child.$dom.height();
|
|
439
|
-
child.domHeightTimestamp = _TUtil.TUtil.now();
|
|
440
|
-
child.val('height', height);
|
|
441
|
-
if (height > 0 || height === 0 && child.lastVal('height') > 0) {
|
|
442
|
-
child.addToStyleTargetList('height');
|
|
443
|
-
}
|
|
444
|
-
(0, _App.getRunScheduler)().schedule(15, 'resize');
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
382
|
}]);
|
|
448
383
|
}();
|