targetj 1.0.59 → 1.0.61

package/License

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 Ahmad Wasfi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -1,21 +1,69 @@
-# TargetJ
+# TargetJ: JavaScript UI framework
 
-Welcome to TargetJ, a powerful JavaScript framework designed to make building dynamic and responsive web applications easier and more efficient.
+Welcome to TargetJ, a powerful JavaScript UI framework designed to simplify development and animation. (https://targetj.io)
 
-## Features
+TargetJ distinguishes itself by introducing a novel concept known as 'targets', which forms its core. Targets are used as the main building blocks of components instead of direct variables and methods. Each component in TargetJ 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.
 
-- **No HTML required**: One of the principles of TargetJ is to employ a flat page design where HTML nesting is kept to a minimum. Consequently, HTML tags are seldom necessary except for images, text input, and text areas. In cases where nesting is necessary, it's handled dynamically and can be altered at runtime, unlike the static nesting in HTML.
-- **No HTML nesting**: HTML nesting is seldom required in TargetJ. 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. For instance, the same login button can be attached to the toolbar or placed in the middle of the page.
-- **Next-level animation**: TargetJ was built from scratch to be able to orchestrate intricate animations involving numerous objects with complex sequences. 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 captivating animations resulting in rich and engaging user experiences.
-- **Handle 100,000s of items**: TargetJ 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 keeps track of the branches that are visible to the user at any given time. In our examples page, infinite scrolling and infinite zooming demonstrate how it handles dynamically expanding lists of objects.
-- **Control the flow of execution with time**: TargetJ simplifies the execution of various program segments at specific times, making it easy to sequence or parallelize numerous actions. This functionality supports the development of applications that are efficient and responsive, capable of managing complex operations. It enhances user experiences and optimizes resource utilization.
-- **Handle events effortlessly**: In TargetJ, events are triggered synchronously and are designed so that any component can detect when an event occurs. Event handling can be simply implemented as conditions in the enabling functions of \'targets.\' This ensures that managing events is both simple and effective.
-- **Easy to learn**: TargetJ simplifies development by employing the concept of \'targets\' across all aspects of the program. These targets are used in animations,ncontrolling program flow, integrating APIs, and more. This unified approach means that one core concept is applied throughout the program, making TargetJ easy to learn.
+## Brief overview of how it operates
 
+Each target in TargetJ essentially has two variables: target and actual. When the target value does not equal the actual value, TargetJ will update the actual value iteratively until it matches the target value. This iteration is determined by two additional variables: steps and step interval. Steps dictate the number of iterations, and the step interval specifies the duration in milliseconds that the system waits before executing the next iteration.
 
-## Getting Started
+To animate a variable, create a target after its name. The variable can be of any type: boolean, number, string, object, or array.
+
+## Target life cycle and methods
+
+By default, a target in TargetJ has a simple life cycle: it executes only once. However, targets come with a number of methods that control execution and extend their behavior.
+
+1. **onEnabled**
+Determines whether the target is eligible for execution. Targets remain inactive until enabled. This method ensures that targets are executed only under suitable conditions and are commonly used to establish dependencies between targets, ensuring they execute at precisely the right moment.
+
+2. **loop**
+Controls the repetition of target execution. If loop() returns true, the target will stay active and continue to execute indefinitely. It will become inactive and stop executing when it returns false.
+
+3. **onValueChange**
+Monitors changes in the value returned by the main value() for the target. It is triggered whenever there is a change in the value returned by value(). This could be used, for example, to wait for asynchronous responses.
+
+4. **onStepsEnd**
+Executes actions after all increments are completed. This method is invoked only after the final step is executed, assuming the target has a defined steps value. It's useful for cleanup or finalization tasks after a sequence of steps.
 
 
+## Special target names used by TargetJ
+
+The following are special target names to impact the UI or control properties of TargetJ objects (called TModel):
+
+1. x, y, width, height: Set the location and dimensions of the object.
+2. opacity, scale, rotate: Set the opacity, scale, and rotation of the object.
+3. zIndex: Sets the z-order of the object.
+4. html: Sets the content of the object. By default, it will be interpreted as text.
+5. style: An object that sets the style of the object.
+6. css: A string that sets the CSS of the object.
+7. scrollLeft and scrollTop: Used for scrolling the object.
+8. leftMargin, rightMargin, topMargin, bottomMargin: Set the margins between objects.
+9. children: Sets the TModel children of the object.
+10. domHolder and domParent: Set to control the HTML element containment and how HTML is nested.
+11. isVisible: An optional boolean flag to explicitly control the visibility of the object instead of leaving it to TargetJ to calculate.
+12. canHaveDom: A boolean flag that sets if the object can have a DOM element in the page.
+13. canHandleEvents: Sets what events the object can handle
+14. widthFromDom and heightFromDom: Boolean flags that control if the width and height should be calculated from the DOM element.
+15. textOnly: A boolean flag that sets the type of content to be text or HTML.
+16. canBeBracketed: A boolean flag that controls if the object will be optimized and included in the TargetJ task process only when visible.
+17. isInFlow: A boolean flag that determines if the object will be used to calculate the content height and width of its parent.
+
+## 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 except for images.
+- **No HTML nesting**: HTML nesting is seldom required in TargetJ. 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**: TargetJ simplifies the execution of various program segments at specific times, making it easy to sequence or parallelize numerous actions.
+- **Handle events effortlessly**: In TargetJ, events are triggered synchronously and are designed so that any component can detect when an event occurs. Event handling can be simply implemented as conditions in the enabling functions of \'targets.\' This ensures that managing events is both simple and effective.
+- **Easy to learn**: TargetJ simplifies development by employing the single concept of \'targets\' making it easy to learn.
+- **Handle 100,000s of items**: TargetJ 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, TargetJ is a strong candidate for AI-powered UI development.
+  
+## Getting Started
+
 ### Installation
 
 To install TargetJ, run the following command in your terminal:
@@ -24,7 +72,9 @@ To install TargetJ, run the following command in your terminal:
 npm install targetj
 ```
 
-### Quick Example
+## Examples
+
+### Hello World example
 
 ```bash
 import { App, TModel } from 'targetj';
@@ -32,8 +82,104 @@ import { App, TModel } from 'targetj';
 App(new TModel({ html: 'Hello World'}));
 ```
 
+### Simple animation example
+```bash
+import { App, TModel } from 'targetj';
+
+App(new TModel({
+    style: { backgroundColor: '#f00' },
+    width: {
+        value: 250,        
+        steps: 30,
+        stepInterval: 50
+    },
+    height: {
+        value: 250,        
+        steps: 30,
+        stepInterval: 50
+    },
+    opacity: {
+        value: 0.15,        
+        steps: 30,
+        stepInterval: 50
+    }
+ }));
+```
+
+It can also be written in a more compact form using arrays:
+
+```bash
+import { App, TModel } from 'targetj';
+
+App(new TModel({
+    style: { backgroundColor: '#f00' },
+    width: [ 250, 30, 50],
+    height: [ 250, 30, 50],
+    opacity: [ 0.15, 30, 50]
+ }));
+```
+
+### More complicated example
+
+You can find a running example, which also demonstrates how the code operates, at https://targetj.io/docs/declarative.html
+
+```bash
+import { App, TModel, getScreenWidth, getScreenHeight } from "targetj";
+
+App(
+  new TModel({
+    add() {
+      for (var i = 0; i < 10; i++) {
+        this.addChild(
+          new TModel("square", {
+            width: 50,
+            height: 50,
+            style: { backgroundColor: "#f00" },
+            rotate: {
+              cycles: 1000,
+              steps: 15,
+              stepInterval: 50,
+              value(key, cycle) {
+                return [360, 0][cycle % 2];
+              },
+            },
+          })
+        );
+      }
+    },
+    animate: {
+      loop: true,
+      stepInterval: 1600,
+      value() {
+        this.getChildren().forEach((child) => {
+          child.setTargetValue("x", -child.getWidth());
+          child.setTargetValue("x", getScreenWidth() + child.getWidth(), 30, 50);
+          child.setTargetValue("y", Math.random() * getScreenHeight(), 30, 50);
+        });
+      },
+      enabledOn() {
+        return this.isTargetComplete("add");
+      },
+    },
+    width() {
+      return getScreenWidth();
+    },
+    height() {
+      return getScreenHeight();
+    },
+  })
+);
+```
+
+## How to debug in TargetJ
+1. TargetJ.tapp.stop(): Stops the application.
+2. TargetJ.tapp.start(): Restarts the application
+3. TargetJ.tapp.throttle: Slows down the application. This represents the pause in milliseconds before starting another TargetJ task cycle. It is zero by default.
+4. TargetJ.tapp.debugLevel: Logs information about the TargetJ task cycle and its efficiency. It is zero by default. Set it to 1 to log basic information and 2 to log more detailed information.
+5. Use `t()` to find an object from the browser console using its `oid`: Inspect its targetValues to display the status of its targets.
+
 ## Documentation
-For more detailed information on using TargetJ, please refer to www.targetj.io
+Explore the full potential of TargetJ and dive into our interactive documentation at www.targetj.io.
 
 ## License
 Distributed under the MIT License. See LICENSE for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "targetj",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "keywords": [
     "targetj"
   ],

package/src/App.js

@@ -44,11 +44,11 @@ function AppFn(firstChild) {
         my.targetManager = new TargetManager();
         my.manager = new TModelManager();
         
-        my.tjRootFactory = function() {
+        my.trootFactory = function() {
             
-            var tjRoot = new TModel('targetj');
+            var troot = new TModel('targetj');
                         
-            tjRoot.addChild = function(child, index) {
+            troot.addChild = function(child, index) {
                 if (!TUtil.isDefined(child.targets['domHolder'])) {
                     child.addTarget('domHolder', {
                         value: function() {
@@ -83,26 +83,26 @@ function AppFn(firstChild) {
                     });
                 }
                 
-                TModel.prototype.addChild.call(tjRoot, child, index);  
+                TModel.prototype.addChild.call(troot, child, index);  
             };
                         
-            if (my.tjRoot) {
-                my.tjRoot.getChildren().forEach(function(t, num) {
+            if (my.troot) {
+                my.troot.getChildren().forEach(function(t, num) {
                     var child = new TModel(t.type, t.targets);
                     child.oidNum = num;
                     child.oid = num > 0 ? t.type + num : t.type;
-                    tjRoot.addChild(child);
+                    troot.addChild(child);
                 });
             }
             
-            return tjRoot;
+            return troot;
         };
         
 
-        my.tjRoot = my.tjRootFactory();
+        my.troot = my.trootFactory();
         
         if (firstChild) {
-            my.tjRoot.addChild(firstChild);
+            my.troot.addChild(firstChild);
         }
         
         window.history.pushState({ link: document.URL }, "", document.URL);                
@@ -114,7 +114,7 @@ function AppFn(firstChild) {
         my.runningFlag = false; 
         
         my.events.clear();
-        my.tjRoot.getChildren().forEach(function(child) {
+        my.troot.getChildren().forEach(function(child) {
             child.deleteTargetValue('addEventHandler');
         });        
                         
@@ -131,7 +131,7 @@ function AppFn(firstChild) {
     my.stop = function()    { 
         my.runningFlag = false;
 
-        my.tjRoot.getChildren().forEach(function(child) {
+        my.troot.getChildren().forEach(function(child) {
             if (child.hasDom()) {
                 my.events.removeHandlers(child.$dom);
             }
@@ -188,8 +188,8 @@ function isRunning() {
     return tapp ? tapp.runningFlag : false;
 };
 
-function tjRoot() {
-    return tapp ? tapp.tjRoot : null;
+function troot() {
+    return tapp ? tapp.troot : null;
 }
 
 function getEvents() {
@@ -228,4 +228,4 @@ App.getOid = function(type) {
     return { oid: num > 0 ? type + num : type, num: num };
 };
 
-export { tapp, App, tjRoot, isRunning, getEvents, getPager, getLoader, getManager, $Dom, getScreenWidth, getScreenHeight };
+export { tapp, App, troot, isRunning, getEvents, getPager, getLoader, getManager, $Dom, getScreenWidth, getScreenHeight };

package/src/Dim.js

@@ -9,9 +9,9 @@ function Dim()  {
     };
   
     my.measureScreen = function() {
-        my.screen.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        my.screen.width = Math.min(window.outerWidth, window.innerWidth) || document.documentElement.clientWidth || document.body.clientWidth;
         my.screen.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
-        
+
         return my;
     };
     

package/src/EventListener.js

@@ -40,9 +40,7 @@ function EventListener() {
         orientationchange: 'resize'
     };
     
-    this.lastEvent = undefined;
-    this.eventName = "";
-    this.eventTagName = "";
+    this.lastEvents = [];
     
     this.cursor = { x: 0, y: 0};
     this.start0 = undefined;
@@ -77,48 +75,50 @@ EventListener.prototype.addHandlers = function ($dom) {
 
 EventListener.prototype.captureEvents = function() {
 
-    if (!this.lastEvent) { 
+    if (this.lastEvents.length === 0) { 
         this.currentEvent = "";
-        this.currentKey = "";
+        this.currentKey = "";       
         return;
     }
+    var lastEvent = this.lastEvents.pop();
+    
+    if (lastEvent.eventName === 'resize') {
+        tapp.dim.measureScreen();
+    } else {
+        this.findEventHandlers(lastEvent.tmodel);
+        this.currentEvent = lastEvent.eventName;
+        this.currentKey = this.currentTouch.key;
+        this.currentTouch.key = "";        
+    }
     
-    this.findEventHandlers(this.lastEvent);
-    this.currentEvent = this.eventName;
-    this.currentKey = this.currentTouch.key;
-    this.eventName = "";
-    this.lastEvent = undefined;
-    this.currentTouch.key = "";
 };
     
 EventListener.prototype.handleEvent = function (event) {
-    
-    if (this.eventName && this.eventName !== this.currentEvent) {
-        return;
-    }
-    
-    this.lastEvent = event;
-
-    this.eventTagName = (event.target.tagName || "").toUpperCase();
-    this.eventName = this.eventMap[event.type];
         
-    switch (this.eventName) { 
+    var eventName = this.eventMap[event.type];
+    var tmodel = this.getTModelFromEvent(event);
+            
+    switch (eventName) { 
         
         case 'mousedown':
         case 'touchstart':
+            this.lastEvents.push({ eventName: eventName, tmodel: tmodel });
+            
             this.clear();            
             this.touchCount = this.countTouches(event);
-            if (this.preventDefault(event, this.eventName)) event.preventDefault();
+            if (this.preventDefault(tmodel, eventName)) event.preventDefault();
             this.start(event);
             event.stopPropagation();
             break;
             
         case 'mousemove':
         case 'touchmove':
+            this.lastEvents.push({ eventName: eventName, tmodel: tmodel });
+            
             var touch = this.getTouch(event);
             this.cursor.x = touch.x;
             this.cursor.y = touch.y;
-            if (this.preventDefault(event, this.eventName)) event.preventDefault();
+            if (this.preventDefault(tmodel, eventName)) event.preventDefault();
             if (this.touchCount > 0) {                
                 this.move(event);
                 event.stopPropagation();
@@ -127,32 +127,40 @@ EventListener.prototype.handleEvent = function (event) {
 
         case 'mouseup':
         case 'touchend':
-            if (this.preventDefault(event, this.eventName)) event.preventDefault();
+            this.lastEvents.push({ eventName: eventName, tmodel: tmodel });
+            
+            if (this.preventDefault(tmodel, eventName)) event.preventDefault();
             this.end(event);
             event.stopPropagation();
             break;
 
         case 'wheel':
-            if (this.preventDefault(event, this.eventName)) event.preventDefault();   
+            this.lastEvents.push({ eventName: eventName, tmodel: tmodel });
+            
+            if (this.preventDefault(tmodel, eventName)) event.preventDefault();   
             this.wheel(event);
             break;
 
         case 'key':
+            this.lastEvents.push({ eventName: eventName, tmodel: tmodel });
+            
             this.keyUpHandler(event);
             break;
-
+            
         case 'resize':
-            tapp.dim.measureScreen();
+            if (this.lastEvents.length === 0 || this.lastEvents[this.lastEvents.length - 1].eventName !== 'resize') {
+                this.lastEvents.push({ eventName: eventName, tmodel: tmodel });
+            }
             break;
-
+            
     }
     
-    tapp.manager.scheduleRun(0, this.eventName + '-' + this.eventTagName);   
+    tapp.manager.scheduleRun(0, eventName + '-' + (event.target.tagName || "").toUpperCase()); 
+    tapp.manager.scheduleRun(20, eventName + '-' + (event.target.tagName || "").toUpperCase());   
+    
 };
     
-EventListener.prototype.findEventHandlers = function(event) {
-
-    var tmodel = this.getTModelFromEvent(event);
+EventListener.prototype.findEventHandlers = function(tmodel) {
 
     var touchHandler = tmodel ? SearchUtil.findFirstTouchHandler(tmodel) : null;
     var scrollLeftHandler = tmodel ? SearchUtil.findFirstScrollLeftHandler(tmodel) : null;
@@ -165,8 +173,7 @@ EventListener.prototype.findEventHandlers = function(event) {
     this.currentHandlers.pinch = pinchHandler; 
 };
 
-EventListener.prototype.preventDefault = function(event, eventName) {
-    var tmodel = this.getTModelFromEvent(event);
+EventListener.prototype.preventDefault = function(tmodel, eventName) {
 
     if (tmodel && (tmodel.keepEventDefault() === true || (Array.isArray(tmodel.keepEventDefault()) && tmodel.keepEventDefault().includes(eventName)))) {
         return false;
@@ -233,9 +240,6 @@ EventListener.prototype.resetEvents = function () {
         } 
     
         tapp.manager.scheduleRun(runDelay, "scroll decay"); 
-    } else if (this.eventName || this.lastEvent) {
-        this.eventName = "";
-        tapp.manager.scheduleRun(1, "reseting current event");
     }
 
 };
@@ -413,8 +417,8 @@ EventListener.prototype.end = function (event) {
         } 
     }
            
-    if (!momentum && this.touchCount === 1 && startToEndTime < 300) {
-        this.eventName = 'click';
+    if (!momentum && this.touchCount === 1 && startToEndTime <= 300) {
+        this.lastEvents.push({ eventName: 'click', tmodel: this.getTModelFromEvent(event) });
         this.clear();
         this.currentTouch.timeStamp = 0;
     }

package/src/LocationManager.js

@@ -8,7 +8,7 @@ function LocationManager() {
     this.hasLocationList = [];
     this.hasLocationMap = {};
 
-    this.bracketThreshold = 4;
+    this.bracketThreshold = 6;
     this.locationCount = [];
 }
 
@@ -22,8 +22,8 @@ LocationManager.prototype.calculateAll = function() {
 };
 
 LocationManager.prototype.calculate = function() {                   
-    this.addToLocationList(tapp.tjRoot);
-    this.calculateContainer(tapp.tjRoot);
+    this.addToLocationList(tapp.troot);
+    this.calculateContainer(tapp.troot);
 };
 
 LocationManager.prototype.getChildren = function(container) {

package/src/PageManager.js

@@ -15,13 +15,13 @@ PageManager.prototype.openPage = function(link) {
     var self = this;
 
     if (!this.pageCache[link]) {
-        tapp.tjRoot.getChildren().forEach(function(child) { child.$dom.innerHTML(""); });
-        tapp.tjRoot = tapp.tjRootFactory();
+        tapp.troot.getChildren().forEach(function(child) { child.$dom.innerHTML(""); });
+        tapp.troot = tapp.trootFactory();
         self.lastLink = link;        
         setTimeout(tapp.start);  
     } else {
-        tapp.tjRoot = this.pageCache[link].tjRoot;
-        tapp.tjRoot.getChildren().forEach(function(child, index) {
+        tapp.troot = this.pageCache[link].troot;
+        tapp.troot.getChildren().forEach(function(child, index) {
             child.$dom.innerHTML(self.pageCache[link].htmls[index]); 
         });        
         
@@ -50,9 +50,9 @@ PageManager.prototype.openLink = function(link) {
     if (this.lastLink) {
         this.pageCache[this.lastLink] = { 
             link: this.lastLink, 
-            htmls: tapp.tjRoot.getChildren().map(function(child) { return child.$dom.innerHTML(); }), 
+            htmls: tapp.troot.getChildren().map(function(child) { return child.$dom.innerHTML(); }), 
             visibleList: tapp.manager.lists.visible.slice(0),
-            tjRoot: tapp.tjRoot 
+            troot: tapp.troot 
         };
     }
     
@@ -69,9 +69,9 @@ PageManager.prototype.updateBrowserUrl = function(link) {
     if (!currentState.browserUrl) {
         this.pageCache[document.URL] = { 
             link: document.URL, 
-            htmls: tapp.tjRoot.getChildren().map(function(child) { return child.$dom.innerHTML(); }), 
+            htmls: tapp.troot.getChildren().map(function(child) { return child.$dom.innerHTML(); }), 
             visibleList: tapp.manager.lists.visible.slice(0),
-            tjRoot: tapp.tjRoot 
+            troot: tapp.troot 
         };
         history.pushState({ browserUrl: link }, "", link);
     } else {

package/src/SearchUtil.js

@@ -112,7 +112,7 @@ SearchUtil.findByType = function (type) {
     }
     
     if (!TUtil.isDefined(SearchUtil.foundTypeMap[type])) {
-        tmodel = search(tapp.tjRoot);  
+        tmodel = search(tapp.troot);  
         if (tmodel) {
             SearchUtil.foundTypeMap[type] = tmodel;
         }
@@ -146,7 +146,7 @@ SearchUtil.findByTarget = function (target) {
     }
     
     if (!TUtil.isDefined(SearchUtil.foundTargetMap[target])) {
-        tmodel = search(tapp.tjRoot);  
+        tmodel = search(tapp.troot);  
         if (tmodel) {
             SearchUtil.foundTargetMap[target] = tmodel;
         }
@@ -179,7 +179,7 @@ SearchUtil.find = function (oid) {
     }
        
     if (!TUtil.isDefined(SearchUtil.foundOids[oid])) {
-        tmodel = search(tapp.tjRoot);  
+        tmodel = search(tapp.troot);  
         if (tmodel) {
             SearchUtil.foundOids[oid] = tmodel;
         }

package/src/TModelManager.js

@@ -332,7 +332,7 @@ TModelManager.prototype.run = function(oid, delay) {
                     
                     tapp.targetManager.doneTargets.length = 0;
 
-                    tapp.locationManager.calculateTargets(tapp.tjRoot);
+                    tapp.locationManager.calculateTargets(tapp.troot);
 
                     tapp.locationManager.calculateAll();
                     

package/src/TargetManager.js

@@ -60,7 +60,7 @@ TargetManager.prototype.setTargetValue = function(tmodel, key) {
 
     if (tmodel.isTargetEnabled(key)) {
         if (tmodel.getScheduleTimeStamp(key) && tmodel.isTargetActive(key) && tmodel.getTargetStepInterval(key) > 0
-                && tmodel.getScheduleTimeStamp(key) + tmodel.getTargetStepInterval(key) <= TargetJ.browser.now()) {
+                && tmodel.getScheduleTimeStamp(key) + tmodel.getTargetStepInterval(key) <= browser.now()) {
             tmodel.resetScheduleTimeStamp(key);
         }