mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-28 05:21:18 +00:00
Merge remote-tracking branch 'origin/master'
This commit is contained in:
Carson Gross
commit
57595bc039
@ -16,7 +16,7 @@ Thank you for your interest in contributing! Because we're a small team, we have
|
||||
1. All PRs must be made against the `dev` branch, except documentation PRs (that only modify the `www/` directory) which can be made against `master`.
|
||||
1. Please avoid sending the `dist` files along your PR, only include the `src` ones.
|
||||
1. Please include test cases in [`/test`](https://github.com/bigskysoftware/htmx/tree/dev/test) and docs in [`/www`](https://github.com/bigskysoftware/htmx/tree/dev/www).
|
||||
1. We squash all PRs, so you're welcome to submit with as many commits are you like; they will be evaluated as a single, standalone change.
|
||||
1. We squash all PRs, so you're welcome to submit with as many commits as you like; they will be evaluated as a single, standalone change.
|
||||
|
||||
### Review Guidelines
|
||||
1. Open PRs represent issues that we're actively thinking working on merging (at a pace we can manage). If we think a proposal needs more discussion, or that the existing code would require a lot of back-and-forth to merge, we might close it and suggest you make an issue.
|
||||
|
||||
2
src/htmx.d.ts
vendored
2
src/htmx.d.ts
vendored
@ -411,7 +411,7 @@ export interface HtmxConfig {
|
||||
*/
|
||||
wsBinaryType?: 'blob' | 'arraybuffer';
|
||||
/**
|
||||
* If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
|
||||
* If set to true htmx will append the target element to the GET request in the format org.htmx.cache-buster=targetElementId
|
||||
* @default false
|
||||
*/
|
||||
getCacheBusterParam?: boolean;
|
||||
|
||||
@ -128,7 +128,7 @@ Note that using a [meta tag](@/docs.md#config) is the preferred mechanism for se
|
||||
* `disableSelector:"[hx-disable], [data-hx-disable]"` - array of strings: htmx will not process elements with this attribute on it or a parent
|
||||
* `scrollBehavior:'smooth'` - string: the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link.
|
||||
* `defaultFocusScroll:false` - boolean: if the focused element should be scrolled into view, can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier
|
||||
* `getCacheBusterParam:false` - boolean: if set to true htmx will include a cache-busting parameter in `GET` requests to avoid caching partial responses by the browser
|
||||
* `getCacheBusterParam:false` - boolean: if set to true htmx will append the target element to the `GET` request in the format `org.htmx.cache-buster=targetElementId`
|
||||
* `globalViewTransitions:false` - boolean: if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content.
|
||||
* `methodsThatUseUrlParams:["get"]` - array of strings: htmx will format requests with these methods by encoding their parameters in the URL, not the request body
|
||||
* `selfRequestsOnly:false` - boolean: if set to `true` will only allow AJAX requests to the same domain as the current document
|
||||
|
||||
@ -81,7 +81,7 @@ This simulates what a spinner might look like in that situation:
|
||||
* `hx-indicator` is inherited and can be placed on a parent element
|
||||
* In the absence of an explicit indicator, the `htmx-request` class will be added to the element triggering the
|
||||
request
|
||||
* If you want to use your own CSS but still use `htmx-indicator` as class name, then you need to disable `includeIndicatorStyles`. See [Configuring htmx](@/docs.md#config). The easiest way is to add this the `<head>` of your HTML:
|
||||
* If you want to use your own CSS but still use `htmx-indicator` as class name, then you need to disable `includeIndicatorStyles`. See [Configuring htmx](@/docs.md#config). The easiest way is to add this to the `<head>` of your HTML:
|
||||
```html
|
||||
<meta name="htmx-config" content='{"includeIndicatorStyles": false}'>
|
||||
```
|
||||
|
||||
@ -427,9 +427,9 @@ with any of the following values:
|
||||
| `innerHTML` | the default, puts the content inside the target element
|
||||
| `outerHTML` | replaces the entire target element with the returned content
|
||||
| `afterbegin` | prepends the content before the first child inside the target
|
||||
| `beforebegin` | prepends the content before the target in the targets parent element
|
||||
| `beforebegin` | prepends the content before the target in the target's parent element
|
||||
| `beforeend` | appends the content after the last child inside the target
|
||||
| `afterend` | appends the content after the target in the targets parent element
|
||||
| `afterend` | appends the content after the target in the target's parent element
|
||||
| `delete` | deletes the target element regardless of the response
|
||||
| `none` | does not append content from response ([Out of Band Swaps](#oob_swaps) and [Response Headers](#response-headers) will still be processed)
|
||||
|
||||
@ -485,7 +485,7 @@ The modifiers available on `hx-swap` are:
|
||||
| `settle` | The settle delay to use (e.g. `100ms`) between when new content is inserted and when it is settled |
|
||||
| `ignoreTitle` | If set to `true`, any title found in the new content will be ignored and not update the document title |
|
||||
| `scroll` | `top` or `bottom`, will scroll the target element to its top or bottom |
|
||||
| `show` | `top` or `bottom`, will scroll the target elements top or bottom into view |
|
||||
| `show` | `top` or `bottom`, will scroll the target element's top or bottom into view |
|
||||
|
||||
All swap modifiers appear after the swap style is specified, and are colon-separated.
|
||||
|
||||
@ -494,7 +494,7 @@ See the [hx-swap](@/attributes/hx-swap.md) documentation for more details on the
|
||||
### Synchronization {#synchronization}
|
||||
|
||||
Often you want to coordinate the requests between two elements. For example, you may want a request from one element
|
||||
to supersede the request of another element, or to wait until the other elements request has finished.
|
||||
to supersede the request of another element, or to wait until the other element's request has finished.
|
||||
|
||||
htmx offers a [`hx-sync`](@/attributes/hx-sync.md) attribute to help you accomplish this.
|
||||
|
||||
@ -741,7 +741,7 @@ The anchor tag in this div will issue an AJAX `GET` request to `/blog` and swap
|
||||
A feature of `hx-boost` is that it degrades gracefully if javascript is not enabled: the links and forms continue
|
||||
to work, they simply don't use ajax requests. This is known as
|
||||
[Progressive Enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement), and it allows
|
||||
a wider audience to use your sites functionality.
|
||||
a wider audience to use your site's functionality.
|
||||
|
||||
Other htmx patterns can be adapted to achieve progressive enhancement as well, but they will require more thought.
|
||||
|
||||
@ -1014,7 +1014,7 @@ WebSocket sends.
|
||||
|
||||
Htmx fires events around validation that can be used to hook in custom validation and error handling:
|
||||
|
||||
* `htmx:validation:validate` - called before an elements `checkValidity()` method is called. May be used to add in
|
||||
* `htmx:validation:validate` - called before an element's `checkValidity()` method is called. May be used to add in
|
||||
custom validation logic
|
||||
* `htmx:validation:failed` - called when `checkValidity()` returns false, indicating an invalid input
|
||||
* `htmx:validation:halted` - called when a request is not issued due to validation errors. Specific errors may be found
|
||||
@ -1608,7 +1608,7 @@ listed below:
|
||||
| `htmx.config.timeout` | defaults to 0, the number of milliseconds a request can take before automatically being terminated |
|
||||
| `htmx.config.scrollBehavior` | defaults to 'smooth', the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link. |
|
||||
| `htmx.config.defaultFocusScroll` | if the focused element should be scrolled into view, defaults to false and can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier. |
|
||||
| `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will include a cache-busting parameter in `GET` requests to avoid caching partial responses by the browser |
|
||||
| `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will append the target element to the `GET` request in the format `org.htmx.cache-buster=targetElementId` |
|
||||
| `htmx.config.globalViewTransitions` | if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content. |
|
||||
| `htmx.config.methodsThatUseUrlParams` | defaults to `["get"]`, htmx will format requests with these methods by encoding their parameters in the URL, not the request body |
|
||||
| `htmx.config.selfRequestsOnly` | defaults to `false`, if set to `true` will only allow AJAX requests to the same domain as the current document |
|
||||
|
||||
@ -91,7 +91,7 @@ Let's go through each of these in turn.
|
||||
#### Identification of Resources
|
||||
|
||||
The first aspect of Rest is the idea of *resources* that are found somewhere via... well, [Universal Resource Locators](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL), or URLs. Note that the HTML contains additional URLs for the actions that you can perform on this
|
||||
resource (`contacts/1`), following the conventional hierarchical arrangement of URL paths.
|
||||
resource (`contacts/42`), following the conventional hierarchical arrangement of URL paths.
|
||||
|
||||
#### Manipulation of Resources Through Representations
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ applications UX.
|
||||
|
||||
In this example we will see how to use [sweetalert2](https://sweetalert2.github.io) to implement a custom confirmation dialog. Below are two
|
||||
examples, one using a click+custom event method, and one using the built-in `hx-confirm` attribute and
|
||||
the and the [`htmx:confirm`](@/events.md#htmx:confirm) event.
|
||||
the [`htmx:confirm`](@/events.md#htmx:confirm) event.
|
||||
|
||||
## Using on click+custom event
|
||||
|
||||
@ -17,7 +17,7 @@ the and the [`htmx:confirm`](@/events.md#htmx:confirm) event.
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<button hx-get="/confirmed"
|
||||
hx-trigger='confirmed'
|
||||
onClick="Swal.fire({title: 'Confirm', text:'Do you want to continue?'}).then(function(result){
|
||||
onClick="Swal.fire({title: 'Confirm', text:'Do you want to continue?'}).then((result)=>{
|
||||
if(result.isConfirmed){
|
||||
htmx.trigger(this, 'confirmed');
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ Subsequent tab pages display all tabs and highlight the selected one accordingly
|
||||
|
||||
```html
|
||||
<div class="tab-list" role="tablist">
|
||||
<button hx-get="/tab1" class="selected" role="tab" aria-selected="false" aria-controls="tab-content">Tab 1</button>
|
||||
<button hx-get="/tab1" class="selected" role="tab" aria-selected="true" aria-controls="tab-content">Tab 1</button>
|
||||
<button hx-get="/tab2" role="tab" aria-selected="false" aria-controls="tab-content">Tab 2</button>
|
||||
<button hx-get="/tab3" role="tab" aria-selected="false" aria-controls="tab-content">Tab 3</button>
|
||||
</div>
|
||||
|
||||
@ -242,7 +242,7 @@ listed below:
|
||||
| `htmx.config.timeout` | defaults to 0, the number of milliseconds a request can take before automatically being terminated |
|
||||
| `htmx.config.scrollBehavior` | defaults to 'smooth', the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link. |
|
||||
| `htmx.config.defaultFocusScroll` | if the focused element should be scrolled into view, defaults to false and can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier. |
|
||||
| `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will include a cache-busting parameter in `GET` requests to avoid caching partial responses by the browser |
|
||||
| `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will append the target element to the `GET` request in the format `org.htmx.cache-buster=targetElementId` |
|
||||
| `htmx.config.globalViewTransitions` | if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content. |
|
||||
| `htmx.config.methodsThatUseUrlParams` | defaults to `["get"]`, htmx will format requests with these methods by encoding their parameters in the URL, not the request body |
|
||||
| `htmx.config.selfRequestsOnly` | defaults to `false`, if set to `true` will only allow AJAX requests to the same domain as the current document |
|
||||
|
||||
@ -23,3 +23,4 @@ PodRocket by LogRocket,https://podrocket.logrocket.com/htmx-carson-gross
|
||||
Backend Banter - Behind htmx: the re-Rise of Hypermedia,https://www.backendbanter.fm/episodes/024-behind-htmx-carson-gross-on-the-re-rise-of-hypermedia
|
||||
Syntax - htmx Web Apps,https://syntax.fm/show/734/htmx-web-apps-with-carson-gross
|
||||
PodRocket - htmx v2,https://podrocket.logrocket.com/htmx-v2-carson-gross
|
||||
The Collab Lab - Hypermedia - Network Architecture Decoupling,https://www.youtube.com/watch?v=j1XXoeer320
|
||||
|
||||
|
@ -109,6 +109,7 @@ title = "htmx webring"
|
||||
<tr><td><a rel="nofollow" target="_blank" href="https://gophemeral.com">Gophemeral</a></td><td>Share secrets securely!</td></tr>
|
||||
<tr><td><a rel="nofollow" target="_blank" href="https://signup.casa">Signup Casa</a></td><td>Simple, convenient sign-up forms.</td></tr>
|
||||
<tr><td><a rel="nofollow" target="_blank" href="https://recipes.musicavis.ca">Recipya</a></td><td>A clean, simple and powerful recipe manager your whole family can enjoy.</td></tr>
|
||||
<tr><td><a rel="noopener" target="_blank" href="https://statusnook.com">Statusnook</a></td><td>Effortlessly deploy a status page and start monitoring endpoints in minutes.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user