Skip to content

Commit 8069cbc

Browse files
committed
Add scroll, scrollTo, scrollBy, scrollIntoView
We add [`Element.scroll`][1], [`Element.scrollTo`][2], [`Element.scrollBy`][3], and [`Element.scrollIntoView`][4]. [1]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll [2]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo [3]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy [4]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
1 parent ae891c5 commit 8069cbc

File tree

2 files changed

+117
-0
lines changed

2 files changed

+117
-0
lines changed

src/Web/DOM/Element.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,42 @@ exports.setScrollLeft = function (scrollLeft) {
133133
};
134134
};
135135

136+
exports._scroll = function (scrollToOptions) {
137+
return function (node) {
138+
return function () {
139+
node.scroll(scrollToOptions);
140+
return {};
141+
};
142+
};
143+
};
144+
145+
exports._scrollTo = function (scrollToOptions) {
146+
return function (node) {
147+
return function () {
148+
node.scrollTo(scrollToOptions);
149+
return {};
150+
};
151+
};
152+
};
153+
154+
exports._scrollBy = function (scrollToOptions) {
155+
return function (node) {
156+
return function () {
157+
node.scrollBy(scrollToOptions);
158+
return {};
159+
};
160+
};
161+
};
162+
163+
exports._scrollIntoView = function (scrollIntoViewOptions) {
164+
return function (node) {
165+
return function () {
166+
node.scrollIntoView(scrollIntoViewOptions);
167+
return {};
168+
};
169+
};
170+
};
171+
136172
exports.scrollWidth = function (el) {
137173
return function () {
138174
return el.scrollWidth;

src/Web/DOM/Element.purs

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ module Web.DOM.Element
2929
, setScrollTop
3030
, scrollLeft
3131
, setScrollLeft
32+
, ScrollToOptions
33+
, ScrollBehavior
34+
, ScrollAlignment
35+
, scroll
36+
, scrollTo
37+
, scrollBy
38+
, scrollIntoView
39+
, ScrollIntoViewOptions
3240
, scrollWidth
3341
, scrollHeight
3442
, clientTop
@@ -121,6 +129,79 @@ foreign import setScrollTop :: Number -> Element -> Effect Unit
121129
foreign import scrollLeft :: Element -> Effect Number
122130
foreign import setScrollLeft :: Number -> Element -> Effect Unit
123131

132+
data ScrollBehavior = Auto | Smooth
133+
134+
stringScrollBehavior :: ScrollBehavior -> String
135+
stringScrollBehavior Auto = "Auto"
136+
stringScrollBehavior Smooth = "Smooth"
137+
138+
type ScrollToOptions =
139+
{ top :: Number
140+
, left :: Number
141+
, behavior :: ScrollBehavior
142+
}
143+
144+
type ScrollToOptions_ =
145+
{ top :: Number
146+
, left :: Number
147+
, behavior :: String
148+
}
149+
150+
foreign import _scroll :: Element -> ScrollToOptions_ -> Effect Unit
151+
152+
scroll :: Element -> ScrollToOptions -> Effect Unit
153+
scroll elem _opts = _scroll elem opts
154+
where
155+
opts = let { top,left, behavior } = _opts
156+
in { top, left, behavior: stringScrollBehavior behavior }
157+
158+
foreign import _scrollTo :: Element -> ScrollToOptions_ -> Effect Unit
159+
160+
scrollTo :: Element -> ScrollToOptions -> Effect Unit
161+
scrollTo elem _opts = _scrollTo elem opts
162+
where
163+
opts = let { top,left, behavior } = _opts
164+
in { top, left, behavior: stringScrollBehavior behavior }
165+
166+
foreign import _scrollBy :: Element -> ScrollToOptions_ -> Effect Unit
167+
168+
scrollBy :: Element -> ScrollToOptions -> Effect Unit
169+
scrollBy elem _opts = _scrollBy elem opts
170+
where
171+
opts = let { top,left, behavior } = _opts
172+
in { top, left, behavior: stringScrollBehavior behavior }
173+
174+
data ScrollAlignment = Start | Center | End | Nearest
175+
176+
stringScrollAlignment :: ScrollAlignment -> String
177+
stringScrollAlignment Start = "Start"
178+
stringScrollAlignment Center = "Center"
179+
stringScrollAlignment End = "End"
180+
stringScrollAlignment Nearest = "Nearest"
181+
182+
type ScrollIntoViewOptions =
183+
{ behavior :: ScrollBehavior
184+
, block :: ScrollAlignment
185+
, inline :: ScrollAlignment
186+
}
187+
188+
type ScrollIntoViewOptions_ =
189+
{ behavior :: String
190+
, block :: String
191+
, inline :: String
192+
}
193+
194+
foreign import _scrollIntoView :: Element -> ScrollIntoViewOptions_ -> Effect Unit
195+
196+
scrollIntoView :: Element -> ScrollIntoViewOptions -> Effect Unit
197+
scrollIntoView elem _opts = _scrollIntoView elem opts
198+
where
199+
opts = let { behavior, block, inline } = _opts
200+
in { behavior: stringScrollBehavior behavior
201+
, block: stringScrollAlignment block
202+
, inline: stringScrollAlignment inline
203+
}
204+
124205
foreign import scrollWidth :: Element -> Effect Number
125206
foreign import scrollHeight :: Element -> Effect Number
126207
foreign import clientTop :: Element -> Effect Number

0 commit comments

Comments
 (0)