[ScrollTo] Not possible to change easing via HTML

[hdodov]

Currently, the only possible way to change the component easing is to change the default one:

ScrollTo.defaults.easing = easeOutQuad;

You can't change it like this:

<button ob-scrollto="easing: easeOutQuad">Click me!</button>

Solution 1

This can be implemented with a static easings property:

import { ScrollTo } from "oblik/components/scroll-to";
import { easeInQuad, easeOutQuad } from "oblik/utils/easings";

ScrollTo.easings = {
	easeInQuad,
	easeOutQuad
}

In the markup, you specify "easeInQuad" or "easeOutQuad" in the data attribute, then the component looks up the values defined in its easings property.

Solution 2

Another alternative is to have a registry option in the Watcher, like this:

import { Watcher } from "oblik";
import { ScrollTo } from "oblik/components/scroll-to";
import { easeInQuad, easeOutQuad } from "oblik/utils/easings";

let w = new Watcher(document.body, {
	components: {
		scrollto: ScrollTo
	},
	registry: {
		easeInQuad,
		easeOutQuad
	}
});

w.init();

Then, in the markup, you use $easing instead of easing for the option, which tells the Watcher to not treat the value as a string, but rather as a property in the registry or a CSS selector if such is not found:

<button ob-scrollto="$target: #my-section, $easing: easeOutQuad">Click me!</button>

The benefit here is that you can use this registry for all sorts of values globally. If you have multiple components (not just ScrollTo) that have easing options, you don't have to specify available easings for each one - you just use the values in the registry.