orionjs

OrionJS is a simple collection of reusable functions to help streamline DOM manipulation in UI development

Getting Started

The best way to use OrionJS is via OrionBP, a simple front-end boilerplate designed to compliment this collection. (More Info)

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.

Helpers

OrionJS provides you with helper functions which help you achieve common tasks. Please refer to a helper's source code for full documentation.

breakpoints

A set of breakpoint detection functions which let you measure window width.

closestParent

Recursively finds the closest parent element which matches the given class or element type.

fireEvent

Manually fires the given event for the given element.

getIndex

Returns the index of the given element

swipeDetect

Sets up a swipe event listener

Actions

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

data-class adds functionality for any components with data-class and data-class-element attributes. It allows you to quickly add, remove or toggle classes on elements on click and/or swipe events.

data-scroll

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

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.
• Build and Watch tasks to easily bundle and then minify your JS using Browerify.

Please refer to OrionBP's github repository for more information.

About the Developer

I'm Luke Harrison, a Sheffield-based Web Designer & Developer from the UK, currently working at Evolution Funding. Read more about me at lukeharrison.net and/or follow me on twitter at @WebDevLuke.