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>
Webpack, Browserify or RequireJS
WithInstall 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
-
Import dom-shift functions
import { executeAfterDelay, shiftDom } from 'dom-shift';
-
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