itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-11-03 06:53:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Carson Gross 2022-11-04 19:14:30 -06:00
commit 12728e8794
11 changed files with 69 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.md
View File

@ -1,6 +1,14 @@
# Changelog # Changelog
## [1.8.3] - 2022-10-12 ## [1.8.3] - 2022-11-04
* A new [`htmx:confirm` event](/events#htmx:confirm) was added that allows for asynchronous confirmation dialogs to
be integrated into htmx requests
* The new [head-support](/extensions/head-support) extension allows for more elaborate head tag merging than standard htmx
supports. This functionality may be integrated into htmx 2.0, depending on feedback.
* The new [multi-swap](/extensions/multi-swap) provides more elaborate swapping of multiple elements on a screen using
a custom swap strategy
* Many doc fixes (thank you to everyone who contributed!)
## [1.8.2] - 2022-10-12 ## [1.8.2] - 2022-10-12

19
dist/htmx.js vendored
View File

@ -368,13 +368,14 @@ return (function () {
return elemTop < window.innerHeight && elemBottom >= 0; return elemTop < window.innerHeight && elemBottom >= 0;
} }
function bodyContains(elt) { function bodyContains(elt) {
if (elt.getRootNode() instanceof ShadowRoot) { // IE Fix
return getDocument().body.contains(elt.getRootNode().host); if (elt.getRootNode && elt.getRootNode() instanceof ShadowRoot) {
} else { return getDocument().body.contains(elt.getRootNode().host);
return getDocument().body.contains(elt); } else {
} return getDocument().body.contains(elt);
} }
}
function splitOnWhitespace(trigger) { function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/); return trigger.trim().split(/\s+/);
@ -1926,7 +1927,7 @@ return (function () {
} }
} }
var newHistoryItem = {url:url, content: content, title:title, scroll:scroll}; var newHistoryItem = {url:url, content: content, title:title, scroll:scroll};
triggerErrorEvent(getDocument().body, "htmx:historyItemCreated", {item:newHistoryItem, cache: historyCache}) triggerEvent(getDocument().body, "htmx:historyItemCreated", {item:newHistoryItem, cache: historyCache})
historyCache.push(newHistoryItem) historyCache.push(newHistoryItem)
while (historyCache.length > htmx.config.historyCacheSize) { while (historyCache.length > htmx.config.historyCacheSize) {
historyCache.shift(); historyCache.shift();
@ -3016,7 +3017,7 @@ return (function () {
redirectPath = swapSpec['path']; redirectPath = swapSpec['path'];
delete swapSpec['path']; delete swapSpec['path'];
} }
ajaxHelper('GET', redirectPath, swapSpec).then(() =>{ ajaxHelper('GET', redirectPath, swapSpec).then(function(){
pushUrlIntoHistory(redirectPath); pushUrlIntoHistory(redirectPath);
}); });
return; return;

2
dist/htmx.min.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/htmx.min.js.gz vendored
View File

Binary file not shown.

19
src/htmx.js
View File

@ -368,13 +368,14 @@ return (function () {
return elemTop < window.innerHeight && elemBottom >= 0; return elemTop < window.innerHeight && elemBottom >= 0;
} }
function bodyContains(elt) { function bodyContains(elt) {
if (elt.getRootNode() instanceof ShadowRoot) { // IE Fix
return getDocument().body.contains(elt.getRootNode().host); if (elt.getRootNode && elt.getRootNode() instanceof ShadowRoot) {
} else { return getDocument().body.contains(elt.getRootNode().host);
return getDocument().body.contains(elt); } else {
} return getDocument().body.contains(elt);
} }
}
function splitOnWhitespace(trigger) { function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/); return trigger.trim().split(/\s+/);
@ -1926,7 +1927,7 @@ return (function () {
} }
} }
var newHistoryItem = {url:url, content: content, title:title, scroll:scroll}; var newHistoryItem = {url:url, content: content, title:title, scroll:scroll};
triggerErrorEvent(getDocument().body, "htmx:historyItemCreated", {item:newHistoryItem, cache: historyCache}) triggerEvent(getDocument().body, "htmx:historyItemCreated", {item:newHistoryItem, cache: historyCache})
historyCache.push(newHistoryItem) historyCache.push(newHistoryItem)
while (historyCache.length > htmx.config.historyCacheSize) { while (historyCache.length > htmx.config.historyCacheSize) {
historyCache.shift(); historyCache.shift();
@ -3016,7 +3017,7 @@ return (function () {
redirectPath = swapSpec['path']; redirectPath = swapSpec['path'];
delete swapSpec['path']; delete swapSpec['path'];
} }
ajaxHelper('GET', redirectPath, swapSpec).then(() =>{ ajaxHelper('GET', redirectPath, swapSpec).then(function(){
pushUrlIntoHistory(redirectPath); pushUrlIntoHistory(redirectPath);
}); });
return; return;

5
test/util/util.js
View File

@ -10,8 +10,9 @@ function make(htmlStr) {
var fragment = range.createContextualFragment(htmlStr); var fragment = range.createContextualFragment(htmlStr);
var wa = getWorkArea(); var wa = getWorkArea();
var child = null; var child = null;
while(fragment.children.length > 0) { var children = fragment.children || fragment.childNodes; // IE
child = fragment.children[0]; while(children.length > 0) {
child = children[0];
wa.appendChild(child); wa.appendChild(child);
htmx.process(child); htmx.process(child);
} }

2
www/docs.md
View File

@ -113,7 +113,7 @@ The fastest way to get going with htmx is to load it via a CDN. You can simply a
and get going: and get going:
```html ```html
<script src="https://unpkg.com/htmx.org@1.8.3" integrity="sha384-TODO" crossorigin="anonymous"></script> <script src="https://unpkg.com/htmx.org@1.8.3" integrity="sha384-e2no7T1BxIs3ngCTptBu4TjvRWF4bBjFW0pt7TpxOEkRJuvrjRt29znnYuoLTz9S" crossorigin="anonymous"></script>
``` ```
While the CDN approach is extremely simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). While the CDN approach is extremely simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn).

22
www/examples/confirm.md
View File

@ -4,25 +4,27 @@ layout: demo_layout.njk
## A Customized Confirmation UI ## A Customized Confirmation UI
htmx supports the [`hx-confirm`](/attributes/hx-confirm) attribute to provide a simple mechanism for confirming a user action. This uses the default `confirm()` function in javascript which, while trusty, may not be consistent with your applications UX. htmx supports the [`hx-confirm`](/attributes/hx-confirm) attribute to provide a simple mechanism for confirming a user
action. This uses the default `confirm()` function in javascript which, while trusty, may not be consistent with your
applications UX.
In this example we will see how to use [sweetalert2](https://sweetalert2.github.io) to implement a custom confirmation dialog. In this example we will see how to use [sweetalert2](https://sweetalert2.github.io) and the [`htmx:confirm`](/events#htmx:confirm)
event to implement a custom confirmation dialog.
```html ```html
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<button hx-trigger='confirmed' <button hx-get="/confirmed"
hx-get="/confirmed" _="on htmx:confirm(issueRequest)
_="on click halt the event
call Swal.fire({title: 'Confirm', text:'Do you want to continue?'}) call Swal.fire({title: 'Confirm', text:'Do you want to continue?'})
if result.isConfirmed trigger confirmed"> if result.isConfirmed issueRequest()">
Click Me Click Me
</button> </button>
``` ```
The technique here is to make the button issue a request on the `confirmed` event, rather than a click. We add some hyperscript to invoke Sweet Alert 2 on a click, asking for confirmation. If the user confirms
the dialog, we trigger the request by invoking the `issueRequest()` function, which was destructured from the event
We then add some hyperscript to invoke Sweet Alert 2 on a click, asking for confirmation. If the user confirms detail object.
the dialog, we trigger the `confirmed` event, which then triggers the htmx request.
Note that we are taking advantage of the fact that hyperscript is [async-transparent](https://hyperscript.org/docs/#async) Note that we are taking advantage of the fact that hyperscript is [async-transparent](https://hyperscript.org/docs/#async)
and automatically resolves the Promise returned by `Swal.fire()`. and automatically resolves the Promise returned by `Swal.fire()`.

19
www/js/htmx.js
View File

@ -368,13 +368,14 @@ return (function () {
return elemTop < window.innerHeight && elemBottom >= 0; return elemTop < window.innerHeight && elemBottom >= 0;
} }
function bodyContains(elt) { function bodyContains(elt) {
if (elt.getRootNode() instanceof ShadowRoot) { // IE Fix
return getDocument().body.contains(elt.getRootNode().host); if (elt.getRootNode && elt.getRootNode() instanceof ShadowRoot) {
} else { return getDocument().body.contains(elt.getRootNode().host);
return getDocument().body.contains(elt); } else {
} return getDocument().body.contains(elt);
} }
}
function splitOnWhitespace(trigger) { function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/); return trigger.trim().split(/\s+/);
@ -1926,7 +1927,7 @@ return (function () {
} }
} }
var newHistoryItem = {url:url, content: content, title:title, scroll:scroll}; var newHistoryItem = {url:url, content: content, title:title, scroll:scroll};
triggerErrorEvent(getDocument().body, "htmx:historyItemCreated", {item:newHistoryItem, cache: historyCache}) triggerEvent(getDocument().body, "htmx:historyItemCreated", {item:newHistoryItem, cache: historyCache})
historyCache.push(newHistoryItem) historyCache.push(newHistoryItem)
while (historyCache.length > htmx.config.historyCacheSize) { while (historyCache.length > htmx.config.historyCacheSize) {
historyCache.shift(); historyCache.shift();
@ -3016,7 +3017,7 @@ return (function () {
redirectPath = swapSpec['path']; redirectPath = swapSpec['path'];
delete swapSpec['path']; delete swapSpec['path'];
} }
ajaxHelper('GET', redirectPath, swapSpec).then(() =>{ ajaxHelper('GET', redirectPath, swapSpec).then(function(){
pushUrlIntoHistory(redirectPath); pushUrlIntoHistory(redirectPath);
}); });
return; return;

19
www/test/1.8.3/src/htmx.js
View File

@ -368,13 +368,14 @@ return (function () {
return elemTop < window.innerHeight && elemBottom >= 0; return elemTop < window.innerHeight && elemBottom >= 0;
} }
function bodyContains(elt) { function bodyContains(elt) {
if (elt.getRootNode() instanceof ShadowRoot) { // IE Fix
return getDocument().body.contains(elt.getRootNode().host); if (elt.getRootNode && elt.getRootNode() instanceof ShadowRoot) {
} else { return getDocument().body.contains(elt.getRootNode().host);
return getDocument().body.contains(elt); } else {
} return getDocument().body.contains(elt);
} }
}
function splitOnWhitespace(trigger) { function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/); return trigger.trim().split(/\s+/);
@ -1926,7 +1927,7 @@ return (function () {
} }
} }
var newHistoryItem = {url:url, content: content, title:title, scroll:scroll}; var newHistoryItem = {url:url, content: content, title:title, scroll:scroll};
triggerErrorEvent(getDocument().body, "htmx:historyItemCreated", {item:newHistoryItem, cache: historyCache}) triggerEvent(getDocument().body, "htmx:historyItemCreated", {item:newHistoryItem, cache: historyCache})
historyCache.push(newHistoryItem) historyCache.push(newHistoryItem)
while (historyCache.length > htmx.config.historyCacheSize) { while (historyCache.length > htmx.config.historyCacheSize) {
historyCache.shift(); historyCache.shift();
@ -3016,7 +3017,7 @@ return (function () {
redirectPath = swapSpec['path']; redirectPath = swapSpec['path'];
delete swapSpec['path']; delete swapSpec['path'];
} }
ajaxHelper('GET', redirectPath, swapSpec).then(() =>{ ajaxHelper('GET', redirectPath, swapSpec).then(function(){
pushUrlIntoHistory(redirectPath); pushUrlIntoHistory(redirectPath);
}); });
return; return;

5
www/test/1.8.3/test/util/util.js
View File

@ -10,8 +10,9 @@ function make(htmlStr) {
var fragment = range.createContextualFragment(htmlStr); var fragment = range.createContextualFragment(htmlStr);
var wa = getWorkArea(); var wa = getWorkArea();
var child = null; var child = null;
while(fragment.children.length > 0) { var children = fragment.children || fragment.childNodes; // IE
child = fragment.children[0]; while(children.length > 0) {
child = children[0];
wa.appendChild(child); wa.appendChild(child);
htmx.process(child); htmx.process(child);
} }