mirror of
https://github.com/esiur/iui.git
synced 2025-05-06 06:42:58 +00:00
docs
This commit is contained in:
parent
1e8ae99d39
commit
b3479dbdbd
94
css/iui.css
94
css/iui.css
@ -2778,7 +2778,7 @@ html[dir='rtl'] .multiselect-list-remove {
|
||||
margin: 6px;
|
||||
background-image: var(--search);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 25px;
|
||||
background-size: 19px;
|
||||
background-position: 2px 50%;
|
||||
padding-left: 30px;
|
||||
}
|
||||
@ -2797,12 +2797,31 @@ html[dir='rtl'] .multiselect-list-remove {
|
||||
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
|
||||
{
|
||||
overflow: auto;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.navbar-item > i-link
|
||||
{
|
||||
display: flex;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
.navbar-item > i-link > span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar i-link > span > span,
|
||||
.sitebar i-link > span > span
|
||||
@ -2812,6 +2831,9 @@ html[dir='rtl'] .multiselect-list-remove {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.navbar-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
@ -2879,7 +2901,14 @@ html[dir='rtl'] .multiselect-list-remove {
|
||||
|
||||
.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-position: 0px 48%;
|
||||
background-repeat: no-repeat;
|
||||
@ -2888,8 +2917,8 @@ html[dir='rtl'] .multiselect-list-remove {
|
||||
align-self: stretch;
|
||||
background-color: #d6d6d6;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
border-bottom-left-radius: 10px; */
|
||||
|
||||
|
||||
.sitebar-container i-check
|
||||
{
|
||||
@ -3009,3 +3038,60 @@ html[dir='rtl'] .multiselect-list-remove {
|
||||
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
BIN
docs/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
docs/android-chrome-512x512.png
Normal file
BIN
docs/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
docs/apple-touch-icon.png
Normal file
BIN
docs/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
9
docs/browserconfig.xml
Normal file
9
docs/browserconfig.xml
Normal 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
BIN
docs/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 546 B |
BIN
docs/favicon-32x32.png
Normal file
BIN
docs/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 871 B |
BIN
docs/favicon.ico
Normal file
BIN
docs/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/img/logo.png
Normal file
BIN
docs/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
112
docs/index.html
Normal file
112
docs/index.html
Normal 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
16
docs/js/docs.js
Normal 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
17
docs/md/getting-started.md
Normal 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
12
docs/md/getting-started/data-flow.md
Normal 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
51
docs/md/getting-started/declarative.md
Normal 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
14
docs/md/getting-started/first.md
Normal 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
15
docs/md/getting-started/install.md
Normal 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
1
docs/md/hello.md
Normal file
@ -0,0 +1 @@
|
||||
Hello World !
|
||||
BIN
docs/mstile-150x150.png
Normal file
BIN
docs/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
73
docs/safari-pinned-tab.svg
Normal file
73
docs/safari-pinned-tab.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
19
docs/site.webmanifest
Normal file
19
docs/site.webmanifest
Normal 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"
|
||||
}
|
||||
@ -12,13 +12,11 @@ export default IUI.module(class App extends IUIElement {
|
||||
}
|
||||
|
||||
created() {
|
||||
this.updateBindings();
|
||||
IUI.bind(this, this, "/");
|
||||
//IUIElement._make_bindings(this);
|
||||
this.render();
|
||||
this._emit("load", { app: this });
|
||||
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
@ -1,4 +1,5 @@
|
||||
import IUIElement from "./IUIElement.js";
|
||||
import { IUI } from "./IUI.js";
|
||||
|
||||
export const BindingType = {
|
||||
IUIElement: 0, // this will never happen !
|
||||
@ -260,7 +261,10 @@ export class Binding {
|
||||
}
|
||||
// Content Attribute
|
||||
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)
|
||||
return false;
|
||||
@ -268,7 +272,17 @@ export class Binding {
|
||||
//if (d instanceof Promise)
|
||||
// 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)
|
||||
{
|
||||
|
||||
188
src/Core/IUI.js
188
src/Core/IUI.js
@ -1,7 +1,16 @@
|
||||
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) {
|
||||
let template = document.createElement("template");
|
||||
template.innerHTML = input;
|
||||
@ -14,12 +23,9 @@ export const IUI = {
|
||||
return [input];
|
||||
else
|
||||
return [];
|
||||
},
|
||||
_menus: [],
|
||||
views: [],
|
||||
modules: {},
|
||||
registry : [],
|
||||
observer: new IntersectionObserver(function(entries) {
|
||||
}
|
||||
|
||||
static observer = new IntersectionObserver(function(entries) {
|
||||
// isIntersecting is true when element and viewport are overlapping
|
||||
// isIntersecting is false when element and viewport don't overlap
|
||||
for(var i = 0; i < entries.length; i++)
|
||||
@ -31,8 +37,10 @@ export const IUI = {
|
||||
}
|
||||
}
|
||||
|
||||
}, { threshold: [0] }),
|
||||
created: async function (element) {
|
||||
}, { threshold: [0] });
|
||||
|
||||
|
||||
static async created (element) {
|
||||
|
||||
for (var i = 0; i < element.children.length; i++) {
|
||||
let e = element.children[i];
|
||||
@ -40,15 +48,15 @@ export const IUI = {
|
||||
await e.created();
|
||||
await IUI.created(e);
|
||||
}
|
||||
},
|
||||
create: async function(element)
|
||||
}
|
||||
|
||||
static async create(element)
|
||||
{
|
||||
|
||||
for (let i = 0; i < element.children.length; i++) {
|
||||
let e = element.children[i];
|
||||
if (e instanceof IUIElement) {
|
||||
await e.create();
|
||||
// e.updateBindings();
|
||||
}
|
||||
|
||||
await IUI.create(e);
|
||||
@ -73,8 +81,9 @@ export const IUI = {
|
||||
// //await IUI.registry[i].updateAttributes();
|
||||
//}
|
||||
//return;
|
||||
},
|
||||
get : function(o)
|
||||
}
|
||||
|
||||
static get(o)
|
||||
{
|
||||
return document.getElementById(o);
|
||||
|
||||
@ -82,12 +91,14 @@ export const IUI = {
|
||||
// if (IUI.registry[i].id == o)
|
||||
// return IUI.registry[i];
|
||||
//return null;
|
||||
},
|
||||
put: function(o)
|
||||
}
|
||||
|
||||
static put(o)
|
||||
{
|
||||
IUI.registry.push(o);
|
||||
},
|
||||
remove: function(id)
|
||||
}
|
||||
|
||||
static remove(id)
|
||||
{
|
||||
for(var i = 0; i < IUI.registry.length; i++)
|
||||
if (IUI.registry[i].el.id == id)
|
||||
@ -95,8 +106,9 @@ export const IUI = {
|
||||
IUI.registry.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
},
|
||||
module: function(objectClass)
|
||||
}
|
||||
|
||||
static module(objectClass)
|
||||
{
|
||||
let moduleName = objectClass.moduleName;
|
||||
|
||||
@ -110,8 +122,9 @@ export const IUI = {
|
||||
}
|
||||
|
||||
return objectClass;
|
||||
},
|
||||
extend: function(properties, defaults, force)
|
||||
}
|
||||
|
||||
static extend(properties, defaults, force)
|
||||
{
|
||||
if (properties == null)
|
||||
properties = defaults;
|
||||
@ -123,6 +136,135 @@ export const IUI = {
|
||||
properties[i] = defaults[i];
|
||||
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)
|
||||
|
||||
@ -40,7 +40,8 @@ export default class IUIElement extends HTMLElement {
|
||||
}
|
||||
|
||||
async render() {
|
||||
await this._renderElement(this, this._data);
|
||||
await IUI.render(this, this._data);
|
||||
//await IUIElement._renderElement(this, this._data);
|
||||
}
|
||||
|
||||
_getParentData() {
|
||||
@ -54,15 +55,9 @@ export default class IUIElement extends HTMLElement {
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
//if (this.bindings === undefined)
|
||||
// this.updateBindings();
|
||||
|
||||
|
||||
this._data = value;
|
||||
this._emit("data", {data: value});
|
||||
await this._renderElement(this, value);
|
||||
|
||||
//console.log("IUI: SetData", value, this.tagName);
|
||||
await IUIElement._renderElement(this, value);
|
||||
}
|
||||
|
||||
get data() {
|
||||
@ -106,7 +101,7 @@ export default class IUIElement extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
async _renderElement(element, data) {
|
||||
static async _renderElement(element, data) {
|
||||
if (!element.bindings) {
|
||||
return;
|
||||
}
|
||||
@ -134,7 +129,7 @@ export default class IUIElement extends HTMLElement {
|
||||
e.data = 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() {
|
||||
//this.updateBindings();
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
@ -196,7 +191,7 @@ export default class IUIElement extends HTMLElement {
|
||||
|
||||
|
||||
|
||||
_make_bindings(element) {
|
||||
static _make_bindings(element, isRoot = false) {
|
||||
|
||||
// ::Attribute
|
||||
// : Field
|
||||
@ -205,6 +200,10 @@ export default class IUIElement extends HTMLElement {
|
||||
// @ Event
|
||||
|
||||
|
||||
// skip element ?
|
||||
if (element.hasAttribute("skip"))
|
||||
return;
|
||||
|
||||
// tags to skip
|
||||
if (element instanceof HTMLScriptElement
|
||||
|| element instanceof HTMLTemplateElement)
|
||||
@ -213,19 +212,22 @@ export default class IUIElement extends HTMLElement {
|
||||
let bindings = [];
|
||||
|
||||
|
||||
// compile attributes
|
||||
for (var i = 0; i < element.attributes.length; i++) {
|
||||
if (!isRoot)
|
||||
{
|
||||
// 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.type == BindingType.HTMLElementDataAttribute
|
||||
|| b.type == BindingType.IUIElementDataAttribute)
|
||||
element.dataMap = b;
|
||||
else if (b.type == BindingType.RevertAttribute)
|
||||
element.revertMap = b;
|
||||
else
|
||||
bindings.push(b);
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -234,10 +236,10 @@ export default class IUIElement extends HTMLElement {
|
||||
let e = element.childNodes[i];
|
||||
if (e instanceof IUIElement) {
|
||||
// @TODO: check if the IUI element handles the binding
|
||||
this._make_bindings(e);
|
||||
IUIElement._make_bindings(e);
|
||||
}
|
||||
else if (e instanceof HTMLElement) {
|
||||
this._make_bindings(e);
|
||||
IUIElement._make_bindings(e);
|
||||
}
|
||||
else if (e instanceof Text) {
|
||||
let b = Binding.create(e);
|
||||
@ -268,9 +270,6 @@ export default class IUIElement extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
updateBindings() {
|
||||
this._make_bindings(this);
|
||||
}
|
||||
|
||||
_encapsulateEvent(code){
|
||||
return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`;
|
||||
|
||||
@ -39,43 +39,56 @@ export default IUI.module(class Include extends IUIElement
|
||||
|
||||
//let xeval = (code) => eval(code);
|
||||
|
||||
// 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];
|
||||
}
|
||||
}
|
||||
if (window?.app?.loaded)
|
||||
{
|
||||
await IUI.create(this);
|
||||
await IUI.created(this);
|
||||
IUI.bind(this, this, "include:" + src);
|
||||
await IUI.render(this, this._data, true);
|
||||
}
|
||||
|
||||
// // 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");
|
||||
|
||||
if (window?.app?.loaded)
|
||||
{
|
||||
await IUI.create(this);
|
||||
await IUI.created(this);
|
||||
this.updateBindings();
|
||||
await this.render();
|
||||
}
|
||||
// if (window?.app?.loaded)
|
||||
// {
|
||||
// await IUI.create(this);
|
||||
// await IUI.created(this);
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
@ -190,7 +190,8 @@ export default IUI.module(class Repeat extends IUIElement
|
||||
|
||||
//console.log("ST4");
|
||||
|
||||
this._make_bindings(e)
|
||||
//this._make_bindings(e)
|
||||
IUI.bind(e, this, "repeat");
|
||||
this._container.insertBefore(e, this._beforeNode);
|
||||
|
||||
this._assign(e, i);// { view: this.view, route: this.route, index: i });
|
||||
@ -260,8 +261,6 @@ export default IUI.module(class Repeat extends IUIElement
|
||||
}
|
||||
|
||||
|
||||
//super._uiBindings = null;
|
||||
//super.updateBindings();
|
||||
|
||||
// @TODO: check if this works for event names starting with ":"
|
||||
this._emit(":data", { data: value });
|
||||
|
||||
@ -80,6 +80,13 @@ export default IUI.module(class Route extends IUIElement {
|
||||
return null;
|
||||
}
|
||||
|
||||
// get route() {
|
||||
// return this;
|
||||
// }
|
||||
|
||||
// get view() {
|
||||
// return this;
|
||||
// }
|
||||
|
||||
async create() {
|
||||
|
||||
@ -100,41 +107,52 @@ export default IUI.module(class Route extends IUIElement {
|
||||
//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")) {
|
||||
this.refs[el.getAttribute("ref")] = el;
|
||||
}
|
||||
if (window?.app?.loaded)
|
||||
{
|
||||
await IUI.create(this);
|
||||
await IUI.created(this);
|
||||
IUI.bind(this, this, "route:" + src);
|
||||
|
||||
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];
|
||||
}
|
||||
}
|
||||
await IUI.render(this, this._data, true);
|
||||
}
|
||||
|
||||
// // 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() {
|
||||
//this.updateBindings();
|
||||
created()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
set(value) {
|
||||
|
||||
68
src/UI/CodePreview.js
Normal file
68
src/UI/CodePreview.js
Normal 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
39
src/UI/Location.js
Normal 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -220,10 +220,13 @@ export default IUI.module(class Select extends IUIElement {
|
||||
app.appendChild(this.menu);
|
||||
if (app.loaded)
|
||||
{
|
||||
|
||||
///console.log("Append", this.menu);
|
||||
await this.menu.create();
|
||||
IUI.bind(this.menu, 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);
|
||||
|
||||
|
||||
// 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 => {
|
||||
|
||||
//});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -131,8 +131,6 @@ export default IUI.module(class TabbedTarget extends Target {
|
||||
this._body.append(item);
|
||||
|
||||
|
||||
//this._bar.appendChild(label);
|
||||
//this._bar.insertAdjacentElement("afterBegin", label);
|
||||
|
||||
this.list.push(item);
|
||||
var self = this;
|
||||
@ -141,8 +139,6 @@ export default IUI.module(class TabbedTarget extends Target {
|
||||
self.select(item);
|
||||
});
|
||||
|
||||
//this._updateSize();
|
||||
//this.updateBindings();
|
||||
|
||||
if (item.selected)
|
||||
this.select(item);
|
||||
|
||||
@ -907,7 +907,10 @@ export default IUI.module(class Table extends IUIElement {
|
||||
|
||||
let cl = column.node.cloneNode(true);// tr.insertCell();
|
||||
|
||||
this._make_bindings(cl)
|
||||
//this._make_bindings(cl)
|
||||
|
||||
IUI.bind(cl, this, "table");
|
||||
|
||||
tr.appendChild(cl);
|
||||
|
||||
if (cl.dataMap != null)
|
||||
|
||||
@ -132,8 +132,6 @@ export default IUI.module(class Tabs extends IUIElement {
|
||||
this._body.append(item);
|
||||
|
||||
|
||||
//this._bar.appendChild(label);
|
||||
//this._bar.insertAdjacentElement("afterBegin", label);
|
||||
|
||||
this.list.push(item);
|
||||
var self = this;
|
||||
@ -142,8 +140,6 @@ export default IUI.module(class Tabs extends IUIElement {
|
||||
self.select(item);
|
||||
});
|
||||
|
||||
//this._updateSize();
|
||||
//this.updateBindings();
|
||||
|
||||
if (item.selected)
|
||||
this.select(item);
|
||||
|
||||
@ -42,7 +42,6 @@ export default IUI.module(class IUIWindow extends IUIElement {
|
||||
|
||||
this.insertAdjacentElement("afterBegin", this._body);
|
||||
|
||||
//super.updateBindings();
|
||||
}
|
||||
else
|
||||
this._body = b[0];
|
||||
|
||||
@ -38,6 +38,8 @@ import './UI/Select.js';
|
||||
import './UI/DropDown.js';
|
||||
import './UI/Grid.js';
|
||||
|
||||
import './UI/Location.js';
|
||||
import './UI/CodePreview.js';
|
||||
|
||||
window.addEventListener("beforeprint", (e)=>{
|
||||
let viewRoute = router.current.viewRoute;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user