adding content parsing

slimjs · Jan 3, 2017 · 9069244 · 9069244
1 parent 34dc625
commit 9069244
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 18 deletions.
diff --git a/Slim.js b/Slim.js
@@ -286,6 +286,12 @@ class Slim extends HTMLElement {
             }
         } else if (typeof($tpl) === 'string') {
             this._virtualDOM.innerHTML = $tpl
+            let virtualContent = this._virtualDOM.querySelector('content')
+            if (virtualContent) {
+                while (this.children.length) {
+                    virtualContent.appendChild( this.children[0] )
+                }
+            }
         }
 
         let allChildren = Array.prototype.slice.call( this._virtualDOM.querySelectorAll('*') )

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "slimjs",
   "main": "Slim.js",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "ignore": [
     "example",
     "components",

diff --git a/example/tests/bind-child.js b/example/tests/bind-child.js
@@ -12,7 +12,7 @@ Slim.tag('bind-child', class extends Slim {
         this.onclick = ()=>{
             this.customRender = !this.customRender;
             if (this.customRender) {
-                this.render(`<div prop="[data.label]" bind>[[data.label]] : [[data.value]]</div>`)
+                this.render(`<div prop="[[data.label]]" bind>[[data.label]] : [[data.value]]</div>`)
             } else {
                 this.render()
             }

diff --git a/example/tests/bind-parent.js b/example/tests/bind-parent.js
@@ -2,14 +2,18 @@ Slim.tag('bind-parent', class extends Slim {
 
     get template() {
         return `
-<div calc="[[calcMinus(myProp, urProp)]]"><span minus="[calcMinus(myProp, urProp)]" bind>[[wProp]]</div>
-<div slim-repeat="items" bind>[[data.label]] >>> [[data.value]]</div>
-<hr/>
-<bind-child slim-repeat="items" a-prop="[[myProp]]" b-prop="[[urProp]]"></bind-child>
-<br/>
-<hr/>
-<tree-list bind-wprop="[[wProp]]" slim-repeat="tree"></tree-list>
-`
+        <div calc="[[calcMinus(myProp, urProp)]]"><span minus="[calcMinus(myProp, urProp)]" bind>[[wProp]]</div>
+        <div slim-repeat="items" bind>[[data.label]] >>> [[data.value]]</div>
+        <hr/>
+        <content></content>`
+    }
+
+    testOnCancel() {
+        alert('cancel')
+    }
+
+    testOnConfirm() {
+        alert('ok')
     }
 
     onBeforeCreated() {
@@ -20,7 +24,8 @@ Slim.tag('bind-parent', class extends Slim {
             "alpha", "beta", "charlie", "delta", [
                 "echo", "foxtrot", "golf", "hotel", "juliet", [
                     "kilo", "lima", "mike", "november"
-                ]
+                ],
+                "opera"
             ]
         ]
         this.items = [ {label: 'item1', value: 1}]

diff --git a/example/tests/bind-test.html b/example/tests/bind-test.html
@@ -31,13 +31,59 @@
 <body>
 
     <script>
-//        Slim.plugin('create', e => {console.log('Created', e)})
-//        Slim.plugin('beforeRender', e => {console.log('Before Render', e)})
-//        Slim.plugin('afterRender', e => {console.log('After Render', e)})
+        Slim.tag('slim-confirm', class extends Slim {
+
+
+            get template() {
+                return `<div>
+<div><content></content></div>
+<div>${this.cancelTemplate}${this.confirmTemplate}</div>
+</div>`
+            }
+
+            get cancelTemplate() {
+                if (this.getAttribute('cancel')) {
+                    return `<button slim-id="btnCancel">${this.getAttribute('cancel')}</button>`
+                }
+                return ''
+            }
+
+            get confirmTemplate() {
+                if (this.getAttribute('confirm')) {
+                    return `<button slim-id="btnOK">${this.getAttribute('confirm')}</button>`
+                }
+                return ''
+            }
+
+            onAfterRender() {
+                if (this.btnOK) {
+                    this.btnOK.onclick = () => {
+                        this.callAttribute('onconfirm')
+                    }
+                }
+
+                if (this.btnCancel) {
+                    this.btnCancel.onclick = () => {
+                        this.callAttribute('oncancel')
+                    }
+                }
+            }
+
+        })
     </script>
 
 
-    <bind-parent></bind-parent>
+    <bind-parent>
+        <bind-child slim-repeat="items" a-prop="[[myProp]]" b-prop="[[urProp]]"></bind-child>
+        <br/>
+        <hr/>
+        <tree-list bind-wprop="[[wProp]]" slim-repeat="tree"></tree-list>
+        <slim-confirm cancel="Cancel" confirm="OK" onconfirm="testOnConfirm" oncancel="testOnCancel">
+            <h3>Confirm reusable example</h3>
+            <div>Are you sure?</div>
+        </slim-confirm>
+    </bind-parent>
+
 
 <!--<event-bus-e1></event-bus-e1>-->
 <!--<event-bus-e2></event-bus-e2>-->

diff --git a/framework/components/group.js b/framework/components/group.js
@@ -3,7 +3,11 @@
  *
  * s-hgroup
  */
-Slim.tag('s-hgroup', class extends HTMLElement {
+Slim.tag('s-hgroup', class extends Slim {
+    get template() {
+        return `<content></content>`
+    }
+
     createdCallback() {
         this.style.display = 'flex'
         this.style.flexDirection = 'row'
@@ -16,7 +20,11 @@ Slim.tag('s-hgroup', class extends HTMLElement {
  *
  * s-vgroup
  */
-Slim.tag('s-vgroup', class extends HTMLElement {
+Slim.tag('s-vgroup', class extends Slim {
+
+    get template() {
+        return `<content></content>`
+    }
 
     createdCallback() {
         this.style.display = 'flex'

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "slim-js",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "Slim web components infrastructure",
   "main": "Slim.js",
   "scripts": {