itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-30 22:41:23 +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 {
var newElt = eltBeforeNewContent.nextSibling;
}
while(newElt && newElt != target) {
while(newElt && newElt !== target) {
settleInfo.elts.push(newElt);
newElt = newElt.nextSibling;
}
@ -1328,6 +1328,12 @@ return (function () {
if (modifier.indexOf("settle:") === 0) {
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]};
}
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) {
var target = getTarget(elt);
if (target == null) {
@ -1520,6 +1545,7 @@ return (function () {
pushUrlIntoHistory(pathToPush);
triggerEvent(getDocument().body, 'pushedIntoHistory.htmx', {path:pathToPush});
}
updateScrollState(target, settleInfo.elts, swapSpec);
}
if (swapSpec.settleDelay > 0) {

3
test/index.html
View File

@ -36,6 +36,9 @@
<li>
<a href="manual/confirm-and-prompt.html">Confirm & Prompt Test</a>
</li>
<li>
<a href="manual/scroll-tests.html">Scroll Test</a>
</li>
</ul>
<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.
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
* `hx-swap` is inherited and can be placed on a parent element