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

repeat

Browse Source
This commit is contained in:
Ahmed Zamil 2024-07-16 08:57:35 +03:00
parent 4b2a3f3834
commit 1552eaac30
4 changed files with 100 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
css/iui.css
View File

@ -48,8 +48,13 @@
--background-visible-background: rgba(0, 0, 0, 0.6);
--window-caption-color: #444;
--window-tools-close-background: linear-gradient(to bottom, #f1796b, #d66255);
--window-tools-close-border: 1px solid #f1786b;
--window-tools-close-border: 1px solid #d6d6d6;
--window-tools-close-background-hover: #f03242;
--window-tools-config-background: linear-gradient(to bottom, #9de1e8, #55b1d6);
--window-tools-config-border: 1px solid #d6d6d6;
--window-tools-config-background-hover:rgb(0, 135, 208);
--dialog-loading-background: rgb(167, 227, 252);
--dialog-loading-content-border: 10px solid #fff;
--dialog-loading-content-border-top: 10px solid #ffe3e3;
@ -529,9 +534,11 @@ html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools {
}
.window-tools, .dialog-tools {
position: absolute;
top: 5px;
right: 5px;
flex: 1;
flex-flow: row-reverse;
display: flex;
margin: auto 0;
padding: 0 3px;
}
.window-icon, .dialog-icon {
@ -565,27 +572,47 @@ html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools {
background: wheat;
}
.window-subtitle:empty, .dialog-subtitle:empty {
display: none;
}
.window-tools-close, .dialog-tools-close {
float: left;
height: 16px;
line-height: 16px;
padding: 0 5px;
border: var(--window-tools-close-border);
border-radius: 5px;
background: var(--window-tools-close-background);
white-space: nowrap;
.window-subtitle:empty, .dialog-subtitle:empty {
display: none;
}
.window-tools-close:hover, .dialog-tools-close:hover {
background: var(--window-tools-close-background-hover);
}
.window-tools-close, .dialog-tools-close, .window-tools-config, .dialog-tools-config {
height: 20px;
padding: 0 5px;
border-radius: 5px;
white-space: nowrap;
}
.window-tools-config, .dialog-tools-config{
background: var(--window-tools-config-background);
border: var(--window-tools-config-border);
}
.window-tools-close, .dialog-tools-close{
background: var(--window-tools-close-background);
border: var(--window-tools-close-border);
}
.window-tools-config:hover, .dialog-tools-config:hover {
background: var(--window-tools-config-background-hover);
}
.window-tools-close:hover, .dialog-tools-close:hover {
background: var(--window-tools-close-background-hover);
}
.dialog-tools-close:before, .window-tools-close:before {
content: "x";
}
.dialog-tools-config:before, .window-tools-config:before {
content: "⚙";
font-size: 18px;
padding-top: 2px;
}
.window-tools-max, .dialog-tools-max {
float: left;
width: 1.4em;
line-height: 1.4em;
text-align: center;
@ -1232,9 +1259,8 @@ html[dir='rtl'] .table-row[data-level='3'] .table-tree {
}
.dialog-tools-close:before, .window-tools-close:before {
content: "x";
}
@media only screen and (max-width: 500px) {
.dialog {

7
src/Data/Repeat.js
View File

@ -143,14 +143,12 @@ export default IUI.module(class Repeat extends IUIElement
value = [];
//debugger;
await super.setData(value, radix);
for (let i = 0; i < value.length; i++) {
let el = this._repeatNode.cloneNode(true);
el.setAttribute(":data", `d[${i}]`);
this.list.push(el);
try {
@ -171,6 +169,7 @@ export default IUI.module(class Repeat extends IUIElement
await IUI.created(el, true);
/*
if (el instanceof IUIElement){
// @TODO should check if the element depends on parent or not
if (el.dataMap != null) {
@ -194,9 +193,11 @@ export default IUI.module(class Repeat extends IUIElement
// data is now the radix
await IUI.render(el, el.data, false, value[i]);
}
*/
}
await super.setData(value, radix);
// @TODO: check if this works for event names starting with ":"

9
src/UI/Grid.js
View File

@ -16,11 +16,18 @@ export default IUI.module(class Grid extends IUIElement {
this.windows = [];
}
create() {
async create() {
for (var i = 0; i < this.children.length; i++)
this.add(this.children[i]);
}
async updated(){
if (this.hasAttribute("dynamic")){
for (var i = 0; i < this.children.length; i++)
this.add(this.children[i]);
}
}
setGridLayout(style)
{
this.style.grid = style;

38
src/UI/Window.js
View File

@ -8,6 +8,7 @@ export default IUI.module(class IUIWindow extends IUIElement {
this._register("resize");
this._register("move");
this._register("close");
this._register("config");
this._uid = "d:" + Math.random().toString(36).substring(2);
@ -15,6 +16,30 @@ export default IUI.module(class IUIWindow extends IUIElement {
static moduleName = "window";
get closeable(){
return this.hasAttribute("closeable");
}
set closeable(value){
if (!value)
this.removeAttribute("closeable");
else
this.setAttribute("closeable", true);
}
get configurable(){
return this.hasAttribute("configurable");
}
set configurable(value){
if (!value)
this.removeAttribute("configurable");
else
this.setAttribute("configurable", true);
}
async create() {
await super.create();
@ -73,14 +98,27 @@ export default IUI.module(class IUIWindow extends IUIElement {
this._header.appendChild(this._subtitle);
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";
this._close.addEventListener("click", function () {
self._emit("close");
});
this._tools.appendChild(this._close);
}
//this.addEventListener("mousedown", function (e) {
// self.setFocus(true);
//});