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-30 12:31:25 +03:00
parent b3479dbdbd
commit 1bac10e60d
10 changed files with 92 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/iui.css
View File

@ -3080,7 +3080,7 @@ html[dir='rtl'] .navbar-item[level='1'] {
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
flex: 1; flex: 2;
} }
.codepreview-preview{ .codepreview-preview{

11
docs/index.html
View File

@ -76,12 +76,12 @@
<i-navbar style="padding: 10px"> <i-navbar style="padding: 10px">
</i-navbar> </i-navbar>
<i-router type="hash" style="height: 100vh; width: 100vw;"> <i-router type="hash" style="height: calc(100vh - 110px); width: 100vw;">
<i-route name="getting-started" caption="Getting started" :content="load(this)"> <i-route name="getting-started" caption="Getting started" :content="load(this)">
<i-route name="install" caption="Install" :content="load(this)"> <i-route name="install" caption="Install" :content="load(this)">
</i-route> </i-route>
<i-route name="first" caption="First App" :content="load(this)"> <i-route name="first" caption="First App" :content="load(this, true)">
</i-route> </i-route>
<i-route name="declarative" caption="Declarative Rendering" :content="load(this)"> <i-route name="declarative" caption="Declarative Rendering" :content="load(this)">
@ -89,15 +89,16 @@
<i-route name="data-flow" caption="Data Flow" :content="load(this)"> <i-route name="data-flow" caption="Data Flow" :content="load(this)">
</i-route> </i-route>
<i-route name="if-content" caption="Conditions and Filling" :content="load(this)">
</i-route>
</i-route> </i-route>
<i-route name="getting-started2" caption="Getting started"> <i-route name="IUI Widgets" caption="IUI Widgets">
Getting started
<i-route name="install" caption="Install"> <i-route name="IUIElement" caption="IUIElement">
</i-route> </i-route>

4
docs/js/docs.js
View File

@ -6,11 +6,11 @@ marked.setOptions({
} }
}); });
async function load(route) { async function load(route, skip=false) {
var link = "md/" + route.link + ".md"; var link = "md/" + route.link + ".md";
let content = await fetch(link); let content = await fetch(link);
if (content.status != 200) if (content.status != 200)
return "Not found " + content.url; return "Not found " + content.url;
var md = marked(await content.text()); var md = marked(await content.text());
return md; return skip ? "<div skip>" + md + "</div>" : md;
} }

27
docs/md/getting-started/data-flow.md
View File

@ -9,4 +9,31 @@ When the :data attribute is set to an element any other attribute and child will
</div> </div>
</i-codepreview> </i-codepreview>
Child element will be provided with the data of its parent
<i-codepreview>
<ul :data="screen">
<li>Width: <b>${d.width}</b></li>
<li>Height: <b>${d.height}</b></li>
</ul>
</i-codepreview>
Child element can set its data with *:data* attribute
<i-codepreview>
<ul :data="screen">
<li>Width: <b>${d.width}</b></li>
<li>Height: <b>${d.height}</b></li>
<li :data="d.width / d.height"> Ratio: ${d} </li>
</ul>
</i-codepreview>
Every element in the tree will have a *data* property
<i-codepreview>
<div :data="new Date()">
<button onclick="this.innerText = ((new Date) - this.data) + ' milliseconds passed'">
Click me
</button>
</div>
</i-codepreview>

9
docs/md/getting-started/declarative.md
View File

@ -49,3 +49,12 @@ Attributes are similar they must start with *async::*
<i-codepreview> <i-codepreview>
<input async::placeholder = "await (await fetch('md/hello.md')).text()"> <input async::placeholder = "await (await fetch('md/hello.md')).text()">
</i-codepreview> </i-codepreview>
# Skip rendering
Any element with *skip* attribute will not enter the IUI rendering process
<i-codepreview>
<div skip>
${5 + 6}
</div>
</i-codepreview>

1
docs/md/getting-started/first.md
View File

@ -1,4 +1,3 @@
```html ```html
<html> <html>
<head> <head>

23
docs/md/getting-started/if-content.md Normal file
View File

@ -0,0 +1,23 @@
# Conditional rendering
*:if* attribute is responsilbe for showing or hiding any element in the tree.
<i-codepreview>
<div :data="new Date().getHours()">
<span :if="d < 12">Good morning</span>
<span :if="d >= 12 && d < 18">Good afternoon</span>
<span :if="d >= 18">Good evening</span>
</div>
</i-codepreview>
**note:** if uses CSS display property to show and hide and element which means the element will not be removed from the DOM.
# Filling
*:content* attribute can be used to fill an element with html content.
<i-codepreview>
<ul :data="['Hello', 'World']" :content="'<li>' + d.join('</li><li>') + '</li>'">
</ul>
</i-codepreview>

2
docs/md/getting-started/referencing.md Normal file
View File

@ -0,0 +1,2 @@
# Referencing

6
src/UI/CodePreview.js
View File

@ -8,12 +8,10 @@ export default IUI.module(class CodePreview extends IUIElement {
async create() { async create() {
if (this.hasAttribute("debug")) if (this.hasAttribute("debug"))
debugger; debugger;
this._code = this.innerHTML; this._code = this.innerHTML.trim();
this.textContent = ''; this.textContent = '';
// create elements // create elements
@ -31,7 +29,7 @@ export default IUI.module(class CodePreview extends IUIElement {
let self = this; let self = this;
this.editor.addEventListener("input", function() { this.editor.addEventListener("input", function() {
self._code = self.editor.innerText; self._code = self.editor.innerText.trim();
self.update(); self.update();
}, false); }, false);

36
src/UI/Dialog.js
View File

@ -8,27 +8,27 @@ export default IUI.module(class IUIDialog extends IUIWindow
constructor() constructor()
{ {
super({ super({
closeable: true, closeable: true,
resizeable: true, resizeable: true,
draggable: false, draggable: false,
_dragging: false, _dragging: false,
_expanding: false, _expanding: false,
x: 0, x: 0,
y: 0, y: 0,
visible: false, visible: false,
modal: false modal: false
} }
); );
var self = this; var self = this;
this._register("visible"); this._register("visible");
this._register("resize"); this._register("resize");
this.on("close", function(){ this.on("close", function(){
self.hide(); self.hide();
}); });
} }
create() create()