spooky-element

A very lightweight wrapper for DOM elements, with a lot of functionality.

Makes working with DOM elements a little less scary :)

Couldn't find anything like this, so I've put it together to help me build awesome sites, extra FAST!

• Saves you time
• Built for performance! Great for creating DOM elemennts on the fly
• Works well with Handlebars, especially with hbsfy
• Works great with GSAP (TweenLite, TimelineLite, etc.)
• Built on the shoulders of giants
• Extra spooky 👻

Browser testing is provided by the awesome folks at BrowserStack

Installation

npm install spooky-element

Usage

Feature Examples

var SpookyElement = require('spooky-element');

// Select an existing element withing the DOM
// new SpookyElement( selector [, parentSelector] )
// or
// new SpookyElement( selector [, spookyElementParent] )

new SpookyElement('.ghost');
new SpookyElement('.ghost', '#haunted-house');
// Or without the new keyword
SpookyElement('.ghost', spookyElementHauntedHouse);

// Pass in jQuery elements
new SpookyElement($('.ghost'), $('body'));

// Pass in a DOM element
// new SpookyElement( domElement );

new SpookyElement( document.getElementById('boo') );

// Pass in an HTML string
// new SpookyElement( HTMLString );

new SpookyElement( '<div class="boo"></div>' );

// Provide a template function (like handlebars)
// new SpookyElement( templateFunction [, templateData] );
// using hbsfy (https://github.com/epeli/node-hbsfy) browserify transform here, very handy!

new SpookyElement( require('templates/Boo.hbs'), {autoSpook:true} );

// You can also extend a SpookyElement
// This will automatically render the template on initialization

var ExtraSpooky = function(data){
    this.template = require('../templates/ExtraSpooky.hbs');
    SpookyElement.call(this, data);
}
ExtraSpooky.prototype = Object.create(SpookyElement.prototype);


// Or ES6 syntax
class ExtraSpooky extends SpookyElement {
    constructor(data){
        super(require('../templates/ExtraSpooky.hbs'), data);
    }
}

// Pass in data to the template for extra spoookiness
var extraSpooky = new ExtraSpooky({eyes:'angry', slime:true});

Basic Usage

var spooky = new SpookyElement( '<div class="boo">BOO!</div>' );
spooky.css({
    fontSize: '40px',
    fontWeight: 'bold',
    color: 'red',
    cursor: 'pointer'
})
// yes it's chainable
.appendTo('body')
.on('mousedown', function(){
    spooky.css('color', 'blue');
})
.on('mouseup', function(){
    spooky.css('color', 'red');
});

All The Goods

spookyElementInstance.view // Contains the DOM element

getElement(selector) // returns found element within the spooky element

findElement(selector) // alias to getElement()

find(selector) // Returns a found DOM element and wraps it into a SpookyElement

findAll(selector) // Returns an array of all found DOM elements as SpookyElements

appendTo(element) // Appends to either a DOM element or a SpookyElement

prependTo(element) // Prepends to a DOM or a SpookyElement

append(element) // Append a DOM or a SpookyElement

on(event, handler) // Attach an event handler to the element

off(event, handler) // Detach an event handler from the element

css(objectOrProp [, val]) // Modify CSS

attr(attr, val) // Modify attributes

addClass(class) // Add class to element

removeClass(class) // Remove class from element

hasClass(class) // Check if element has class

getWidth() // Get element width

getHeight() // Get element height

html([html]) // Get or set innerHTML

resize(w,h) // Set the width/height of the element

destroy() // Removes element

remove() // Removes element

License MIT

See LICENSE file