merging files into main

SlimElement.js

@@ -1,7 +1,7 @@
     ;(function() {
 
 
-        var css = 'slim-component, s-repeat { all: inherit; padding: 0; margin: 0; background: none; }',
+        var css = 'slim-component, s-repeat { all: inherit; padding: 0; margin: 0; background: none; left: 0; top: 0;}',
             head = document.head || document.getElementsByTagName('head')[0],
             style = document.createElement('style');
 
@@ -195,21 +195,24 @@
             }
             afterRender() {}
             onAdded() {}
-            update(root = false) {
+            update(root = false, flat = true) {
                 if (root) {
                     document.querySelectorAll('[root]').forEach( (element) => {
                         element.update(false)
                     })
                     return
                 }
-                this._applyTextBindings()
+                if (!flat) this._applyTextBindings()
                 for (let child of this.children) {
                     try {
                         child.update()
                     }
                     catch (err) {}
                 }
             }
+            refresh() {
+                this.createdCallback(true)
+            }
             onRemoved() {}
 
             //noinspection JSUnusedGlobalSymbols

example/Kanban/KanbanDemo.html

@@ -4,11 +4,11 @@
     <meta charset="UTF-8">
     <title>Kanban Demo - SlimJS</title>
     <link href="https://fonts.googleapis.com/css?family=Catamaran:200|Catamaran:800|Ubuntu|Ubuntu:800" rel="stylesheet" async>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
     <script src="../../SlimElement.js"></script>
     <script src="KanbanModel.js"></script>
-    <script src="../../components/s-repeat.js"></script>
-    <script src="../../components/s-container.js"></script>
 
 
     <link rel="import" href="kanban-app.html" />

example/Kanban/KanbanModel.js

@@ -1,15 +1,27 @@
 +(function(){
     "use strict";
 
+    class Dispatcher {
+        constructor() {
+            var delegate = document.createDocumentFragment();
+            ['addEventListener', 'dispatchEvent', 'removeEventListener'].forEach(
+                f => this[f] = (...xs) => delegate[f](...xs)
+            )
+        }
+    }
 
-
-    class KanbanModel {
+    class KanbanModel extends Dispatcher{
 
         constructor() {
+            super()
             this.columns = [{name: 'Todo'},{name:'In-Progress'},{name:'Done'}]
             this.tasks = []
         }
 
+        notify() {
+            this.dispatchEvent(new Event('change'))
+        }
+
         getIdForNewTask() {
             return this.tasks.length + 1;
         }
@@ -27,6 +39,11 @@
             this.tasks.push(newTask)
         }
 
+        moveTask(task, column) {
+            task.column = column.name
+            this.notify()
+        }
+
         get hello() {
             return 'Hello'
         }

example/Kanban/kanban-app.html

@@ -11,6 +11,10 @@
             return this.model.columns
         }
 
+        afterRender() {
+
+        }
+
     })
 
 

example/Kanban/kanban-column.html

@@ -13,6 +13,18 @@
             return this.model.getTasks(this.data.name)
         }
 
+        afterRender() {
+            this.model.addEventListener('change', () => {
+                this.update()
+            })
+            $(this).droppable({
+                accept: 'kanban-item',
+                drop: function(event, ui) {
+                    this.model.moveTask(ui.draggable[0].data, this.data)
+                }
+            })
+        }
+
 
     })
 

example/Kanban/kanban-item.html

@@ -13,6 +13,14 @@
 </div>`
         }
 
+        afterRender() {
+            $(this).draggable({
+                revert: 'invalid',
+                revertDuration: 100,
+                connectWith: 'kanban-column'
+            })
+        }
+
     })