1.0.11 • Published 3 months ago

domtool v1.0.11

Weekly downloads
1
License
MIT
Repository
github
Last release
3 months ago

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
paramstypedefaultdescription
sourceHTMLElement-node wanted to show
containerHTMLElement-scroll to container
configobject-config
  • config
paramstypedefaultdescription
alignWithLeftBoolean-whether align with left edge
alignWithTopBoolean-whether align with top edge
offsetTopNumber-offset top
offsetLeftNumber-offset left
offsetBottomNumber-offset bottom
offsetRightNumber-offset right
allowHorizontalScrollBoolean-whether allow horizontal scroll container
onlyScrollIfNeededBoolean-whether scroll container when source is visible
1.0.11

3 months ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

3 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

7 years ago