dom-shift v0.9.2

dom-shift

A minimal library to switch DOM states using a CSS class.

How to Use

Directly from a web page

One can use dom-shift directly from a web-page by attaching the dom-shift.js to the DOM.

<!-- Attaching the dom-shift script -->
<script type="text/javascript" src="path/to/library/dom-shift.js"></script>

<!-- Usage -->
<script type="text/javascript">
    domShift.init();
</script>

With Webpack, Browserify or RequireJS

Install dom-shift from NPM

npm install dom-shift --save-dev

Consume as an ES6 module

import * as domShift from 'dom-shift';

or

import { executeAfterDelay, shiftDom } from 'dom-shift';

Consume as a CommonJS module

var domShift = require('dom-shift');

Consume as an AMD

require(['dom-shift'], function (domShift) {
    // Consume domShift
}

Note: You may have to use Babel for ES6 transpilation.

Simple usage

1. Import dom-shift functions

   import { executeAfterDelay, shiftDom } from 'dom-shift';

2. Shift DOM through states

   shiftDom(
       [
           {
               name: 'start-logs',
               step: done => {
                   executeAfterdelay(done, 2000)
               },
           }, // Adds a CSS class 'state-start-logs' to body tag and runs for 2000 milliseconds
           {
               name: 'spawn-terminal',
               step: () => {
                   print(
                       document.querySelector('.frame'),
                       mateInstall,
                       30
                   );
               },
               duration: 4000
           }, // Adds a CSS class 'state-spawn-terminal to body tag and runs for 4000 milliseconds
           {
               name: 'flip',
               step: () => {},
               duration: 1500
           }  // Adds a CSS class 'state-flip to body tag and runs for 1500 milliseconds
       ]
   );

You can either use the function executeAfterDelay as shown in the example or use the key duration to supply a step duration in milliseconds.

Demo coming-soon

You can view a demo here.

To-do

• Write unit-tests