fixing some issues

slimjs · Dec 7, 2016 · 8f60577 · 8f60577
1 parent 7d2eb98
commit 8f60577
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 159 deletions.
diff --git a/SlimElement.js b/SlimElement.js
@@ -17,7 +17,10 @@
 
         })()
 
-
+        window.slimTemplate = function(selector) {
+            let node = document.querySelector(selector)
+            return document.importNode(node, true)
+        }
         window.Slim = document.registerElement.bind(document)
 
 
@@ -31,6 +34,7 @@
             }
 
 
+            //noinspection JSUnusedGlobalSymbols
             inject(nodeName, factory, eventName = 'elementAdded', setter = '$dependency') {
                 __factories[eventName] = __factories[eventName] || SlimDependencyInjection._createWatch(eventName)
                 __factories[eventName][nodeName.toLowerCase()] = { factory: factory, setter: setter }
@@ -44,8 +48,7 @@
                 document.addEventListener(eventName, (event) => {
                     this._inject(eventName, event)
                 })
-                var result = {}
-                return result
+                return {}
             }
 
             static _inject(eventName, event) {
@@ -132,7 +135,6 @@
                 source.__defineGetter__(prop, () => {
                     return source.__bindings[prop].value
                 })
-                executor()
             })
         }
 
@@ -182,9 +184,9 @@
                 this.__bindings = {}
                 this.__bindingTree = document.createElement('slim-component')
                 this._captureBindings()
+                this._applyBindings()
                 this.onCreated()
                 this.dispatchEvent(new Event('elementCreated', {bubbles:true}))
-                this._applyBindings()
                 this._renderCycle()
             }
 
@@ -194,6 +196,7 @@
                 if (!skipTree) this.appendChild(this.__bindingTree)
 
                 this.render()
+                this._applyTextBindings()
                 this.afterRender()
             }
 
@@ -211,7 +214,11 @@
                     child.sourceTextContent = child.textContent;
                     if (match) {
                         for (var i = 0; i < match.length; i++) {
-                            child.innerText = child.innerText.replace(match[i], x(this, match[i].match(/([^\[].+[^\]])/)[0]))
+                            let result = x(this, match[i].match(/([^\[].+[^\]])/)[0])
+                            if (result) {
+                                child.innerText = child.innerText.replace(match[i], result)
+                            }
+
                         }
                     }
                 }
@@ -267,24 +274,44 @@
              */
 
             _captureBindings() {
-                if (this.template) {
-                    this.__bindingTree.innerHTML = this.template
-                } else {
+                let $tpl = this.template;
+                if (!$tpl) {
                     while (this.children.length) {
                         this.__bindingTree.appendChild( this.children[0] )
                     }
+                } else {
+                    if (typeof($tpl) === 'string') {
+                        this.__bindingTree.innerHTML = $tpl
+                    }
                 }
-                for (let child of this.__bindingTree.querySelectorAll('*')) {
-                    child.parentBind = this
+
+                let descriptors = []
+                let allChildren = this.__bindingTree.querySelectorAll('*')
+                allChildren = Array.prototype.slice.call(allChildren).concat(this)
+                for (let child of allChildren) {
+                    child.parentBind = child.parentBind || this
                     if (child.attributes) for (let i = 0; i < child.attributes.length; i++) {
                         let descriptor = __describeAttribute(child.attributes[i])
-                        if (descriptor.type === 'P' || descriptor.type === 'M') {
-                            __bind(this, child, descriptor)
-                        } else if (descriptor.type === 'I') {
-                            __inject(descriptor, child)
+                        if (descriptor.type) {
+                            descriptor.child = child
+                            descriptors.push(descriptor)
                         }
                     }
                 }
+
+                descriptors = descriptors.sort( (a,b) => {
+                    if (a.type === "I") {
+                        return -1
+                    } else return 1
+                })
+
+                descriptors.forEach( descriptor => {
+                    if (descriptor.type === 'P' || descriptor.type === 'M') {
+                        __bind(this, descriptor.child, descriptor)
+                    } else if (descriptor.type === 'I') {
+                        __inject(descriptor, descriptor.child)
+                    }
+                })
             }
 
             _applyBindings() {

diff --git a/example/Components/index.html b/example/Components/index.html
@@ -5,8 +5,6 @@
     <title>slim.js - Productive Web Components Library</title>
     <link href="https://fonts.googleapis.com/css?family=Merriweather|Roboto+Slab" rel="stylesheet">
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.min.js"></script>
-
     <script src="../../SlimElement.js"></script>
     <link rel="import" href="../../components/s-button.js" />
     <link rel="import" href="../../components/s-input.js" />
@@ -31,11 +29,16 @@
             margin-bottom: 5em;
             font-size: 1.5em;
             background-color: #5aa99e;
-            font-family: "Roboto Slab", Sans-serif;
+            font-family: "Roboto Slab", "Helvetica Neue", "Helvetica", Sans-serif;
+            overflow-x: hidden;
         }
 
         h1 {
-            line-height: 0.3em;
+            font-weight: normal;
+            line-height: 1em;
+            text-align: center;
+            letter-spacing: -0.008em;
+            text-shadow: 1px 1px antiquewhite;
         }
 
         h6 {
@@ -45,7 +48,7 @@
             align-items: center;
             justify-content: space-around;
             padding: 2em;
-            margin: 0em;
+            margin: 0;
             margin-bottom: 4em;
         }
 
@@ -93,15 +96,16 @@
         }
 
         span.license {
-            font-family: Sans-serif;
+            border-top: 5px solid antiquewhite;
+            font-family: 'Merriweather', serif;
+            font-size: 0.6em;
             position: fixed;
             bottom: 0;
             text-align: center;
             width: 100%;
             display: inline-block;
             background-color: white;
             padding: 0.5em;
-            font-size: 0.8em;
         }
     </style>
 
@@ -116,8 +120,7 @@ <h6>
     <img src="./slim.js.logo.png" width="168px" height="56px"/>
         <p>With es6 and slim you could write native web components double-time with no hassle of using external libraries that affect your workflow</p>
     </h6>
-    <h1>SLIM is your PRODUCTIVE way</h1>
-    <h1>for writing NATIVE web components</h1>
+    <h1><strong>SLIM</strong> is your <strong>PRODUCTIVE</strong> way<br/>for writing <strong>NATIVE</strong> web components</h1>
 
     <h2>Featuring</h2>
     <ul>

diff --git a/example/Kanban/KanbanDemo.html b/example/Kanban/KanbanDemo.html
@@ -4,14 +4,15 @@
     <meta charset="UTF-8">
     <title>Kanban Demo - SlimJS</title>
 
-    <link rel="import" href="../../SlimElement.js" />
-    <link rel="import" href="../../components/s-repeat.js" />
+    <script src="../../SlimElement.js"></script>
+    <script src="KanbanModel.js"></script>
+    <script src="../../components/s-repeat.js"></script>
     <script src="../../components/s-container.js"></script>
 
-    <script src="KanbanModel.js"></script>
+
     <link rel="import" href="kanban-app.html" />
-    <link rel="import" href="kanban-list.html" />
-    <link rel="import" href="kanban-item.html" />
+    <!--<link rel="import" href="kanban-list.html" />-->
+    <!--<link rel="import" href="kanban-item.html" />-->
 
     <style type="text/css">
 
@@ -48,8 +49,6 @@
 </head>
 <body>
 
-<s-container>
     <kanban-app root model="{KanbanModel}"></kanban-app>
-</s-container>
 </body>
 </html>
diff --git a/example/Kanban/KanbanModel.js b/example/Kanban/KanbanModel.js
@@ -5,43 +5,36 @@
 
     class KanbanModel {
 
+        constructor() {
+            this.lists = ['Todo', 'In-Progress', 'Done']
+            this.tasks = []
+        }
 
-        get lists() {
-            if (!this._lists) {
-                this._lists = {}
-            }
-            return this._lists
+        getTasks(column) {
+            return tasks.filter( task => {
+                return task.column === column
+            })
         }
 
-        addList(name = 'new list') {
-            var self = this
-            this.lists[name] = {
-                name: name,
-                items: [],
-                deleteList: function() {
-                    delete self.lists[this.name]
-                },
-                createItem: function(name = 'new task') {
-                    let newItem = {
-                        name: name,
-                        description: ''
-                    }
-                    this.items.push(newItem)
-                    return newItem
-                }
-            }
+        addTask(name = 'New Task', description = '') {
+            let newTask = { name, description}
+            newTask.column = 'Todo'
+            this.tasks.push(newTask)
         }
-    }
 
+        get hello() {
+            return 'Hello'
+        }
 
-    const instance = new KanbanModel()
+
+    }
 
 
-    instance.addList('list 1')
-    instance.addList('list 2')
-    instance.addList('list 3')
+    const instance = new KanbanModel()
 
-    instance.lists['list 1'].createItem('new task 1')
+    for (let x = 0; x < 10; x++) {
+        instance.addTask(`Task ${x+1}`, `this is task number ${x+1}`)
+    }
 
 
     SlimInjector.define("KanbanModel", function() {

diff --git a/example/Kanban/kanban-app.html b/example/Kanban/kanban-app.html
@@ -1,39 +1,17 @@
 <script>
 
-    (function() {
+    Slim('kanban-app', class extends SlimBaseElement {
 
-
-        document.registerElement('kanban-app', class extends SlimBaseElement {
-
-
-            get template() {
-                return `
-<input type="button" id="add" />
-<s-repeat source="lists">
-<kanban-list></kanban-list>
-</s-repeat>
+        get template() {
+            return `
+<span bind>[[model.hello]]</span><div test="[wtf]" model="{KanbanModel}"></div>
 `
-            }
-
-            get lists() {
-                if (this.model) {
-                    return Object.keys( this.model.lists ).map( k => { return this.model.lists[k] })
-                }
-                else return []
-            }
-
-            afterRender() {
-                this.find('#add').onclick = () => {
-                    this.model.addList(prompt('list name?'))
-                    this.update()
-                }
-                this.update()
-            }
-
-
-        })
+        }
 
+        onCreated() {
+            this.wtf = "Hello"
+        }
+    })
 
-    })()
 
 </script>
diff --git a/example/Kanban/kanban-item.html b/example/Kanban/kanban-item.html