# spooky-element
> A lightweight DOM element wrapper with only the essentials (css, on, off, append, prepend ...)
Latest version **2.2.2** (published 2017-07-12) · MIT license · 0 weekly downloads
## Install
```sh
npm install spooky-element
pnpm add spooky-element
yarn add spooky-element
bun add spooky-element
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.2.2 |
| Published | 2017-07-12 |
| First published | 2014-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Max Rusan |
| Maintainers | maxtherocket |
## Links
- npm: https://www.npmjs.com/package/spooky-element
- Repository: https://maxtherocket@github.com/maxtherocket/spooky-element
- Homepage: https://github.com/maxtherocket/spooky-element
- Issues: https://github.com/maxtherocket/spooky-element/issues
- npm.io page: https://npm.io/package/spooky-element
## Dependencies (14)
- [atts](https://npm.io/package/atts.md) ^0.3.0
- [mixes](https://npm.io/package/mixes.md) ~1.0.4
- [domify](https://npm.io/package/domify.md) ^1.4.0
- [insert](https://npm.io/package/insert.md) ~1.0.1
- [dom-css](https://npm.io/package/dom-css.md) ^2.0.0
- [queried](https://npm.io/package/queried.md) ^1.4.5
- [signals](https://npm.io/package/signals.md) ^1.0.0
- [is-object](https://npm.io/package/is-object.md) ^1.0.1
- [is-string](https://npm.io/package/is-string.md) ^1.0.4
- [dom-events](https://npm.io/package/dom-events.md) ~0.1.1
- [is-element](https://npm.io/package/is-element.md) ^0.1.0
- [is-function](https://npm.io/package/is-function.md) ^1.0.1
- [is-undefined](https://npm.io/package/is-undefined.md) ^1.0.0
- [element-class](https://npm.io/package/element-class.md) ^0.2.0
## Recent versions
- 2.2.2 (latest) — 2017-07-12
- 2.2.1 — 2017-03-20
- 2.2.0 — 2016-03-31
- 2.1.2 — 2016-03-29
- 2.1.1 — 2016-03-29
- 2.1.0 — 2016-03-29
- 2.0.4 — 2016-03-29
- 2.0.3 — 2016-03-29
- 2.0.2 — 2016-03-23
- 2.0.1 — 2015-12-15
- 2.0.0 — 2015-12-15
- 1.13.0 — 2015-10-28
- 1.12.3 — 2015-03-11
- 1.12.2 — 2015-03-11
- 1.12.1 — 2015-03-11
- … 34 more at https://npm.io/package/spooky-element/versions
## README
# 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](https://github.com/epeli/node-hbsfy)
- Works great with [GSAP](http://greensock.com/gsap) (TweenLite, TimelineLite, etc.)
- Built on the shoulders of giants
- Extra spooky :ghost:
*Browser testing is provided by the awesome folks at [BrowserStack](https://www.browserstack.com)*
## Installation
`npm install spooky-element`
## Usage
### Feature Examples
```javascript
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( '' );
// 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
```javascript
var spooky = new SpookyElement( 'BOO!
' );
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
```javascript
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](LICENSE) file
---
_Source: https://npm.io/package/spooky-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._