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

improve the scroll and show options, supporting css selector targets as well at the special window modifier for show

Browse Source 
added a scrollBehavior option that defaults to `smooth`

fixes https://github.com/bigskysoftware/htmx/issues/456
This commit is contained in:
carson 2021-07-08 12:42:40 -06:00
parent 3dbf6dba4c
commit db64cc78df
1 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/htmx.js
View File

@ -54,6 +54,7 @@ return (function () {
wsReconnectDelay: 'full-jitter', wsReconnectDelay: 'full-jitter',
disableSelector: "[hx-disable], [data-hx-disable]", disableSelector: "[hx-disable], [data-hx-disable]",
useTemplateFragments: false, useTemplateFragments: false,
scrollBehavior: 'smooth',
}, },
parseInterval:parseInterval, parseInterval:parseInterval,
_:internalEval, _:internalEval,
@ -1952,10 +1953,20 @@ return (function () {
swapSpec["settleDelay"] = parseInterval(modifier.substr(7)); swapSpec["settleDelay"] = parseInterval(modifier.substr(7));
} }
if (modifier.indexOf("scroll:") === 0) { if (modifier.indexOf("scroll:") === 0) {
swapSpec["scroll"] = modifier.substr(7); var scrollSpec = modifier.substr(7);
var splitSpec = scrollSpec.split(":");
var scrollVal = splitSpec.pop();
var selectorVal = splitSpec.length > 0 ? splitSpec.join(":") : null;
swapSpec["scroll"] = scrollVal;
swapSpec["scrollTarget"] = selectorVal;
} }
if (modifier.indexOf("show:") === 0) { if (modifier.indexOf("show:") === 0) {
swapSpec["show"] = modifier.substr(5); var showSpec = modifier.substr(5);
var splitSpec = showSpec.split(":");
var showVal = showSpec.pop();
var selectorVal = splitSpec.length > 0 ? splitSpec.join(":") : null;
swapSpec["show"] = showVal;
swapSpec["showTarget"] = selectorVal;
} }
} }
} }
@ -1989,19 +2000,40 @@ return (function () {
var first = content[0]; var first = content[0];
var last = content[content.length - 1]; var last = content[content.length - 1];
if (swapSpec.scroll) { if (swapSpec.scroll) {
if (swapSpec.scroll === "top" && first) { var target = null;
first.scrollTop = 0; if (swapSpec.scrollTarget) {
target = querySelectorExt(first, swapSpec.scrollTarget);
} }
if (swapSpec.scroll === "bottom" && last) { if (swapSpec.scroll === "top" && (first || target)) {
last.scrollTop = last.scrollHeight; target = target || first;
target.scrollTop = 0;
}
if (swapSpec.scroll === "bottom" && (last || target)) {
target = target || last;
target.scrollTop = target.scrollHeight;
} }
} }
if (swapSpec.show) { if (swapSpec.show) {
if (swapSpec.show === "top" && first) { if (swapSpec.scrollTarget) {
first.scrollIntoView(true); if (swapSpec.scrollTarget === "window") {
if (swapSpec.show === "top") {
window.scrollTo(0, 0);
}
if (swapSpec.show === "bottom") {
window.scrollTo(0,document.body.scrollHeight);
}
return;
} else {
target = querySelectorExt(first, swapSpec.scrollTarget);
}
} }
if (swapSpec.show === "bottom" && last) { if (swapSpec.show === "top" && (first || target)) {
last.scrollIntoView(false); target = target || first;
target.scrollIntoView({block:'start', behavior: htmx.config.scrollBehavior});
}
if (swapSpec.show === "bottom" && (last || target)) {
target = target || last;
target.scrollIntoView({block:'end', behavior: htmx.config.scrollBehavior});
} }
} }
} }