Spooky-element NPM

spooky-element

A very lightweight, jQuery-like 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 :ghost:

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