rollator

Making strings roll again

Demo

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

import Rollator from 'rollator';

const rollator = new Rollator(el, opts);

rollator.init();
rollator.destroy();

To initialize the library, simply require it from npm and init() it.

<h1 class="rltr">
  <span class="rltr-group">
    <span class="rltr-group_anchor">roll</span>
    <span class="rltr-group_value">rollator</span>
  </span>
</h1>

Tagnames are flexible, but please make sure the classes are following the pattern outlined in this example.

.rltr {
  position: relative;
  display: inline-block; }

.rltr-group {
  position: relative;
  display: inline-block;
  cursor: pointer; }

.rltr-group_value {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  visibility: hidden;
  text-align: center;
  white-space: nowrap; }

.rltr.is-hovered .rltr-group_anchor {
  visibility: hidden; }

.rltr-group.is-active > .rltr-group_value {
  visibility: visible; }

.rltr-group.is-vertical > .rltr-group_value {
  display: inline-block;
  top: 100%;
  left: 50%;
  font-size: 0.5em;
  pointer-events: all;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: normal;
  -ms-writing-mode: tb-lr;
  -webkit-writing-mode: vertical-lr;
          writing-mode: vertical-lr; }

.rltr-group.is-vertical.is-active > .rltr-group_anchor {
  visibility: visible; }

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-mode
• caseSensitive: 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 destroyed
• mouseenter (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

import 'core-js/es6/promise';
import FontFaceObserver from 'fontfaceobserver';
import Rollator from 'rollator';


function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}


ready(() => {
  const lato300 = new FontFaceObserver('Lato', {
    weight: 300
  });

  const lato700 = new FontFaceObserver('Lato', {
    weight: 700
  });

  const rollator = new Rollator();

  Promise.all([lato300, lato700]).then(() => {
    rollator.init();
  });
});

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