itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +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
## [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

19
dist/htmx.js vendored
View File

@ -368,13 +368,14 @@ return (function () {
return elemTop < window.innerHeight && elemBottom >= 0;
}
function bodyContains(elt) {
if (elt.getRootNode() instanceof ShadowRoot) {
return getDocument().body.contains(elt.getRootNode().host);
} else {
return getDocument().body.contains(elt);
}
}
function bodyContains(elt) {
// IE Fix
if (elt.getRootNode && elt.getRootNode() instanceof ShadowRoot) {
return getDocument().body.contains(elt.getRootNode().host);
} else {
return getDocument().body.contains(elt);
}
}
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/);
@ -1926,7 +1927,7 @@ return (function () {
}
}
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)
while (historyCache.length > htmx.config.historyCacheSize) {
historyCache.shift();
@ -3016,7 +3017,7 @@ return (function () {
redirectPath = swapSpec['path'];
delete swapSpec['path'];
}
ajaxHelper('GET', redirectPath, swapSpec).then(() =>{
ajaxHelper('GET', redirectPath, swapSpec).then(function(){
pushUrlIntoHistory(redirectPath);
});
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;
}
function bodyContains(elt) {
if (elt.getRootNode() instanceof ShadowRoot) {
return getDocument().body.contains(elt.getRootNode().host);
} else {
return getDocument().body.contains(elt);
}
}
function bodyContains(elt) {
// IE Fix
if (elt.getRootNode && elt.getRootNode() instanceof ShadowRoot) {
return getDocument().body.contains(elt.getRootNode().host);
} else {
return getDocument().body.contains(elt);
}
}
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/);
@ -1926,7 +1927,7 @@ return (function () {
}
}
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)
while (historyCache.length > htmx.config.historyCacheSize) {
historyCache.shift();
@ -3016,7 +3017,7 @@ return (function () {
redirectPath = swapSpec['path'];
delete swapSpec['path'];
}
ajaxHelper('GET', redirectPath, swapSpec).then(() =>{
ajaxHelper('GET', redirectPath, swapSpec).then(function(){
pushUrlIntoHistory(redirectPath);
});
return;

5
test/util/util.js
View File

@ -10,8 +10,9 @@ function make(htmlStr) {
var fragment = range.createContextualFragment(htmlStr);
var wa = getWorkArea();
var child = null;
while(fragment.children.length > 0) {
child = fragment.children[0];
var children = fragment.children || fragment.childNodes; // IE
while(children.length > 0) {
child = children[0];
wa.appendChild(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:
```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).

22
www/examples/confirm.md
View File

@ -4,25 +4,27 @@ layout: demo_layout.njk
## 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
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<button hx-trigger='confirmed'
hx-get="/confirmed"
_="on click
<button hx-get="/confirmed"
_="on htmx:confirm(issueRequest)
halt the event
call Swal.fire({title: 'Confirm', text:'Do you want to continue?'})
if result.isConfirmed trigger confirmed">
if result.isConfirmed issueRequest()">
Click Me
</button>
```
The technique here is to make the button issue a request on the `confirmed` event, rather than a click.
We then add some hyperscript to invoke Sweet Alert 2 on a click, asking for confirmation. If the user confirms
the dialog, we trigger the `confirmed` event, which then triggers the htmx request.
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
detail object.
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()`.

19
www/js/htmx.js
View File

@ -368,13 +368,14 @@ return (function () {
return elemTop < window.innerHeight && elemBottom >= 0;
}
function bodyContains(elt) {
if (elt.getRootNode() instanceof ShadowRoot) {
return getDocument().body.contains(elt.getRootNode().host);
} else {
return getDocument().body.contains(elt);
}
}
function bodyContains(elt) {
// IE Fix
if (elt.getRootNode && elt.getRootNode() instanceof ShadowRoot) {
return getDocument().body.contains(elt.getRootNode().host);
} else {
return getDocument().body.contains(elt);
}
}
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/);
@ -1926,7 +1927,7 @@ return (function () {
}
}
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)
while (historyCache.length > htmx.config.historyCacheSize) {
historyCache.shift();
@ -3016,7 +3017,7 @@ return (function () {
redirectPath = swapSpec['path'];
delete swapSpec['path'];
}
ajaxHelper('GET', redirectPath, swapSpec).then(() =>{
ajaxHelper('GET', redirectPath, swapSpec).then(function(){
pushUrlIntoHistory(redirectPath);
});
return;

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

@ -368,13 +368,14 @@ return (function () {
return elemTop < window.innerHeight && elemBottom >= 0;
}
function bodyContains(elt) {
if (elt.getRootNode() instanceof ShadowRoot) {
return getDocument().body.contains(elt.getRootNode().host);
} else {
return getDocument().body.contains(elt);
}
}
function bodyContains(elt) {
// IE Fix
if (elt.getRootNode && elt.getRootNode() instanceof ShadowRoot) {
return getDocument().body.contains(elt.getRootNode().host);
} else {
return getDocument().body.contains(elt);
}
}
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/);
@ -1926,7 +1927,7 @@ return (function () {
}
}
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)
while (historyCache.length > htmx.config.historyCacheSize) {
historyCache.shift();
@ -3016,7 +3017,7 @@ return (function () {
redirectPath = swapSpec['path'];
delete swapSpec['path'];
}
ajaxHelper('GET', redirectPath, swapSpec).then(() =>{
ajaxHelper('GET', redirectPath, swapSpec).then(function(){
pushUrlIntoHistory(redirectPath);
});
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 wa = getWorkArea();
var child = null;
while(fragment.children.length > 0) {
child = fragment.children[0];
var children = fragment.children || fragment.childNodes; // IE
while(children.length > 0) {
child = children[0];
wa.appendChild(child);
htmx.process(child);
}