4-in-a-row example

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

Hide file tree

Showing 11 changed files with 311 additions and 162 deletions.
diff --git a/Slim.js b/Slim.js
@@ -22,7 +22,6 @@ class Slim extends HTMLElement {
 
     static __moveChildren(source, target, activate) {
         while (source.children.length) {
-            let child = source.children[0]
             target.appendChild(source.children[0])
         }
         let children = Array.prototype.slice.call( target.querySelectorAll('*'))
@@ -93,6 +92,19 @@ class Slim extends HTMLElement {
         this.__bind(descriptor)
     }
 
+    callAttribute(attributeName, value) {
+        let fnName = this.getAttribute(attributeName)
+        if (fnName === null) return
+        if (typeof this[fnName] === 'function') {
+            this[fnName](value)
+        } else if (typeof this._boundParent[fnName] === 'function') {
+            this._boundParent[fnName](value)
+        } else if (this._boundParent && this._boundParent._boundParent && typeof this._boundParent._boundParent[fnName] === 'function') {
+            // safari, firefox
+            this._boundParent._boundParent[fnName](value)
+        }
+    }
+
     __bind(descriptor) {
         descriptor.properties.forEach(
             prop => {
@@ -385,7 +397,6 @@ class SlimRepeater extends Slim {
             this.sourceData.forEach( (dataItem, index ) => {
                 let clone = this.sourceNode.cloneNode(true)
                 clone.removeAttribute('slim-repeat')
-                clone._boundParent = clone
                 clone.data = dataItem
                 clone.data_index = index
                 clone.data_source = this.sourceData
@@ -400,7 +411,6 @@ class SlimRepeater extends Slim {
                 clone.setAttribute('slim-repeat-index', index)
                 this.insertAdjacentHTML('beforeEnd', clone.outerHTML)
                 clone = this.find('*[slim-repeat-index="' + index.toString() + '"]')
-                clone._boundParent = clone
                 clone.data = dataItem
                 clone.data_index = index
                 clone.data_source = this.sourceData
@@ -412,14 +422,16 @@ class SlimRepeater extends Slim {
         for (let clone of this.clones) {
             clone.textContent = clone.sourceText
             clone.data = clone.data
-            clone._boundParent = clone
+            if (Slim.__prototypeDict[clone.localName] !== undefined || clone.isSlim) {
+                clone._boundParent = this._boundParent
+            }
+            else {
+                clone._boundParent = clone
+            }
         }
         this._executeBindings()
         Slim.__moveChildren(this._virtualDOM, this, true)
-
     }
 }
 Slim.tag('slim-repeat', SlimRepeater)
-window.SlimRepeater = SlimRepeater
-
-Slim.tag('slim-element', class extends Slim {})
+window.SlimRepeater = SlimRepeater
diff --git a/example/FourInARow/index.html b/example/FourInARow/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>4-In-A-Row slim.js</title>
+    <script>
+        if (!(function() {return ('registerElement' in document
+                && 'import' in document.createElement('link')
+                && 'content' in document.createElement('template'))})()) {
+            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>
+    <script src="../../framework/components/s-ui-base.js"></script>
+</head>
+<body>
+
+
+
+
+<script>
+    Slim.tag('fiar-app', class extends Slim {
+
+
+        get template() {
+            return `
+<fiar-col slim-repeat="rows" add="onAdded"></fiar-col>`
+        }
+
+        onBeforeCreated() {
+            this.rows = [[],[],[],[],[],[],[],[]]
+            this.rows.getNext = () => {
+                this.next = this.next === 'X' ? 'O' : 'X'
+                return this.next
+            }
+        }
+
+        onAdded() {
+
+        }
+    })
+
+
+    Slim.tag('fiar-col', class extends SlimUIBase {
+
+        get template() {
+            return `<div><button slim-id="play">+</button><span slim-repeat="data" bind>[[data]]</span></div>`
+        }
+
+        onAfterRender() {
+            this.play.onclick = () => {
+                this.data.push(this.data_source.getNext())
+                this.update()
+                this.callAttribute('add')
+            }
+        }
+
+    })
+</script>
+
+
+<fiar-app></fiar-app>
+</body>
+</html>
diff --git a/example/TodoList/TodoExample.html b/example/TodoList/TodoExample.html
@@ -24,15 +24,72 @@
     <script src="../../Slim.js"></script>
 
     <style>
-    todo-item span[complete="true"] {
-        text-decoration: line-through;
-    }
+
+        body {
+            font-family: 'Verdana', sans-serif;
+        }
+
+        *:focus {
+            outline: none;
+        }
+
+        div#todo-container{
+            width: 30em;
+            margin: 0 auto;
+            border: 1px solid black;
+            padding: 1em;
+            box-sizing: border-box;
+        }
+
+        #add-todo, #todos-count {
+            display: flex;
+            flex-direction: row;
+            height: 2em;
+        }
+
+        #todos-count span {
+            flex: 1;
+            align-self: flex-end;
+        }
+
+        h6 {
+            width: 30em;
+            display: block;
+            margin: 0 auto;
+        }
+
+        #add-todo input[slim-id="newTodo"] {
+            flex: 1;
+            border: 1px solid black;
+            border-right: none;
+        }
+
+        input[slim-id="btnNewTodo"], input[slim-id="btnClear"] {
+            border: 1px solid black;
+            border-radius: 0;
+        }
+
+        input[slim-id="btnNewTodo"] {
+            background-color: darkgreen;
+            color: white;
+        }
+
+        todo-item span[complete="true"] {
+            text-decoration: line-through;
+            background-color: gold;
+        }
+
+        code {
+            display: block;
+            background-color: whitesmoke;
+            padding: 0.5em;
+        }
     </style>
 </head>
 <body>
 
-    <h1>Todo Example</h1>
     <todo-app></todo-app>
+    <h6>View the source to see how it works</h6>
 
 <script>
 
@@ -66,12 +123,16 @@ <h1>Todo Example</h1>
 
         get template() {
             return `<div id="todo-container">
-                    <input type="text" slim-id="newTodo" /><input type="button" slim-id="btnNewTodo" value="Add Todo" />
-                    <hr/>
-                    <todo-item slim-repeat="todos"></todo-item>
-                    <hr/>
-                    <div id="todos-count"><span bind>You have [[todos.length]] items</span><input type="button" slim-id="btnClear" value="Clear completed"></input></div>
-                    `
+<h1>slim.js Todo Example</h1>
+<div id="add-todo">
+    <input type="text" slim-id="newTodo" />
+    <input type="button" slim-id="btnNewTodo" value="Add Todo" />
+</div>
+<hr/>
+<todo-item slim-repeat="todos"></todo-item>
+<hr/>
+<div id="todos-count"><span bind>You have [[todos.length]] items</span><input type="button" slim-id="btnClear" value="Clear completed"></input></div>
+`
         }
 
         onBeforeCreated() {

diff --git a/example/tests/bind-parent.js b/example/tests/bind-parent.js
@@ -5,10 +5,10 @@ Slim.tag('bind-parent', class extends Slim {
 <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>
+<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>
+<tree-list bind-wprop="[[wProp]]" slim-repeat="tree"></tree-list>
 `
     }
 

diff --git a/example/webpage/index.html b/example/webpage/index.html
@@ -139,7 +139,7 @@ <h2>Featuring</h2>
     <div>
         <slim-tabs tabs="Data Binding,Attribute Binding,Method Binding,Repeaters,Plugins">
             <div class="tabs">
-                <slim-tab slim-repeat="tabs"></slim-tab>
+                <slim-tab slim-repeat="tabs" select="select"></slim-tab>
             </div>
             <div id="states-container">
                 <slim-states slim-id="states" current-state="Data Binding">

diff --git a/example/webpage/slim-tabs.js b/example/webpage/slim-tabs.js
@@ -4,19 +4,24 @@ Slim.tag('slim-tabs', class extends Slim {
         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
-            }
-        })
+    select(value) {
+        this.states.currentState = value
     }
 
 })
 
 Slim.tag('slim-tab', class extends Slim {
     get template() {
-        return '<span tab-name="[[data]]" bind>[[data]] </span>'
+        return '<span bind>[[data]] </span>'
+    }
+
+    onAfterRender() {
+        this.onclick = () => {
+            this.callAttribute('select', this.data)
+        }
+    }
+
+    get isSlim() {
+        return true
     }
 })