Code Monkey home page Code Monkey logo

domkit's Introduction

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+ ✔

domkit's People

Contributors

gravitypersists avatar grimor avatar impartdan avatar inkinworld avatar loicmahieu avatar yuanyan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

domkit's Issues

react-kit

那个,想问一下

https://www.npmjs.com/package/react-kit

react-kit 这个名字您还用不,俺准备搞个 react 的元框架,有木有兴趣来一波交易o(╥﹏╥)o

不好意思,找不到其他联系方式,只好开 issue,得到回复后我会关闭它

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.