Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    orionjspublic

     <img height="67" width="387" src="https://cdn.rawgit.com/WebDevLuke/OrionJS/develop/misc/orionjs-logo.svg">
    

    CircleCI

    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.

    Keywords

    none

    install

    npm i orionjs

    Downloadsweekly downloads

    37

    version

    2.0.4

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar