watch

slimjs · Dec 28, 2016 · 7e72b4f · 7e72b4f
1 parent 520a304
commit 7e72b4f
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 6 deletions.
diff --git a/Slim.js b/Slim.js
@@ -88,6 +88,8 @@ class Slim extends HTMLElement {
             target: this,
             source: this
         }
+        this._bindings = this._bindings || {}
+        this._boundParent = this._boundParent || this
         this.__bind(descriptor)
     }
 

diff --git a/example/tests/bind-parent.js b/example/tests/bind-parent.js
@@ -2,7 +2,7 @@ Slim.tag('bind-parent', class extends Slim {
 
     get template() {
         return `
-<div calc="[calcMinus(myProp, urProp)]"><span minus="[calcMinus(myProp, urProp)]" bind>[[wProp]]</div>
+<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>

diff --git a/example/tests/repeat-benchmark.html b/example/tests/repeat-benchmark.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script>
+        window.isChrome = false;
+        try {
+            isChrome = typeof window.chrome.webstore === 'object'
+        }
+        catch (err) {
+            isChrome = false;
+        }
+        if (!isChrome) {
+            let s = "<script type=\"text\/javascript\" " +
+                    "src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.min.js\"" +
+                    " > <\/script> "
+            document.write(s)
+        }
+    </script>
+
+    <script src="../../Slim.js"></script>
+</head>
+<body>
+</body>
+    <benchmark-tester></benchmark-tester>
+
+<script>
+    Slim.tag('benchmark-tester', class extends Slim {
+
+        get template() {
+            return `<div slim-repeat="arr" bind>[[data]]></div>`
+        }
+
+        onCreated() {
+            console.log(new Date().getTime())
+            this.arr = []
+            while (this.arr.length < 1000) {
+                this.arr.push(Math.random())
+            }
+        }
+
+        update() {
+            super.update()
+            console.log(new Date().getTime())
+        }
+
+    })
+</script>
+</html>
diff --git a/example/webpage/index.html b/example/webpage/index.html
@@ -115,12 +115,12 @@
 <a href="https://github.com/eavichay/slim-web-components"><img style="position: absolute; 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>
 <div id="container">
     <slim-logo></slim-logo>
-    <h1>A better way for creating NATIVE web components</h1>
-    <p>With es6 and slim.js you could write native web components double-time with no hassle of using external libraries that affect your workflow. When it comes to development of web components, slim.js is your new best friend.</p>
+    <h1>Web components plus the Magic!</h1>
+    <p>With es6 and slim.js you could write less code. Native web components developed double-time with no hassle, no need for external libraries that affect your workflow. When it comes to development with web components, slim.js is your new best friend.</p>
     <h2>Featuring</h2>
 
     <div>
-        <h3>Text binding</h3>
+        <h3>Data binding</h3>
         <code>&lt;span bind>Hello, <strong>[[myProperty]]</strong> /><br/>
         ...<br/>
         this.myProperty = 'slim.js'
@@ -129,15 +129,15 @@ <h3>Text binding</h3>
     <hr/>
     <div>
         <h3>Attribute binding</h3>
-        <code>&lt;greeter <strong>my-attribute="[[myProperty]]"</strong>>Hello, slim &lt;greeter/><br/>
+        <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>my-attribute="[[myMethod(myProperty)]]"</strong>>Hello, slim &lt;greeter/><br/>
+        <code>&lt;greeter <strong>greeter-attribute="[[myMethod(myProperty)]]"</strong>>Hello, slim &lt;greeter/><br/>
             ...<br/>
             myMethod(prop) {
                 return something

diff --git a/framework/components/basic-elements.js b/framework/components/basic-elements.js
@@ -72,4 +72,43 @@ Slim.tag('s-vgroup', class extends HTMLElement {
         this.style.flexDirection = 'column'
     }
 
+})
+
+
+
+Slim.tag('s-editable-input', class extends Slim {
+
+    get template() {
+        return `<span slim-id="label" bind>[[text]]</span><input slim-id="inp" type="text" value=[[text]] />`
+    }
+
+    onCreated() {
+        this._boundProperty = this.getAttribute('text')
+        if (this._boundProperty && this._boundProperty.indexOf('@' === 0)) {
+            this._boundProperty = this._boundProperty.replace('@', '')
+            this.text = this._boundParent[ this._boundProperty ]
+        }
+
+        this.style.position = 'relative'
+        this.inp.style.display = 'none'
+        this.inp.style.position = 'absolute'
+        this.inp.style.left = '0'
+        this.inp.style.top = '0'
+        this.inp.onblur = () => {
+            this.text = this.inp.value
+            this.setAttribute('text', this.inp.value)
+            this.inp.style.display = 'none'
+            if (this.onchange) {
+                this.onchange()
+            }
+            if (this._boundProperty) {
+                this._boundParent[ this._boundProperty ] = this.inp.value
+            }
+        }
+        this.label.ondblclick = () => {
+            this.inp.style.display = 'initial'
+            this.inp.focus()
+        }
+    }
+
 })
diff --git a/framework/tests/ElementsTest.html b/framework/tests/ElementsTest.html
@@ -21,5 +21,9 @@
     </slim-ui-test>
 
 
+    <editable-ui-test>
+    </editable-ui-test>
+
+
 </body>
 </html>
diff --git a/framework/tests/slim-ui-test.js b/framework/tests/slim-ui-test.js
@@ -19,4 +19,26 @@ Slim.tag('slim-ui-test', class extends Slim {
         console.log(e)
     }
 
+})
+
+
+
+
+Slim.tag('editable-ui-test', class extends Slim {
+
+
+    get template() {
+        return '<div bind>Hello, [[myText]]</div><s-editable-input text="@myText"></s-editable-input>'
+    }
+
+    onCreated() {
+        this.myText = 'Moshe Vilner'
+        this.watch('myText', (e) => {
+            console.log(e)
+        })
+    }
+
+
+
+
 })