From 2cd2397aee4304932c4a88cc01e31dea1ed4e6fd Mon Sep 17 00:00:00 2001 From: Bill Talcott Date: Tue, 11 Apr 2023 12:56:33 -0400 Subject: [PATCH] comments formatted with check: --- book/CH09_TricksOfThehtmxMasters.adoc | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/book/CH09_TricksOfThehtmxMasters.adoc b/book/CH09_TricksOfThehtmxMasters.adoc index 52eeda8..316bb27 100644 --- a/book/CH09_TricksOfThehtmxMasters.adoc +++ b/book/CH09_TricksOfThehtmxMasters.adoc @@ -54,7 +54,7 @@ In addition to these, `hx-swap` offers further control with the following modifi `settle`:: Like `swap`, this allows you to apply a specific delay between when the content has been swapped into the DOM and when its attributes are "`settled`", that is, updated from their old values (if any) to their new values. -//This gives you fine control of css-transitions, for example.// +// check: This gives you fine control of css-transitions, for example. `show`:: Allows you to specify an element that should be shown -- that is, scrolled into the viewport of the browser if necessary -- when a request is completed. @@ -297,13 +297,13 @@ Consider the following scenario: your server-side team has decided that they want you to include a token for extra validation on every request. The token is going to be stored in `localStorage` in the browser, in the slot `special-token`. The server-side team wants you to include this special token on every request made by htmx, as the `X-SPECIAL-TOKEN` header. -// maybe: briefly show how to set the value in local storage +// check: maybe, briefly show how to set the value in local storage How could you achieve this? One way would be to catch the `htmx:configRequest` event and update the `detail.headers` object with this token from `localStorage`. In VanillaJS, it would look something like this: -// In our Contact.app, for example, we would put this code (where?) +// check: In our Contact.app, for example, we would put this code... (where?) // Mention htmx helper for adding listeners like this? .Adding the `X-SPECIAL-TOKEN` header [source,js] @@ -316,15 +316,15 @@ document.body.addEventListener("htmx:configRequest", function(configEvent){ As you can see, we add a new value to the `headers` property of the event's detail. After the event handler executes, the `headers` property is read by htmx and used to construct the headers for an AJAX request. -// maybe: add basic info, is configEvent.detail.headers an htmx function? -// maybe: briefly explain what a header 'detail' refers to +// check: add basic info, is configEvent.detail.headers an htmx function? +// check: briefly explain what a header 'detail' refers to So, with this bit of JavaScript code, we have added a new custom header to every AJAX request that htmx makes. Slick! -// optional: explain the use case, something like 'this pattern of passing +// check: explain the use case, something like 'this pattern of passing // and checking tokens is sometimes used for security' You can also update the `parameters` property to change the parameters submitted by the request, change the target of the request, and so on. -// an example parameter might be... +// check: an example parameter might be... Full documentation for the `htmx:configRequest` event can be found https://htmx.org/events/#htmx:configRequest[on the htmx website]. @@ -397,7 +397,7 @@ a `POST` to the `/integrations/1` path, it will trigger a synchronization with t Now, this synchronization may or may not result in new contacts being created. In the case where new contacts _are_ created, we want to refresh our contacts table. In the case where no contacts are created, we don't want to refresh the table. -// maybe: show brief code, how to conditionally add HX-Trigger +// check: show brief code, how to conditionally add HX-Trigger To implement this we could conditionally add an `HX-Trigger` response header with the value `contacts-updated`. This value would trigger the `contacts-updated` event on the button that made the AJAX request to `/integrations/1`. We can then take advantage of the `from:` modifier of the `hx-trigger`