diff --git a/CHANGELOG.md b/CHANGELOG.md index a76978b..5f635e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ Breaking changes: New features: - `AttrName`, `ClassName`, and `PropName` types have been added, migrated from [web-html](https://github.com/purescript-web/purescript-web-html). (#58 by @nsaunders) - A new `ElementId` type, representing the value of an `id` property/attribute, has been added. (#58 by @nsaunders) +- `scrollIntoView` and `scrollIntoViewWithOptions` (with typed `ScrollBehavior` and `ScrollLogicalPosition`) have been added. (#64 by @i-am-the-slime) Bugfixes: diff --git a/src/Web/DOM/Element.js b/src/Web/DOM/Element.js index cf9800e..bf63ae7 100644 --- a/src/Web/DOM/Element.js +++ b/src/Web/DOM/Element.js @@ -210,3 +210,17 @@ export function _attachShadow(props) { }; }; } + +export function scrollIntoView(el) { + return function () { + el.scrollIntoView(); + }; +} + +export function _scrollIntoViewWithOptions(props) { + return function (el) { + return function () { + el.scrollIntoView(props); + }; + }; +} diff --git a/src/Web/DOM/Element.purs b/src/Web/DOM/Element.purs index 1914523..f8ee67c 100644 --- a/src/Web/DOM/Element.purs +++ b/src/Web/DOM/Element.purs @@ -43,6 +43,11 @@ module Web.DOM.Element , DOMRect , ShadowRootInit , attachShadow + , scrollIntoView + , scrollIntoViewWithOptions + , ScrollBehavior(..) + , ScrollLogicalPosition(..) + , ScrollIntoViewOptions ) where import Prelude @@ -188,3 +193,56 @@ initToProps init = } foreign import _attachShadow :: ShadowRootProps -> Element -> Effect ShadowRoot + +-- | Scrolls the element's ancestor containers so that the element is visible, +-- | using the default alignment (`element.scrollIntoView()`). +foreign import scrollIntoView :: Element -> Effect Unit + +-- | How the scroll is animated. +data ScrollBehavior = Auto | Instant | Smooth + +derive instance Eq ScrollBehavior + +-- | Where the element is aligned within the scrollport. +data ScrollLogicalPosition = Start | Center | End | Nearest + +derive instance Eq ScrollLogicalPosition + +type ScrollIntoViewOptions = + { behavior :: ScrollBehavior + , block :: ScrollLogicalPosition + , inline :: ScrollLogicalPosition + } + +-- | Scrolls the element into view with the given behavior and alignment +-- | (`element.scrollIntoView(options)`). +scrollIntoViewWithOptions :: ScrollIntoViewOptions -> Element -> Effect Unit +scrollIntoViewWithOptions = _scrollIntoViewWithOptions <<< optionsToProps + +type ScrollIntoViewProps = + { behavior :: String + , block :: String + , inline :: String + } + +optionsToProps :: ScrollIntoViewOptions -> ScrollIntoViewProps +optionsToProps options = + { behavior: behaviorToString options.behavior + , block: logicalPositionToString options.block + , inline: logicalPositionToString options.inline + } + +behaviorToString :: ScrollBehavior -> String +behaviorToString = case _ of + Auto -> "auto" + Instant -> "instant" + Smooth -> "smooth" + +logicalPositionToString :: ScrollLogicalPosition -> String +logicalPositionToString = case _ of + Start -> "start" + Center -> "center" + End -> "end" + Nearest -> "nearest" + +foreign import _scrollIntoViewWithOptions :: ScrollIntoViewProps -> Element -> Effect Unit