mirror of
https://github.com/urbit/shrub.git
synced 2024-09-11 20:27:19 +03:00
Amend number-htmx comments
This commit is contained in:
parent
b405aed51e
commit
40a4ce0336
@ -1,40 +1,62 @@
|
||||
/@ number
|
||||
:: import lib/feather-icons
|
||||
/@ number :: @ud
|
||||
:: import /lib/feather-icons
|
||||
/- feather-icons
|
||||
:: specifying conversion from number to htmx
|
||||
:: declare that this is a conversion from number to HTMX
|
||||
:- [%number %$ %htmx]
|
||||
:: gate takes number and bowl
|
||||
::
|
||||
:: this gate accepts a number and a bowl:neo;
|
||||
:: we'll access bowl:neo in the UI to access the
|
||||
:: here.bowl of the shrub that's using this /con file
|
||||
|= =number
|
||||
|= =bowl:neo
|
||||
:: returns manx
|
||||
:: manx is a dynamic XML node, whitch means we going to write Sail with HTMX
|
||||
::
|
||||
:: this gate returns a manx, which is what Hoon uses
|
||||
:: to store dynamic XML nodes; in this case we'll use
|
||||
:: Sail to specify a manx that expects the HTMX library
|
||||
:: to be available on the frontend
|
||||
^- manx
|
||||
:: opening a div that has class of "fc ac br2", this classes are corespond to the Feather CSS styles
|
||||
::
|
||||
:: div will include h1 and p-tag with our state value
|
||||
:: manx elements take a tape value
|
||||
::
|
||||
:: it will also include form, that will have hx-post, hx-target, hx-swap and head attributes
|
||||
:: hx-post is issuing a POST request to provided url and swaps HTML into the DOM
|
||||
:: hx-target allows us to target element with a class of "loading" for swapping
|
||||
:: hx-swap specifies how response will be swapped in relative to the target
|
||||
:: in this case head attribute specifies what kind of poke it attempts to send, we will unpack more of logic behind it in con/node-counter-diff.hoon
|
||||
:: open a <div class="p3 fc g2 ac br2">
|
||||
:: these utility classes are specified in feather.css,
|
||||
:: which this /con file expects on the frontend
|
||||
;div.p3.fc.g2.ac.br2
|
||||
:: <h1>Counter</h1>
|
||||
;h1: Counter
|
||||
:: <p>{number}</p>
|
||||
;p: {<number>}
|
||||
:: open a <form> with HTMX attributes
|
||||
;form
|
||||
=hx-post "/neo/hawk{(en-tape:pith:neo here.bowl)}?stud=counter-diff"
|
||||
=hx-target "find .loading"
|
||||
=hx-swap "outerHTML"
|
||||
=head "inc"
|
||||
:: button will submit POST request form
|
||||
:: classes of "loader", "loaded" and "loading" provided for loading spinner behavior on sending request
|
||||
:: loading behavior includes changing of button innerHTML span to loading icon and back to "Increment" span
|
||||
::
|
||||
:: hx-post will issue a POST request to the provided
|
||||
:: url and swap response into the DOM
|
||||
=hx-post "/neo/hawk{(en-tape:pith:neo here.bowl)}?stud=counter-diff"
|
||||
::
|
||||
:: hx-target specifies the target for hx-post's DOM
|
||||
:: swap: the element with class "loading"
|
||||
=hx-target "find .loading"
|
||||
::
|
||||
:: hx-swap specifies how the response to hx-post's
|
||||
:: request will be swapped in relative to the target
|
||||
=hx-swap "outerHTML"
|
||||
::
|
||||
:: here, the head attribute specifies the poke that
|
||||
:: hx-post will send to the target shrub; look at
|
||||
:: /con/node-counter-diff.hoon for more on =head
|
||||
=head "inc"
|
||||
::
|
||||
:: below, the classes "loaded", "loader", and
|
||||
:: "loading" provide loading spinner behavior on
|
||||
:: sending and receiving this form's POST request
|
||||
::
|
||||
:: <button class="bd1 br1 pr b1 hover loader">
|
||||
;button.bd1.br1.p2.b1.hover.loader
|
||||
:: <span class="loaded">Increment</span>
|
||||
;span.loaded: Increment
|
||||
:: <span class="loading">
|
||||
;span.loading
|
||||
:: import +loading sail from /lib/feather-icons
|
||||
;+ loading.feather-icons
|
||||
==
|
||||
==
|
||||
==
|
||||
==
|
||||
== :: </span>
|
||||
== :: </button>
|
||||
== :: </form>
|
||||
== :: </div>
|
||||
|
Loading…
Reference in New Issue
Block a user