From 51f6467e11cb2a590879b1e22625683815bd7a36 Mon Sep 17 00:00:00 2001 From: Ahmed Zamil Date: Wed, 11 Dec 2024 16:35:48 +0300 Subject: [PATCH] progress --- build/iui.js | 287 ++++++++++++++++++++++++++++++------------- css/iui.css | 20 ++- package.json | 2 +- src/Core/IUI.js | 9 +- src/Router/Router.js | 2 + src/Router/Target.js | 44 ++++++- 6 files changed, 267 insertions(+), 97 deletions(-) diff --git a/build/iui.js b/build/iui.js index 8c035e3..037b43e 100644 --- a/build/iui.js +++ b/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; - - _context.next = 8; - return _get(_getPrototypeOf(Repeat.prototype), "setData", this).call(this, value, radix); - - case 8: + 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 = []; 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.next = 15; + _context.prev = 11; + _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: - _context.prev = 18; - _context.t0 = _context["catch"](12); + case 17: + _context.prev = 17; + _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: - if (!(el instanceof _IUIElement2["default"])) { - _context.next = 36; - break; - } - - if (!(el.dataMap != null)) { - _context.next = 32; - break; - } + case 24: + i++; + _context.next = 7; + 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() { - for (var i = 0; i < this.children.length; i++) { - this.add(this.children[i]); + value: function () { + var _create = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { + 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(); } diff --git a/css/iui.css b/css/iui.css index 5f9b74c..4d7d8b6 100644 --- a/css/iui.css +++ b/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; diff --git a/package.json b/package.json index 40713a8..309676e 100644 --- a/package.json +++ b/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", diff --git a/src/Core/IUI.js b/src/Core/IUI.js index 9c977d8..4299023 100644 --- a/src/Core/IUI.js +++ b/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); diff --git a/src/Router/Router.js b/src/Router/Router.js index b68a0e1..0cebf18 100644 --- a/src/Router/Router.js +++ b/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); } diff --git a/src/Router/Target.js b/src/Router/Target.js index b4c84a5..c267801 100644 --- a/src/Router/Target.js +++ b/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) {