Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/main/kotlin/nl/astraeus/komp/todo/Todo.kt

komp-todo.ipr

@@ -30,6 +30,9 @@
     </profile>
     <version value="1.0" />
   </component>
+  <component name="KotlinCommonCompilerArguments">
+    <option name="coroutinesWarn" value="false" />
+  </component>
   <component name="ProjectModuleManager">
     <modules>
       <module fileurl="file://$PROJECT_DIR$/.idea/modules/komp-todo.iml" filepath="$PROJECT_DIR$/.idea/modules/komp-todo.iml" />
@@ -55,6 +58,7 @@
     <library name="Gradle: nl.astraeus:komp:0.0.1-SNAPSHOT">
       <CLASSES>
         <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/nl.astraeus/komp/0.0.1-SNAPSHOT/f06cec1a883be748ea389ccccd70e2722bf1d265/komp-0.0.1-SNAPSHOT.jar!/" />
+        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/nl.astraeus/komp/0.0.1-SNAPSHOT/fe1a874742fc82c99c0a067c7189e0cc85c6b025/komp-0.0.1-SNAPSHOT.jar!/" />
       </CLASSES>
       <JAVADOC />
       <SOURCES />

src/main/kotlin/nl/astraeus/komp/todo/Todo.kt

@@ -1,38 +1,128 @@
 package nl.astraeus.komp.todo
 
 import kotlinx.html.*
-import kotlinx.html.js.onKeyPressFunction
+import kotlinx.html.js.onClickFunction
+import kotlinx.html.js.onDoubleClickFunction
+import kotlinx.html.js.onKeyDownFunction
 import kotlinx.html.js.section
 import nl.astraeus.komp.HtmlComponent
 import nl.astraeus.komp.Komp
 import org.w3c.dom.HTMLElement
+import org.w3c.dom.HTMLInputElement
+import org.w3c.dom.events.Event
 import org.w3c.dom.events.KeyboardEvent
 import kotlin.browser.document
+import kotlin.js.Date
 
 /**
- * User: rnentjes
+ * https://github.com/tastejs/todomvc/
- * Date: 1-4-17
- * Time: 17:46
  */
 
-class Todo(val dataId: String, val title: String, var completed: Boolean)
+class Todo(
+  val dataId: String,
+  var title: String,
+  var completed: Boolean = false,
+  var editing: Boolean = false
+)
+
+enum class Selection(val title: String) {
+    ALL("All"),
+    ACTIVE("Active"),
+    COMPLETED("Completed")
+}
 
 class TodoApp: HtmlComponent() {
-    val todos: List<Todo> = ArrayList()
+    val todoList: MutableList<Todo> = ArrayList()
+    var selected: Selection = Selection.ALL
 
-    fun addTodo(todo: String) {
+    fun addTodo(e: Event) {
+        val target = e.target
 
+        if (target is HTMLInputElement) {
+            todoList.add(Todo("${Date().getTime()}", target.value))
+
+            refresh()
+        }
+    }
+
+    fun editTodo(e: Event, todo: Todo) {
+        val target = e.target
+
+        if (target is HTMLInputElement) {
+            todo.title = target.value
+            todo.editing = false
+
+            refresh()
+        }
+
+    }
+
+    fun destroyTodo(todo: Todo) {
+        todoList.remove(todo)
+
+        refresh()
+    }
+
+    fun selectSelection(selection: Selection) {
+        selected = selection
+
+        refresh()
+    }
+
+    fun clearCompleted() {
+        for (todo in ArrayList(todoList)) {
+            if (todo.completed) {
+                todoList.remove(todo)
+            }
+        }
+
+        refresh()
+    }
+
+    fun todoClicked(todo: Todo) {
+        todo.completed = !todo.completed
+
+        refresh()
+    }
+
+    fun getItemsLeft(): Int {
+        var result = 0
+        for (todo in todoList) {
+            if (!todo.completed) {
+                result++
+            }
+        }
+        return result
+    }
+
+    fun setEditing(editTodo: Todo) {
+        for (todo in todoList) {
+            todo.editing = todo == editTodo
+        }
+
+        refresh()
+    }
+
+    override fun refresh() {
+        super.refresh()
+
+        val inputBox = document.getElementById("todo_input")
+
+        if (inputBox is HTMLInputElement) {
+            inputBox.focus()
+        }
     }
 
     override fun render(consumer: TagConsumer<HTMLElement>) = consumer.section(classes = "todoapp") {
         header(classes = "header") {
             h1 { + "todos" }
             input(classes = "new-todo") {
+                id = "todo_input"
                 placeholder = "What needs to be done?"
                 autoFocus = true
-                onKeyPressFunction = { e ->
+                onKeyDownFunction = { e ->
                     if (e is KeyboardEvent && e.keyCode == 13) {
-                        //addTodo(e.target.value)
+                        addTodo(e)
                     }
                 }
             }
@@ -46,57 +136,76 @@ class TodoApp: HtmlComponent() {
                 + "Mark all as complete"
             }
             ul(classes = "todo-list") {
-                for (todo in todos) {
+                for (todo in todoList) {
-                    li {
+                    if (selected == Selection.ALL ||
-                        if (todo.completed) {
+                        (todo.completed && selected == Selection.COMPLETED) ||
-                            classes += "completed"
+                        (!todo.completed && selected == Selection.ACTIVE)) {
-                        }
+                        li {
-                        attributes["data-id"] = todo.dataId
+                            if (todo.editing) {
-                        div(classes = "view") {
+                                classes += "editing"
-                            input(classes = "toggle") {
+                                input(classes = "edit") {
-                                type = InputType.checkBox
+                                    value = todo.title
-                                checked = todo.completed
+                                    onKeyDownFunction = { e ->
+                                        if (e is KeyboardEvent && e.keyCode == 13) {
+                                            editTodo(e, todo)
+                                        }
+                                    }
+                                }
+                            } else {
+                                if (todo.completed) {
+                                    classes += "completed"
+                                }
+                                attributes["data-id"] = todo.dataId
+                                div(classes = "view") {
+                                    input(classes = "toggle") {
+                                        type = InputType.checkBox
+                                        checked = todo.completed
+                                        onClickFunction = {
+                                            todoClicked(todo)
+                                        }
+                                    }
+                                    label(classes = "todo-content") {
+                                        +todo.title
+
+                                        onDoubleClickFunction = {
+                                            setEditing(todo)
+                                        }
+                                    }
+                                    button(classes = "destroy") {
+                                        onClickFunction = {
+                                            destroyTodo(todo)
+                                        }
+                                    }
+                                }
                             }
-                            label(classes = "todo-content") {
-                                + todo.title
-                            }
-                            button(classes = "destroy")
-                        }
-                        input(classes = "edit") {
-                            value = todo.title
                         }
                     }
                 }
             }
-
         }
         footer(classes = "footer") {
             span(classes = "todo-count") {
-                strong { + "0" }
+                strong { + "${getItemsLeft()}" }
                 + " item left"
             }
             ul(classes = "filters") {
-                li {
+                for (selection in Selection.values())
-                    a(classes = "selected") {
-                        href = "#"
-                        + "All"
-                    }
-                }
                 li {
                     a {
+                        if (selection == selected) { classes += "selected" }
                         href = "#"
-                        + "Active"
+                        + selection.title
-                    }
+                        onClickFunction = {
-                }
+                            selectSelection(selection)
-                li {
+                        }
-                    a(classes = "selected") {
-                        href = "#"
-                        + "Completed"
                     }
                 }
             }
             button(classes = "clear-completed") {
                 + "Clear completed"
+                onClickFunction = {
+                    clearCompleted()
+                }
             }
         }
     }

web/index.html

@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Hello-Komp</title>
+  <title>Komp-Todo</title>
   <link rel="stylesheet" href="css/index.css">
 </head>
 <body>
 
   <footer class="info">
     <p>Double-click to edit a todo</p>
-    <p>Created by <a href="http://mlorber.net">Mathieu Lorber</a></p>
+    <p>Created by <a href="#">Rien Nentjes</a></p>
-    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+    <p>Compare other javascript MVC* frameworks with <a href="http://todomvc.com">TodoMVC</a></p>
   </footer>
 
   <script src="js/kotlin/kotlin.js" ></script>

web/js/kotlin/komp-todo.js

@@ -1,15 +1,20 @@
 if (typeof kotlin === 'undefined') {
   throw new Error("Error loading module 'komp-todo'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'komp-todo'.");
 }
-if (typeof this['kotlinx-html-js'] === 'undefined') {
-  throw new Error("Error loading module 'komp-todo'. Its dependency 'kotlinx-html-js' was not found. Please, check whether 'kotlinx-html-js' is loaded prior to 'komp-todo'.");
-}
 if (typeof komp === 'undefined') {
   throw new Error("Error loading module 'komp-todo'. Its dependency 'komp' was not found. Please, check whether 'komp' is loaded prior to 'komp-todo'.");
 }
-this['komp-todo'] = function (_, Kotlin, $module$kotlinx_html_js, $module$komp) {
+if (typeof this['kotlinx-html-js'] === 'undefined') {
+  throw new Error("Error loading module 'komp-todo'. Its dependency 'kotlinx-html-js' was not found. Please, check whether 'kotlinx-html-js' is loaded prior to 'komp-todo'.");
+}
+this['komp-todo'] = function (_, Kotlin, $module$komp, $module$kotlinx_html_js) {
   'use strict';
+  var Enum = Kotlin.kotlin.Enum;
+  var ArrayList_init = Kotlin.kotlin.collections.ArrayList_init_mqih57$;
+  var HtmlComponent = $module$komp.nl.astraeus.komp.HtmlComponent;
   var h1 = $module$kotlinx_html_js.kotlinx.html.h1_vmej1w$;
+  var set_id = $module$kotlinx_html_js.kotlinx.html.set_id_ueiko3$;
+  var set_onKeyDownFunction = $module$kotlinx_html_js.kotlinx.html.js.set_onKeyDownFunction_pszlq2$;
   var input = $module$kotlinx_html_js.kotlinx.html.input_e1g74z$;
   var header = $module$kotlinx_html_js.kotlinx.html.header_8btlf7$;
   var InputType = $module$kotlinx_html_js.kotlinx.html.InputType;
@@ -17,6 +22,8 @@ this['komp-todo'] = function (_, Kotlin, $module$kotlinx_html_js, $module$komp)
   var get_classes = $module$kotlinx_html_js.kotlinx.html.get_classes_fxodxh$;
   var plus = Kotlin.kotlin.collections.plus_xfiyik$;
   var set_classes = $module$kotlinx_html_js.kotlinx.html.set_classes_njy09m$;
+  var set_onClickFunction = $module$kotlinx_html_js.kotlinx.html.js.set_onClickFunction_pszlq2$;
+  var set_onDoubleClickFunction = $module$kotlinx_html_js.kotlinx.html.js.set_onDoubleClickFunction_pszlq2$;
   var button = $module$kotlinx_html_js.kotlinx.html.button_whohl6$;
   var div = $module$kotlinx_html_js.kotlinx.html.div_ri36nr$;
   var li = $module$kotlinx_html_js.kotlinx.html.li_yzv5uh$;
@@ -27,35 +34,170 @@ this['komp-todo'] = function (_, Kotlin, $module$kotlinx_html_js, $module$komp)
   var a = $module$kotlinx_html_js.kotlinx.html.a_gu26kr$;
   var footer = $module$kotlinx_html_js.kotlinx.html.footer_780ap1$;
   var section_0 = $module$kotlinx_html_js.kotlinx.html.js.section_ceckl$;
-  var HtmlComponent = $module$komp.nl.astraeus.komp.HtmlComponent;
+  var ArrayList_init_0 = Kotlin.kotlin.collections.ArrayList_init_ww73n8$;
-  var ArrayList_init = Kotlin.kotlin.collections.ArrayList_init_ww73n8$;
   var komp_0 = $module$komp.nl.astraeus.komp;
+  Selection.prototype = Object.create(Enum.prototype);
+  Selection.prototype.constructor = Selection;
   TodoApp.prototype = Object.create(HtmlComponent.prototype);
   TodoApp.prototype.constructor = TodoApp;
-  function Todo(dataId, title, completed) {
+  function Todo(dataId, title, completed, editing) {
+    if (completed === void 0)
+      completed = false;
+    if (editing === void 0)
+      editing = false;
     this.dataId = dataId;
     this.title = title;
     this.completed = completed;
+    this.editing = editing;
   }
   Todo.$metadata$ = {
     kind: Kotlin.Kind.CLASS,
     simpleName: 'Todo',
     interfaces: []
   };
+  function Selection(name, ordinal, title) {
+    Enum.call(this);
+    this.title = title;
+    this.name$ = name;
+    this.ordinal$ = ordinal;
+  }
+  function Selection_initFields() {
+    Selection_initFields = function () {
+    };
+    Selection$ALL_instance = new Selection('ALL', 0, 'All');
+    Selection$ACTIVE_instance = new Selection('ACTIVE', 1, 'Active');
+    Selection$COMPLETED_instance = new Selection('COMPLETED', 2, 'Completed');
+  }
+  var Selection$ALL_instance;
+  function Selection$ALL_getInstance() {
+    Selection_initFields();
+    return Selection$ALL_instance;
+  }
+  var Selection$ACTIVE_instance;
+  function Selection$ACTIVE_getInstance() {
+    Selection_initFields();
+    return Selection$ACTIVE_instance;
+  }
+  var Selection$COMPLETED_instance;
+  function Selection$COMPLETED_getInstance() {
+    Selection_initFields();
+    return Selection$COMPLETED_instance;
+  }
+  Selection.$metadata$ = {
+    kind: Kotlin.Kind.CLASS,
+    simpleName: 'Selection',
+    interfaces: [Enum]
+  };
+  function Selection$values() {
+    return [Selection$ALL_getInstance(), Selection$ACTIVE_getInstance(), Selection$COMPLETED_getInstance()];
+  }
+  Selection.values = Selection$values;
+  function Selection$valueOf(name) {
+    switch (name) {
+      case 'ALL':
+        return Selection$ALL_getInstance();
+      case 'ACTIVE':
+        return Selection$ACTIVE_getInstance();
+      case 'COMPLETED':
+        return Selection$COMPLETED_getInstance();
+      default:Kotlin.throwISE('No enum constant nl.astraeus.komp.todo.Selection.' + name);
+    }
+  }
+  Selection.valueOf_61zpoe$ = Selection$valueOf;
   function TodoApp() {
     HtmlComponent.call(this);
-    this.todos = ArrayList_init();
+    this.todoList = ArrayList_init_0();
+    this.selected = Selection$ALL_getInstance();
   }
+  TodoApp.prototype.addTodo_9ojx7i$ = function (e) {
+    var target = e.target;
+    if (Kotlin.isType(target, HTMLInputElement)) {
+      this.todoList.add_11rb$(new Todo((new Date()).getTime().toString(), target.value));
+      this.refresh();
+    }
+  };
+  TodoApp.prototype.editTodo_y98rgd$ = function (e, todo) {
+    var target = e.target;
+    if (Kotlin.isType(target, HTMLInputElement)) {
+      todo.title = target.value;
+      todo.editing = false;
+      this.refresh();
+    }
+  };
+  TodoApp.prototype.destroyTodo_bcvlxp$ = function (todo) {
+    this.todoList.remove_11rb$(todo);
+    this.refresh();
+  };
+  TodoApp.prototype.selectSelection_uh5ef5$ = function (selection) {
+    this.selected = selection;
+    this.refresh();
+  };
+  TodoApp.prototype.clearCompleted = function () {
+    var tmp$;
+    tmp$ = ArrayList_init(this.todoList).iterator();
+    while (tmp$.hasNext()) {
+      var todo = tmp$.next();
+      if (todo.completed) {
+        this.todoList.remove_11rb$(todo);
+      }
+    }
+    this.refresh();
+  };
+  TodoApp.prototype.todoClicked_bcvlxp$ = function (todo) {
+    todo.completed = !todo.completed;
+    this.refresh();
+  };
+  TodoApp.prototype.getItemsLeft = function () {
+    var tmp$;
+    var result = 0;
+    tmp$ = this.todoList.iterator();
+    while (tmp$.hasNext()) {
+      var todo = tmp$.next();
+      if (!todo.completed) {
+        result = result + 1 | 0;
+      }
+    }
+    return result;
+  };
+  TodoApp.prototype.setEditing_bcvlxp$ = function (editTodo) {
+    var tmp$;
+    tmp$ = this.todoList.iterator();
+    while (tmp$.hasNext()) {
+      var todo = tmp$.next();
+      todo.editing = Kotlin.equals(todo, editTodo);
+    }
+    this.refresh();
+  };
+  TodoApp.prototype.refresh = function () {
+    HtmlComponent.prototype.refresh.call(this);
+    var inputBox = document.getElementById('todo_input');
+    if (Kotlin.isType(inputBox, HTMLInputElement)) {
+      inputBox.focus();
+    }
+  };
   function TodoApp$render$lambda$lambda$lambda($receiver) {
     $receiver.unaryPlus_pdl1vz$('todos');
   }
-  function TodoApp$render$lambda$lambda$lambda_0($receiver) {
+  function TodoApp$render$lambda$lambda$lambda$lambda(this$TodoApp) {
-    $receiver.placeholder = 'What needs to be done?';
+    return function (e) {
-    $receiver.autoFocus = true;
+      if (Kotlin.isType(e, KeyboardEvent) && e.keyCode === 13) {
+        this$TodoApp.addTodo_9ojx7i$(e);
+      }
+    };
   }
-  function TodoApp$render$lambda$lambda($receiver) {
+  function TodoApp$render$lambda$lambda$lambda_0(this$TodoApp) {
-    h1($receiver, void 0, TodoApp$render$lambda$lambda$lambda);
+    return function ($receiver) {
-    input($receiver, void 0, void 0, void 0, void 0, 'new-todo', TodoApp$render$lambda$lambda$lambda_0);
+      set_id($receiver, 'todo_input');
+      $receiver.placeholder = 'What needs to be done?';
+      $receiver.autoFocus = true;
+      set_onKeyDownFunction($receiver, TodoApp$render$lambda$lambda$lambda$lambda(this$TodoApp));
+    };
+  }
+  function TodoApp$render$lambda$lambda(this$TodoApp) {
+    return function ($receiver) {
+      h1($receiver, void 0, TodoApp$render$lambda$lambda$lambda);
+      input($receiver, void 0, void 0, void 0, void 0, 'new-todo', TodoApp$render$lambda$lambda$lambda_0(this$TodoApp));
+    };
   }
   function TodoApp$render$lambda$lambda$lambda_1($receiver) {
     $receiver.type = InputType.checkBox;
@@ -64,48 +206,85 @@ this['komp-todo'] = function (_, Kotlin, $module$kotlinx_html_js, $module$komp)
     $receiver.for_ = 'toggle-all';
     $receiver.unaryPlus_pdl1vz$('Mark all as complete');
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda(closure$todo) {
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda(closure$todo, this$TodoApp) {
+    return function (e) {
+      if (Kotlin.isType(e, KeyboardEvent) && e.keyCode === 13) {
+        this$TodoApp.editTodo_y98rgd$(e, closure$todo);
+      }
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda(closure$todo, this$TodoApp) {
+    return function ($receiver) {
+      $receiver.value = closure$todo.title;
+      set_onKeyDownFunction($receiver, TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda(closure$todo, this$TodoApp));
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda$lambda(closure$todo, this$TodoApp) {
+    return function (it) {
+      this$TodoApp.todoClicked_bcvlxp$(closure$todo);
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_0(closure$todo, this$TodoApp) {
     return function ($receiver) {
       $receiver.type = InputType.checkBox;
       $receiver.checked = closure$todo.completed;
+      set_onClickFunction($receiver, TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda$lambda(closure$todo, this$TodoApp));
     };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_0(closure$todo) {
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda$lambda_0(closure$todo, this$TodoApp) {
+    return function (it) {
+      this$TodoApp.setEditing_bcvlxp$(closure$todo);
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_1(closure$todo, this$TodoApp) {
     return function ($receiver) {
       $receiver.unaryPlus_pdl1vz$(closure$todo.title);
+      set_onDoubleClickFunction($receiver, TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda$lambda_0(closure$todo, this$TodoApp));
     };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda$lambda(closure$todo) {
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda$lambda_1(closure$todo, this$TodoApp) {
-    return function ($receiver) {
+    return function (it) {
-      input($receiver, void 0, void 0, void 0, void 0, 'toggle', TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda(closure$todo));
+      this$TodoApp.destroyTodo_bcvlxp$(closure$todo);
-      label($receiver, 'todo-content', TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_0(closure$todo));
-      button($receiver, void 0, void 0, void 0, 'destroy');
     };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_0(closure$todo) {
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_2(closure$todo, this$TodoApp) {
     return function ($receiver) {
-      $receiver.value = closure$todo.title;
+      set_onClickFunction($receiver, TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda$lambda_1(closure$todo, this$TodoApp));
     };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda(closure$todo) {
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_0(closure$todo, this$TodoApp) {
     return function ($receiver) {
-      if (closure$todo.completed) {
+      input($receiver, void 0, void 0, void 0, void 0, 'toggle', TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_0(closure$todo, this$TodoApp));
-        set_classes($receiver, plus(get_classes($receiver), 'completed'));
+      label($receiver, 'todo-content', TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_1(closure$todo, this$TodoApp));
+      button($receiver, void 0, void 0, void 0, 'destroy', TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_2(closure$todo, this$TodoApp));
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda_0(closure$todo, this$TodoApp) {
+    return function ($receiver) {
+      if (closure$todo.editing) {
+        set_classes($receiver, plus(get_classes($receiver), 'editing'));
+        input($receiver, void 0, void 0, void 0, void 0, 'edit', TodoApp$render$lambda$lambda$lambda$lambda$lambda(closure$todo, this$TodoApp));
+      }
+       else {
+        if (closure$todo.completed) {
+          set_classes($receiver, plus(get_classes($receiver), 'completed'));
+        }
+        var $receiver_0 = $receiver.attributes;
+        var value = closure$todo.dataId;
+        $receiver_0.put_xwzc9p$('data-id', value);
+        div($receiver, 'view', TodoApp$render$lambda$lambda$lambda$lambda$lambda_0(closure$todo, this$TodoApp));
       }
-      var $receiver_0 = $receiver.attributes;
-      var value = closure$todo.dataId;
-      $receiver_0.put_xwzc9p$('data-id', value);
-      div($receiver, 'view', TodoApp$render$lambda$lambda$lambda$lambda$lambda(closure$todo));
-      input($receiver, void 0, void 0, void 0, void 0, 'edit', TodoApp$render$lambda$lambda$lambda$lambda$lambda_0(closure$todo));
     };
   }
   function TodoApp$render$lambda$lambda$lambda_3(this$TodoApp) {
     return function ($receiver) {
       var tmp$;
-      tmp$ = this$TodoApp.todos.iterator();
+      tmp$ = this$TodoApp.todoList.iterator();
       while (tmp$.hasNext()) {
         var todo = tmp$.next();
-        li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda(todo));
+        if (this$TodoApp.selected === Selection$ALL_getInstance() || (todo.completed && this$TodoApp.selected === Selection$COMPLETED_getInstance()) || (!todo.completed && this$TodoApp.selected === Selection$ACTIVE_getInstance())) {
+          li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_0(todo, this$TodoApp));
+        }
       }
     };
   }
@@ -116,52 +295,70 @@ this['komp-todo'] = function (_, Kotlin, $module$kotlinx_html_js, $module$komp)
       ul($receiver, 'todo-list', TodoApp$render$lambda$lambda$lambda_3(this$TodoApp));
     };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda_0($receiver) {
+  function TodoApp$render$lambda$lambda$lambda$lambda_1(this$TodoApp) {
-    $receiver.unaryPlus_pdl1vz$('0');
+    return function ($receiver) {
+      $receiver.unaryPlus_pdl1vz$(this$TodoApp.getItemsLeft().toString());
+    };
   }
-  function TodoApp$render$lambda$lambda$lambda_4($receiver) {
+  function TodoApp$render$lambda$lambda$lambda_4(this$TodoApp) {
-    strong($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_0);
+    return function ($receiver) {
-    $receiver.unaryPlus_pdl1vz$(' item left');
+      strong($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_1(this$TodoApp));
+      $receiver.unaryPlus_pdl1vz$(' item left');
+    };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_1($receiver) {
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_3(closure$selection, this$TodoApp) {
-    $receiver.href = '#';
+    return function (it) {
-    $receiver.unaryPlus_pdl1vz$('All');
+      this$TodoApp.selectSelection_uh5ef5$(closure$selection);
+    };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda_1($receiver) {
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_1(closure$selection, this$TodoApp) {
-    a($receiver, void 0, void 0, 'selected', TodoApp$render$lambda$lambda$lambda$lambda$lambda_1);
+    return function ($receiver) {
+      if (closure$selection === this$TodoApp.selected) {
+        set_classes($receiver, plus(get_classes($receiver), 'selected'));
+      }
+      $receiver.href = '#';
+      $receiver.unaryPlus_pdl1vz$(closure$selection.title);
+      set_onClickFunction($receiver, TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_3(closure$selection, this$TodoApp));
+    };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_2($receiver) {
+  function TodoApp$render$lambda$lambda$lambda$lambda_2(closure$selection, this$TodoApp) {
-    $receiver.href = '#';
+    return function ($receiver) {
-    $receiver.unaryPlus_pdl1vz$('Active');
+      a($receiver, void 0, void 0, void 0, TodoApp$render$lambda$lambda$lambda$lambda$lambda_1(closure$selection, this$TodoApp));
+    };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda_2($receiver) {
+  function TodoApp$render$lambda$lambda$lambda_5(this$TodoApp) {
-    a($receiver, void 0, void 0, void 0, TodoApp$render$lambda$lambda$lambda$lambda$lambda_2);
+    return function ($receiver) {
+      var tmp$, tmp$_0;
+      tmp$ = Selection$values();
+      for (tmp$_0 = 0; tmp$_0 !== tmp$.length; ++tmp$_0) {
+        var selection = tmp$[tmp$_0];
+        li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_2(selection, this$TodoApp));
+      }
+    };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_3($receiver) {
+  function TodoApp$render$lambda$lambda$lambda$lambda_3(this$TodoApp) {
-    $receiver.href = '#';
+    return function (it) {
-    $receiver.unaryPlus_pdl1vz$('Completed');
+      this$TodoApp.clearCompleted();
+    };
   }
-  function TodoApp$render$lambda$lambda$lambda$lambda_3($receiver) {
+  function TodoApp$render$lambda$lambda$lambda_6(this$TodoApp) {
-    a($receiver, void 0, void 0, 'selected', TodoApp$render$lambda$lambda$lambda$lambda$lambda_3);
+    return function ($receiver) {
+      $receiver.unaryPlus_pdl1vz$('Clear completed');
+      set_onClickFunction($receiver, TodoApp$render$lambda$lambda$lambda$lambda_3(this$TodoApp));
+    };
   }
-  function TodoApp$render$lambda$lambda$lambda_5($receiver) {
+  function TodoApp$render$lambda$lambda_1(this$TodoApp) {
-    li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_1);
+    return function ($receiver) {
-    li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_2);
+      span($receiver, 'todo-count', TodoApp$render$lambda$lambda$lambda_4(this$TodoApp));
-    li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_3);
+      ul($receiver, 'filters', TodoApp$render$lambda$lambda$lambda_5(this$TodoApp));
-  }
+      button($receiver, void 0, void 0, void 0, 'clear-completed', TodoApp$render$lambda$lambda$lambda_6(this$TodoApp));
-  function TodoApp$render$lambda$lambda$lambda_6($receiver) {
+    };
-    $receiver.unaryPlus_pdl1vz$('Clear completed');
-  }
-  function TodoApp$render$lambda$lambda_1($receiver) {
-    span($receiver, 'todo-count', TodoApp$render$lambda$lambda$lambda_4);
-    ul($receiver, 'filters', TodoApp$render$lambda$lambda$lambda_5);
-    button($receiver, void 0, void 0, void 0, 'clear-completed', TodoApp$render$lambda$lambda$lambda_6);
   }
   function TodoApp$render$lambda(this$TodoApp) {
     return function ($receiver) {
-      header($receiver, 'header', TodoApp$render$lambda$lambda);
+      header($receiver, 'header', TodoApp$render$lambda$lambda(this$TodoApp));
       section($receiver, 'main', TodoApp$render$lambda$lambda_0(this$TodoApp));
-      footer($receiver, 'footer', TodoApp$render$lambda$lambda_1);
+      footer($receiver, 'footer', TodoApp$render$lambda$lambda_1(this$TodoApp));
     };
   }
   TodoApp.prototype.render_q0cphf$ = function (consumer) {
@@ -181,11 +378,21 @@ this['komp-todo'] = function (_, Kotlin, $module$kotlinx_html_js, $module$komp)
   var package$komp = package$astraeus.komp || (package$astraeus.komp = {});
   var package$todo = package$komp.todo || (package$komp.todo = {});
   package$todo.Todo = Todo;
+  Object.defineProperty(Selection, 'ALL', {
+    get: Selection$ALL_getInstance
+  });
+  Object.defineProperty(Selection, 'ACTIVE', {
+    get: Selection$ACTIVE_getInstance
+  });
+  Object.defineProperty(Selection, 'COMPLETED', {
+    get: Selection$COMPLETED_getInstance
+  });
+  package$todo.Selection = Selection;
   package$todo.TodoApp = TodoApp;
   package$todo.main_kand9s$ = main;
   Kotlin.defineModule('komp-todo', _);
   main([]);
   return _;
-}(typeof this['komp-todo'] === 'undefined' ? {} : this['komp-todo'], kotlin, this['kotlinx-html-js'], komp);
+}(typeof this['komp-todo'] === 'undefined' ? {} : this['komp-todo'], kotlin, komp, this['kotlinx-html-js']);
 
 //@ sourceMappingURL=komp-todo.js.map

web/js/kotlin/komp-todo.js.map

@@ -1 +1 @@
-{"version":3,"file":"komp-todo.js","sources":["file:///home/rnentjes/Development/komp/komp-todo/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkB4B;;;IAIX;;;IAED;IACA,sBAsE4B;;;IAzEhC;IACA;;;IAOI;;;IAGA;IACA;;;;MAWgB;MACA,oBAAU;;;;;MAGV,4BAAE;;;;;MALN;MAIA;MAGA;;;;;MAGA,kBAAQ;;;;;MAfZ,IAAI;QACA;;;;;MAGJ;MAUA;;;;;;0BAhBK;MAAb;;QACI;;;;;;MATR;MAGA;MAIA;;;;IA2Ba;;;IAAT;IACA;;;IAKQ;IACA;;;IAFJ;;;IAOI;IACA;;;IAFJ;;;IAOI;IACA;;;IAFJ;;;IAbJ;IAMA;IAMA;;;IAQA;;;IAzBJ;IAIA;IAoBA;;;;MAjEJ;MAOA;MAiCA;;;;qBAzCsD;;;;;;;;;yGA2ElB;;;;;;;;;;;;;"}
+{"version":3,"file":"komp-todo.js","sources":["file:///home/rnentjes/Development/komp/komp-todo/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAoD2B;;gBAAA;;;;;;;;;;;;;;;;;;;;kDAoCN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAtDiB;;;;IAI9B,aAAa;IAEb,kBAAI;WACA,mBAAa,SAAK,CAAG,kCAAoB;MAEzC;;;;IAKJ,aAAa;IAEb,kBAAI;MACA,AAAA,aAAa;MACb,AAAA,eAAe;MAEf;;;;SAMJ,sBAAgB;IAEhB;;;IAIA,gBAAW;IAEX;;;;WAIa,oBAAU;IAAvB;;MACI,IAAI;aACA,sBAAgB;;;IAIxB;;;IAIA,AAAA,iBAAiB,CAAC;IAElB;;;;IAIA,aAAa;gBACA;IAAb;;MACI,IAAI,CAAC;;;;IAIT,OAAO;;;;gBAIM;IAAb;;MACI,AAAA,eAAe,cAAA,MAAQ;;IAG3B;;;;IAMA,eAAe;IAEf,kBAAI;MACA;;;;IAMK;;;;MAMG,IAAI,cAAA,qBAAsB,AAAA,cAyBiC;QAxBvD,6BAAQ;;;;;;MALhB;MACA;MACA,sBA8F4B;MA7F5B;;;;;MALJ;MACA;;;;IAaI;;;IAGA;IACA;;;;MAawB,IAAI,cAAA,qBAAsB,AAAA,cAAa;QACnC,8BAAS,GAAG;;;;;;MAHpB,kBAAQ;MACR;;;;;MAgBQ,iCAAY;;;;;MAHhB;MACA,oBAAU;MACV;;;;;MAQI,gCAAW;;;;;MAHf,4BAAC;MAED;;;;;MAMI,iCAAY;;;;;MADhB;;;;;MAfJ;MAOA;MAOA;;;;;MA9BR,IAAI;QACA;QACA;;;QASA,IAAI;UACA;;;;;QAGJ;;;;;;;0BApBH;MAAb;;QACI,IAAI,AAAA,AAAA,aAAA,6CACC,AAAA,kBAAkB,aAAA,oDAClB,AAAA,CAAC,kBAAkB,aAAA;UACpB;;;;;;;MAZZ;MAGA;MAIA;;;;;MAkDa,4BAAE,AAAG;;;;;MAAd;MACA;;;;;MAUY,qCAAgB;;;;;MAJpB,IAAI,AAAA,mCAAa;QAAY;;MAC7B;MACA,4BAAE;MACF;;;;;MAJJ;;;;;;;MAFJ,cAvGK;;QAwGL;;;;;;MAcI;;;;;MAFJ;MACA;;;;;MAnBJ;MAIA;MAaA;;;;;MAvFJ;MAaA;MAwDA;;;;qBAtEsD;;;;;;;;;yGAoGlB;;;;;;;;;;;;;;;;;;;;;;;"}

web/js/kotlin/komp-todo.meta.js

@@ -1 +1 @@
-// Kotlin.kotlin_module_metadata(1, "komp-todo", "H4sIAAAAAAAAAI1X227bRhClSIoiR5K1pmOZoVMEddEmvThVnKJoiraAnRZwi/Shjgv0labWMmWKqy5XvvxAPsBPeep36Kf6De0sTd1orSg/cClyZs5czszQmvsxaK7mex/s/yZ/lbEzu7+zNfdTaIB1yUQcJaD3UxdAJxqYtkYqvvXBRvlM7BU8Aj2JwQ5SwQM6SsG8ZIOhS2bieK0QXSrpY0eXSl9De2q7QW+GlEcDmoggVqHsI8pEAYIkYSIQEUtU4p9BcypudNlAJfcMNqZypqCpUAl+CztgMN4D4/pVCHV0+JzxQZCEdHWgEmAhOyqAF9CaAzBuLvhqw4ewN0tIyDgbiSihaSGbK018AjCDVPnVgc05v6rnUUzT8pAzjdrlBWcJU4ZcSP6NMvlPwEFjmeCNa0oZ+VYbO9qUp/2/R5Tfgj6K1AnenqLVQ2RowKOUJUrvvoPHU1AwL8QAixglfRoKVlKa1+AXNZ0QkUYDykty98MCzSRzwaJXWMvUbRf18KoTQ2obY8eQ2jtgSrI9TNEXWMRJ7LUzzq5TylVxv8ZOK7hgjHi8Dv7nQKYwFg+SHlVm9wC25lBq14xfliZnF+xJoR+GKMs1M9jEARGdR2E2JErMLgs4veqtE/A3c5yqcXoeIzuyWbkSsMDEWGpFK5j4JbhTeaSgoDxRD0qZ2AL51nCoVcjAankPqpm8ohcnOyNia03z2fBSib+DF+WzDgBTw6MkjcK1mkXurUKiyiPPKHiv9DB47Hqo/vFnEomH74pjlIrwYjXUwgrrXylXmNxMhTgs3DU0KAllGe3DdK3ULZRvyBkWQUTq8n0Pu0UPIRBYq7ORKFsmP8PTpR021whrOPwcCb7ogcrXr7B9JnhOSnHY4IpXRib7f2HVQfWanvVK9u7CNM5jWoVQyJ0ZDYYlCLINM7+q/ZGko8L4Pyb8W1n28YbrmHUZmKfyOiXhYXILVjcQwa9dsN7JXkMAEYmYyv2GTlFBu1A7YiymAYYmtQ+HQ2geo9tvUIAl2Kmogs/ThckH5tsoFbgzaNKlvEjL+vHp729/iansc7Anm7SYlvpp0HszeWcOAvlRIXsRzID3sDCHnAe37l1lOVvAsg1iehq+reJ9lVh4L087P+vZaZBGduqk6UkrVdLCX3VCMk0XnzTJFl43CHaI3SLb2XPcy/Ym8fCJSx7n9nbz8yNP85/6O8T39c6jgwZ54tuu6eqdWmd7bGv3FN77yTMP9I515LkWqaFgDU8nPwFP+8S5P/96v3GSi5zkImhl76XnoD4cab+1ySY+JAjUzoFIZ+u4fdIgG/lvs9NAlTtbx/8QfgSvWIwafjelWPk12s7PmeO38krty0Lt91M/I9n/uqBRFoUMAAA=");
+// Kotlin.kotlin_module_metadata(1, "komp-todo", "H4sIAAAAAAAAAI1XSVPjRhSWJVmWnrdGbEbMhAyzLzCOJ5XKpJIDeFwFlKkkQFJzFXZjZGTJabVZ/sD8gDnNT+E0xznnHyWvZXkTyDZV1mt1f2/ttwjJfASSKVmlL/p/g7/UrTFaf9Yl8ynkQLvwuet4ILcDE0AmEqi6RFKW9kVHfAh7B0sgey7odsCZTXsBqBd+p2uSERyfKSILJvnWkAXTW1gZys7R6y5lTod63HaTtGyhlgED2J7nc5s7vpcEfwb5IVxp+p0k3HMoDHEqpwFPAv4Eq6D4rAXK1bsGZNHgM591bK9BpzsqFExEJ0nBNhTHFCjX52y64B3YHAWk4TO/xx2PBrFoThXxGGCkMsmuMiyM2ZU+c1wazHY55MhcnDPf8xNdjgX/OjH4D8BAYSHw2lQFRpxKt4Y0zNP2Pz3KbkDuOckBXh5qyzYwQ23mBL6XaN3PsDZUCuo57+AlOl6bNrg/42regxXnNBqoqdehbEbsfp1IM5G5oNFLvMvAXInz4VMmiuBWbg1FcK+CKpLtbohe4SUOfM+cMv8qoCzJ7/dYaTETlB5z59H/EshQjcZsr0UTo1uBxTEtmSufXcwMzjrog4u+66K4rpHAPDYI58xphE1ihtj7HA4uW/M4/ONYTmUYPXMxO8JeOVVhLBNdweVMycTXYA7xmIKcMi+5UYrAxpJvDoOKsQhMx5cgHeITanEwMxx/rm4+al5J8GPYnt3rADA0zPECpzFXsYi5FQvUbM/DFOwz3XUeqx7Sf/7lOfzuWbyNUt44n65qYoS1LxNHmJhMMT80nDXUnuHKfWnfCOYK3cT1dZmPl8Cd5Ov7BdbjFoLN8a5Oe3zWMPkAG/dW2FghzGHwC0zwSQuSbH2D5TPQZwQUmw2O+ETPRP1PjDpIX9HT1oy5O9GNI5+maYjFTnU63RkaRBmGdqXbPZGOCcK/6vBNue/jDcex3/TBOKZRbxrN6ZrX60CaO9yloB2LgsMM2qnXQdupnuz/XQOj+vvhH/XaSe0DqCdCirLj3YDWtLm93xSDEK2nnDYhs+v7LrUxBrTpcCEnI/A73S7k99DRKiJ9D2sb9CC0A3l0YVfdCfhE44TsYY/bpy4NTzJ2sxkqVkUpQoomTFRI1wSFQgOtYNWhXdkmfgcy/yaUoQvbwlWuRfk+p52gTs84KPvIKS6P0eAchx31mpRBdu/ksF5zaSe0ejDz4xeYPbFb1cFZse/bKNJGMFxCQHktik1WeF51ncYFmqh2bHEXNmuhFzuM2Tfmv6n7ywA0XSFqScLTNK7TRMO1oHpIVWJEFCKaDalCchEuH1ES7ZshlcliSWhLE/yQ1wlZjVBroaZ1PFkkD/C5RB7ic5l8h6crZCNCPQnpMnkeol8iwiKvcGedvI4QlZJkbVirpGzJZbOSIz9YuqmacjlTfnirS/3K3qzon1IltdI/UcvaLuiyqZEM8mSOItqWdQN/gL8scm7m9W+pkl5B/K6sy/1XY/IVhq8fS1lc53afoNSCkDaQbuoYgSKu8uFqQayOjP7Ox0+FowiOWwuDLaPPiUthxtdUqYCii7vSQYGUQic1YiFdPdDI9+Id9x9F+wrS7MEK2RzHDfc18hhp6UAnT8X53goin+FqDcP2IgrbWvkB7hfIm0jCFlIV37ej981QUoG8HdeIJi8JnLA+R5YjUdnyAjrwWZfxP8jfoBQvrgx+VweYsHO0ZStqKlbYc6xiVCVboki22sH/4YJWPKUOAAA=");