Helpers

A collection of individually importable modules aimed at making coding easier

Create Element

This is shortcut for the long winded document.createElement() method of creating elements on the fly.

You pass in an object with all values you need.

import createElement from "../helpers/createElement"

document.body.appendChild(createElement({
  tagName: "div",
  className: "my-class",
  text: "Blah blah",
  attributes: {
    "id": "element id",
    "data-truc": "value"
  },
  childs: [{ /* recursif call **/}]
}))

When traversing sibling elements in the DOM using nextSibling and prevSibling, if there is any white space in the HTML in between elements, then the white-space is treated as the next/prev sibling (#text).

This function checks the nodeType property of the next/prev sibling and traverses until it finds the next/prev actual DOM element.

import sibling from "../helpers/sibling"

const nextEle = sibling(this.el, 'nextSibling')

For Each

Function that loops through an array (or node list) and executes a callback on each one.

import forEach from "../helpers/forEach"

const

DOM

A few DOM shortcut functions that provide a jQuery like syntax (without the bloat).

import {$} from "../helpers/dom"

$(".addClass").addClass("passed");
$(".removeClass").removeClass("failed");
$(".toggleClass").toggleClass("is-active");

if ($(".hasClass").hasClass("hasClass")) {
  $(".hasClass").addClass("passed");
}

$("a").on("click", function(e) {
  e.preventDefault();
  alert("clicked");
});

Functions include:: addClass - $('.link').addClass('newClass'); removeClass - $('.link').removeClass('oldClass'); hasClass - if ($('.link').hasClass('class')( {...}; toggle - if ($('.link').toggle('class')( {...}; each - $('.link').each(function () {}); on - $('.link').on('click', function () {}); find - $('.container').find('.child')

CSS

Function that allows you to pass in an javascript object of css styles and they are then applied to the target element.

import css from "../helpers/css"

var target = document.getElementById('target')
css(target, {
  background: '#000',
  marginTop: '20px'
})

Ready

Function that wait until the whole DOM is loaded and then executes the callback. Much like jquery's $(document).ready()

import ready from "../helpers/ready"

Verge.js

Verge is a set of viewport utilities written in native JavaScript. It includes the ability to detect if an element is in the current viewport.

It is installed via NPM and can be included in your modules by adding import verge from 'verge'

API:: viewportW(); viewportH(); viewport(); inViewport(); inX(); inY(); scrollX(); scrollY(); mq(); rectangle(); aspect()

Cookies

Cookies is a set of cookie utilities written in native JavaScript.

It is installed via NPM and can be included in your modules by adding import Cookies from 'js-cookie'.

API:: set - Cookies.set('name', 'value'); get - Cookies.get('name'); remove - Cookies.remove('name')