Bruut

# Bruut Toolkit JS

The Bruut Toolkit is used in most of the Bruut plugins and in every front-end project. It has some nifty helper functions to make your front-end life easier.

# Installation

npm i --save bruut-toolkit

# Usage

import toolkit from 'bruut-toolkit';

# Functions

# getParentSelector

This functions climbs up the DOM tree and returns a array of selectors with a given attribute / class / id

Parameters

  • el - element to add the listener to <Element>
  • selector - the attribute, class or ID string to search for <String>
.parent
	.el Hello World

const el = document.querySelector('.el');
const parents = toolkit.getParentSelector(el, '.parent');

// [parent <Element>]

# addEventListeners

This functions adds multiple event listeners to a element

Parameters

  • el - element to add the listener to <Element>
  • event - Event names, seperated by a blank space <String>
  • fn - callback <Function>
const el = document.querySelector('.el');
toolkit.addEventListeners(el, 'click blur mousemove', (e) => {
	console.log(e);
});

# throttle

Throttles a function (fires it every threshold ms)

Parameters

  • fn - callback <Function>
  • threshold - Treshold <Number>
  • scrope - scope, defaults to 'this' <Any>
document.addEventListener('scroll', toolkit.throttle(() => { console.log(123)}, 200, this));

# debounce

Debounces a function (waits a treshold when done until firing)

Parameters

  • fn - callback <Function>
  • threshold - Treshold <Number>
  • inmediate - Fire directly <Boolean>

# getUrlParameter

Returns the value of a given URL parameter or null when the name is not found

Parameters

  • name - URL Parameter to search for <String>

# scrollToTarget

Takes a elementand scrolls the document to this element. Returns a Promise:

toolkit.scrollToTarget(document.querySelector('.example', { duration: 300 }))
	.then(() => { console.log('done!'); });

Parameters

  • element - The element <HTMLElement>
  • userOptions - { duration <Number>, offset: <Number>, easing: <Function>:t<Number> }

# once

Fires a given function once and then flushes it

Parameters

  • fn - The function to call <Function>
  • context - optional - context:this
toolkit.once(() => {
	console.log(123);
});

# eventEmitter

Creates a instance of the eventEmitter class. You can emit events and subscribe to them with once, on and off helpers.

const $events = new toolkit.eventEmitter();

// do something
$events.emit('fire-event');

// listen to something
$events.on('fire-event', () => {
	console.log('something happened');
});

# ready

Fires the given function on DOMContentLoaded or when the document.readyState is not 'loading'

Parameters

  • fn - The function to call <Function>
toolkit.ready(() => {
	console.log('I will be logged when the document is ready');
});

← Bruut Validate →