targetj 1.0.206 → 1.0.208

package/Export.js

@@ -14,6 +14,7 @@ export * from "./build/BracketGenerator.js";
 export * from "./build/ColorUtil.js";
 export * from "./build/Easing.js";
 export * from "./build/TargetExecutor.js";
+export * from "./build/AnimationManager.js";
 
 import * as App from './build/App.js';
 import * as TModel from './build/TModel.js';
@@ -31,6 +32,7 @@ import * as BracketGenerator from './build/BracketGenerator.js';
 import * as ColorUtil from './build/ColorUtil.js';
 import * as Easing from './build/Easing.js';
 import * as TargetExecutor from './build/TargetExecutor.js';
+import * as AnimationManager from './build/AnimationManager.js';
 
 const TargetJS = {
   ...App,
@@ -48,6 +50,7 @@ const TargetJS = {
   ...ColorUtil,
   ...Easing,
   ...TargetExecutor,
+  ...AnimationManager
 };
 
 if (typeof window !== 'undefined') {

package/README.md

@@ -327,14 +327,26 @@ import { App } from "targetj";
 
 **Via CDN**
 
-Add the following `<script>` tag to your HTML to load TargetJS from a CDN (only 67KB):
+Add the following `<script>` tag to your HTML to load TargetJS from a CDN (only 54KB):
 
 ```html
 <script src="https://unpkg.com/targetj@latest/dist/targetjs.js"></script>
 ```
 
-This will add `TargetJS` to the global `window` object, making it accessible throughout your JavaScript such as `TargetJS.App(YourApp)`.
-You can also use it directly in your HTML with `tg-` attributes:
+This exposes `TargetJS` on `window`, so you can initialize your app with `TargetJS.App(...)`. Make sure your code runs after the TargetJS script loads (use `defer` or place your script below it).
+
+You can also use it without `App` by mounting a `TModel` object to an HTML element, for example:
+
+```html
+<script>
+    new TargetJS.TModel({
+        background: 'red',
+        width: [100, 50, 10],
+        height: [100, 50, 10]
+    }).mount(document.body);
+</script>
+```
+Or, directly in your HTML with `tg-` attributes:
 
 ```html
 <div

package/build/$Dom.js

@@ -24,12 +24,37 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
     } else if (elemSelector) {
       this.element = elemSelector;
     }
-    this.childrenCount = 0;
-    this.$domParent = undefined;
+    this.hasRealChildren = false;
+    this.slotModeEnabled = false;
+    this.contentSlot = null;
     this.originalContent = undefined;
     this.textOnly = true;
+    this.transformProp = null;
+    this.initTransformProp();
   }
   return _createClass($Dom, [{
+    key: "create",
+    value: function create(tagName) {
+      this.element = document.createElement(tagName);
+      this.initTransformProp();
+    }
+  }, {
+    key: "initTransformProp",
+    value: function initTransformProp() {
+      if (!this.element || !this.element.style) {
+        this.transformProp = null;
+        return;
+      }
+      var s = this.element.style;
+      if ('transform' in s) {
+        this.transformProp = 'transform';
+      } else if ('webkitTransform' in s) {
+        this.transformProp = 'webkitTransform';
+      } else {
+        this.transformProp = null;
+      }
+    }
+  }, {
     key: "cloneTemplate",
     value: function cloneTemplate() {
       var _this$element$content;
@@ -43,21 +68,90 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
   }, {
     key: "exists",
     value: function exists() {
-      if (this.selector) {
-        this.element = $Dom.query(this.selector);
+      return this.selector ? !!$Dom.query(this.selector) : false;
+    }
+  }, {
+    key: "getElement",
+    value: function getElement() {
+      return this.element;
+    }
+  }, {
+    key: "supportsWAAPI",
+    value: function supportsWAAPI() {
+      return !!(this.element && typeof this.element.animate === 'function');
+    }
+  }, {
+    key: "findContentSlot",
+    value: function findContentSlot() {
+      if (this.contentSlot && this.contentSlot.parentNode === this.element) {
+        return this.contentSlot;
+      }
+      if (!this.element.firstElementChild) {
+        return null;
+      }
+      var slot = this.element.querySelector(':scope > [data-tj-slot="content"]');
+      if (slot) {
+        this.contentSlot = slot;
+      }
+      return slot;
+    }
+  }, {
+    key: "ensureContentSlotFirst",
+    value: function ensureContentSlotFirst() {
+      var slot = this.findContentSlot();
+      if (!slot) {
+        slot = document.createElement('div');
+        slot.setAttribute('data-tj-slot', 'content');
+        this.element.insertBefore(slot, this.element.firstChild);
+        this.contentSlot = slot;
+      } else if (this.element.firstChild !== slot) {
+        this.element.insertBefore(slot, this.element.firstChild);
+      }
+      return slot;
+    }
+  }, {
+    key: "enableSlotMode",
+    value: function enableSlotMode() {
+      var _this$element;
+      if (this.slotModeEnabled) {
+        return;
+      }
+      if (!((_this$element = this.element) !== null && _this$element !== void 0 && _this$element.firstChild)) {
+        this.slotModeEnabled = true;
+        return;
+      }
+      var slot = this.ensureContentSlotFirst();
+      var n = slot.nextSibling;
+      while (n) {
+        var next = n.nextSibling;
+        slot.appendChild(n);
+        n = next;
+      }
+      this.slotModeEnabled = true;
+    }
+  }, {
+    key: "ensureSlotMode",
+    value: function ensureSlotMode() {
+      this.enableSlotMode();
+      var slot = this.findContentSlot();
+      if (slot && this.element.firstChild !== slot) {
+        this.element.insertBefore(slot, this.element.firstChild);
       }
-      return this.element ? !!this.element.parentElement : false;
+    }
+  }, {
+    key: "getComputedStyle",
+    value: function getComputedStyle(name) {
+      if (!this.element) {
+        return undefined;
+      }
+      var cs = window.getComputedStyle(this.element);
+      return name ? cs.getPropertyValue(name) || cs[name] : cs;
     }
   }, {
     key: "contains",
     value: function contains(element) {
       return element instanceof Node && this.element.contains(element);
     }
-  }, {
-    key: "create",
-    value: function create(tagName) {
-      this.element = document.createElement(tagName);
-    }
   }, {
     key: "getTagName",
     value: function getTagName() {
@@ -192,30 +286,12 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
     key: "detach",
     value: function detach() {
       $Dom.detach(this.element);
-      if (this.$domParent && this.$domParent.childrenCount > 0) {
-        this.$domParent.childrenCount--;
-      }
     }
   }, {
     key: "child",
     value: function child(index) {
       return this.element.children[index];
     }
-  }, {
-    key: "append$Dom",
-    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() {
@@ -233,79 +309,123 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "insertFirst$Dom",
-    value: function insertFirst$Dom($dom) {
-      if (this.element.firstChild) {
-        this.element.insertBefore($dom.element, this.element.firstChild);
+    key: "insertAfterContentSlot",
+    value: function insertAfterContentSlot(node) {
+      if (!this.element) {
+        return;
+      }
+      var slot = this.ensureContentSlotFirst();
+      var after = slot ? slot.nextSibling : this.element.firstChild;
+      if (after) {
+        this.element.insertBefore(node, after);
       } else {
-        this.append$Dom($dom);
+        this.element.appendChild(node);
       }
     }
+  }, {
+    key: "insertFirst$Dom",
+    value: function insertFirst$Dom($dom) {
+      this.ensureSlotMode();
+      this.insertAfterContentSlot($dom.element);
+      this.hasRealChildren = true;
+    }
   }, {
     key: "relocate",
     value: function relocate(tmodel, orderIndex) {
-      this.element.insertBefore(tmodel.$dom.element, this.element.children[orderIndex]);
+      this.ensureSlotMode();
+      var slot = this.findContentSlot();
+      var offset = slot ? 1 : 0;
+      var idx = orderIndex + offset;
+      this.element.insertBefore(tmodel.$dom.element, this.element.children[idx] || null);
     }
   }, {
     key: "appendTModel$Dom",
     value: function appendTModel$Dom(tmodel) {
-      if (this.childrenCount === 0 && this.element.children.length > 1 && tmodel.getDomParent() && tmodel.getDomParent().getHtml() && tmodel.getDomParent().getHtml() === this.originalContent) {
-        this.element.innerHTML = "<div>".concat(this.html(), "</div>");
-      }
+      this.ensureSlotMode();
       this.element.appendChild(tmodel.$dom.element);
-      tmodel.$dom.$domParent = this;
-      this.childrenCount++;
+      this.hasRealChildren = true;
     }
   }, {
-    key: "deleteAll",
-    value: function deleteAll() {
-      this.element.innerHTML = this.originalContent || '';
-      this.childrenCount = 0;
+    key: "append$Dom",
+    value: function append$Dom($dom) {
+      this.ensureSlotMode();
+      this.element.appendChild($dom.element);
+      this.hasRealChildren = true;
+    }
+  }, {
+    key: "appendElement",
+    value: function appendElement(element) {
+      this.ensureSlotMode();
+      this.element.appendChild(element);
+      this.hasRealChildren = true;
+    }
+  }, {
+    key: "removeElement",
+    value: function removeElement(element) {
+      if (!element) {
+        return;
+      }
+      var parent = element.parentNode;
+      if (parent === this.element) {
+        this.element.removeChild(element);
+        return true;
+      }
+      if (parent) {
+        parent.removeChild(element);
+        return false;
+      }
     }
   }, {
     key: "html",
     value: function html(_html) {
       if (_TUtil.TUtil.isDefined(_html)) {
-        if (this.childrenCount > 0) {
-          var element = document.createElement('div');
-          element.innerHTML = _html;
-          if (_TUtil.TUtil.isDefined(this.originalContent)) {
-            this.element.replaceChild(element, this.element.firstChild);
-          } else {
-            this.element.insertBefore(element, this.element.firstChild);
-          }
-          this.originalContent = _html;
-          this.textOnly = false;
-        } else {
+        if (!this.hasRealChildren) {
           this.element.innerHTML = _html;
-          this.originalContent = _html;
-          this.textOnly = false;
+        } else {
+          var slot = this.ensureContentSlotFirst();
+          slot.innerHTML = _html;
         }
-      } else {
-        return _TUtil.TUtil.isDefined(this.originalContent) ? this.originalContent : this.element.innerHTML;
+        this.originalContent = _html;
+        this.textOnly = false;
       }
     }
   }, {
     key: "text",
     value: function text(_text) {
       if (_TUtil.TUtil.isDefined(_text)) {
-        if (this.childrenCount > 0) {
-          var element = document.createTextNode(_text);
-          if (_TUtil.TUtil.isDefined(this.originalContent)) {
-            this.element.replaceChild(element, this.element.firstChild);
-          } else {
-            this.element.insertBefore(element, this.element.firstChild);
-          }
-          this.originalContent = _text;
-          this.textOnly = true;
-        } else {
+        if (!this.hasRealChildren) {
           this.element.textContent = _text;
-          this.originalContent = _text;
-          this.textOnly = true;
+        } else {
+          var slot = this.ensureContentSlotFirst();
+          slot.textContent = _text;
         }
-      } else {
-        return _TUtil.TUtil.isDefined(this.originalContent) ? this.originalContent : this.element.textContent;
+        this.originalContent = _text;
+        this.textOnly = true;
+      }
+    }
+  }, {
+    key: "clearContent",
+    value: function clearContent() {
+      if (!this.element) {
+        return;
+      }
+      if (!this.hasRealChildren) {
+        this.element.innerHTML = this.originalContent || '';
+        return;
+      }
+      var slot = this.ensureContentSlotFirst();
+      slot.innerHTML = this.originalContent || '';
+    }
+  }, {
+    key: "deleteAll",
+    value: function deleteAll() {
+      if (!this.element) {
+        return;
       }
+      this.element.innerHTML = this.originalContent || '';
+      this.hasRealChildren = false;
+      this.contentSlot = null;
+      this.slotModeEnabled = false;
     }
   }, {
     key: "outerHTML",
@@ -370,7 +490,7 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
   }, {
     key: "transform",
     value: function transform(transformString) {
-      this.element.style[(0, _App.getBrowser)().style.transform] = transformString;
+      this.element.style[this.transformProp] = transformString;
     }
   }, {
     key: "animate",
@@ -406,14 +526,14 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
   }, {
     key: "getScrollTop",
     value: function getScrollTop() {
-      var _this$element$scrollT, _this$element;
-      return (_this$element$scrollT = (_this$element = this.element) === null || _this$element === void 0 ? void 0 : _this$element.scrollTop) !== null && _this$element$scrollT !== void 0 ? _this$element$scrollT : 0;
+      var _this$element$scrollT, _this$element2;
+      return (_this$element$scrollT = (_this$element2 = this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.scrollTop) !== null && _this$element$scrollT !== void 0 ? _this$element$scrollT : 0;
     }
   }, {
     key: "getScrollLeft",
     value: function getScrollLeft() {
-      var _this$element$scrollL, _this$element2;
-      return (_this$element$scrollL = (_this$element2 = this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.scrollLeft) !== null && _this$element$scrollL !== void 0 ? _this$element$scrollL : 0;
+      var _this$element$scrollL, _this$element3;
+      return (_this$element$scrollL = (_this$element3 = this.element) === null || _this$element3 === void 0 ? void 0 : _this$element3.scrollLeft) !== null && _this$element$scrollL !== void 0 ? _this$element$scrollL : 0;
     }
   }], [{
     key: "createTemplate",
@@ -423,6 +543,11 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
       $dom.innerHTML(html.trim());
       return $dom;
     }
+  }, {
+    key: "createDocumentFragment",
+    value: function createDocumentFragment() {
+      return document.createDocumentFragment();
+    }
   }, {
     key: "query",
     value: function query(selector) {
@@ -516,7 +641,7 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
     key: "ajax",
     value: function ajax(query) {
       var xhr = new XMLHttpRequest();
-      var params = "";
+      var params = '';
       if (query.data) {
         params = Object.keys(query.data).map(function (key) {
           return "".concat(key, "=").concat(encodeURIComponent(query.data[key]));
@@ -537,7 +662,7 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
         xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
         xhr.send(params);
       } else {
-        query.url += !params ? "" : query.url > "" && query.url.indexOf("?") >= 0 ? "&".concat(params) : "?".concat(params);
+        query.url += !params ? '' : query.url > '' && query.url.indexOf('?') >= 0 ? "&".concat(params) : "?".concat(params);
         xhr.open(query.type, query.url, true);
         xhr.send();
       }