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

docs

Browse Source
This commit is contained in:
Ahmed Zamil 2021-10-29 17:09:15 +03:00
parent 1e8ae99d39
commit b3479dbdbd
35 changed files with 857 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
css/iui.css
View File

@ -2778,7 +2778,7 @@ html[dir='rtl'] .multiselect-list-remove {
margin: 6px; margin: 6px;
background-image: var(--search); background-image: var(--search);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 25px; background-size: 19px;
background-position: 2px 50%; background-position: 2px 50%;
padding-left: 30px; padding-left: 30px;
} }
@ -2797,12 +2797,31 @@ html[dir='rtl'] .multiselect-list-remove {
transition: max-height ease-in-out 0.3s; transition: max-height ease-in-out 0.3s;
} }
.navbar-item[level='1'] {
padding-left: 10px;
}
html[dir='rtl'] .navbar-item[level='1'] {
padding-right: 10px;
padding-left: unset;
}
.navbar-container .navbar-container
{ {
overflow: auto; overflow: auto;
visibility: hidden; visibility: hidden;
} }
.navbar-item > i-link
{
display: flex;
padding: 3px 10px;
}
.navbar-item > i-link > span {
flex: 1;
}
.navbar i-link > span > span, .navbar i-link > span > span,
.sitebar i-link > span > span .sitebar i-link > span > span
@ -2812,6 +2831,9 @@ html[dir='rtl'] .multiselect-list-remove {
font-weight: bold; font-weight: bold;
} }
.navbar-container::-webkit-scrollbar { .navbar-container::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;
@ -2879,7 +2901,14 @@ html[dir='rtl'] .multiselect-list-remove {
.navbar-container i-check .navbar-container i-check
{ {
width: 42px; width: 26px;
background-image: var(--arrow-left);
background-position: 0px 48%;
background-repeat: no-repeat;
border-radius: 10px;
}
/* width: 42px;
background-image: var(--arrow-left); background-image: var(--arrow-left);
background-position: 0px 48%; background-position: 0px 48%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -2888,8 +2917,8 @@ html[dir='rtl'] .multiselect-list-remove {
align-self: stretch; align-self: stretch;
background-color: #d6d6d6; background-color: #d6d6d6;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; */
}
.sitebar-container i-check .sitebar-container i-check
{ {
@ -3009,3 +3038,60 @@ html[dir='rtl'] .multiselect-list-remove {
transform-origin: right; transform-origin: right;
} }
.location
{
display: flex;
gap: 10px;
align-items: center;
}
.location > i-link
{
text-decoration: underline;
}
.location > span::after
{
content: '/';
}
.codepreview
{
display: flex;
flex-flow: column;
border: 1px solid #c2c2c2;
padding: 10px;
margin: 10px;
background: #f8f8f8;
border-left: 4px solid #4ebeec;
}
.codepreview-content
{
display: flex;
}
.codepreview-editor
{
background: #e8e8e8;
padding: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
flex: 1;
}
.codepreview-preview{
flex: 1;
background: white;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 10px;
}
.codepreview-bar
{
}

BIN
docs/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
docs/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
docs/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

9
docs/browserconfig.xml Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
docs/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 546 B

BIN
docs/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 871 B

BIN
docs/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

112
docs/index.html Normal file
View File

@ -0,0 +1,112 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="UTF-8" content="">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<!--IUI 2.0 -->
<link href="../css/iui.css" rel="stylesheet" />
<script src="../src/iui.js" type="module"></script>
<script src="js/docs.js"></script>
<style>
body {
font-family: Segoe UI;
}
pre {
border: 3px solid #c2c2c2;
box-shadow: green;
margin: 0;
padding: 10px;
background: #f8f8f8;
}
.top {
border-bottom: 1px solid silver;
flex: 1;
padding: 2px 15px;
display: flex;
align-items: center;
gap: 10px;
}
.header {
height: 110px;
display: flex;
flex-direction: column;
gap: 5px;
}
</style>
</head>
<body>
<i-app>
<div class="header">
<div class="top">
<img src="img/logo.png" style="height: 40;">
<h2>Docs</h2>
</div>
<div style="padding: 10px;">
<i-location></i-location>
</div>
</div>
<div style="display: flex">
<i-navbar style="padding: 10px">
</i-navbar>
<i-router type="hash" style="height: 100vh; width: 100vw;">
<i-route name="getting-started" caption="Getting started" :content="load(this)">
<i-route name="install" caption="Install" :content="load(this)">
</i-route>
<i-route name="first" caption="First App" :content="load(this)">
</i-route>
<i-route name="declarative" caption="Declarative Rendering" :content="load(this)">
</i-route>
<i-route name="data-flow" caption="Data Flow" :content="load(this)">
</i-route>
</i-route>
<i-route name="getting-started2" caption="Getting started">
Getting started
<i-route name="install" caption="Install">
</i-route>
<i-index></i-index>
</i-route>
</i-router>
</div>
</i-app>
</body>
</html>

16
docs/js/docs.js Normal file
View File

@ -0,0 +1,16 @@
marked.setOptions({
highlight: function(code, lang) {
return hljs.highlight(lang, code).value;
}
});
async function load(route) {
var link = "md/" + route.link + ".md";
let content = await fetch(link);
if (content.status != 200)
return "Not found " + content.url;
var md = marked(await content.text());
return md;
}

17
docs/md/getting-started.md Normal file
View File

@ -0,0 +1,17 @@
# Compatibility
IUI depends on Web Components (customElement) to render its widgets.
*PC*
| Chrome | Firefox | Edge | IE | Opera | Safari |
|:------:|:--------|:----:|:--:|:-----:|--------|
| 54 | 79 | 63 | No | 41 | 10.1 |
------------------------------------------------
*Mobile*
| Android WebView | Chrome Android | Firefox Android | Safari iOS | Samsung Internet |
| :--------------: | :-------------:| :--------------:|:----------:| :--------------: |
| 54 | 54 | 63 | 10.3 | 6.0 |
-------------------------------------------------------------------------------------

12
docs/md/getting-started/data-flow.md Normal file
View File

@ -0,0 +1,12 @@
# Data flow
When the :data attribute is set to an element any other attribute and child will be able to access this field directly using the variable *data* or the shortended *d*.
<i-codepreview>
<div :data="{name: 'Ahmed Zamil', job: 'Developer'} ">
My name is ${d.name} and I work as a ${d.job}.
</div>
</i-codepreview>

51
docs/md/getting-started/declarative.md Normal file
View File

@ -0,0 +1,51 @@
# Declarative Rendering
# Text nodes
Text nodes are enclosed with `${...}`
<i-codepreview>
${ navigator.userAgent }
</i-codepreview>
# Fields
starts with `:`
<i-codepreview>
<input :value="navigator.userAgent">
</i-codepreview>
# Attributes
starts with `::`
<i-codepreview>
<input ::placeholder="navigator.appName">
</i-codepreview>
# Asynchronous
*Promise*
Promises are automatically resolved.
<i-codepreview>
${fetch("md/hello.md")}
</i-codepreview>
*Await*
To use await in text nodes **async** attribute must be added to the parent element
<i-codepreview>
<div async>
${await (await fetch("md/hello.md")).text()}
</div>
</i-codepreview>
In attributes, the attribute name must be preceded with **async:**
<i-codepreview>
<input async:value = "await (await fetch('md/hello.md')).text()">
</i-codepreview>
Attributes are similar they must start with *async::*
<i-codepreview>
<input async::placeholder = "await (await fetch('md/hello.md')).text()">
</i-codepreview>

14
docs/md/getting-started/first.md Normal file
View File

@ -0,0 +1,14 @@
```html
<html>
<head>
<link href="node_modules/css/iui.css" rel="stylesheet" />
<script src="node_modules/src/iui.js" type="module"></script>
</head>
<body>
<i-app>
Current time: ${new Date()}
</i-app>
</body>
</html>
```

15
docs/md/getting-started/install.md Normal file
View File

@ -0,0 +1,15 @@
NPM
```html
npm install @esiur/iui
```
Include in web page
#
```html
<link href="node_modules/css/iui.css" rel="stylesheet" />
<script src="node_modules/src/iui.js" type="module"></script>
```

1
docs/md/hello.md Normal file
View File

@ -0,0 +1 @@
Hello World !

BIN
docs/mstile-150x150.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

73
docs/safari-pinned-tab.svg Normal file
View File

@ -0,0 +1,73 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="554.000000pt" height="554.000000pt" viewBox="0 0 554.000000 554.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,554.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M368 4131 c-18 -15 -59 -36 -91 -45 -32 -9 -60 -23 -63 -31 -3 -8 -1
-30 6 -49 10 -32 14 -34 43 -29 18 2 48 1 67 -4 l35 -9 27 -120 c23 -97 26
-123 16 -142 -9 -17 -9 -25 0 -34 7 -7 12 -36 12 -66 0 -42 3 -53 14 -49 11 4
20 -26 40 -131 14 -75 22 -139 18 -142 -8 -6 -14 -70 -6 -70 2 0 9 10 14 23 6
16 9 5 9 -45 1 -36 5 -68 10 -70 5 -1 11 -21 13 -43 3 -22 3 -32 1 -22 -2 9
-9 17 -14 17 -12 0 -12 -35 0 -58 22 -41 33 -103 27 -139 -9 -46 -9 -45 3
-108 5 -27 10 -77 11 -110 0 -33 9 -102 19 -152 10 -51 14 -93 10 -93 -4 0 -7
-33 -8 -72 -2 -137 -9 -191 -25 -200 -13 -7 -14 -13 -6 -29 6 -11 9 -23 6 -27
-3 -4 -1 -14 4 -21 4 -8 4 -28 -1 -45 -6 -20 -6 -45 2 -73 6 -24 8 -50 3 -60
-4 -10 -9 -29 -11 -43 -1 -14 -7 -58 -13 -98 -6 -45 -7 -79 -1 -90 7 -13 -2
-36 -35 -92 -24 -41 -45 -78 -46 -82 -2 -5 -34 -17 -71 -27 -104 -30 -142 -52
-142 -80 0 -14 11 -32 27 -44 24 -18 32 -19 67 -9 25 8 65 10 109 6 42 -4 89
-2 118 5 39 9 89 9 242 -4 173 -14 195 -14 222 0 17 9 30 18 30 21 0 14 -25
50 -44 64 -41 28 -116 103 -136 135 -11 17 -29 62 -40 98 -12 37 -25 67 -30
67 -6 0 -10 8 -10 18 -1 9 -8 35 -16 57 -26 66 -34 133 -21 162 9 21 8 27 -7
38 -16 12 -17 20 -5 107 6 51 12 128 13 171 0 43 6 81 11 85 6 4 11 48 11 97
1 50 9 140 17 200 9 61 16 128 16 150 0 73 41 488 62 620 49 313 128 547 208
619 27 24 27 38 -2 72 l-23 26 -127 -12 c-70 -7 -148 -10 -174 -6 -30 4 -51 2
-61 -6 -19 -16 -212 -25 -212 -10 0 11 -68 62 -82 62 -4 0 -22 -13 -40 -29z
m414 -136 c14 -6 15 -96 1 -175 -5 -33 -7 -31 -19 33 -7 37 -20 82 -28 99 -9
17 -16 35 -16 40 0 9 41 11 62 3z"/>
<path d="M4578 4132 c-18 -15 -59 -36 -91 -46 -61 -18 -73 -31 -63 -69 10 -39
22 -50 42 -40 12 7 35 6 64 -2 l45 -11 27 -124 c20 -92 24 -126 15 -132 -9 -5
-8 -16 1 -42 7 -20 11 -40 8 -45 -10 -16 6 -72 19 -68 13 6 69 -264 57 -273
-8 -6 -14 -70 -6 -70 2 0 9 10 14 23 6 16 9 3 9 -51 1 -46 5 -71 11 -67 6 4
10 -5 10 -19 0 -14 -4 -26 -10 -26 -12 0 -13 -52 -2 -65 5 -6 15 -29 22 -53
11 -35 11 -52 2 -89 -8 -29 -9 -49 -3 -57 9 -11 15 -65 25 -216 2 -30 6 -62 9
-70 19 -55 6 -368 -16 -382 -13 -8 -11 -67 3 -82 4 -4 3 -22 -2 -39 -8 -22 -8
-43 2 -80 9 -37 10 -51 1 -56 -6 -4 -11 -21 -11 -37 0 -27 -13 -127 -20 -149
-2 -5 0 -22 4 -37 6 -22 0 -42 -33 -101 -23 -41 -47 -79 -54 -84 -6 -5 -42
-18 -78 -27 -126 -33 -158 -73 -97 -119 24 -18 32 -19 67 -9 25 8 65 10 109 6
42 -4 89 -2 119 5 39 10 88 9 240 -4 174 -15 195 -15 222 -1 28 15 29 18 20
46 -6 16 -15 30 -19 30 -17 0 -132 114 -155 154 -13 23 -29 61 -35 86 -7 25
-17 52 -24 60 -14 16 -51 133 -60 188 -3 17 0 44 6 58 10 22 10 28 -6 40 -18
12 -18 19 -6 111 7 54 12 128 11 164 -2 45 2 71 11 79 8 8 12 31 10 64 -2 28
4 108 13 176 9 69 19 159 21 200 5 105 42 500 55 590 44 306 128 571 208 658
24 26 29 37 22 55 -18 47 -30 50 -166 37 -69 -7 -146 -10 -172 -6 -29 4 -51 2
-60 -6 -19 -15 -213 -24 -213 -10 0 11 -68 62 -82 62 -4 0 -22 -13 -40 -28z
m416 -138 c8 -3 13 -11 11 -17 -2 -7 -6 -52 -9 -101 -3 -49 -7 -91 -9 -92 -2
-2 -9 29 -16 69 -6 39 -18 83 -26 97 -8 14 -14 31 -15 38 0 12 37 16 64 6z"/>
<path d="M2026 4021 c-3 -5 -10 -73 -16 -152 -6 -79 -15 -160 -21 -179 -5 -19
-16 -156 -24 -305 -43 -769 -92 -1280 -151 -1578 -30 -155 -36 -170 -80 -224
-67 -82 -138 -133 -246 -176 -109 -45 -125 -62 -92 -98 21 -24 72 -25 169 -3
87 19 217 21 450 5 266 -18 542 -19 588 -3 31 12 37 18 37 43 0 25 -7 32 -47
52 -39 18 -59 39 -110 112 -127 184 -236 437 -287 666 -49 218 -51 313 -28
1069 l20 685 -24 33 c-38 50 -121 82 -138 53z m52 -2214 c23 -63 42 -121 42
-130 0 -21 -20 -21 -65 -3 -49 21 -65 59 -65 161 0 82 1 85 23 85 19 0 28 -15
65 -113z"/>
<path d="M3392 3958 c-44 -86 -49 -144 -30 -348 11 -118 10 -129 -10 -190 -56
-169 -75 -369 -62 -628 10 -179 34 -447 49 -542 6 -36 4 -66 -5 -96 -7 -23
-16 -87 -19 -141 -14 -192 -49 -301 -140 -428 -52 -73 -170 -185 -195 -185
-10 0 -47 -9 -83 -20 -100 -31 -138 -93 -77 -125 49 -25 109 -28 170 -8 49 16
80 17 290 12 240 -5 285 -1 295 31 5 15 18 18 87 19 45 1 84 4 88 6 3 2 71 -6
150 -17 l144 -21 18 23 c36 44 18 61 -84 80 -27 5 -62 17 -80 26 -49 25 -123
99 -169 170 -39 61 -43 74 -66 212 -88 556 -140 1078 -150 1518 l-6 272 32 7
c34 7 40 25 14 46 -31 26 -54 97 -59 187 -3 48 -7 97 -10 109 -10 52 -71 72
-92 31z m62 -2411 c20 -119 20 -117 -4 -88 -17 19 -20 38 -20 109 0 47 2 83 4
81 3 -2 12 -48 20 -102z m186 -69 c21 -23 27 -58 10 -58 -5 0 -12 11 -16 24
-3 14 -12 27 -20 30 -16 6 -19 26 -4 26 5 0 18 -10 30 -22z m-470 -98 c0 -5
-7 -10 -16 -10 -8 0 -12 5 -9 10 3 6 10 10 16 10 5 0 9 -4 9 -10z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

19
docs/site.webmanifest Normal file
View File

@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

6
src/Core/App.js
View File

@ -12,13 +12,11 @@ export default IUI.module(class App extends IUIElement {
} }
created() { created() {
this.updateBindings(); IUI.bind(this, this, "/");
//IUIElement._make_bindings(this);
this.render(); this.render();
this._emit("load", { app: this }); this._emit("load", { app: this });
this.loaded = true; this.loaded = true;
} }
}); });

18
src/Core/Binding.js
View File

@ -1,4 +1,5 @@
import IUIElement from "./IUIElement.js"; import IUIElement from "./IUIElement.js";
import { IUI } from "./IUI.js";
export const BindingType = { export const BindingType = {
IUIElement: 0, // this will never happen ! IUIElement: 0, // this will never happen !
@ -260,7 +261,10 @@ export class Binding {
} }
// Content Attribute // Content Attribute
else if (this.type == BindingType.ContentAttribute) { else if (this.type == BindingType.ContentAttribute) {
let d = await this._execute(this.target.ownerElement, data);
let targetElement = this.target.ownerElement;
let d = await this._execute(targetElement, data);
if (d === undefined) if (d === undefined)
return false; return false;
@ -268,7 +272,17 @@ export class Binding {
//if (d instanceof Promise) //if (d instanceof Promise)
// d = await d; // d = await d;
this.target.ownerElement.innerHTML = d; targetElement.innerHTML = d;
if (window?.app?.loaded)
{
await IUI.create(targetElement);
await IUI.created(targetElement);
IUI.bind(targetElement, targetElement, "content");
await IUI.render(targetElement, targetElement._data, true);
}
//await IUI.updateTree(targetElement);
} }
else if (this.type == BindingType.IfAttribute) else if (this.type == BindingType.IfAttribute)
{ {

188
src/Core/IUI.js
View File

@ -1,7 +1,16 @@
import IUIElement from "./IUIElement.js"; import IUIElement from "./IUIElement.js";
import { Binding, BindingType } from "./Binding.js";
//import Route from '../Router/Route.js';
export const IUI = {
format: function (input) { export class IUI {
static _menus = [];
static views = [];
static modules = {};
static registry = [];
static format(input) {
if (typeof input == "string" || input instanceof String) { if (typeof input == "string" || input instanceof String) {
let template = document.createElement("template"); let template = document.createElement("template");
template.innerHTML = input; template.innerHTML = input;
@ -14,12 +23,9 @@ export const IUI = {
return [input]; return [input];
else else
return []; return [];
}, }
_menus: [],
views: [], static observer = new IntersectionObserver(function(entries) {
modules: {},
registry : [],
observer: new IntersectionObserver(function(entries) {
// isIntersecting is true when element and viewport are overlapping // isIntersecting is true when element and viewport are overlapping
// isIntersecting is false when element and viewport don't overlap // isIntersecting is false when element and viewport don't overlap
for(var i = 0; i < entries.length; i++) for(var i = 0; i < entries.length; i++)
@ -31,8 +37,10 @@ export const IUI = {
} }
} }
}, { threshold: [0] }), }, { threshold: [0] });
created: async function (element) {
static async created (element) {
for (var i = 0; i < element.children.length; i++) { for (var i = 0; i < element.children.length; i++) {
let e = element.children[i]; let e = element.children[i];
@ -40,15 +48,15 @@ export const IUI = {
await e.created(); await e.created();
await IUI.created(e); await IUI.created(e);
} }
}, }
create: async function(element)
static async create(element)
{ {
for (let i = 0; i < element.children.length; i++) { for (let i = 0; i < element.children.length; i++) {
let e = element.children[i]; let e = element.children[i];
if (e instanceof IUIElement) { if (e instanceof IUIElement) {
await e.create(); await e.create();
// e.updateBindings();
} }
await IUI.create(e); await IUI.create(e);
@ -73,8 +81,9 @@ export const IUI = {
// //await IUI.registry[i].updateAttributes(); // //await IUI.registry[i].updateAttributes();
//} //}
//return; //return;
}, }
get : function(o)
static get(o)
{ {
return document.getElementById(o); return document.getElementById(o);
@ -82,12 +91,14 @@ export const IUI = {
// if (IUI.registry[i].id == o) // if (IUI.registry[i].id == o)
// return IUI.registry[i]; // return IUI.registry[i];
//return null; //return null;
}, }
put: function(o)
static put(o)
{ {
IUI.registry.push(o); IUI.registry.push(o);
}, }
remove: function(id)
static remove(id)
{ {
for(var i = 0; i < IUI.registry.length; i++) for(var i = 0; i < IUI.registry.length; i++)
if (IUI.registry[i].el.id == id) if (IUI.registry[i].el.id == id)
@ -95,8 +106,9 @@ export const IUI = {
IUI.registry.splice(i, 1); IUI.registry.splice(i, 1);
break; break;
} }
}, }
module: function(objectClass)
static module(objectClass)
{ {
let moduleName = objectClass.moduleName; let moduleName = objectClass.moduleName;
@ -110,8 +122,9 @@ export const IUI = {
} }
return objectClass; return objectClass;
}, }
extend: function(properties, defaults, force)
static extend(properties, defaults, force)
{ {
if (properties == null) if (properties == null)
properties = defaults; properties = defaults;
@ -123,6 +136,135 @@ export const IUI = {
properties[i] = defaults[i]; properties[i] = defaults[i];
return properties; return properties;
} }
static bind(element, rootElement, sourcePath){
// ::Attribute
// : Field
// async:: Async Attribute
// async: Async Field
// @ Event
// skip element ?
if (element.hasAttribute("skip")
|| element instanceof HTMLTemplateElement)
return;
// tags to skip
//if (element instanceof HTMLScriptElement )
//return;
if (rootElement == null)
rootElement = element;
let bindings;
if (element != rootElement)
{
element.view = rootElement.view;
element.route = rootElement.route;
bindings = [];
// compile attributes
for (var i = 0; i < element.attributes.length; i++) {
let b = Binding.create(element.attributes[i]);
if (b != null) {
if (b.type == BindingType.HTMLElementDataAttribute
|| b.type == BindingType.IUIElementDataAttribute)
element.dataMap = b;
else if (b.type == BindingType.RevertAttribute)
element.revertMap = b;
else
bindings.push(b);
}
}
// add reference
if (element.hasAttribute("ref")) {
rootElement.refs[el.getAttribute("ref")] = element;
}
}
else
{
// remove previous text node bindings
bindings = element.bindings == null ? [] : element.bindings.filter(x=> x.type != BindingType.TextNode);
element.refs = {};
}
// compile nodes
for (var i = 0; i < element.childNodes.length; i++) {
let el = element.childNodes[i];
if (el instanceof IUIElement) {
// @TODO: check if the IUI element handles the binding
IUI.bind(el, rootElement, sourcePath);
}
else if (el instanceof HTMLElement) {
IUI.bind(el, rootElement, sourcePath);
}
else if (el instanceof Text) {
let b = Binding.create(el);
if (b != null)
bindings.push(b);
}
else if (el instanceof HTMLScriptElement)
{
// this because HTML parser don't evaluate script tag
let func = new Function("//# sourceURL=iui://" + sourcePath + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());
let rt = func.call(el.parentElement);
if (typeof (rt) === "object") {
for (var k in rt)
el.parentElement[k] = rt[k];
}
}
}
element.bindings = bindings;
}
static async render(element, data, textNodesOnly = false) {
if (!element.bindings) {
return;
}
if (textNodesOnly) {
for (var i = 0; i < element.bindings.length; i++)
if (element.bindings[i].type == BindingType.TextNode)
await element.bindings[i].render(data);
} else {
// render attributes & text nodes
for (var i = 0; i < element.bindings.length; i++)
await element.bindings[i].render(data);
}
// render children
for (var i = 0; i < element.children.length; i++) {
let el = element.children[i];
if (el instanceof IUIElement)
// @TODO should check if the element depends on parent or not
if (el.dataMap != null) {
// if map function failed to call setData, we will render without it
if (!(await el.dataMap.render(data)))
await el.render();
}
else
await el.setData(data);
else {
if (el.dataMap != null)
await el.dataMap.render(data);
else
el.data = data;
//let data = e.mapData(data);
await IUI.render(el, el.data);
}
}
}
}; };
export function iui(selector) export function iui(selector)

55
src/Core/IUIElement.js
View File

@ -40,7 +40,8 @@ export default class IUIElement extends HTMLElement {
} }
async render() { async render() {
await this._renderElement(this, this._data); await IUI.render(this, this._data);
//await IUIElement._renderElement(this, this._data);
} }
_getParentData() { _getParentData() {
@ -54,15 +55,9 @@ export default class IUIElement extends HTMLElement {
} }
async setData(value) { async setData(value) {
//if (this.bindings === undefined)
// this.updateBindings();
this._data = value; this._data = value;
this._emit("data", {data: value}); this._emit("data", {data: value});
await this._renderElement(this, value); await IUIElement._renderElement(this, value);
//console.log("IUI: SetData", value, this.tagName);
} }
get data() { get data() {
@ -106,7 +101,7 @@ export default class IUIElement extends HTMLElement {
} }
} }
async _renderElement(element, data) { static async _renderElement(element, data) {
if (!element.bindings) { if (!element.bindings) {
return; return;
} }
@ -134,7 +129,7 @@ export default class IUIElement extends HTMLElement {
e.data = data; e.data = data;
//let data = e.mapData(data); //let data = e.mapData(data);
await this._renderElement(e, e.data); await IUIElement._renderElement(e, e.data);
} }
} }
} }
@ -183,7 +178,7 @@ export default class IUIElement extends HTMLElement {
} }
create() { create() {
//this.updateBindings();
} }
destroy() { destroy() {
@ -196,7 +191,7 @@ export default class IUIElement extends HTMLElement {
_make_bindings(element) { static _make_bindings(element, isRoot = false) {
// ::Attribute // ::Attribute
// : Field // : Field
@ -205,6 +200,10 @@ export default class IUIElement extends HTMLElement {
// @ Event // @ Event
// skip element ?
if (element.hasAttribute("skip"))
return;
// tags to skip // tags to skip
if (element instanceof HTMLScriptElement if (element instanceof HTMLScriptElement
|| element instanceof HTMLTemplateElement) || element instanceof HTMLTemplateElement)
@ -213,19 +212,22 @@ export default class IUIElement extends HTMLElement {
let bindings = []; let bindings = [];
// compile attributes if (!isRoot)
for (var i = 0; i < element.attributes.length; i++) { {
// compile attributes
for (var i = 0; i < element.attributes.length; i++) {
let b = Binding.create(element.attributes[i]); let b = Binding.create(element.attributes[i]);
if (b != null) { if (b != null) {
if (b.type == BindingType.HTMLElementDataAttribute if (b.type == BindingType.HTMLElementDataAttribute
|| b.type == BindingType.IUIElementDataAttribute) || b.type == BindingType.IUIElementDataAttribute)
element.dataMap = b; element.dataMap = b;
else if (b.type == BindingType.RevertAttribute) else if (b.type == BindingType.RevertAttribute)
element.revertMap = b; element.revertMap = b;
else else
bindings.push(b); bindings.push(b);
}
} }
} }
@ -234,10 +236,10 @@ export default class IUIElement extends HTMLElement {
let e = element.childNodes[i]; let e = element.childNodes[i];
if (e instanceof IUIElement) { if (e instanceof IUIElement) {
// @TODO: check if the IUI element handles the binding // @TODO: check if the IUI element handles the binding
this._make_bindings(e); IUIElement._make_bindings(e);
} }
else if (e instanceof HTMLElement) { else if (e instanceof HTMLElement) {
this._make_bindings(e); IUIElement._make_bindings(e);
} }
else if (e instanceof Text) { else if (e instanceof Text) {
let b = Binding.create(e); let b = Binding.create(e);
@ -268,9 +270,6 @@ export default class IUIElement extends HTMLElement {
} }
} }
updateBindings() {
this._make_bindings(this);
}
_encapsulateEvent(code){ _encapsulateEvent(code){
return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`; return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`;

77
src/Data/Include.js
View File

@ -39,43 +39,56 @@ export default IUI.module(class Include extends IUIElement
//let xeval = (code) => eval(code); //let xeval = (code) => eval(code);
// call create for the new elements if (window?.app?.loaded)
var newElements = this.querySelectorAll("*"); {
for (var i = 0; i < newElements.length; i++) { await IUI.create(this);
var el = newElements[i]; await IUI.created(this);
IUI.bind(this, this, "include:" + src);
// set route for all elements await IUI.render(this, this._data, true);
//newElements[i].route = this.route;
el.route = this.route;
el.view = this;
if (el.hasAttribute("ref")) {
this.refs[el.getAttribute("ref")] = el;
}
if (el instanceof HTMLScriptElement) {
// this because HTML parser don't evaluate script tag
let func = new Function("//# sourceURL=iui://" + src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());// "return " + el.text + ";");
let rt = func.call(el.parentElement);
//let rt = xeval.call(el.parentElement, "//# sourceURL=iui://" + src + Math.round(Math.random() * 10000) + "\r\n (" + el.text + ")");
if (typeof (rt) === "object") {
for (var k in rt)
el.parentElement[k] = rt[k];
}
}
} }
// // call create for the new elements
// var newElements = this.querySelectorAll("*");
// for (var i = 0; i < newElements.length; i++) {
// var el = newElements[i];
// // set route for all elements
// //newElements[i].route = this.route;
// el.route = this.route;
// el.view = this;
// if (el.hasAttribute("ref")) {
// this.refs[el.getAttribute("ref")] = el;
// }
// if (el instanceof HTMLScriptElement) {
// // this because HTML parser don't evaluate script tag
// let func = new Function("//# sourceURL=iui://" + src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());// "return " + el.text + ";");
// let rt = func.call(el.parentElement);
// //let rt = xeval.call(el.parentElement, "//# sourceURL=iui://" + src + Math.round(Math.random() * 10000) + "\r\n (" + el.text + ")");
// if (typeof (rt) === "object") {
// for (var k in rt)
// el.parentElement[k] = rt[k];
// }
// }
// }
} }
this.classList.remove(this.cssClass + "-loading"); this.classList.remove(this.cssClass + "-loading");
if (window?.app?.loaded) // if (window?.app?.loaded)
{ // {
await IUI.create(this); // await IUI.create(this);
await IUI.created(this); // await IUI.created(this);
this.updateBindings();
await this.render(); // for(let i = 0; i < this.children.length; i++)
} // {
// let el = this.children[i];
// IUIElement._make_bindings(el);
// await IUIElement._renderElement(el, el._data);
// }
// }
this._loading = false; this._loading = false;
} }

7
src/Data/Repeat.js
View File

@ -190,7 +190,8 @@ export default IUI.module(class Repeat extends IUIElement
//console.log("ST4"); //console.log("ST4");
this._make_bindings(e) //this._make_bindings(e)
IUI.bind(e, this, "repeat");
this._container.insertBefore(e, this._beforeNode); this._container.insertBefore(e, this._beforeNode);
this._assign(e, i);// { view: this.view, route: this.route, index: i }); this._assign(e, i);// { view: this.view, route: this.route, index: i });
@ -260,9 +261,7 @@ export default IUI.module(class Repeat extends IUIElement
} }
//super._uiBindings = null;
//super.updateBindings();
// @TODO: check if this works for event names starting with ":" // @TODO: check if this works for event names starting with ":"
this._emit(":data", { data: value }); this._emit(":data", { data: value });
// this._emit("modified", { data: value, property: "data" }); // this._emit("modified", { data: value, property: "data" });

78
src/Router/Route.js
View File

@ -80,6 +80,13 @@ export default IUI.module(class Route extends IUIElement {
return null; return null;
} }
// get route() {
// return this;
// }
// get view() {
// return this;
// }
async create() { async create() {
@ -100,41 +107,52 @@ export default IUI.module(class Route extends IUIElement {
//let xeval = (code) => eval(code); //let xeval = (code) => eval(code);
} }
// call create for the new elements
var newElements = this.querySelectorAll("*");
for (var i = 0; i < newElements.length; i++) {
// set route for all elements
var el = newElements[i];
// newElements[i].route = this;
el.view = this;
el.route = this;
if (el.hasAttribute("ref")) { if (window?.app?.loaded)
this.refs[el.getAttribute("ref")] = el; {
} await IUI.create(this);
await IUI.created(this);
IUI.bind(this, this, "route:" + src);
if (el instanceof HTMLScriptElement) { await IUI.render(this, this._data, true);
// this because HTML parsers don't evaluate script tag
// xeval.call(el.parentElement, "//# sourceURL=iui://" + src + "\r\n" + el.text);
//let func = new Function("//# sourceURL=iui://" +
// src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());
let func = new Function("//# sourceURL=iui://" + this.link
+ "\r\n return " + el.text.trim());
let rt = func.call(el.parentElement);
if (typeof (rt) === "object") {
for (var k in rt)
el.parentElement[k] = rt[k];
}
}
} }
// // call create for the new elements
// var newElements = this.querySelectorAll("*");
// for (var i = 0; i < newElements.length; i++) {
// // set route for all elements
// var el = newElements[i];
// // newElements[i].route = this;
// el.view = this;
// el.route = this;
// if (el.hasAttribute("ref")) {
// this.refs[el.getAttribute("ref")] = el;
// }
// if (el instanceof HTMLScriptElement) {
// // this because HTML parsers don't evaluate script tag
// // xeval.call(el.parentElement, "//# sourceURL=iui://" + src + "\r\n" + el.text);
// //let func = new Function("//# sourceURL=iui://" +
// // src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());
// let func = new Function("//# sourceURL=iui://" + this.link
// + "\r\n return " + el.text.trim());
// let rt = func.call(el.parentElement);
// if (typeof (rt) === "object") {
// for (var k in rt)
// el.parentElement[k] = rt[k];
// }
// }
// }
} }
created() { created()
//this.updateBindings(); {
} }
set(value) { set(value) {

68
src/UI/CodePreview.js Normal file
View File

@ -0,0 +1,68 @@
import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js";
export default IUI.module(class CodePreview extends IUIElement {
constructor(properties) {
super();
}
async create() {
if (this.hasAttribute("debug"))
debugger;
this._code = this.innerHTML;
this.textContent = '';
// create elements
this.bar = document.createElement("div");
this.bar.className = this.cssClass + "-bar";
this.content = document.createElement("div");
this.content.className = this.cssClass + "-content";
this.editor = document.createElement("code");
this.editor.className = this.cssClass + "-editor";
this.editor.innerText = this._code;
this.editor.contentEditable = true;
this.editor.setAttribute("skip", true);
let self = this;
this.editor.addEventListener("input", function() {
self._code = self.editor.innerText;
self.update();
}, false);
this.preview = document.createElement("div");
this.preview.className = this.cssClass + "-preview";
//this.preview.setAttribute(":content", "");
this.content.append(this.editor);
this.content.append(this.preview);
this.append(this.bar);
this.append(this.content);
this.field = this.getAttribute("field");
await this.update();
}
async update() {
if (this._updating)
return;
this._updating = true;
this.preview.innerHTML = this._code;
await IUI.create(this.preview);
await IUI.created(this.preview);
IUI.bind(this.preview, this.preview, "preview");
await IUI.render(this.preview, this._data, true);
this._updating = false;
}
});

39
src/UI/Location.js Normal file
View File

@ -0,0 +1,39 @@
import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js";
import Link from '../Router/Link.js';
export default IUI.module(class Location extends IUIElement {
constructor() {
super();
}
create() {
let self = this;
window.router.on("route", (e) => {
self.textContent = ''; // clear everything
let html = "";
let route = e.route;
var current = document.createElement("div");
current.innerHTML = route.caption;
self.append(current);
while (route = route.parent) {
var sep = document.createElement("span");
self.prepend(sep);
let link = new Link();
link.link = route.link;
link.innerHTML = route.caption;
self.prepend(link);
}
});
}
});

30
src/UI/Select.js
View File

@ -220,10 +220,13 @@ export default IUI.module(class Select extends IUIElement {
app.appendChild(this.menu); app.appendChild(this.menu);
if (app.loaded) if (app.loaded)
{ {
///console.log("Append", this.menu); ///console.log("Append", this.menu);
await this.menu.create(); await this.menu.create();
IUI.bind(this.menu, this, "menu");
await IUI.create(this.menu); await IUI.create(this.menu);
this._make_bindings(this.menu);
//this._make_bindings(this.menu);
} }
} }
@ -313,30 +316,7 @@ export default IUI.module(class Select extends IUIElement {
await this.menu.setData(res); await this.menu.setData(res);
// show results
//self.menu.clear();
// for (var i = 0; i < res.length; i++) {
// let nodes = this.template.content.cloneNode(true).childNodes;
// while (nodes.length > 0) {
// let n = nodes[0];
// if (n instanceof HTMLElement)
// n.setAttribute(":data", `d[${i}]`);
// self.menu.appendChild(n);
// }
// }
// self.menu.updateBindings();
//self.menu.setData(res);
//}).catch(x => {
//});
} }

8
src/UI/TabbedTarget.js
View File

@ -131,9 +131,7 @@ export default IUI.module(class TabbedTarget extends Target {
this._body.append(item); this._body.append(item);
//this._bar.appendChild(label);
//this._bar.insertAdjacentElement("afterBegin", label);
this.list.push(item); this.list.push(item);
var self = this; var self = this;
label.on("check", function (v) { label.on("check", function (v) {
@ -141,9 +139,7 @@ export default IUI.module(class TabbedTarget extends Target {
self.select(item); self.select(item);
}); });
//this._updateSize();
//this.updateBindings();
if (item.selected) if (item.selected)
this.select(item); this.select(item);

5
src/UI/Table.js
View File

@ -907,7 +907,10 @@ export default IUI.module(class Table extends IUIElement {
let cl = column.node.cloneNode(true);// tr.insertCell(); let cl = column.node.cloneNode(true);// tr.insertCell();
this._make_bindings(cl) //this._make_bindings(cl)
IUI.bind(cl, this, "table");
tr.appendChild(cl); tr.appendChild(cl);
if (cl.dataMap != null) if (cl.dataMap != null)

8
src/UI/Tabs.js
View File

@ -132,9 +132,7 @@ export default IUI.module(class Tabs extends IUIElement {
this._body.append(item); this._body.append(item);
//this._bar.appendChild(label);
//this._bar.insertAdjacentElement("afterBegin", label);
this.list.push(item); this.list.push(item);
var self = this; var self = this;
label.on("check", function (v) { label.on("check", function (v) {
@ -142,9 +140,7 @@ export default IUI.module(class Tabs extends IUIElement {
self.select(item); self.select(item);
}); });
//this._updateSize();
//this.updateBindings();
if (item.selected) if (item.selected)
this.select(item); this.select(item);

1
src/UI/Window.js
View File

@ -42,7 +42,6 @@ export default IUI.module(class IUIWindow extends IUIElement {
this.insertAdjacentElement("afterBegin", this._body); this.insertAdjacentElement("afterBegin", this._body);
//super.updateBindings();
} }
else else
this._body = b[0]; this._body = b[0];

2
src/iui.js
View File

@ -38,6 +38,8 @@ import './UI/Select.js';
import './UI/DropDown.js'; import './UI/DropDown.js';
import './UI/Grid.js'; import './UI/Grid.js';
import './UI/Location.js';
import './UI/CodePreview.js';
window.addEventListener("beforeprint", (e)=>{ window.addEventListener("beforeprint", (e)=>{
let viewRoute = router.current.viewRoute; let viewRoute = router.current.viewRoute;