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