rollator
Making strings roll again
rollator makes it easy to overlay a string on top of another string on mouseover. If both strings share letters, rollator will align and highlight them. Rollator handles resizing-logic for you, so you will never have to worry about text overflowing the visible viewport.
Install
npm install rollator
Use
Initialize
; const rollator = el opts; rollator;rollator;
To initialize the library, simply require it from npm and init() it.
roll rollator
Tagnames are flexible, but please make sure the classes are following the pattern outlined in this example.
The CSS in /lib
is compiled from src/index.scss
which holds a couple of core styles and a default theme. The core CSS is outlined above. It is recommended to import lib/rollator.css
or src/index.scss
into your build system.
To use the default-theme, add .rltr--default
to your container. You can configure some aspects of the plugin / default-theme in the SCSS-File.
API
new Rollator(el, options)
- el: Selector to bind the behavior to. (Default: '.rltr')
- options: Behavior configuration (see below for options)
rollator.init()
Initializes rollator-instances for all matching elements for a given behavior
rollator.destroy()
Destroys all rollator-instances for a given behavior and unbinds all event-listeners
rollator.on()
Every rollator is an event emitter. You can bind to events via .on()
. See below for available events.
rollator.off()
You can unbind listeners via .off()
.
Config
verticalOn: 0
px-value that determines when the plugin should fall back to an all-vertical display-modecaseSensitive: false
determines if string-matching should take letter-case into consideration
Events:
init (context)
fires when the plugin is done initializing. Gets passed the plugin context.destroy
fires when the plugin is destroyedmouseenter (node)
fires when the mouse enters a group. Gets passed the node.mouseleave (node)
fires when the mouse leaves a group. Gets passed the node.
Webfonts
;;; { if documentreadyState != 'loading' ; else document; } ;
Webfonts can take a while to load and change the dimensions of your text. Therefore, it is recommended to wait for them to finish loading before calling rollator.init()
. The example above shows how to do this in a future-proof way. (The polyfills for promises / FontFaceObserver can be removed once there is enough native browser-support for those features)
Unit Tests:
You can run unit tests for non-DOM methods by running npm install
and npm run test
. The tested methods are marked as arrow-functions in the library (methods with DOM-access are marked as normal functions).
Caveats / TODO
- Rollator replaces normal spaces with
-spaces to make the vertical-mode work. - TODO: Unit Tests for DOM functionality are not written yet.
- TODO: Link handling on touch devices