Flyovers

Simple, lightweight pure JavaScript component that implement Growl style notifications.

Demo

Open demo.html from this repo directly in your browser (no build step required) to see it in action.

Installation

As an ES module (bundlers, Node, etc.)

npm install @jagermesh/js-flyovers

import Flyovers from '@jagermesh/js-flyovers';

const flyovers = new Flyovers();

As a plain <script> tag

<script src="https://unpkg.com/@jagermesh/js-flyovers/dist/flyovers.min.js"></script>
<script>
  const flyovers = new window.Flyovers();
</script>

Usage

1. Create a Flyovers instance

const flyovers = new Flyovers();

2. Show message

flyovers.showMessage('Message 1',
  'Attempts to prove it prompted substantial development in number theory, and over time Fermat Last Theorem gained prominence as an unsolved problem in mathematics');
flyovers.showInfo('Info Permanent',
  'Attempts to prove it prompted substantial development in number theory, and over time Fermat Last Theorem gained prominence as an unsolved problem in mathematics', {
  permanent: true,
});
flyovers.showError('Error');
flyovers.showSuccess('Success');
flyovers.showWarning('Warning');
flyovers.showInfo('Info');

3. Customize if needed

flyovers.showMessage('Message 2', 'Some text', {
  timeout: 1000,
  beautify: function(flyoverOverlay) {
    flyoverOverlay.style.fontSize = `${Math.floor(Math.random() * 10)+8}pt`;
    flyoverOverlay.style.backgroundColor = 'red';
    flyoverOverlay.style.color = 'white';
  }
});

Available options:

• permanent (boolean, default false) - keep the flyover visible until the user closes it.
• timeout (number, default 5000) - milliseconds before the flyover starts fading out (ignored when permanent is true).
• beautify (function) - called with the flyover DOM element right after it is created, so you can tweak its styles.
• bgColor / fgColor (string) - override the background/text color for this one call, on top of whatever showXxx() method you used.

4. Override the default colors for showSuccess/showError/showWarning/showInfo/showMessage

Each of those methods has a built-in bgColor/fgColor pair. If you don't like the defaults, set your own once when creating the instance instead of passing bgColor/fgColor on every call:

const flyovers = new Flyovers({
  colors: {
    success: { fgColor: '#fff', bgColor: '#2e7d32' },
    error: { fgColor: '#fff', bgColor: '#b00020' },
    // message, warning, info can be overridden the same way;
    // anything you don't specify keeps its built-in default.
  },
});

flyovers.showSuccess('Saved', 'Uses your custom green instead of the default one');

Passing bgColor/fgColor directly to a showXxx() call (as in step 3) still wins over both the constructor colors and the built-in defaults, for one-off overrides.