adding id as direct refs (experimental)

slimjs · Dec 10, 2016 · 8eb4640 · 8eb4640
1 parent b952c46
commit 8eb4640
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 8 deletions.
diff --git a/SlimElement.js b/SlimElement.js
@@ -1,7 +1,7 @@
     ;(function() {
 
 
-        var css = 'slim-component, s-repeat { all: inherit; padding: 0; margin: 0; background: none; left: 0; top: 0;}',
+        var css = 's-repeat { display: none; } slim-component { all: inherit; padding: 0; margin: 0; background: none; left: 0; top: 0;}',
             head = document.head || document.getElementsByTagName('head')[0],
             style = document.createElement('style');
 
@@ -249,7 +249,7 @@
                     var arr = desc.split(".");
                     while(arr.length && obj) {
                             obj = obj[arr.shift()]
-                    };
+                    }
                     return obj;
                 }
 
@@ -339,6 +339,9 @@
                 allChildren = Array.prototype.slice.call(allChildren).concat(this)
                 for (let child of allChildren) {
                     child.parentBind = child.parentBind || this
+                    if (child.getAttribute('id')) {
+                        child.parentBind[ child.getAttribute('id') ] = child
+                    }
                     if (child.attributes) for (let i = 0; i < child.attributes.length; i++) {
                         let descriptor = __describeAttribute(child.attributes[i])
                         if (descriptor.type) {
@@ -443,7 +446,12 @@
             }
 
             update() {
-                this.innerHTML = ''
+                if (this.childrenToRemove) {
+                    for (let child of this.childrenToRemove) {
+                        if (child.parentNode) child.parentNode.removeChild(child)
+                    }
+                }
+                this.childrenToRemove = []
                 let childrenToAdd = []
                 for (let dataItem of this.sourceData) {
                     for (let child of this.__bindingTree.children) {
@@ -468,7 +476,8 @@
                     }
                 }
                 for (let child of childrenToAdd) {
-                    this.appendChild(child)
+                    this.parentNode.appendChild(child)
+                    this.childrenToRemove.push(child)
                 }
             }
         })

diff --git a/example/Kanban/KanbanDemo.html b/example/Kanban/KanbanDemo.html
@@ -25,6 +25,7 @@
             height: 100%;
             margin: 0;
             padding: 0;
+            background: black;
         }
 
         * {

diff --git a/example/Kanban/kanban-column.html b/example/Kanban/kanban-column.html
@@ -6,7 +6,7 @@
 
 
         get template() {
-            return `<span bind>[[data.name]]</span><kanban-item slim-repeat="myTasks"></kanban-item>`
+            return `<div id="title" bind>[[data.name]]</div><kanban-item slim-repeat="myTasks"></kanban-item>`
         }
 
         get myTasks() {
@@ -15,7 +15,7 @@
 
         afterRender() {
             this.model.addEventListener('change', () => {
-                this.update()
+                this.update(false, true)
             })
             $(this).droppable({
                 accept: 'kanban-item',
@@ -38,11 +38,16 @@
     kanban-column {
         display: inline-flex;
         flex-direction: column;
-        height: 100%;
         width: 15em;
         padding: 1em;
+        padding-bottom: 5em;
         background: antiquewhite;
         align-items: center;
         justify-content: flex-start;
     }
+
+    kanban-column #title {
+        align-self: flex-start;
+        margin-bottom: 1em;
+    }
 </style>
diff --git a/example/Kanban/kanban-item.html b/example/Kanban/kanban-item.html
@@ -9,16 +9,49 @@
             return `
 <div>
     <div class="title"><span bind>[[data.title]]</span></div>
+    <div><input class="toggle" type="button" value="[getToggleText(open)]" /></div>
     <div class="description" bind>[[data.description]]</div>
 </div>`
         }
 
+        beforeRender() {
+            this.open = true;
+        }
+
+        getToggleText(value) {
+            if (value) {
+                return '-'
+            }
+            return '+'
+        }
+
         afterRender() {
             $(this).draggable({
+                handle: '.title',
+                scroll: 'false',
+                start: () => {
+                    this.open = false
+                    this.update()
+                },
+                snap: 'kanban-column',
                 revert: 'invalid',
                 revertDuration: 100,
                 connectWith: 'kanban-column'
             })
+            $(this.find('.toggle')).click( () => {
+                this.open = !this.open
+                this.update()
+            })
+            this.update()
+        }
+
+        update() {
+            super.update()
+            if (this.open) {
+                $(this.find('.description')).show()
+            } else {
+                $(this.find('.description')).hide()
+            }
         }
 
     })
@@ -52,8 +85,9 @@
     kanban-item .title {
         font-family: "Catamaran", Sans-serif;
         font-weight: normal;
-        display: block;
         font-size: 1.3em;
         width: 100%;
+        border-bottom: 1px solid black;
+        display: inline-flex;
     }
 </style>