ab-element

AB Element - DOM Element with super powers.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Oct 12, 2015Feb 10, 2015Minified + gzip package size for ab-element in KB

Readme

ab-element

DOM Element prototype addons.

methods

  • Element.prototype.hasClass // same as jQuery equivalent
  • Element.prototype.addClass // same as jQuery equivalent
  • Element.prototype.removeClass // same as jQuery equivalent
  • Element.prototype.toggleClass // same as jQuery equivalent
  • Element.prototype.setChildOf // moves element to a new parent
  • Element.prototype.preloadImagesAndCallBack // preloads all IMGs inside element and calls a given callBack
  • Element.prototype.activateSuperPowers // activates x, y, z, width, height, rotation, scale, animated, opacity
  • Element.prototype.loadImageInside //creates an IMG element inside with given src, provides two on-load options: callback and fade in
  • Element.prototype.loadImage // assumes element is IMG, applies src and provides two on-load options: callback and fade in
  • Element.prototype.loadImageBackground // (src, onLoadCallBack) loads an image as background-image
  • Element.prototype.loadImageBackgroundFadeIn // (src, onLoadCallBack, disableFadeIn) loads an image as background-image and fades it in
  • Element.prototype.changeElementType // creates a new element of desired tagName, replaces it with current element and move in HTML contents
  • Element.prototype.getStyle // cross-browser helper to get style values
  • Element.prototype.onTap // sets up a touch "tap" handler, with distance tolerance (in px) and a click fallback in non-touch devices
  • Element.prototype.activateCSSTransitions // sets up CSS transitions, accepts property value (can be 'all') and transition duration. Major vendor prefixes included
  • Element.prototype.deactivateCSSTransitions // removes CSS transitions

properties

  • x
  • y
  • z
  • width
  • height
  • rotation
  • scale
  • animated

Install

With npm do:

$ npm install ab-element --save-dev

Usage

require('ab-element');

var my_el = addChildToBody('DIV');
my_el.activateSuperPowers();
my_el.animated = true;
my_el.x = 50;
my_el.y = 50;
my_el.width = 50;
my_el.height = 50;
my_el.bgColor = 'red';
my_el.hasClass('some-class');
my_el.addClass('some-class');
my_el.removeClass('some-class');
my_el.toggleClass('some-class');
my_el.rotation = 45;
my_el.scale = 3;
my_el.changeElementType('IMG');
my_el.loadImage('http://lorempixel.com/400/200/', function(){ console.log('image loaded')}, true );
my_el.onTap(function(){ test.rotation = Math.random() * 360; });

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.