diff --git a/css/iui.css b/css/iui.css index fae6bbd..ce3a6b1 100644 --- a/css/iui.css +++ b/css/iui.css @@ -3080,7 +3080,7 @@ html[dir='rtl'] .navbar-item[level='1'] { border-top-left-radius: 10px; border-bottom-left-radius: 10px; - flex: 1; + flex: 2; } .codepreview-preview{ diff --git a/docs/index.html b/docs/index.html index 8a3a355..2d265a4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -76,12 +76,12 @@ - + - + @@ -89,15 +89,16 @@ + + - - Getting started + - + diff --git a/docs/js/docs.js b/docs/js/docs.js index ff61c07..783be1f 100644 --- a/docs/js/docs.js +++ b/docs/js/docs.js @@ -6,11 +6,11 @@ marked.setOptions({ } }); -async function load(route) { +async function load(route, skip=false) { 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; + return skip ? "
" + md + "
" : md; } \ No newline at end of file diff --git a/docs/md/getting-started/data-flow.md b/docs/md/getting-started/data-flow.md index 64bc12c..96b2cf9 100644 --- a/docs/md/getting-started/data-flow.md +++ b/docs/md/getting-started/data-flow.md @@ -9,4 +9,31 @@ When the :data attribute is set to an element any other attribute and child will - \ No newline at end of file + Child element will be provided with the data of its parent + + +
    +
  • Width: ${d.width}
    • +
  • Height: ${d.height}
    • +
+ + +Child element can set its data with *:data* attribute + + +
    +
  • Width: ${d.width}
    • +
  • Height: ${d.height}
    • +
  • Ratio: ${d}
    • +
+ + +Every element in the tree will have a *data* property + + +
+ +
+ diff --git a/docs/md/getting-started/declarative.md b/docs/md/getting-started/declarative.md index c6f0f49..5b45519 100644 --- a/docs/md/getting-started/declarative.md +++ b/docs/md/getting-started/declarative.md @@ -48,4 +48,13 @@ Attributes are similar they must start with *async::* + + +# Skip rendering +Any element with *skip* attribute will not enter the IUI rendering process + + +
+ ${5 + 6} +
 \ No newline at end of file diff --git a/docs/md/getting-started/first.md b/docs/md/getting-started/first.md index 6e8785d..1db0b12 100644 --- a/docs/md/getting-started/first.md +++ b/docs/md/getting-started/first.md @@ -1,4 +1,3 @@ - ```html diff --git a/docs/md/getting-started/if-content.md b/docs/md/getting-started/if-content.md new file mode 100644 index 0000000..ac8c42c --- /dev/null +++ b/docs/md/getting-started/if-content.md @@ -0,0 +1,23 @@ +# Conditional rendering + +*:if* attribute is responsilbe for showing or hiding any element in the tree. + + +
+ Good morning + Good afternoon + Good evening +
+ + +**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. + + +
    +
+ \ No newline at end of file diff --git a/docs/md/getting-started/referencing.md b/docs/md/getting-started/referencing.md new file mode 100644 index 0000000..6a477d9 --- /dev/null +++ b/docs/md/getting-started/referencing.md @@ -0,0 +1,2 @@ +# Referencing + diff --git a/src/UI/CodePreview.js b/src/UI/CodePreview.js index e699b99..6504c0d 100644 --- a/src/UI/CodePreview.js +++ b/src/UI/CodePreview.js @@ -8,12 +8,10 @@ export default IUI.module(class CodePreview extends IUIElement { async create() { - - if (this.hasAttribute("debug")) debugger; - this._code = this.innerHTML; + this._code = this.innerHTML.trim(); this.textContent = ''; // create elements @@ -31,7 +29,7 @@ export default IUI.module(class CodePreview extends IUIElement { let self = this; this.editor.addEventListener("input", function() { - self._code = self.editor.innerText; + self._code = self.editor.innerText.trim(); self.update(); }, false); diff --git a/src/UI/Dialog.js b/src/UI/Dialog.js index 7e91afa..4c1ea99 100644 --- a/src/UI/Dialog.js +++ b/src/UI/Dialog.js @@ -8,27 +8,27 @@ export default IUI.module(class IUIDialog extends IUIWindow constructor() { - super({ - closeable: true, - resizeable: true, - draggable: false, - _dragging: false, - _expanding: false, - x: 0, - y: 0, - visible: false, - modal: false - } - ); + super({ + closeable: true, + resizeable: true, + draggable: false, + _dragging: false, + _expanding: false, + x: 0, + y: 0, + visible: false, + modal: false + } + ); - var self = this; + var self = this; - this._register("visible"); - this._register("resize"); - - this.on("close", function(){ - self.hide(); - }); + this._register("visible"); + this._register("resize"); + + this.on("close", function(){ + self.hide(); + }); } create()