progress

build/iui.js

@@ -980,7 +980,8 @@ var IUI = /*#__PURE__*/function () {
   }, {
     key: "module",
     value: function module(objectClass) {
-      var moduleName = objectClass.moduleName;
+      var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var moduleName = name !== null && name !== void 0 ? name : objectClass.moduleName;
 
       if (IUI.modules[moduleName] === undefined) {
         customElements.define("i-" + moduleName, objectClass);
@@ -1323,6 +1324,8 @@ _defineProperty(IUI, "modules", {});
 
 _defineProperty(IUI, "registry", []);
 
+_defineProperty(IUI, "$iuiElement", IUI.module(_IUIElement["default"], "element"));
+
 _defineProperty(IUI, "observer", new IntersectionObserver(function (entries) {
   // isIntersecting is true when element and viewport are overlapping
   // isIntersecting is false when element and viewport don't overlap
@@ -2999,106 +3002,54 @@ var _default = _IUI.IUI.module( /*#__PURE__*/function (_IUIElement) {
                 this._busy = true; // clear
 
                 this.clear();
-                if (((_value = value) === null || _value === void 0 ? void 0 : _value.toArray) instanceof Function) value = value.toArray();else if (value == null || !(value instanceof Array || value instanceof Int32Array)) value = []; //debugger;
+                if (((_value = value) === null || _value === void 0 ? void 0 : _value.toArray) instanceof Function) value = value.toArray();else if (value == null || !(value instanceof Array || value instanceof Int32Array)) value = [];
-
-                _context.next = 8;
-                return _get(_getPrototypeOf(Repeat.prototype), "setData", this).call(this, value, radix);
-
-              case 8:
                 i = 0;
 
-              case 9:
+              case 7:
                 if (!(i < value.length)) {
-                  _context.next = 47;
+                  _context.next = 27;
                   break;
                 }
 
                 el = this._repeatNode.cloneNode(true);
+                el.setAttribute(":data", "d[".concat(i, "]"));
                 this.list.push(el);
-                _context.prev = 12;
+                _context.prev = 11;
-                _context.next = 15;
+                _context.next = 14;
                 return _IUI.IUI.create(el, true);
 
-              case 15:
+              case 14:
                 _IUI.IUI.bind(el, false, "repeat", _IUI.IUI.extend((_this$__i_bindings = this.__i_bindings) === null || _this$__i_bindings === void 0 ? void 0 : _this$__i_bindings.scope, {
                   index: i,
                   repeat: this
                 }, true));
 
-                _context.next = 21;
+                _context.next = 20;
                 break;
 
-              case 18:
+              case 17:
-                _context.prev = 18;
+                _context.prev = 17;
-                _context.t0 = _context["catch"](12);
+                _context.t0 = _context["catch"](11);
                 console.log(_context.t0);
 
-              case 21:
+              case 20:
                 this._container.insertBefore(el, this._beforeNode); // update referencing
 
 
                 (_this$__i_bindings2 = this.__i_bindings) === null || _this$__i_bindings2 === void 0 ? void 0 : (_this$__i_bindings2$s = _this$__i_bindings2.scope) === null || _this$__i_bindings2$s === void 0 ? void 0 : (_this$__i_bindings2$s2 = _this$__i_bindings2$s.refs) === null || _this$__i_bindings2$s2 === void 0 ? void 0 : _this$__i_bindings2$s2._build();
-                _context.next = 25;
+                _context.next = 24;
                 return _IUI.IUI.created(el, true);
 
-              case 25:
+              case 24:
-                if (!(el instanceof _IUIElement2["default"])) {
+                i++;
-                  _context.next = 36;
+                _context.next = 7;
-                  break;
+                break;
-                }
-
-                if (!(el.dataMap != null)) {
-                  _context.next = 32;
-                  break;
-                }
 
+              case 27:
                 _context.next = 29;
-                return el.dataMap.render(value[i], radix);
+                return _get(_getPrototypeOf(Repeat.prototype), "setData", this).call(this, value, radix);
 
               case 29:
-                if (_context.sent) {
-                  _context.next = 30;
-                  break;
-                }
-
-              case 30:
-                _context.next = 34;
-                break;
-
-              case 32:
-                _context.next = 34;
-                return el.setData(value[i], radix);
-
-              case 34:
-                _context.next = 44;
-                break;
-
-              case 36:
-                if (!(el.dataMap != null)) {
-                  _context.next = 41;
-                  break;
-                }
-
-                _context.next = 39;
-                return el.dataMap.render(value[i], radix);
-
-              case 39:
-                _context.next = 42;
-                break;
-
-              case 41:
-                el.data = value[i];
-
-              case 42:
-                _context.next = 44;
-                return _IUI.IUI.render(el, el.data, false, value[i]);
-
-              case 44:
-                i++;
-                _context.next = 9;
-                break;
-
-              case 47:
                 // @TODO: check if this works for event names starting with ":"
                 this._emit(":data", {
                   data: value
@@ -3107,12 +3058,12 @@ var _default = _IUI.IUI.module( /*#__PURE__*/function (_IUIElement) {
 
                 this._busy = false;
 
-              case 49:
+              case 31:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, this, [[12, 18]]);
+        }, _callee, this, [[11, 17]]);
       }));
 
       function setData(_x, _x2) {
@@ -4008,7 +3959,9 @@ var _default = _IUI.IUI.module( /*#__PURE__*/function (_Target) {
   }, {
     key: "create",
     value: function create() {
-      // save origin
+      _get(_getPrototypeOf(Router.prototype), "create", this).call(this); // save origin
+
+
       this.origin = window.location.pathname + window.location.search;
     }
   }, {
@@ -4104,8 +4057,14 @@ var _IUI = require("../Core/IUI.js");
 
 var _Route = _interopRequireDefault(require("./Route.js"));
 
+var _Layout = _interopRequireDefault(require("../Data/Layout.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -4126,6 +4085,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var _default = _IUI.IUI.module( /*#__PURE__*/function (_IUIElement) {
   _inherits(Target, _IUIElement);
 
@@ -4140,6 +4101,10 @@ var _default = _IUI.IUI.module( /*#__PURE__*/function (_IUIElement) {
       cssClass: 'target'
     }));
 
+    _defineProperty(_assertThisInitialized(_this), "$messageElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "$progressElement", void 0);
+
     _this._register("show");
 
     _this._register("hide");
@@ -4150,11 +4115,83 @@ var _default = _IUI.IUI.module( /*#__PURE__*/function (_IUIElement) {
   _createClass(Target, [{
     key: "setLoading",
     value: function setLoading(value) {
-      if (value) this.classList.add(this.cssClass + "-loading");else this.classList.remove(this.cssClass + "-loading");
+      if (value) this.$loadingElement.classList.add(this.cssClass + "-loading-visible");else this.$loadingElement.classList.remove(this.cssClass + "-loading-visible");
     }
+  }, {
+    key: "setMessage",
+    value: function () {
+      var _setMessage = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(message) {
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return this.$messageElement.setData({
+                  message: message
+                });
+
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function setMessage(_x) {
+        return _setMessage.apply(this, arguments);
+      }
+
+      return setMessage;
+    }()
+  }, {
+    key: "setProgress",
+    value: function () {
+      var _setProgress = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(progress, max) {
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this.$progressElement.setData({
+                  progress: progress,
+                  max: max
+                });
+
+              case 2:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function setProgress(_x2, _x3) {
+        return _setProgress.apply(this, arguments);
+      }
+
+      return setProgress;
+    }()
   }, {
     key: "create",
-    value: function create() {}
+    value: function create() {
+      this.$loadingElement = document.createElement("div");
+      this.$loadingElement.className = this.cssClass + "-loading";
+      this.$loadingElement.setAttribute(":data", "{progress: 0, max: 0, message: '...'}");
+      this.appendChild(this.$loadingElement); // get collection
+
+      var layout = _Layout["default"].get(this, "i-element", true, true);
+
+      for (var name in layout) {
+        if (name == "progress") {
+          this.$progressElement = layout[name].node;
+          this.$loadingElement.appendChild(this.$progressElement);
+        } else if (name = "message") {
+          this.$messageElement = layout[name].node;
+          this.$loadingElement.appendChild(this.$messageElement);
+        }
+      }
+    }
   }, {
     key: "show",
     value: function show(route, previous) {
@@ -4202,7 +4239,7 @@ var _default = _IUI.IUI.module( /*#__PURE__*/function (_IUIElement) {
 
 exports["default"] = _default;
 
-},{"../Core/IUI.js":4,"../Core/IUIElement.js":5,"./Route.js":15}],18:[function(require,module,exports){
+},{"../Core/IUI.js":4,"../Core/IUIElement.js":5,"../Data/Layout.js":10,"./Route.js":15}],18:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -5718,6 +5755,10 @@ var _IUI = require("../Core/IUI.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -5778,11 +5819,60 @@ var _default = _IUI.IUI.module( /*#__PURE__*/function (_IUIElement) {
 
   _createClass(Grid, [{
     key: "create",
-    value: function create() {
+    value: function () {
-      for (var i = 0; i < this.children.length; i++) {
+      var _create = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-        this.add(this.children[i]);
+        var i;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                for (i = 0; i < this.children.length; i++) {
+                  this.add(this.children[i]);
+                }
+
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function create() {
+        return _create.apply(this, arguments);
       }
-    }
+
+      return create;
+    }()
+  }, {
+    key: "updated",
+    value: function () {
+      var _updated = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+        var i;
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (this.hasAttribute("dynamic")) {
+                  for (i = 0; i < this.children.length; i++) {
+                    this.add(this.children[i]);
+                  }
+                }
+
+              case 1:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function updated() {
+        return _updated.apply(this, arguments);
+      }
+
+      return updated;
+    }()
   }, {
     key: "setGridLayout",
     value: function setGridLayout(style) {
@@ -9309,11 +9399,29 @@ var _default = _IUI.IUI.module((_temp = _class = /*#__PURE__*/function (_IUIElem
 
     _this._register("close");
 
+    _this._register("config");
+
     _this._uid = "d:" + Math.random().toString(36).substring(2);
     return _this;
   }
 
   _createClass(IUIWindow, [{
+    key: "closeable",
+    get: function get() {
+      return this.hasAttribute("closeable");
+    },
+    set: function set(value) {
+      if (!value) this.removeAttribute("closeable");else this.setAttribute("closeable", true);
+    }
+  }, {
+    key: "configurable",
+    get: function get() {
+      return this.hasAttribute("configurable");
+    },
+    set: function set(value) {
+      if (!value) this.removeAttribute("configurable");else this.setAttribute("configurable", true);
+    }
+  }, {
     key: "create",
     value: function () {
       var _create = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
@@ -9372,6 +9480,17 @@ var _default = _IUI.IUI.module((_temp = _class = /*#__PURE__*/function (_IUIElem
 
                 this._header.appendChild(this._tools);
 
+                if (this.configurable) {
+                  this._config = document.createElement("div");
+                  this._config.className = this.cssClass + "-tools-config button";
+
+                  this._config.addEventListener("click", function () {
+                    self._emit("config");
+                  });
+
+                  this._tools.appendChild(this._config);
+                }
+
                 if (this.closeable) {
                   this._close = document.createElement("div");
                   this._close.className = this.cssClass + "-tools-close button";
@@ -9379,6 +9498,8 @@ var _default = _IUI.IUI.module((_temp = _class = /*#__PURE__*/function (_IUIElem
                   this._close.addEventListener("click", function () {
                     self._emit("close");
                   });
+
+                  this._tools.appendChild(this._close);
                 } //this.addEventListener("mousedown", function (e) {
                 //    self.setFocus(true);
                 //});
@@ -9386,7 +9507,7 @@ var _default = _IUI.IUI.module((_temp = _class = /*#__PURE__*/function (_IUIElem
 
                 this.insertAdjacentElement("afterBegin", this._header);
 
-              case 28:
+              case 29:
               case "end":
                 return _context.stop();
             }

css/iui.css

@@ -2719,20 +2719,32 @@ html[dir='rtl'] .multiselect-list-remove {
 }
 
 
+.router-loading-message {
 
-.router::after, .target::after {
+}
+
+.router-loading-progress {
+
+}
+
+.router-loading, .target-loading {
     opacity: 0;
     transition: all 1s;
-    content: ' ';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 200px);
     visibility: hidden;
+    z-index: 10;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    padding-bottom: 200px;
+    flex-direction: column;
 }
 
-.router-loading::after, .target-loading::after {
+.router-loading-visible, .target-loading-visible {
     transition: all 1s 1s;
     opacity: 1;
     visibility: visible;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esiur/iui",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Interactive User Interface",
   "main": "iui.js",
   "type": "module",

src/Core/IUI.js

@@ -14,6 +14,9 @@ export class IUI {
 	static modules = {};
 	static registry = [];
 
+	static $iuiElement = this.module(IUIElement, "element");
+
+
 	static format(input) {
         if (typeof input == "string" || input instanceof String) {
             let template = document.createElement("template");
@@ -112,7 +115,7 @@ export class IUI {
 		IUI.registry.push(o);
 	}
 
-	static  remove(id)
+	static remove(id)
 	{
 		for(var i = 0; i < IUI.registry.length; i++)
 			if (IUI.registry[i].el.id == id)
@@ -122,9 +125,9 @@ export class IUI {
 			}
 	}
 
-	static module(objectClass)
+	static module(objectClass, name = null)
     {
-		let moduleName = objectClass.moduleName;
+		let moduleName = name ?? objectClass.moduleName;
 
         if (IUI.modules[moduleName] === undefined) {
             customElements.define("i-" + moduleName, objectClass);

src/Router/Router.js

@@ -256,6 +256,7 @@ export default IUI.module(
     }
 
     create() {
+      super.create();
       // save origin
       this.origin = window.location.pathname + window.location.search;
     }
@@ -263,6 +264,7 @@ export default IUI.module(
     get base() {
       return this.getAttribute("base") || "";
     }
+    
     destroy() {
       console.log("Destroyed", this);
     }

src/Router/Target.js

@@ -1,26 +1,58 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 import Route from "./Route.js";
+import Layout from '../Data/Layout.js';
 
 export default IUI.module(class Target extends IUIElement {
+
+    $messageElement;
+    $progressElement;
+
     constructor(properties) {
         super(IUI.extend(properties, { cssClass: 'target' }));
 
         this._register("show");
         this._register("hide");
-
     }
 
-    setLoading(value)
+    setLoading(value) {
-    {
         if (value)
-            this.classList.add(this.cssClass + "-loading");
+            this.$loadingElement.classList.add(this.cssClass + "-loading-visible");
         else
-            this.classList.remove(this.cssClass + "-loading");
+            this.$loadingElement.classList.remove(this.cssClass + "-loading-visible");
     }
 
+
+    async setMessage(message) {
+        await this.$messageElement.setData({ message });
+    }
+
+    async setProgress(progress, max) {
+        await this.$progressElement.setData({ progress, max });
+    }
+
+
     create() {
 
+        this.$loadingElement = document.createElement("div");
+        this.$loadingElement.className = this.cssClass + "-loading";
+        this.$loadingElement.setAttribute(":data", "{progress: 0, max: 0, message: '...'}");
+
+        this.appendChild(this.$loadingElement);
+
+        // get collection
+        let layout = Layout.get(this, "i-element", true, true);
+
+        for (let name in layout) {
+            if (name == "progress") {
+                this.$progressElement = layout[name].node;
+                this.$loadingElement.appendChild(this.$progressElement);
+            }
+            else if (name = "message") {
+                this.$messageElement = layout[name].node;
+                this.$loadingElement.appendChild(this.$messageElement);
+            }
+        }
     }
 
     show(route, previous) {
@@ -46,7 +78,7 @@ export default IUI.module(class Target extends IUIElement {
         if (route.parentElement != this)
             this.appendChild(route);
 
-        this._emit("show", { route, previous});
+        this._emit("show", { route, previous });
     }
 
     hide(route) {