<img height="67" width="387" src="https://cdn.rawgit.com/WebDevLuke/OrionJS/develop/misc/orionjs-logo.svg">
OrionJS is a simple collection of reusable functions to help streamline DOM manipulation in UI development
You can also use OrionJS on it's own as a part of your own framework. To install it as a depedency using NPM, run the following command:
npm install orionjs --save
Then you can import modules and/or helpers using the commonJS pattern:-
// Import getIndex helper var getIndex = require("node_modules/orionjs/helpers/getIndex.js"); // Import data-class module require("node_modules/orionjs/actions/data-class.js");
Or you can copy
node_modules/orionjs/sample.main.js and use that as a starting point.
You may need to edit the paths referencing
node_modules to resemble your own project directory structure.
OrionJS provides you with helper functions which help you achieve common tasks. Please refer to a helper's source code for full documentation.
A set of breakpoint detection functions which let you measure window width.
Recursively finds the closest parent element which matches the given class or element type.
Manually fires the given event for the given element.
Returns the index of the given element
Sets up a swipe event listener
In addition to helpers, you also have access to actions. These are reusable functions which are attached to elements in HTML via data attributes. They make common DOM manipulation tasks quick and easy to implement.
Please refer to an actions's source code for full documentation.
data-class adds functionality for any components with
data-class-element attributes. It allows you to quickly add, remove or toggle classes on elements on click and/or swipe events.
data-scroll adds functionality for any elements with a
data-scroll attribute. It provides smooth scroll functionality to either an element or a relative point.
data-toggle-text adds functionality for any components with a
data-toggle-text attribute. It allows you to toggle text content of an element on click and/or swipe events.
Using with OrionBP
When you use OrionJS via the front-end boilerplate OrionBP, you gain access to specifically built Gulp tasks to compile and optimise your JS. These JS tasks include:
- A setup task which automates the setup process by creating all the directories and files you need to get you up and running as quickly as possible.
Watchtasks to easily bundle and then minify your JS using Browerify.
Please refer to OrionBP's github repository for more information.