rnentjes/komp-todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update readme

Browse Source
This commit is contained in:
rnentjes
2019-11-15 19:13:45 +01:00
parent 928c6a6c03
commit 8f7b03b5b8
2 changed files with 211 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
readme.md
View File

@@ -16,9 +16,29 @@ Complete source:
```kotlin
package nl.astraeus.komp.todo
import kotlinx.html.*
import kotlinx.html.js.*
import kotlinx.html.HtmlBlockTag
import kotlinx.html.InputType
import kotlinx.html.TagConsumer
import kotlinx.html.a
import kotlinx.html.button
import kotlinx.html.classes
import kotlinx.html.div
import kotlinx.html.footer
import kotlinx.html.h1
import kotlinx.html.header
import kotlinx.html.id
import kotlinx.html.input
import kotlinx.html.js.onClickFunction
import kotlinx.html.js.onDoubleClickFunction
import kotlinx.html.js.onKeyPressFunction
import kotlinx.html.label
import kotlinx.html.li
import kotlinx.html.section
import kotlinx.html.span
import kotlinx.html.strong
import kotlinx.html.ul
import nl.astraeus.komp.Komponent
import nl.astraeus.komp.include
import org.w3c.dom.HTMLElement
import org.w3c.dom.HTMLInputElement
import org.w3c.dom.events.Event
@@ -27,7 +47,7 @@ import kotlin.browser.document
import kotlin.js.Date
/**
* https://github.com/tastejs/todomvc/
* see: https://github.com/tastejs/todomvc/
*/
class Todo(
@@ -43,6 +63,58 @@ enum class Selection(val title: String) {
COMPLETED("Completed")
}
fun HtmlBlockTag.todo(app: TodoApp, todo: Todo) {
this.include(TodoKomponent(app, todo))
}
class TodoKomponent(
val app: TodoApp,
val todo: Todo
) : Komponent() {
override fun render(consumer: TagConsumer<HTMLElement>) = consumer.li {
if (todo.editing) {
classes += "editing"
input(classes = "edit") {
value = todo.title
onKeyPressFunction = { e ->
val target = e.target
if (target is HTMLInputElement && e is KeyboardEvent && e.keyCode == 13 && target.value.isNotBlank()) {
app.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 = {
app.todoClicked(todo)
}
}
label(classes = "todo-content") {
+todo.title
onDoubleClickFunction = {
app.setEditing(todo)
}
}
button(classes = "destroy") {
onClickFunction = {
app.destroyTodo(todo)
}
}
}
}
}
}
class TodoApp : Komponent() {
val todoList: MutableList<Todo> = ArrayList()
var selected: Selection = Selection.ALL
@@ -133,8 +205,12 @@ class TodoApp: Komponent() {
placeholder = "What needs to be done?"
autoFocus = true
onKeyPressFunction = { e ->
if (e is KeyboardEvent && e.keyCode == 13) {
val target = e.target
if (target is HTMLInputElement && e is KeyboardEvent && e.keyCode == 13 && target.value.isNotBlank()) {
addTodo(e)
target.value = ""
target.defaultValue = ""
}
}
}
@@ -145,7 +221,7 @@ class TodoApp: Komponent() {
type = InputType.checkBox
}
label {
for_ = "toggle-all"
htmlFor = "toggle-all"
+"Mark all as complete"
}
ul(classes = "todo-list") {
@@ -153,45 +229,7 @@ class TodoApp: Komponent() {
if (selected == Selection.ALL ||
(todo.completed && selected == Selection.COMPLETED) ||
(!todo.completed && selected == Selection.ACTIVE)) {
li {
if (todo.editing) {
classes += "editing"
input(classes = "edit") {
value = todo.title
onKeyPressFunction = { 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)
}
}
}
}
}
todo(this@TodoApp, todo)
}
}
}
@@ -203,10 +241,12 @@ class TodoApp: Komponent() {
+" item left"
}
ul(classes = "filters") {
for (selection in Selection.values())
for (selection in Selection.values()) {
li {
a {
if (selection == selected) { classes += "selected" }
if (selection == selected) {
classes += "selected"
}
href = "#"
+selection.title
onClickFunction = {
@@ -215,6 +255,7 @@ class TodoApp: Komponent() {
}
}
}
}
button(classes = "clear-completed") {
+"Clear completed"
onClickFunction = {
@@ -226,7 +267,7 @@ class TodoApp: Komponent() {
}
fun main(args: Array<String>) {
fun main() {
Komponent.create(document.body!!, TodoApp(), true)
}
```

3
src/main/kotlin/nl/astraeus/komp/todo/Todo.kt
View File

@@ -21,7 +21,6 @@ import kotlinx.html.section
import kotlinx.html.span
import kotlinx.html.strong
import kotlinx.html.ul
import kotlinx.html.video
import nl.astraeus.komp.Komponent
import nl.astraeus.komp.include
import org.w3c.dom.HTMLElement
@@ -32,7 +31,7 @@ import kotlin.browser.document
import kotlin.js.Date
/**
* https://github.com/tastejs/todomvc/
* see: https://github.com/tastejs/todomvc/
*/
class Todo(