itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-03 07:45:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

add scroll and view modifiers to hx-swap

Browse Source
This commit is contained in:
carson 2020-06-23 14:25:56 -07:00
parent 5c37241167
commit eb04ab5b3e
4 changed files with 81 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/htmx.js
View File

@ -450,7 +450,7 @@ return (function () {
} else { } else {
var newElt = eltBeforeNewContent.nextSibling; var newElt = eltBeforeNewContent.nextSibling;
} }
while(newElt && newElt != target) { while(newElt && newElt !== target) {
settleInfo.elts.push(newElt); settleInfo.elts.push(newElt);
newElt = newElt.nextSibling; newElt = newElt.nextSibling;
} }
@ -1328,6 +1328,12 @@ return (function () {
if (modifier.indexOf("settle:") === 0) { if (modifier.indexOf("settle:") === 0) {
swapSpec["settleDelay"] = parseInterval(modifier.substr(7)); swapSpec["settleDelay"] = parseInterval(modifier.substr(7));
} }
if (modifier.indexOf("scroll:") === 0) {
swapSpec["scroll"] = modifier.substr(7);
}
if (modifier.indexOf("view:") === 0) {
swapSpec["view"] = modifier.substr(7);
}
} }
} }
} }
@ -1352,6 +1358,25 @@ return (function () {
return {tasks: [], elts: [target]}; return {tasks: [], elts: [target]};
} }
function updateScrollState(target, altContent, swapSpec) {
if (swapSpec.scroll) {
if (swapSpec.scroll === "top") {
target.scrollTop = 0;
}
if (swapSpec.scroll === "bottom") {
target.scrollTop = target.scrollHeight;
}
}
if (swapSpec.view) {
if (swapSpec.scroll === "top") {
target.scrollIntoView(true);
}
if (swapSpec.scroll === "bottom") {
target.scrollIntoView(false);
}
}
}
function issueAjaxRequest(elt, verb, path, eventTarget) { function issueAjaxRequest(elt, verb, path, eventTarget) {
var target = getTarget(elt); var target = getTarget(elt);
if (target == null) { if (target == null) {
@ -1520,6 +1545,7 @@ return (function () {
pushUrlIntoHistory(pathToPush); pushUrlIntoHistory(pathToPush);
triggerEvent(getDocument().body, 'pushedIntoHistory.htmx', {path:pathToPush}); triggerEvent(getDocument().body, 'pushedIntoHistory.htmx', {path:pathToPush});
} }
updateScrollState(target, settleInfo.elts, swapSpec);
} }
if (swapSpec.settleDelay > 0) { if (swapSpec.settleDelay > 0) {

3
test/index.html
View File

@ -36,6 +36,9 @@
<li> <li>
<a href="manual/confirm-and-prompt.html">Confirm & Prompt Test</a> <a href="manual/confirm-and-prompt.html">Confirm & Prompt Test</a>
</li> </li>
<li>
<a href="manual/scroll-tests.html">Scroll Test</a>
</li>
</ul> </ul>
<h2>Mocha Test Suite</h2> <h2>Mocha Test Suite</h2>

29
test/manual/scroll-tests.html Normal file
View File

@ -0,0 +1,29 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Scroll Behavior</title>
<script src="../../src/htmx.js"></script>
</head>
<body style="padding:20px;font-family: sans-serif">
<script src="../../node_modules/sinon/pkg/sinon.js"></script>
<script src="../../src/htmx.js"></script>
<script src="../util/util.js"></script>
<script>
server = makeServer();
server.autoRespond = true;
server.respondWith("GET", "/more_divs", "<div>More Content</div>");
</script>
<h1>Prompt & Confirm Tests</h1>
<h3>End</h3>
<div hx-get="/more_divs" hx-swap="beforeend scroll:bottom" style="height: 100px; overflow: scroll">
Click To Add Content...
</div>
<hr/>
<h3>Start</h3>
<div hx-get="/more_divs" hx-swap="beforeend scroll:top" style="height: 100px; overflow: scroll">
Click To Add Content...
</div>
</body>
</html>

22
www/attributes/hx-swap.md
View File

@ -47,6 +47,28 @@ modifier:
These attributes can be used to synchronize htmx with the timing of CSS transition effects. These attributes can be used to synchronize htmx with the timing of CSS transition effects.
You can also change the scrolling behavior of the target element by using the `scroll` and `view` modifiers, both
of which take the values `top` and `bottom`:
```html
<!-- this fixed-height div will scroll to the bottom of the div after content is appended -->
<div style="height:200px;overflow: scroll"
hx-get="/example"
hx-swap="beforeEnd scroll:bottom">
Get Some HTML & Append It & Scroll To Bottom
</div>
```
```html
<!-- this will get some content and add it to #another-div, then ensure that the top of #another-div is visible in the
viewport -->
<div hx-get="/example"
hx-swap="innerHTML view:top"
hx-target="#another-div">
Get Some Content
</div>
```
### Notes ### Notes
* `hx-swap` is inherited and can be placed on a parent element * `hx-swap` is inherited and can be placed on a parent element