adding s-resource loader

slimjs · Jan 2, 2017 · 92f7ebe · 92f7ebe
1 parent 5320a95
commit 92f7ebe
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 58 deletions.
diff --git a/example/webpage/index.html b/example/webpage/index.html
@@ -96,8 +96,37 @@
             border-right: none;
             border-left: none;
         }
+
+        slim-tabs div.tabs{
+            border-bottom: 1px solid black;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        slim-tab {
+            font-size: 1.2em;
+            display: inline-flex;
+            padding: 0.5em;
+            border-left: 1px solid black;
+            border-top: 1px solid black;
+            cursor: pointer;
+        }
+
+        slim-tab:last-child {
+            border-right: 1px solid black;
+        }
+
+        slim-states div[state]{
+            border: 1px solid black;
+            border-top: none;
+            padding: 1em;
+        }
     </style>
 
+    <script src="slim-tabs.js"></script>
+    <script src="slim-states.js"></script>
+
 </head>
 <body>
 <a href="https://github.com/eavichay/slim-web-components"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
@@ -108,48 +137,49 @@ <h1>Web components plus Magic!</h1>
     <h2>Featuring</h2>
 
     <div>
-        <h3>Data binding</h3>
-        <code>&lt;span <strong>bind</strong>>Hello, <strong>[[myProperty]]</strong> &lt;/span><br/>
-        ...<br/>
-        this.myProperty = 'slim.js'
-        </code></pre>
-    </div>
-    <hr/>
-    <div>
-        <h3>Attribute binding</h3>
-        <code>&lt;greeter <strong>greeter-attribute="[[myProperty]]"</strong>>Hello, slim &lt;greeter/><br/>
-            ...<br/>
-            this.myProperty = 'someValue'
-        </code></pre>
-    </div>
-    <hr/>
-    <div>
-        <h3>Method binding</h3>
-        <code>&lt;greeter <strong>greeter-attribute="[[myMethod(myProperty)]]"</strong>>Hello, slim &lt;greeter/><br/>
-            ...<br/>
-            myMethod(prop) {
-                return something
-            }
-        </code></pre>
-    </div>
-    <hr/>
-    <div>
-        <h3>Repeaters</h3>
-        <code>&lt;greeter <strong>slim-repeat="people"</strong> bind>Hello, <strong>[[data.name]]</strong> &lt;greeter/><br/>
-            ...<br/>
-            this.people = [ {name:'John'}, {name:'Jenny'}, {name: 'Jeremy'} ... ]
-        </code></pre>
-    </div>
-    <hr/>
-    <div>
-        <h3>Extensible / Plugins</h3>
-        <code><strong>Slim.plugin</strong>('beforeRender', function(element) { do something } )
-        </code></pre><br/>
-    </div>
-    <hr/>
-    <div>
-        <h3>Improved lifecycle</h3>
-        <code>onBeforeCreated / onCreated / beforeRender / render / afterRender / update ... </code>
+        <slim-tabs tabs="Data Binding,Attribute Binding,Method Binding,Repeaters,Plugins">
+            <div class="tabs">
+                <slim-tab slim-repeat="tabs"></slim-tab>
+            </div>
+            <div id="states-container">
+                <slim-states slim-id="states" current-state="Data Binding">
+                    <div state="Data Binding">
+                        <h3>Data binding</h3>
+                        <code>&lt;span <strong>bind</strong>>Hello, <strong>[[myProperty]]</strong> &lt;/span><br/>
+                            ...<br/>
+                            this.myProperty = 'slim.js'
+                        </code></pre></div>
+                    <div state="Attribute Binding">
+                        <h3>Attribute binding</h3>
+                        <code>&lt;greeter <strong>greeter-attribute="[[myProperty]]"</strong>>Hello, slim &lt;greeter/><br/>
+                            ...<br/>
+                            this.myProperty = 'someValue'
+                        </code></pre>
+                    </div>
+                    <div state="Method Binding">
+                        <h3>Method binding</h3>
+                        <code>&lt;greeter <strong>greeter-attribute="[[myMethod(myProperty)]]"</strong>>Hello, slim &lt;greeter/><br/>
+                            ...<br/>
+                            myMethod(prop) {
+                            return something
+                            }
+                        </code></pre>
+                    </div>
+                    <div state="Repeaters">
+                        <h3>Repeaters</h3>
+                        <code>&lt;greeter <strong>slim-repeat="people"</strong> bind>Hello, <strong>[[data.name]]</strong> &lt;greeter/><br/>
+                            ...<br/>
+                            this.people = [ {name:'John'}, {name:'Jenny'}, {name: 'Jeremy'} ... ]
+                        </code></pre>
+                    </div>
+                    <div state="Plugins">
+                        <h3>Extensible / Plugins</h3>
+                        <code><strong>Slim.plugin</strong>('beforeRender', function(element) { do something } )
+                        </code></pre><br/>
+                    </div>
+                </slim-states>
+            </div>
+        </slim-tabs>
     </div>
     <hr/>
     <div>

diff --git a/example/webpage/slim-logo.js b/example/webpage/slim-logo.js
@@ -1,18 +1,7 @@
 Slim.tag('slim-logo', class extends Slim {
 
 
-    get template() { return `<img slim-id="img" src="slim2.png" width="350" height="130" style="[[effect(cx,cy)]]" />`}
-
-    onCreated() {
-        document.body.addEventListener('mousemove', e => {
-            this.cx = e.clientX
-            this.cy = e.clientY
-        })
-    }
-
-    effect(x, y) {
-        return `transform: rotate3d(${150 - y}, ${x - 150}, 0, 25deg)`
-    }
+    get template() { return `<img slim-id="img" src="slim2.png" width="350" height="130" />`}
 
 
 })
diff --git a/example/webpage/slim-states.js b/example/webpage/slim-states.js
@@ -0,0 +1,40 @@
+Slim.tag('slim-states', class extends Slim {
+
+
+    get currentState() {
+        return this.getAttribute('current-state')
+    }
+
+    set currentState(value) {
+        this.setAttribute('current-state', value)
+        this.renderChildren()
+    }
+
+    renderChildren() {
+        let currentChildren = Array.prototype.slice.call( this.children )
+        for (let i = currentChildren.length - 1; i >= 0; i--) {
+            let child = currentChildren[i]
+            if (child.getAttribute('state') !== this.currentState) {
+                this.hiddenChildren.appendChild(child)
+            }
+        }
+
+        currentChildren = Array.prototype.slice.call( this.hiddenChildren.children )
+        for (let i = currentChildren.length - 1; i >= 0; i--) {
+            let child = currentChildren[i]
+            if (child.getAttribute('state') === this.currentState) {
+                this.appendChild(child)
+            }
+        }
+    }
+
+    onBeforeCreated() {
+        this.hiddenChildren = document.createElement('virtual')
+    }
+
+    onAfterRender() {
+        this.renderChildren()
+    }
+
+
+})
diff --git a/example/webpage/slim-tabs.js b/example/webpage/slim-tabs.js
@@ -0,0 +1,22 @@
+Slim.tag('slim-tabs', class extends Slim {
+
+    onCreated() {
+        this.tabs = this.getAttribute('tabs').split(',')
+    }
+
+    update() {
+        super.update()
+        this.findAll('slim-tab').forEach( tab => {
+            tab.onclick = (e) => {
+                this.states.currentState = tab.find('span').tabName
+            }
+        })
+    }
+
+})
+
+Slim.tag('slim-tab', class extends Slim {
+    get template() {
+        return '<span tab-name="[[data]]" bind>[[data]] </span>'
+    }
+})
diff --git a/framework/components/basic-elements.js b/framework/components/basic-elements.js
@@ -24,7 +24,7 @@ Slim.tag('s-button', class extends SlimUIBase {
 Slim.tag('s-input', class extends SlimUIBase {
 
     get template() {
-        return '<input slim-id="myControl" type=[[type]] placeholder=[[placeholder]] value=[[getText(text)]] />'
+        return '<s-input-model slim-id="model"></s-input-model><input slim-id="myControl" type=[[type]] placeholder=[[placeholder]] />'
     }
 
     getText(val) {
@@ -37,15 +37,21 @@ Slim.tag('s-input', class extends SlimUIBase {
     }
 
     onCreated() {
-        this.addEventListener('keyup', () => {
-            this.text = this.find('input').value
-        })
         this.type = this.getAttribute('type')
         this.placeholder = this.getAttribute('placeholder')
     }
 
 })
 
+Slim.tag('s-input-model', class extends SlimModel {
+    onCreated() {
+        this.view.myControl.addEventListener('keyup', () => {
+            this.view.text = this.view.myControl.value
+        })
+
+    }
+})
+
 
 /**
  *
@@ -75,6 +81,91 @@ Slim.tag('s-vgroup', class extends HTMLElement {
 })
 
 
+Slim.tag('s-resource', class extends Slim {
+
+
+    get url() {
+        return this.getAttribute('url')
+    }
+
+    get format() {
+        return this.getAttribute('format') || 'text'
+    }
+
+    get interval() {
+        return parseInt(this.getAttribute('interval') || 0)
+    }
+
+    attributeChangedCallback() {
+        this.stopInterval()
+        this.startInterval()
+    }
+
+    startInterval() {
+        if (this.interval > 0) {
+            this.resourceInterval = setInterval( () => {
+                if (!this.isLoading) this.load()
+            }, this.interval)
+        }
+        this.load()
+    }
+
+    stopInterval() {
+        if (this.resourceInterval) {
+            clearInterval(this.resourceInterval)
+        }
+    }
+
+    onBeforeCreated() {
+        this.isLoading = false;
+    }
+
+    onAfterRender() {
+        this.stopInterval()
+        this.startInterval()
+    }
+
+    get data() {
+        return this._data
+    }
+
+    set data(value) {
+        this._data = value
+        let fnName = this.ondata || this.getAttribute('ondata')
+        if (typeof fnName === 'function') {
+            fnName(value)
+        } else if (typeof this._boundParent[fnName] === 'function') {
+            this._boundParent[fnName](value)
+        }
+        this.isLoading = false
+    }
+
+    load() {
+        this.isLoading = true
+        if (this.url) {
+            fetch(this.url)
+                .then(response => {
+                    if (this.format.toLowerCase() === 'json') {
+                        return response.json()
+                    } else {
+                        return response.text()
+                    }
+                })
+                .then( data => {
+                    this.data = data
+                    return this.data
+                })
+        }
+    }
+
+    removedCallback() {
+        this.stopInterval()
+    }
+
+
+})
+
+
 
 Slim.tag('s-editable-input', class extends Slim {
 

diff --git a/framework/components/s-ui-base.js b/framework/components/s-ui-base.js
@@ -27,4 +27,11 @@ class SlimUIBase extends Slim {
     }
 
 
+}
+
+class SlimModel extends Slim {
+
+    get view() {
+        return this._boundParent
+    }
 }
diff --git a/framework/tests/ElementsTest.html b/framework/tests/ElementsTest.html
@@ -13,6 +13,7 @@
 
 
     <slim-ui-test>
+        <s-resource url="https://cdn.rawgit.com/angular/angular-phonecat/master/app/phones/dell-streak-7.json" ondata="testOnData" format="json"></s-resource>
         <s-hgroup>
             <s-input focus="testFocus" blur="testBlur" placeholder="type anything"></s-input>
             <s-button text="Hello" click="testClick" mouseenter="testMouseover"></s-button>

diff --git a/framework/tests/slim-ui-test.js b/framework/tests/slim-ui-test.js
@@ -1,11 +1,19 @@
 Slim.tag('slim-ui-test', class extends Slim {
 
+    onBeforeCreated() {
+        this.myText = ''
+    }
+
     testMouseover(e) {
         this.find('s-button').counter = this.find('s-button').counter || 0
         this.find('s-button').counter++
         this.find('s-button').setAttribute('text', `Hello ${ this.find('s-button').counter }`)
     }
 
+    testOnData(data) {
+        console.log(data)
+    }
+
     testFocus(e) {
         console.log(e)
     }