esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2025-05-06 06:42:58 +00:00
Code Issues Projects Releases Wiki Activity

progress

Browse Source
This commit is contained in:
Ahmed Zamil 2024-12-11 16:35:48 +03:00
parent 1552eaac30
commit 51f6467e11
6 changed files with 267 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

281
build/iui.js
View File

@ -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;
case 24:
i++;
_context.next = 7;
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() {
for (var i = 0; i < this.children.length; 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();
}

20
css/iui.css
View File

@ -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;

2
package.json
View File

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

7
src/Core/IUI.js
View File

@ -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");
@ -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);

2
src/Router/Router.js
View File

@ -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);
}

42
src/Router/Target.js
View File

@ -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) {