targetj 1.0.137 → 1.0.138

package/License

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Ahmad Wasfi
+Copyright (c) 2025 TargetJS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,7 +2,9 @@
 
 Welcome to TargetJS, a powerful JavaScript UI framework and library that you might find redefines front-end development. (https://targetjs.io)
 
-TargetJS distinguishes itself by introducing a novel concept known as 'targets,' which forms its core. Targets give methods and variable assignments life cycles and the autonomy to operate independently, with various callbacks to adapt to changes, mimicking the behavior of living cells. This opens a new paradigm in programming.
+TargetJS distinguishes itself by introducing a novel concept known as 'targets,' which forms its core. Targets give methods and variable assignments life cycles and the autonomy to operate independently, with various callbacks to adapt to changes, mimicking the behavior of living cells. This opens a new paradigm in programming. 
+
+We believe TargetJS not only increases productivity but also enhances the development process by making it more enjoyable and user-experience-centered.
 
 ---
 
@@ -10,7 +12,7 @@ TargetJS distinguishes itself by introducing a novel concept known as 'targets,'
 
 1. [Installation](#installation)
 2. [What are Targets?](#what-are-targets)
-3. Quick Examples:
+3. Two Quick Examples:
    - [Draggable Animation Example](#draggable-animation-example)
    - [Infinite Scrolling Example](#infinite-scrolling-example)
 4. [Why TargetJS?](#why-targetjs)
@@ -25,8 +27,8 @@ TargetJS distinguishes itself by introducing a novel concept known as 'targets,'
    - [Animation API Comparison Example](#animation-api-comparison-example)
    - [Simple Single Page App Example](#simple-single-page-app-example)
    - [Using TargetJS as a Library Example](#using-targetjs-as-a-library-example)
-10. [Special Target Names](#special-target-names)
-11. [TargetJS Features](#features)
+10. [Features](#features)     
+11. [Special Target Names](#special-target-names)
 12. [How to Debug in TargetJS](#how-to-debug-in-targetjs)
 13. [Documentation](#documentation)
 14. [License](#license)
@@ -47,17 +49,23 @@ npm install targetj
 
 ## What are targets?
 
-Targets are used as the main building blocks of components instead of direct variables and methods. Each component in TargetJS is a set of targets. Targets are employed across all aspects of the program. They are used in animation, controlling program flow, loading data from external APIs, handling user events, and more.
+In TargetJS, **targets** serve as the core building blocks of components, replacing traditional variables and methods. Each component is composed of a set of targets.
 
-Targets provide a unified interface for variable assignments and methods, enabling them to operate autonomously. For example, targets give variables the ability to iterate in steps until reaching a specified value, rather than being immediately assigned. Targets can include pauses between these steps, track the progress of other variables, and manage their life cycles dynamically. Methods can execute themselves under specific conditions, control the number of executions, and more.
+Targets provide a **unified approach** for solving challenges in **animation**, **user interface organization**, **program flow control**, **state management**, **event handling**, **API calls**, and more. They achieve this by offering a consistent interface for variable assignments and methods, enabling them to operate autonomously and manage their own life cycles.
 
----
+### For example:
+- **Variables**:
+  - Can iterate step by step toward a specified value instead of being instantly assigned.
+  - Can introduce pauses between steps, adjust their progression dynamically, and trigger callbacks upon completion.
+- **Methods**:
+  - Can execute themselves when specific conditions are met.
+  - Can adjust pauses between executions, limit the number of executions, track the progress of other variables or methods, and activate the life cycles of additional methods, and more.
 
-## Quick examples
+---
 
-This section provides a few quick demonstrations of what TargetJS can do.
+## Two Quick examples
 
-## Draggable Animation Example 
+### Draggable Animation Example 
 
 In our first example, `color`, `html`, `textAlign`, `moves`, and `animate` are all targets. These targets are executed in the same order they appear in the program. `color`, `html`, `textAlign`, `moves` get competed and their life cycle end. The main target `animate` remains active with an indefinite lifecycle specified by the `loop` property. After each animation cycle, there is a one-second pause, defined by the `interval` property in the `animate` target. Both `loop` and `interval` can also be defined as methods, which will be explained further below. The `setTarget` method defines an imperative target, which is also explained in more detail below, executes the assigment in 30 steps. The `animate` target starts a new cycle after all the imperative targets have been completed or at least one second pass specified in the interval value given that the imperative targets get executed less than 1 second.
 
@@ -99,9 +107,9 @@ App(new TModel('quickStart', {
 }));
 ```
 
-## Infinite Scrolling Example
+### Infinite Scrolling Example
 
-This example demonstrates how to handle scroll events and implement a simple infinite scrolling application. The `containerOverflowMode` system target ensures that all items in the scroller overflow and stack beneath each other. The `children` system target dynamically adds items to the container's children. The `onVisibleChildrenChange` event function detects changes in the visible children and activates the `children` target to create new items that fill the gaps. 
+This example demonstrates how to handle scroll events and implement a simple infinite scrolling application. The `containerOverflowMode` system target ensures that all items in the scroller overflow and stack beneath each other. The `children` target dynamically adds items to the container's children. The `onVisibleChildrenChange` event function detects changes in the visible children and activates the `children` target to create new items that fill the gaps. 
 
 Internally, TargetJS maintains a tree-like structure to track the visible branches of the tree, optimizing the performance of the scroller. You can opt out of tree-structure optimization by setting `shouldBeBracketed` target to false.
 
@@ -600,6 +608,22 @@ App(new TModel("rows", {
 ```
 ---
 
+## Features
+
+As a result of using targets, we can develop web sites or apps with the following features:
+
+- **No HTML required**: HTML tags are seldom necessary.
+- **No CSS required**: Most popular styles are incorporated directly into targets.
+- **No HTML nesting**: HTML nesting is seldom required in TargetJS. If it is required, nesting is done at runtime. Elements can be dynamically detached and incorporated into other elements, facilitating the easy reuse of components regardless of their location or attachment. It also opens the door for a new user experiences.
+- **Next-level animation**: Users can program objects to move at varying speeds, pause at certain intervals, and repeat sequences based on various conditions. It allows the creation of complicated animations.
+- **Control the flow of execution with time**: TargetJS simplifies the execution of various program segments at specific times, making it easy to sequence or parallelize numerous actions.
+- **Handle events effortlessly**: In TargetJS, events are triggered synchronously and are designed so that any component can detect when an event occurs.
+- **Easy to learn**: TargetJS simplifies development by employing the single concept of \'targets\' making it easy to learn.
+- **Handle 100,000s of items**: TargetJS efficiently manages large collections of objects on a single page. This is done by its data structure and optimization algorithm. It divides a long list into a tree structure, monitoring only the branches that are visible to the user at any given time.
+- **AI friendly**: With a unified concept of targets for all development, the ability to add and remove targets at runtime, and the capability to inspect various statuses of running objects, TargetJS is a strong candidate for AI-powered UI development.
+
+---
+
 ## Special target names
 
 All HTML style names and attributes are treated as special target names. The most commonly used style names and attributes have already been added to the framework, with the possibility of adding more in the future.
@@ -665,21 +689,6 @@ Here are all the event targets:
 19. **onVisibleChildrenChange**: Triggered when the count of visible children changes.
 20. **onDomEvent**: It accepts an array of targets and activates them when their associated object acquires a DOM element.
 21. 
----
-
-## Features
-
-As a result of using targets, we can develop web sites or apps with the following features:
-
-- **No HTML required**: HTML tags are seldom necessary.
-- **No CSS required**: Most popular styles are incorporated directly into targets.
-- **No HTML nesting**: HTML nesting is seldom required in TargetJS. If it is required, nesting is done at runtime. Elements can be dynamically detached and incorporated into other elements, facilitating the easy reuse of components regardless of their location or attachment. It also opens the door for a new user experiences.
-- **Next-level animation**: Users can program objects to move at varying speeds, pause at certain intervals, and repeat sequences based on various conditions. It allows the creation of complicated animations.
-- **Control the flow of execution with time**: TargetJS simplifies the execution of various program segments at specific times, making it easy to sequence or parallelize numerous actions.
-- **Handle events effortlessly**: In TargetJS, events are triggered synchronously and are designed so that any component can detect when an event occurs.
-- **Easy to learn**: TargetJS simplifies development by employing the single concept of \'targets\' making it easy to learn.
-- **Handle 100,000s of items**: TargetJS efficiently manages large collections of objects on a single page. This is done by its data structure and optimization algorithm. It divides a long list into a tree structure, monitoring only the branches that are visible to the user at any given time.
-- **AI friendly**: With a unified concept of targets for all development, the ability to add and remove targets at runtime, and the capability to inspect various statuses of running objects, TargetJS is a strong candidate for AI-powered UI development.
 
 ---
 
@@ -695,7 +704,7 @@ As a result of using targets, we can develop web sites or apps with the followin
 ---
    
 ## Documentation
-Explore the full potential of TargetJS and dive into our interactive documentation at www.targetjs.io.
+Explore the potential of TargetJS and dive into our interactive documentation at www.targetjs.io.
 
 ---
 

package/build/$Dom.js

@@ -30,6 +30,12 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
     this.textOnly = true;
   }
   return _createClass($Dom, [{
+    key: "cloneTemplate",
+    value: function cloneTemplate() {
+      var _this$element$content;
+      return new $Dom((_this$element$content = this.element.content) === null || _this$element$content === void 0 ? void 0 : _this$element$content.cloneNode(true).children[0]);
+    }
+  }, {
     key: "exists",
     value: function exists() {
       if (this.selector) {
@@ -190,6 +196,32 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
     value: function append$Dom($dom) {
       this.element.appendChild($dom.element);
     }
+  }, {
+    key: "appendElement",
+    value: function appendElement(element) {
+      this.element.appendChild(element);
+    }
+  }, {
+    key: "removeElement",
+    value: function removeElement(element) {
+      this.element.removeChild(element);
+    }
+  }, {
+    key: "elementCount",
+    value: function elementCount() {
+      return this.element.children.length;
+    }
+  }, {
+    key: "swapElements",
+    value: function swapElements(element1, element2) {
+      var nextSibling = element2.nextSibling;
+      if (nextSibling === element1) {
+        this.element.insertBefore(element1, element2);
+      } else {
+        this.element.insertBefore(element2, element1);
+        this.element.insertBefore(element1, nextSibling);
+      }
+    }
   }, {
     key: "insertFirst$Dom",
     value: function insertFirst$Dom($dom) {
@@ -336,6 +368,16 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
       var element = _TUtil.TUtil.isDefined(selector) ? $Dom.query(selector) : this.query('canvas');
       return element ? element.getContext(type) : undefined;
     }
+  }, {
+    key: "query",
+    value: function query(_query) {
+      return this.element.querySelector(_query);
+    }
+  }, {
+    key: "queryAll",
+    value: function queryAll(query) {
+      return this.element.querySelectorAll(query);
+    }
   }, {
     key: "findFirstByClass",
     value: function findFirstByClass(className) {
@@ -346,17 +388,20 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
     value: function findFirstByTag(tagName) {
       return $Dom.findFirstByTag(tagName, this.element);
     }
-  }, {
-    key: "query",
-    value: function query(selector) {
-      return selector[0] === '#' ? $Dom.findById(selector) : selector[0] === '.' ? this.findFirstByClass(selector) : this.findFirstByTag(selector);
-    }
   }, {
     key: "stamp",
     value: function stamp() {
       this.attr('data-tgt', 'true');
     }
   }], [{
+    key: "createTemplate",
+    value: function createTemplate(html) {
+      var $dom = new $Dom();
+      $dom.create('template');
+      $dom.innerHTML(html.trim());
+      return $dom;
+    }
+  }, {
     key: "getAllStamped",
     value: function getAllStamped() {
       return document.querySelectorAll('[data-tgt="true"]');
@@ -429,6 +474,16 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
     value: function getWindowScrollLeft() {
       return window.pageXOffset || document.documentElement.scrollLeft || 0;
     }
+  }, {
+    key: "getScreenWidth",
+    value: function getScreenWidth() {
+      return document.documentElement.clientWidth || document.body.clientWidth;
+    }
+  }, {
+    key: "getScreenHeight",
+    value: function getScreenHeight() {
+      return document.documentElement.clientHeight || document.body.clientHeight;
+    }
   }, {
     key: "ready",
     value: function ready(callback) {

package/build/App.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tRoot = exports.tApp = exports.isRunning = exports.getVisibles = exports.getScreenWidth = exports.getScreenHeight = exports.getRunScheduler = exports.getPager = exports.getManager = exports.getLocationManager = exports.getLoader = exports.getEvents = exports.getBrowser = exports.App = void 0;
+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;
 var _$Dom = require("./$Dom.js");
 var _TModel = require("./TModel.js");
 var _Browser = require("./Browser.js");
@@ -26,6 +26,7 @@ var AppFn = function AppFn(firstChild) {
   my.throttle = 0;
   my.debugLevel = 0;
   my.runningFlag = false;
+  my.resizeLastUpdate = 0;
   my.init = function () {
     my.browser = new _Browser.Browser();
     my.browser.setup();
@@ -62,14 +63,23 @@ var AppFn = function AppFn(firstChild) {
         },
         isVisible: true,
         width: function width() {
-          return document.documentElement.clientWidth || document.body.clientWidth;
+          var width = _$Dom.$Dom.getScreenWidth();
+          if (width !== tmodel.val('width')) {
+            my.resizeLastUpdate = _TUtil.TUtil.now();
+          }
+          return width;
         },
         height: function height() {
-          return document.documentElement.clientHeight || document.body.clientHeight;
-        },
-        onResize: ['width', 'height']
+          var height = _$Dom.$Dom.getScreenHeight();
+          if (height !== tmodel.val('height')) {
+            my.resizeLastUpdate = _TUtil.TUtil.now();
+          }
+          return height;
+        }
       });
       tmodel.oids = {};
+      tmodel.val('width', _$Dom.$Dom.getScreenWidth());
+      tmodel.val('height', _$Dom.$Dom.getScreenHeight());
       if (my.tRoot) {
         my.tRoot.getChildren().forEach(function (t) {
           var child = new _TModel.TModel(t.type, t.targets);
@@ -212,4 +222,8 @@ var getVisibles = exports.getVisibles = function getVisibles() {
   var _tApp11;
   return (_tApp11 = tApp) === null || _tApp11 === void 0 || (_tApp11 = _tApp11.manager) === null || _tApp11 === void 0 ? void 0 : _tApp11.lists.visible;
 };
+var getResizeLastUpdate = exports.getResizeLastUpdate = function getResizeLastUpdate() {
+  var _tApp12;
+  return (_tApp12 = tApp) === null || _tApp12 === void 0 ? void 0 : _tApp12.resizeLastUpdate;
+};
 window.t = window.t || _SearchUtil.SearchUtil.find;

package/build/BaseModel.js

@@ -41,6 +41,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
     this.oidNum = uniqueId.num;
     this.targetValues = {};
     this.actualValues = {};
+    this.lastActualValues = {};
     this.activeTargetList = [];
     this.activeTargetMap = {};
     this.updatingTargetList = [];
@@ -119,7 +120,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         }
         return;
       }
-      if (_TargetUtil.TargetUtil.otherTargetEventsMap[key]) {
+      if (_TargetUtil.TargetUtil.bypassInitialProcessingTargetMap[key]) {
         return;
       }
       if (_TUtil.TUtil.isDefined(target.initialValue)) {
@@ -444,12 +445,14 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
   }, {
     key: "getTargetInitialValue",
     value: function getTargetInitialValue(key) {
-      return this.targetValues[key] ? this.targetValues[key].initialValue : undefined;
+      var _this$targetValues$ke;
+      return (_this$targetValues$ke = this.targetValues[key]) === null || _this$targetValues$ke === void 0 ? void 0 : _this$targetValues$ke.initialValue;
     }
   }, {
     key: "getActualValueLastUpdate",
     value: function getActualValueLastUpdate(key) {
-      return this.targetValues[key] ? this.targetValues[key].actualValueLastUpdate : undefined;
+      var _this$targetValues$ke2;
+      return (_this$targetValues$ke2 = this.targetValues[key]) === null || _this$targetValues$ke2 === void 0 ? void 0 : _this$targetValues$ke2.actualValueLastUpdate;
     }
   }, {
     key: "getTargetCreationTime",
@@ -723,6 +726,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         }
         var targetValue = this.targetValues[key];
         if (targetValue) {
+          targetValue.isImperative = false;
           targetValue.executionFlag = false;
           targetValue.scheduleTimeStamp = undefined;
           targetValue.step = 0;

package/build/Browser.js

@@ -22,29 +22,6 @@ var Browser = exports.Browser = /*#__PURE__*/function () {
   return _createClass(Browser, [{
     key: "setup",
     value: function setup() {
-      if (!document.getElementsByClassName) {
-        var getElementsByClassName = function getElementsByClassName(className, context) {
-          var elems;
-          if (document.querySelectorAll) {
-            elems = context.querySelectorAll(".".concat(className));
-          } else {
-            var all = context.getElementsByTagName("*");
-            elems = [];
-            for (var i = 0; i < all.length; i++) {
-              if (all[i].className && " ".concat(all[i].className, " ").indexOf(" ".concat(className, " ")) > -1 && elems.indexOf(all[i]) === -1) {
-                elems.push(all[i]);
-              }
-            }
-          }
-          return elems;
-        };
-        document.getElementsByClassName = function (className) {
-          return getElementsByClassName(className, document);
-        };
-        Element.prototype.getElementsByClassName = function (className) {
-          return getElementsByClassName(className, this);
-        };
-      }
       this.style = {
         transform: this.prefixStyle('transform'),
         transitionTimingFunction: this.prefixStyle('transitionTimingFunction'),

package/build/EventListener.js

@@ -69,15 +69,6 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
     this.attachedEventMap = {};
     this.eventTargetMap = {};
     this.startEvents = {
-      touchstart: {
-        eventName: 'touchstart',
-        inputType: 'touch',
-        eventType: 'start',
-        order: 1,
-        windowEvent: false,
-        queue: true,
-        rateLimit: 0
-      },
       pointerdown: {
         eventName: 'mousedown',
         inputType: 'pointer',
@@ -98,20 +89,11 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
       }
     };
     this.endEvents = {
-      touchend: {
-        eventName: 'touchend',
-        inputType: 'touch',
-        eventType: 'end',
-        order: 1,
-        windowEvent: false,
-        queue: true,
-        rateLimit: 0
-      },
       pointerup: {
         eventName: 'mouseup',
         inputType: 'pointer',
         eventType: 'end',
-        order: 1,
+        order: 2,
         windowEvent: false,
         queue: true,
         rateLimit: 0
@@ -126,6 +108,39 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
         rateLimit: 0
       }
     };
+    this.clickEvents = {
+      click: {
+        eventName: 'click',
+        inputType: 'mouse',
+        eventType: 'click',
+        order: 1,
+        windowEvent: false,
+        queue: false,
+        rateLimit: 0
+      }
+    };
+    this.touchStart = {
+      touchstart: {
+        eventName: 'touchstart',
+        inputType: 'touch',
+        eventType: 'start',
+        order: 1,
+        windowEvent: false,
+        queue: true,
+        rateLimit: 0
+      }
+    };
+    this.touchEnd = {
+      touchend: {
+        eventName: 'touchend',
+        inputType: 'touch',
+        eventType: 'end',
+        order: 1,
+        windowEvent: false,
+        queue: true,
+        rateLimit: 0
+      }
+    };
     this.cancelEvents = {
       touchcancel: {
         eventName: 'touchend',
@@ -189,7 +204,7 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
         eventType: 'resize',
         order: 1,
         windowEvent: true,
-        queue: false,
+        queue: true,
         rateLimit: 50
       },
       orientationchange: {
@@ -198,7 +213,7 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
         eventType: 'resize',
         order: 1,
         windowEvent: true,
-        queue: false,
+        queue: true,
         rateLimit: 50
       }
     };
@@ -273,7 +288,7 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
         rateLimit: 50
       }
     };
-    this.allEvents = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, this.startEvents), this.endEvents), this.cancelEvents), this.leaveEvents), this.moveEvents), this.wheelEvents), this.windowEvents), this.windowScrollEvents);
+    this.allEvents = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, this.touchStart), this.touchEnd), this.startEvents), this.endEvents), this.clickEvents), this.cancelEvents), this.leaveEvents), this.moveEvents), this.wheelEvents), this.windowEvents), this.windowScrollEvents);
     this.bindedHandleEvent = this.bindedHandleEvent || this.handleEvent.bind(this);
   }
   return _createClass(EventListener, [{
@@ -523,7 +538,7 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
             event.preventDefault();
           }
           this.end(event);
-          if (this.start0) {
+          if (this.start0 && eventName === 'touchend') {
             var deltaX = this.end0 ? Math.abs(this.end0.originalX - this.start0.originalX) : 0;
             var deltaY = this.end0 ? Math.abs(this.end0.originalY - this.start0.originalY) : 0;
             var period = this.end0 ? Math.abs(this.end0.timeStamp - this.start0.timeStamp) : 300;
@@ -546,6 +561,24 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
           this.touchCount = 0;
           event.stopPropagation();
           break;
+        case 'click':
+          if (this.preventDefault(tmodel, eventName)) {
+            event.preventDefault();
+          }
+          this.eventQueue.length = 0;
+          this.eventQueue.push({
+            eventName: eventName,
+            eventItem: eventItem,
+            eventType: eventType,
+            originalName: originalName,
+            tmodel: tmodel,
+            eventTarget: eventTarget,
+            timeStamp: now
+          });
+          this.clearStart();
+          this.touchCount = 0;
+          event.stopPropagation();
+          break;
         case 'wheel':
           if (this.preventDefault(tmodel, eventName)) {
             event.preventDefault();

package/build/LocationManager.js

@@ -33,16 +33,10 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
     this.locationListStats = [];
     this.activatedList = [];
     this.activatedMap = {};
-    this.screenWidth = (0, _App.getScreenWidth)();
-    this.screenHeight = (0, _App.getScreenHeight)();
-    this.resizeLastUpdate = 0;
-    this.resizeFlag = false;
   }
   return _createClass(LocationManager, [{
     key: "clear",
     value: function clear() {
-      this.screenWidth = 0;
-      this.screenHeight = 0;
       this.visibleChildrenLengthMap = {};
       this.childrenLengthMap = {};
       this.activatedList = [];
@@ -56,13 +50,6 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
       this.hasLocationMap = {};
       this.locationListStats = [];
       this.startTime = _TUtil.TUtil.now();
-      this.resizeFlag = false;
-      if (this.screenWidth !== (0, _App.getScreenWidth)() || this.screenHeight !== (0, _App.getScreenHeight)()) {
-        this.resizeLastUpdate = this.startTime;
-        this.resizeFlag = false;
-        this.screenWidth = (0, _App.getScreenWidth)();
-        this.screenHeight = (0, _App.getScreenHeight)();
-      }
       this.calculate();
       Object.keys(this.visibleChildrenLengthMap).forEach(function (key) {
         var _this$visibleChildren = _this.visibleChildrenLengthMap[key],
@@ -246,13 +233,13 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
       _App.tApp.targetManager.setActualValues(tmodel);
       if (tmodel.hasDom()) {
         if (_TModelUtil.TModelUtil.shouldMeasureWidthFromDom(tmodel)) {
-          _TargetUtil.TargetUtil.setWidthFromDom(tmodel, this.resizeFlag);
+          _TargetUtil.TargetUtil.setWidthFromDom(tmodel);
           tmodel.addToStyleTargetList('width');
         }
       }
       if (tmodel.hasDom()) {
         if (_TModelUtil.TModelUtil.shouldMeasureHeightFromDom(tmodel)) {
-          _TargetUtil.TargetUtil.setHeightFromDom(tmodel, this.resizeFlag);
+          _TargetUtil.TargetUtil.setHeightFromDom(tmodel);
           tmodel.addToStyleTargetList('height');
         }
       }

package/build/RunScheduler.js

@@ -31,6 +31,7 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
     this.rerunId = '';
     this.delayProcess = undefined;
     this.resetting = false;
+    this.activeStartTime = undefined;
   }
   return _createClass(RunScheduler, [{
     key: "resetRuns",
@@ -57,7 +58,8 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
               this.rerunId = '';
               this.delayProcess = undefined;
               this.resetting = false;
-            case 12:
+              this.activeStartTime = undefined;
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -132,14 +134,18 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
         if (newDelay >= 15) {
           if ((0, _App.getEvents)().eventQueue.length > 0) {
             this.schedule(15, "events-".concat((0, _App.getEvents)().eventQueue.length));
+          } else if ((0, _App.getManager)().lists.updatingTModels.length > 0) {
+            this.schedule(15, "getManager-needsRerun-updatingTModels");
           } else if ((0, _App.getManager)().lists.activeTModels.length > 0) {
             var activeTModel = (0, _App.getManager)().lists.activeTModels.find(function (tmodel) {
               return tmodel.activeTargetList.some(function (target) {
-                return tmodel.isTargetEnabled(target);
+                return tmodel.isTargetEnabled(target) && tmodel.shouldScheduleRun(target);
               });
             });
             if (activeTModel) {
-              this.schedule(15, "getManager-needsRerun-".concat(activeTModel.oid, "-").concat(activeTModel.activeTargetList));
+              var delay = !this.activeStartTime || _TUtil.TUtil.now() - this.activeStartTime > 15 ? 1 : 15;
+              this.activeStartTime = _TUtil.TUtil.now();
+              this.schedule(delay, "getManager-needsRerun-".concat(activeTModel.oid, "-").concat(activeTModel.activeTargetList));
             }
           }
         }

package/build/TModel.js

@@ -116,7 +116,7 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
         index: index,
         child: child
       });
-      (0, _App.getRunScheduler)().schedule(1, 'addChild-' + this.oid + "-" + child.oid);
+      child.activate();
       return this;
     }
   }, {
@@ -337,11 +337,13 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
     key: "val",
     value: function val(key, value) {
       var actual = this.actualValues;
+      var lastActual = this.lastActualValues;
       if (key.startsWith('_')) {
         actual = this;
         key = key.slice(1);
       }
       if (value !== undefined) {
+        lastActual[key] = actual[key];
         if (value !== actual[key]) {
           actual[key] = value;
         }
@@ -349,6 +351,11 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
       }
       return actual[key];
     }
+  }, {
+    key: "lastVal",
+    value: function lastVal(key) {
+      return this.lastActualValues[key];
+    }
   }, {
     key: "floorVal",
     value: function floorVal(key) {
@@ -581,6 +588,9 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "canHaveDom",
     value: function canHaveDom() {
+      if (this.targets['$dom'] && !this.val('$dom')) {
+        return;
+      }
       return this.val('canHaveDom');
     }
   }, {

package/build/TModelManager.js

@@ -346,8 +346,12 @@ var TModelManager = exports.TModelManager = /*#__PURE__*/function () {
         var _tmodel$getDomHolder;
         var tmodel = _needsDom[_i];
         if ((_tmodel$getDomHolder = tmodel.getDomHolder(tmodel)) !== null && _tmodel$getDomHolder !== void 0 && _tmodel$getDomHolder.exists()) {
-          tmodel.$dom = new _$Dom.$Dom();
-          _TModelUtil.TModelUtil.createDom(tmodel);
+          if (tmodel.val('$dom')) {
+            tmodel.$dom = tmodel.val('$dom');
+          } else {
+            tmodel.$dom = new _$Dom.$Dom();
+            _TModelUtil.TModelUtil.createDom(tmodel);
+          }
           tmodel.getDomHolder(tmodel).appendTModel$Dom(tmodel);
           tmodel.hasDomNow = true;
         }

package/build/TargetExecutor.js

@@ -55,6 +55,7 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
     value: function updateTarget(tmodel, targetValue, key) {
       targetValue.executionCount++;
       targetValue.executionFlag = true;
+      tmodel.setActualValueLastUpdate(key);
       if (tmodel.getTargetSteps(key) === 0) {
         TargetExecutor.snapActualToTarget(tmodel, key);
       }
@@ -109,7 +110,6 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
       var oldValue = tmodel.val(key);
       var value = tmodel.targetValues[key].value;
       tmodel.val(key, typeof value === 'function' ? value.call(tmodel) : value);
-      tmodel.setActualValueLastUpdate(key);
       _TargetUtil.TargetUtil.handleValueChange(tmodel, key, tmodel.val(key), oldValue, 0, 0);
     }
   }, {

package/build/TargetUtil.js

@@ -247,7 +247,7 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
     }
   }, {
     key: "setWidthFromDom",
-    value: function setWidthFromDom(child, resizeFlag) {
+    value: function setWidthFromDom(child) {
       var _child$domWidth, _child$domWidth2;
       var height = (_child$domWidth = child.domWidth) === null || _child$domWidth === void 0 ? void 0 : _child$domWidth.height;
       var width = (_child$domWidth2 = child.domWidth) === null || _child$domWidth2 === void 0 ? void 0 : _child$domWidth2.width;
@@ -257,7 +257,7 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
         child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
         rerender = true;
       }
-      if (!_TUtil.TUtil.isDefined(child.domWidth) || rerender || height !== child.getHeight() || resizeFlag || domParent && child.getActualValueLastUpdate('width') <= domParent.getActualValueLastUpdate('width')) {
+      if (!_TUtil.TUtil.isDefined(child.domWidth) || rerender || height !== child.getHeight() || domParent && child.getActualValueLastUpdate('width') <= domParent.getActualValueLastUpdate('width')) {
         child.$dom.width('auto');
         width = child.$dom.width();
         height = child.$dom.height();
@@ -271,7 +271,7 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
     }
   }, {
     key: "setHeightFromDom",
-    value: function setHeightFromDom(child, resizeFlag) {
+    value: function setHeightFromDom(child) {
       var _child$domHeight, _child$domHeight2;
       var height = (_child$domHeight = child.domHeight) === null || _child$domHeight === void 0 ? void 0 : _child$domHeight.height;
       var width = (_child$domHeight2 = child.domHeight) === null || _child$domHeight2 === void 0 ? void 0 : _child$domHeight2.width;
@@ -281,7 +281,7 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
         child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
         rerender = true;
       }
-      if (!_TUtil.TUtil.isDefined(child.domHeight) || rerender || width !== child.getWidth() || resizeFlag || domParent && child.getActualValueLastUpdate('height') <= domParent.getActualValueLastUpdate('height')) {
+      if (!_TUtil.TUtil.isDefined(child.domHeight) || rerender || width !== child.getWidth() || domParent && child.getActualValueLastUpdate('height') <= domParent.getActualValueLastUpdate('height')) {
         child.$dom.height('auto');
         width = child.$dom.width();
         height = child.$dom.height();
@@ -443,32 +443,32 @@ _defineProperty(TargetUtil, "cssFunctionMap", {
     z: 0
   }
 });
-_defineProperty(TargetUtil, "otherTargetEventsMap", {
+_defineProperty(TargetUtil, "bypassInitialProcessingTargetMap", {
   onChildrenChange: true,
   onVisibleChildrenChange: true,
   onPageClose: true,
   onVisible: true
 });
 _defineProperty(TargetUtil, "targetToEventsMapping", {
-  onClickEvent: ['startEvents', 'endEvents', 'cancelEvents'],
-  onTouchStart: ['startEvents'],
-  onTouchEnd: ['endEvents'],
-  onSwipeEvent: ['startEvents', 'endEvents', 'cancelEvents', 'moveEvents'],
-  onAnySwipeEvent: ['startEvents', 'endEvents', 'cancelEvents', 'moveEvents'],
-  onTouchEvent: ['startEvents', 'endEvents', 'cancelEvents'],
+  onClickEvent: ['clickEvents', 'touchStart', 'touchEnd'],
+  onTouchStart: ['touchStart', 'startEvents'],
+  onTouchEnd: ['touchEnd', 'endEvents'],
+  onSwipeEvent: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents', 'moveEvents'],
+  onAnySwipeEvent: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents', 'moveEvents'],
+  onTouchEvent: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents'],
   onEnterEvent: ['moveEvents', 'leaveEvents'],
   onLeaveEvent: ['moveEvents', 'leaveEvents'],
-  onScrollEvent: ['startEvents', 'endEvents', 'cancelEvents', 'moveEvents', 'wheelEvents'],
+  onScrollEvent: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents', 'moveEvents', 'wheelEvents'],
   onWindowScrollEvent: ['windowScrollEvents'],
-  onClick: ['startEvents', 'endEvents', 'cancelEvents'],
-  onSwipe: ['startEvents', 'endEvents', 'cancelEvents', 'moveEvents'],
-  onAnySwipe: ['startEvents', 'endEvents', 'cancelEvents', 'moveEvents'],
-  onTouch: ['startEvents', 'endEvents', 'cancelEvents'],
+  onClick: ['clickEvents', 'touchStart', 'touchEnd'],
+  onSwipe: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents', 'moveEvents'],
+  onAnySwipe: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents', 'moveEvents'],
+  onTouch: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents'],
   onEnter: ['moveEvents', 'leaveEvents'],
   onLeave: ['moveEvents', 'leaveEvents'],
-  onScroll: ['startEvents', 'endEvents', 'cancelEvents', 'moveEvents', 'wheelEvents'],
-  onScrollLeft: ['startEvents', 'endEvents', 'cancelEvents', 'moveEvents', 'wheelEvents'],
-  onScrollTop: ['startEvents', 'endEvents', 'cancelEvents', 'moveEvents', 'wheelEvents'],
+  onScroll: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents', 'moveEvents', 'wheelEvents'],
+  onScrollLeft: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents', 'moveEvents', 'wheelEvents'],
+  onScrollTop: ['touchStart', 'startEvents', 'touchEnd', 'endEvents', 'cancelEvents', 'moveEvents', 'wheelEvents'],
   onWindowScroll: ['windowScrollEvents']
 });
 _defineProperty(TargetUtil, "touchEventMap", {
@@ -528,31 +528,12 @@ _defineProperty(TargetUtil, "internalEventMap", {
   onResize: function onResize(tmodel) {
     var lastUpdateWidth = tmodel.getActualValueLastUpdate('width');
     var lastUpdateHeight = tmodel.getActualValueLastUpdate('height');
-    var resizeLastUpdate = (0, _App.getLocationManager)().resizeLastUpdate;
-    if (lastUpdateWidth && lastUpdateHeight) {
-      tmodel.setActualValueLastUpdate('width');
-      tmodel.setActualValueLastUpdate('height');
-      return resizeLastUpdate > Math.max(lastUpdateWidth, lastUpdateHeight);
-    }
-    if (lastUpdateWidth) {
-      tmodel.setActualValueLastUpdate('width');
-      return resizeLastUpdate > lastUpdateWidth;
-    }
-    if (lastUpdateHeight) {
-      tmodel.setActualValueLastUpdate('height');
-      return resizeLastUpdate > lastUpdateHeight;
-    }
-    return (0, _App.getLocationManager)().resizeFlag;
-  },
-  onParentResize: function onParentResize(tmodel) {
-    if (tmodel.getParent().getActualValueLastUpdate('width') > tmodel.getActualValueLastUpdate('width')) {
-      tmodel.setActualValueLastUpdate('width');
-      return true;
-    }
-    if (tmodel.getParent().getActualValueLastUpdate('height') > tmodel.getActualValueLastUpdate('height')) {
-      tmodel.setActualValueLastUpdate('height');
+    var parent = tmodel.getParent();
+    var resizeLastUpdate = parent ? Math.max(parent.getActualValueLastUpdate('width') || 0, parent.getActualValueLastUpdate('height') || 0, (0, _App.getResizeLastUpdate)()) : (0, _App.getResizeLastUpdate)();
+    if ((lastUpdateWidth || lastUpdateHeight) && resizeLastUpdate > Math.max(lastUpdateWidth || 0, lastUpdateHeight || 0)) {
       return true;
     }
+    return false;
   }
 });
 _defineProperty(TargetUtil, "allEventMap", _objectSpread(_objectSpread({}, _TargetUtil.touchEventMap), {}, {

package/build/Text.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Text = void 0;
+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); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+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); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var Text = exports.Text = /*#__PURE__*/function () {
+  function Text(strings) {
+    for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      values[_key - 1] = arguments[_key];
+    }
+    _classCallCheck(this, Text);
+    var processedLiterals = strings.map(function (str, i) {
+      return "".concat(str.trim()).concat(values[i] !== undefined ? values[i] : '');
+    });
+    this.template = strings.raw[0];
+    this.text = processedLiterals.join('');
+    this.textLiterals = strings.join('');
+    this.literals = strings;
+    this.values = values;
+  }
+  return _createClass(Text, [{
+    key: "populateElement",
+    value: function populateElement(element) {
+      var _this = this;
+      var valuePointer = 0;
+      element.childNodes.forEach(function (node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          node.innerText = _this.values[valuePointer++];
+        } else if (node.nodeType === Node.ELEMENT_NODE) {
+          Text.populateElement(node);
+        }
+      });
+    }
+  }], [{
+    key: "match",
+    value: function match(tmodel, domTemplate) {
+      if (tmodel.getBaseElement() === domTemplate.baseElement) {
+        if (domTemplate.text instanceof Text && tmodel.getRawHtml() instanceof Text) {
+          return domTemplate.text.textLiterals === tmodel.getRawHtml().textLiterals;
+        } else if (domTemplate.text instanceof String && tmodel.getRawHtml() instanceof String) {
+          return domTemplate.text === tmodel.getRawHtml();
+        }
+      }
+      return false;
+    }
+  }]);
+}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "targetj",
-  "version": "1.0.137",
+  "version": "1.0.138",
   "keywords": [
     "targetjs"
   ],