Notebook Page Margin

    ab-element

    1.4.4 • Public • Published

    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

    Install

    npm i ab-element

    DownloadsWeekly Downloads

    11

    Version

    1.4.4

    License

    MIT

    Last publish

    Collaborators

    • antoniobrandao