diff --git a/.idea/gradle.xml b/.idea/gradle.xml index 47bd81f..a931762 100644 --- a/.idea/gradle.xml +++ b/.idea/gradle.xml @@ -1,5 +1,6 @@ + diff --git a/.idea/libraries/Gradle__nl_astraeus_komp_0_1_0_SNAPSHOT.xml b/.idea/libraries/Gradle__nl_astraeus_komp_0_1_0_SNAPSHOT.xml deleted file mode 100644 index 81f7a2b..0000000 --- a/.idea/libraries/Gradle__nl_astraeus_komp_0_1_0_SNAPSHOT.xml +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_2_51.xml b/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_2_51.xml deleted file mode 100644 index b085b2b..0000000 --- a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_2_51.xml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_51.xml b/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_51.xml deleted file mode 100644 index d1d48e6..0000000 --- a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_51.xml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_common_0_6_4.xml b/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_common_0_6_4.xml deleted file mode 100644 index 77b682f..0000000 --- a/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_common_0_6_4.xml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_js_0_6_4.xml b/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_js_0_6_4.xml deleted file mode 100644 index d91d7c5..0000000 --- a/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_js_0_6_4.xml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml index 13e1e2c..a7acfe8 100644 --- a/.idea/modules.xml +++ b/.idea/modules.xml @@ -2,7 +2,7 @@ - + \ No newline at end of file diff --git a/build.gradle b/build.gradle index 8f04d26..8a0a9b4 100644 --- a/build.gradle +++ b/build.gradle @@ -1,7 +1,5 @@ -import com.eriwen.gradle.js.tasks.CombineJsTask - buildscript { - ext.kotlin_version = '1.2.51' + ext.kotlin_version = '1.3.50' repositories { maven { @@ -14,16 +12,10 @@ buildscript { } dependencies { classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" - classpath "com.eriwen:gradle-js-plugin:1.12.1" } - } -plugins { - id "com.eriwen.gradle.js" version "2.14.1" -} - -apply plugin: 'kotlin2js' +apply plugin: 'kotlin-platform-js' apply plugin: 'kotlin-dce-js' group 'nl.astraeus' @@ -31,7 +23,7 @@ version '0.0.1-SNAPSHOT' allprojects { ext { - kotlin_version = '1.2.51' + kotlin_version = '1.3.50' } } @@ -44,7 +36,7 @@ repositories { dependencies { compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" - compile "nl.astraeus:komp:0.1.1-SNAPSHOT" + compile "nl.astraeus:komp:0.1.7" } compileKotlin2Js { @@ -63,24 +55,3 @@ runDceKotlinJs.doLast { into("web/js/generated") } } - -// Create new CombineJsTasks if you have multiple sets of JS files -task combineKotlinJs(type: CombineJsTask) { - dependsOn runDceKotlinJs - source = [ - "${projectDir}/web/js/generated/kotlin.js", - "${projectDir}/web/js/generated/min/kotlinx-html-js.js", - "${projectDir}/web/js/generated/min/komp.js", - "${projectDir}/web/js/generated/min/komp-todo.js" - ] - dest = file("${projectDir}/web/js/generated/todo.all.js") -} - -minifyJs { - source = combineKotlinJs - dest = file("${projectDir}/web/js/generated/todo.all.min.js") - closure { - warningLevel = 'QUIET' - compilerOptions.languageIn = "ECMASCRIPT5" - } -} diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties index fe2421f..311144e 100644 --- a/gradle/wrapper/gradle-wrapper.properties +++ b/gradle/wrapper/gradle-wrapper.properties @@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-3.4.1-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-4.2-all.zip diff --git a/komp-todo.iml b/komp-todo.iml index e74b399..2848213 100644 --- a/komp-todo.iml +++ b/komp-todo.iml @@ -2,36 +2,39 @@ - - $MODULE_DIR$/build/classes/test/komp-todo_test.js + + $MODULE_DIR$/build/classes/kotlin/test/komp-todo_test.js - - - - + + @@ -41,20 +44,20 @@ - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt b/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt index 61fc7aa..a152da8 100644 --- a/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt +++ b/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt @@ -1,6 +1,8 @@ package nl.astraeus.komp.todo +import kotlinx.html.HtmlBlockTag import kotlinx.html.InputType +import kotlinx.html.TagConsumer import kotlinx.html.a import kotlinx.html.button import kotlinx.html.classes @@ -19,10 +21,10 @@ import kotlinx.html.section import kotlinx.html.span import kotlinx.html.strong import kotlinx.html.ul -import nl.astraeus.komp.KompConsumer +import kotlinx.html.video import nl.astraeus.komp.Komponent -import nl.astraeus.komp.UpdateStrategy import nl.astraeus.komp.include +import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLInputElement import org.w3c.dom.events.Event import org.w3c.dom.events.KeyboardEvent @@ -46,17 +48,23 @@ 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: KompConsumer) = consumer.li { +) : Komponent() { + + override fun render(consumer: TagConsumer) = consumer.li { if (todo.editing) { classes += "editing" input(classes = "edit") { value = todo.title 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()) { app.editTodo(e, todo) } } @@ -174,7 +182,7 @@ class TodoApp : Komponent() { } } - override fun render(consumer: KompConsumer) = consumer.section(classes = "todoapp") { + override fun render(consumer: TagConsumer) = consumer.section(classes = "todoapp") { header(classes = "header") { h1 { +"todos" } input(classes = "new-todo") { @@ -182,15 +190,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) - val target = e.target - - if (target is HTMLInputElement) { - target.value = "" - target.defaultValue = "" - } + target.value = "" + target.defaultValue = "" } } } @@ -201,7 +206,7 @@ class TodoApp : Komponent() { type = InputType.checkBox } label { - for_ = "toggle-all" + htmlFor = "toggle-all" +"Mark all as complete" } ul(classes = "todo-list") { @@ -209,7 +214,7 @@ class TodoApp : Komponent() { if (selected == Selection.ALL || (todo.completed && selected == Selection.COMPLETED) || (!todo.completed && selected == Selection.ACTIVE)) { - include(TodoKomponent(this@TodoApp, todo)) + todo(this@TodoApp, todo) } } } @@ -247,13 +252,6 @@ class TodoApp : Komponent() { } -fun main(args: Array) { -/* - Komponent.logReplaceEvent = true - Komponent.logEquals = true - Komponent.logRenderEvent = true -*/ - - Komponent.updateStrategy = UpdateStrategy.REPLACE +fun main() { Komponent.create(document.body!!, TodoApp(), true) } diff --git a/web/css/index.css b/web/css/index.css index 07ef4a1..9e3b341 100644 --- a/web/css/index.css +++ b/web/css/index.css @@ -17,8 +17,7 @@ button { -webkit-appearance: none; appearance: none; -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } body { @@ -30,14 +29,12 @@ body { max-width: 550px; margin: 0 auto; -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; font-weight: 300; } -button, -input[type="checkbox"] { - outline: none; +:focus { + outline: 0; } .hidden { @@ -93,15 +90,13 @@ input[type="checkbox"] { font-weight: inherit; line-height: 1.4em; border: 0; - outline: none; color: inherit; padding: 6px; border: 1px solid #999; box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-sizing: border-box; -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .new-todo { @@ -117,28 +112,32 @@ input[type="checkbox"] { border-top: 1px solid #e6e6e6; } -label[for='toggle-all'] { - display: none; -} - .toggle-all { - position: absolute; - top: -55px; - left: -12px; - width: 60px; - height: 34px; text-align: center; border: none; /* Mobile Safari */ + opacity: 0; + position: absolute; } -.toggle-all:before { +.toggle-all + label { + width: 60px; + height: 34px; + font-size: 0; + position: absolute; + top: -52px; + left: -13px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} + +.toggle-all + label:before { content: '❯'; font-size: 22px; color: #e6e6e6; padding: 10px 27px 10px 27px; } -.toggle-all:checked:before { +.toggle-all:checked + label:before { color: #737373; } @@ -166,7 +165,7 @@ label[for='toggle-all'] { .todo-list li.editing .edit { display: block; width: 506px; - padding: 13px 17px 12px 17px; + padding: 12px 16px; margin: 0 0 0 43px; } @@ -188,19 +187,27 @@ label[for='toggle-all'] { appearance: none; } -.todo-list li .toggle:after { - content: url('data:image/svg+xml;utf8,'); +.todo-list li .toggle { + opacity: 0; } -.todo-list li .toggle:checked:after { - content: url('data:image/svg+xml;utf8,'); +.todo-list li .toggle + label { + /* + Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433 + IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/ + */ + background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position: center left; +} + +.todo-list li .toggle:checked + label { + background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E'); } .todo-list li label { - white-space: pre-line; word-break: break-all; - padding: 15px 60px 15px 15px; - margin-left: 45px; + padding: 15px 15px 15px 60px; display: block; line-height: 1.2; transition: color 0.4s; @@ -300,7 +307,6 @@ label[for='toggle-all'] { border-radius: 3px; } -.filters li a.selected, .filters li a:hover { border-color: rgba(175, 47, 47, 0.1); } @@ -316,7 +322,6 @@ html .clear-completed:active { line-height: 20px; text-decoration: none; cursor: pointer; - position: relative; } .clear-completed:hover { @@ -358,13 +363,6 @@ html .clear-completed:active { .todo-list li .toggle { height: 40px; } - - .toggle-all { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); - -webkit-appearance: none; - appearance: none; - } } @media (max-width: 430px) { diff --git a/web/index.html b/web/index.html index 84980ea..1e997e2 100644 --- a/web/index.html +++ b/web/index.html @@ -12,6 +12,9 @@

Compare other javascript MVC* frameworks with TodoMVC

- + + + + - \ No newline at end of file + diff --git a/web/index_dev.html b/web/index_dev.html deleted file mode 100644 index 1e997e2..0000000 --- a/web/index_dev.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - Komp-Todo - - - - -
-

Double-click to edit a todo

-

Compare other javascript MVC* frameworks with TodoMVC

-
- - - - - - -