dom-tricks

$ npm install dom-tricks --save

usage

append(element, hostElement)

import append from 'dom-tricks/append';

const element = document.createElement('div');

const remove = append(element, document.body);

remove();

bubbledFind(findFn, startElement, lastParent = null)

import bubbledFind from 'dom-tricks/bubledFind';

bubbledFind((element) => hasClass(element), startElement);

className(element, 'className')

import { addClass, removeClass, hasClass } from 'dom-tricks/className';

addClass(element, 'some-class');
removeClass(element, 'some-class');
hasClass(element, 'some-class');

elOffset(element)

import elOffset from 'dom-tricks/elOffset';

const { top, left } = elOffset(element);

elPosition(element)

import elPosition from 'dom-tricks/elPosition';

const { top, left } = elPosition(element);

remove(element)

import remove from 'dom-tricks/remove';

remove(element);

elScroll(element)

import elScroll from 'dom-tricks/elScroll';

const { top, left, width, height } = elScroll(element);

elSize

import elSize from 'dom-tricks/elSize';

const { width, height } = elSize(element);

isElVisible(element, rate = 1)

import isElVisible from 'dom-tricks/isElVisible';

isElVisible(element, 2 / 3); 

forEach(element, iterateor)

import forEach from 'dom-tricks/forEach';

const count = forEach(document.getElementsByClassName('some'), () => {
  
});

setHTML

import setHTML from 'dom-tricks/setHTML';

setHTML(element, '<div></div>');

setText

import setText from 'dom-tricks/setText';
setHTML(element, 'some text');

getValue

import getValue from 'dom-tricks/getValue';

const valueString = getValue(element);

insertHTML(element, html, method = 'beforeEnd')

import insertHTML from 'dom-tricks/insertHTML';


insertHTML(element, '<div></div>');

isTouchDevice

import isTouchDevice from 'dom-tricks/isTouchDevice';

isTouchDevice(); // true/false

map

import map from 'dom-tricks/map';

const values = map(elements, (element) => {
  return getValue(element);
});

on(element, eventName, handler, options)

import on from 'dom-tricks/on';

const off = on(element, 'click', (ev) => {
  // do something
});

off();

onAnyAction

import onAnyAction from 'dom-tricks/onAnyAction';

const off = onAnyAction(() => {
  // do something
});

off();

onDelay(fn, delay = 0)

import onDelay from 'dom-tricks/onDelay';

const off = onDelay(() => {
  // do something
}, 300);

off();

onHashChange

import onHashChange from 'dom-tricks/onHashChange';

const off = onHashChange(({ from, to }) => {
  // do something
});

off();

onImageMetaLoad(imageSrc, callback, maxTimeWaitingForLoading = 0)

import onImageMetaLoad from 'dom-tricks/onImageMetaLoad';

const off = onImageMetaLoad([ 'some/url', { url: 'some/url' }, { url: 'some/url', width: 300, height: 300 } ], (err, images) => {
  const { width, height, url, $ratio } = images[0];
  // do something
}, 7000);

off();

onLinkClick

import onLinkClick from 'dom-tricks/onLinkClick';

const off = onLinkClick(element, (ev, done) => {
  // do something
  done();
});

off();

### onLoad
```javascript
import onLoad from 'dom-tricks/onLoad';

const off = onLoad(() => {
  // do something
});

off();

onPageScroll

import onPageScroll from 'dom-tricks/onPageScroll';

onReady

import onReady from 'dom-tricks/onReady';

const off = onReady(() => {
  // do something
});

off();

onResize

import onResize from 'dom-tricks/onResize';

const off = onResize(() => {
  // do something
});

off();

onScrollProgress

import onScrollProgress from 'dom-tricks/onScrollProgress';

const off = onScrollProgress(() => {
  // do something
});

off();

onVideoPlaying

import onVideoPlaying from 'dom-tricks/onVideoPlaying';

const off = onVideoPlaying(element, () => {
  // do something
});

scrollEl

import scrollEl from 'dom-tricks/scrollEl';

const element = scrollEl(); // document.body most of cases

selectAllByClassName

import selectAllByClassName from 'dom-tricks/selectAllByClassName';

const elements = selectAllByClassName(element, 'some');

selectOneByClassName

import selectOneByClassName from 'dom-tricks/selectOneByClassName';

const el = selectAllByClassName(element, 'some');

setStyle

import setStyle from 'dom-tricks/setStyle';

setStyle(element, 'transition', 'opacity 0.2s linear');

Style

import Style from 'dom-tricks/Style';

const style = Style();

style.set('.some { display: block; }');

style.cleanup();

style.destroy();

viewportSize

import viewportSize from 'dom-tricks/viewportSize';

const { width, height } = viewportSize();

onOutClick(element, handlerOutsideClick, handlerInsideClick)

onGlobalKeyPress(handler)

onHover(element, enterHandler, leaveHandler)

isSomeChild(elements, targetElement)