From 7b68b4d86891ef6ca084efe67af64e292e6d2af4 Mon Sep 17 00:00:00 2001 From: shahrul Date: Sun, 4 Feb 2024 21:27:24 +0800 Subject: [PATCH] visibility fix --- README.md | 4 +--- hs/behaviors/footer._hs | 4 ++-- hs/behaviors/todo-count._hs | 2 +- hs/behaviors/toggle-all._hs | 2 ++ hs/behaviors/toggle-footer._hs | 6 ++++-- hs/main._hs | 6 +++--- main.go | 4 ++-- todomvc.templ | 2 +- 8 files changed, 16 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index e349c42..da55050 100644 --- a/README.md +++ b/README.md @@ -11,13 +11,11 @@ [![Go](https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/actions/workflows/go.yml/badge.svg)](https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/actions/workflows/go.yml) ### E2E Testing -As evidence of HTMX's capabilities in emulating the functionalities of modern frameworks, I have incorporated [cypress test](https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/actions/runs/7412273948/job/20168687544) from https://github.com/cypress-io/cypress-example-todomvc. This demonstration serves to showcase that HTMX, when paired with _hyperscript, can replicate if not all the behaviors typically associated with most modern client framework with minimum needs to write javascript. +Emulating the functionalities of modern frameworks which is base on React TodoMVC, [cypress test](https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/actions/runs/7412273948/job/20168687544) from https://github.com/cypress-io/cypress-example-todomvc. This demonstration serves to showcase that HTMX, when paired with _hyperscript, can replicate if not all the behaviors typically associated with most modern client framework with minimum needs to write javascript. ### Security Check on [this link](https://templ.guide/security/) when using `templ` as HTML template engine. -> `Do not blame the farmer if you cook the rice til it burns.` - ### Usage - install go if you don't have - run `go mod tidy` to fetch all needed modules diff --git a/hs/behaviors/footer._hs b/hs/behaviors/footer._hs index 6bfd048..409d059 100644 --- a/hs/behaviors/footer._hs +++ b/hs/behaviors/footer._hs @@ -4,8 +4,8 @@ behavior Footer if $clearCompleted === undefined htmx.ajax("GET", "/completed", {target:".filters", swap: "afterend"}) else - -- need to first set to undefined in case the fetch may return empty which - -- will indiscriminately leave it in incorrect state + -- need 1st set to undefined in case the fetch may return empty which + -- will may leave it in incorrect state set $clearCompleted to undefined htmx.ajax("GET", "/completed", {target:".clear-completed", swap: "outerHTML"}) send toggleFooter to \ No newline at end of file diff --git a/hs/behaviors/todo-count._hs b/hs/behaviors/todo-count._hs index fecf439..d6852f0 100644 --- a/hs/behaviors/todo-count._hs +++ b/hs/behaviors/todo-count._hs @@ -1,4 +1,4 @@ behavior TodoCount on load send todoCount to me on todoCount debounced at 100ms - fetch /update-counts then put the result into me \ No newline at end of file + fetch /update-count then put the result into me \ No newline at end of file diff --git a/hs/behaviors/toggle-all._hs b/hs/behaviors/toggle-all._hs index 9f1f0bf..982e0dc 100644 --- a/hs/behaviors/toggle-all._hs +++ b/hs/behaviors/toggle-all._hs @@ -10,5 +10,7 @@ behavior ToggleAll end on click fetch `/swap-json?all=${my.checked}` then + send toggleFooter to send show to + send toggleClearCompleted to send toggle to \ No newline at end of file diff --git a/hs/behaviors/toggle-footer._hs b/hs/behaviors/toggle-footer._hs index 4605dc1..92292b4 100644 --- a/hs/behaviors/toggle-footer._hs +++ b/hs/behaviors/toggle-footer._hs @@ -15,10 +15,12 @@ behavior ToggleFooter add .selected to filter.firstChild else if filter.textContent !== `${$initial}${$after}` remove .selected from filter.firstChild + else + add .selected to filter.firstChild end end - -- update counts - fetch /update-counts then put the result into + -- update count + fetch /update-count then put the result into else htmx.ajax('GET', '/footer', {target:'.header', swap:'beforeend'}) end \ No newline at end of file diff --git a/hs/main._hs b/hs/main._hs index 34e368f..f0c8d40 100644 --- a/hs/main._hs +++ b/hs/main._hs @@ -1,13 +1,13 @@ def hashCache() - -- this is done to get current location hash then update todo-list and footer + -- get current location hash then update todo-list and footer set $initial to window.location.hash.slice(2).charAt(0).toUpperCase() set $after to window.location.hash.slice(3) fetch `/set-hash?name=${$initial}${$after}` then send show to send toggleFooter to end - -- this to handle popstate event such as back/forward button - -- where it will automatically calling hashCache _hyperscript function + -- handle popstate event such as back/forward button + -- automatically call hashCache _hyperscript function js window.addEventListener('popstate', function(){ hashCache(); diff --git a/main.go b/main.go index 174aa8a..a2e03a5 100644 --- a/main.go +++ b/main.go @@ -95,7 +95,7 @@ func main() { http.Handle("/set-hash", http.HandlerFunc(setHash)) http.Handle("/learn.json", http.HandlerFunc(learnHandler)) - http.Handle("/update-counts", http.HandlerFunc(t.updateCounts)) + http.Handle("/update-count", http.HandlerFunc(t.updateCount)) http.Handle("/toggle-all", http.HandlerFunc(t.toggleAllHandler)) http.Handle("/completed", http.HandlerFunc(t.clearCompleted)) http.Handle("/footer", http.HandlerFunc(t.footerHandler)) @@ -346,7 +346,7 @@ func (t *todos) clearCompleted(w http.ResponseWriter, r *http.Request) { } } -func (t *todos) updateCounts(w http.ResponseWriter, r *http.Request) { +func (t *todos) updateCount(w http.ResponseWriter, r *http.Request) { uncompletedCount := countNotDone(*t) plural := "" if uncompletedCount != 1 { diff --git a/todomvc.templ b/todomvc.templ index 5d4a72b..2813c07 100644 --- a/todomvc.templ +++ b/todomvc.templ @@ -89,7 +89,7 @@ templ toggleMain(todos []Todo, checked bool) { } } -// indescriminatelyx + templ footer(todos []Todo, filters []Filter, hasCompleted bool) { if len(todos) != 0 {