JSPM

domkit

0.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2871
  • Score
    100M100P100Q126315F
  • License MIT

Toolkit for DOM

Package Exports

  • domkit/appendVendorPrefix
  • domkit/getVendorPropertyName
  • domkit/insertKeyframesRule
  • domkit/throttle
  • domkit/transitionEvents

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (domkit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

DOM Kit

Toolkit for DOM

npm install domkit --save

insertKeyframesRule

var insertKeyframesRule = require('domkit/insertKeyframesRule');
var keyframes = {
  '0%': {
    transform: 'scale(1)'
  },
  '50%': {
    transform: 'scale(0.5)',
    opacity: 0.7
  },
  '100%': {
    transform: 'scale(1)',
    opacity: 1
  }
};

var animationName = insertKeyframesRule(keyframes);

insertRule

var insertRule = require('domkit/insertRule');
var css = '.foo {}'
insertRule(css);

appendVendorPrefix

var appendVendorPrefix = require('domkit/appendVendorPrefix');
var style = {
  transform: 'scaleX(1)'
}
appendVendorPrefix(style);

getVendorPrefix

var getVendorPrefix = require('domkit/getVendorPrefix');
var vendorPrefix = getVendorPrefix(); // => -webkit-

addClass

var addClass = require('domkit/addClass');
addClass(this.getDOMNode(), 'foo');

removeClass

var removeClass = require('domkit/removeClass');
removeClass(this.getDOMNode(), 'foo');

hasClass

var hasClass = require('domkit/hasClass');
hasClass(this.getDOMNode(), 'foo'); // => true

transitionEventsa

var transitionEvents = require('domkit/transitionEvents');
transitionEvents.addEndEventListener(node, eventListener);
transitionEvents.removeEndEventListener(node, eventListener);

classNames

var classNames = require('domkit/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:
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

canUseDOM

var canUseDOM = require('domkit/canUseDOM');
if(canUseDOM){
  // balabala
}

addEventListener

var addEventListener = require('domkit/addEventListener');
addEventListener(window, 'scroll', handle)

removeEventListener

var removeEventListener = require('domkit/removeEventListener');
removeEventListener(window, 'scroll', handle)

throttle

var throttle = require('domkit/throttle');
throttle(fn, 100)

onEndTransition

var onEndTransition = require('domkit/onEndTransition');
onEndTransition(el, handle)

inViewport

var inViewport = require('domkit/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

Browser Support

IE Chrome Firefox Opera Safari
IE 6+ ✔ Chrome 4.0+ ✔ Firefox 16.0+ ✔ Opera 15.0+ ✔ Safari 4.0+ ✔