8000 fix(active-desendant): item scroll when not in view (#199) · reidmore-online/makeup-js@64355ba · GitHub
[go: up one dir, main page]
Skip to content

Commit 64355ba

Browse files
saiponnadasaiponnada
authored
fix(active-desendant): item scroll when not in view (makeup#199)
1 parent ba4cca1 commit 64355ba

File tree

11 files changed

+57
-18
lines changed

11 files changed

+57
-18
lines changed

‎docs/core/makeup-active-descendant/index.min.js‎

Lines changed: 7 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/core/makeup-active-descendant/index.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/ui/makeup-combobox/index.min.js‎

Lines changed: 7 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/ui/makeup-combobox/index.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/ui/makeup-listbox-button/index.min.js‎

Lines changed: 7 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/ui/makeup-listbox-button/index.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/ui/makeup-listbox/index.min.js‎

Lines changed: 7 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/ui/makeup-listbox/index.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/makeup-active-descendant/dist/cjs/index.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ const defaultOptions = {
1717
axis: "both",
1818
wrap: false
1919
};
20+
function isElementInView(el) {
21+
const bounding = el.getBoundingClientRect();
22+
return bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
23+
}
2024
function onModelInit(e) {
2125
const {
2226
items,
@@ -44,9 +48,10 @@ function onModelChange(e) {
4448
if (toItem) {
4549
toItem.classList.add(this._options.activeDescendantClassName);
4650
this._focusEl.setAttribute("aria-activedescendant", toItem.id);
47-
if (this._options.autoScroll && this._itemContainerEl) {
51+
if (this._options.autoScroll && this._itemContainerEl && !isElementInView(toItem)) {
4852
toItem.scrollIntoView({
49-
block: "center"
53+
behavior: "smooth",
54+
block: "nearest"
5055
});
5156
}
5257
}

‎packages/core/makeup-active-descendant/dist/mjs/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ const defaultOptions = {
88
axis: "both",
99
wrap: false
1010
};
11+
function isElementInView(el) {
12+
const bounding = el.getBoundingClientRect();
13+
return bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
14+
}
1115
function onModelInit(e) {
1216
const { items, toIndex } = e.detail;
1317
const itemEl = items[toIndex];
@@ -27,8 +31,8 @@ function onModelChange(e) {
2731
if (toItem) {
2832
toItem.classList.add(this._options.activeDescendantClassName);
2933
this._focusEl.setAttribute("aria-activedescendant", toItem.id);
30-
if (this._options.autoScroll && this._itemContainerEl) {
31-
toItem.scrollIntoView({ block: "center" });
34+
if (this._options.autoScroll && this._itemContainerEl && !isElementInView(toItem)) {
35+
toItem.scrollIntoView({ behavior: "smooth", block: "nearest" });
3236
}
3337
}
3438
this._el.dispatchEvent(new CustomEvent("activeDescendantChange", { detail: e.detail }));

0 commit comments

Comments
 (0)
0