README
dom-helpers
Helper functions for faster DOM scripting
NOTE:
The latest version in the master branch is different than the latest release on Github and the latest release on NPM. There are major changes and modifications. This version is still a work in progress.
Install
yarn add @three11/dom-helpers
or
npm i @three11/dom-helpers
or
Just download this repository and link the files located in dist folder:
<script src="path-to-dom-helpers/dist/dom-helpers.min.js"></script>
or
Include it from Unpkg CDN
<script src="//unpkg.com/@three11/dom-helpers/dist/dom-helpers.min.js"></script>
Usage
import {
$,
$,
trigger,
hasClass,
addClass,
removeClass,
toggleClass,
insertAfter,
insertBefore,
enableListeners,
getScrollPosition,
isElementVisibleInViewport
} from '@three11/dom-helpers';
or
Import each function separately.
See functions list below:
Functions
$
- queries the DOM and obtains a single element
const button = $('#button');
$
- queries the DOM and obtains a collection of elements
const buttons = $('#button');
enableListeners
- enables the custom on
method for attaching of event listeners
enableListeners();
button.on('click', () => {
console.log('clicked a single button');
});
buttons.on('click', () => {
console.log('clicked a button in a collection');
});
isElementVisibleInViewport
- accepts two arguments: DOM element and a boolean flag which states if the element should be partially visible. Returns boolean.
const element = document.getElementById('element');
const isVisible = isElementVisibleInViewport(element, true);
getScrollPosition
- returns the scroll position of the passed DOM Element
const element = document.getElementById('element');
const scrollPosition = getScrollPosition(element);
hasClass
- Returns boolean true if the element has the specified class, false otherwise.addClass
- Adds the specified class to an elementremoveClass
- Removes the specified class from an elementtoggleClass
- Toggles the specified class on an element
const element = document.getElementById('element');
hasClass(element, 'test'); // false
addClass(element, 'test');
removeClass(element, 'test');
/**
* The last argument forces the classname.
* If true the classname will be added,
* if false it will be removed.
* If omitted, the classname will be toggled
*/
toggleClass(element, 'test', true);
insertAfter
- Insert the supplied HTML String after the elementinsertBefore
- Insert the supplied HTML String before the element
const element = document.getElementById('element');
insertAfter(element, '<div>Test</div>');
insertBefore(element, '<div>Test</div>');
trigger
- Fires a custom (or built-in) event
const element = document.getElementById('element');
// The third argument is event data. Can be omitted
trigger(element, 'click', { data: true });
License
GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007