DOM Tool

Tool for DOM

npm install domtool --save

docs

domtool doc

insertKeyframesRule

import insertKeyframesRule from 'domtool/lib/insertKeyframesRule';
let keyframes = {
  '0%': {
    transform: 'scale(1)'
  },
  '50%': {
    transform: 'scale(0.5)',
    opacity: 0.7
  },
  '100%': {
    transform: 'scale(1)',
    opacity: 1
  }
};

let animationName = insertKeyframesRule(keyframes);

insertRule

import insertRule from 'domtool/lib/insertRule';
let css = '.foo {}'
insertRule(css);

appendVendorPrefix

import appendVendorPrefix from 'domtool/lib/appendVendorPrefix';
let style = {
  transform: 'scaleX(1)'
}
appendVendorPrefix(style);

getVendorPrefix

import getVendorPrefix from 'domtool/lib/getVendorPrefix';
let vendorPrefix = getVendorPrefix(); // => -webkit-

addClass

import addClass from 'domtool/lib/addClass';
addClass(this.getDOMNode(), 'foo');

removeClass

import removeClass from 'domtool/lib/removeClass';
removeClass(this.getDOMNode(), 'foo');

hasClass

import hasClass from 'domtool/lib/hasClass';
hasClass(this.getDOMNode(), 'foo'); // => true

transitionEventsa

import transitionEvents from 'domtool/lib/transitionEvents';
transitionEvents.addEndEventListener(node, eventListener);
transitionEvents.removeEndEventListener(node, eventListener);

classNames

import classNames from 'domtool/lib/classNames';

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }) // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

// Arrays will be recursively flattened as per the rules above:
let arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

canUseDOM

import canUseDOM from 'domtool/lib/canUseDOM';
if(canUseDOM){
  // balabala
}

addEventListener

import addEventListener from 'domtool/lib/addEventListener';
addEventListener(window, 'scroll', handle)

removeEventListener

import removeEventListener from 'domtool/lib/removeEventListener';
removeEventListener(window, 'scroll', handle)

throttle

import throttle from 'domtool/lib/throttle';
throttle(fn, 100)

import {funcThrottle} from 'domtool/lib/throttle';
throttle(fn, data, null, 500, 1000)

onEndTransition

import onEndTransition from 'domtool/lib/onEndTransition';
onEndTransition(el, handle)

inViewport

import inViewport from 'domtool/lib/inViewport';
inViewport(el) // true if elem is in the current viewport
inViewport(el, 100) // true if elem is in the current viewport or within 100px of it
inViewport(el, -100) // true if elem is in the current viewport and not within 99px of the edge

scrollIntoView

import { scrollIntoView } from 'domtool';

scrollIntoView(source, container, config);

• options

| params | type | default | description | | ------- | -------| ------- | ------- | | source | HTMLElement | - | node wanted to show | | container | HTMLElement | - | scroll to container | | config | object | - | config |

• config

| params | type | default | description | | ------- | -------| ------- | ------- | | alignWithLeft | Boolean | - | whether align with left edge | | alignWithTop | Boolean | - | whether align with top edge | | offsetTop | Number | - | offset top | | offsetLeft | Number | - | offset left | | offsetBottom | Number | - | offset bottom | | offsetRight | Number | - | offset right | | allowHorizontalScroll | Boolean | - | whether allow horizontal scroll container | | onlyScrollIfNeeded | Boolean | - | whether scroll container when source is visible |