GREMLINS

The main entry point for creating gremlin components

create

Gremlin create(string tagName, object specification)

Creates a new gremlin based on specification. The spec is used for all custom elements later found in the dom

The tagName will be used to register the new element with the dom.

Example

import gremlins from 'gremlins';

gremlins.create('my-element', {
  created: function(){
    this.el.innerHTML = 'Hello Foo';
  }
});

will be used for all

<my-element></my-element>

findGremlin

gremlin findGremlin(HTMLElement element, [int timeout = infinitiy])

Returns a Promise that's resolved, if a gremlin for a given dom element was found.
The creation of custom elements may take a while. If you want the promise to return null after a given time, pass the timeout in milliseconds as the second argument. Otherwise the promise will be pending until a gremlin could be found.

Example

import gremlins from 'gremlins';

gremlins.findGremlin(el).then(component => {
  console.log(component);
});

COMPONENT SPECIFICATION

mixins

object mixins

An object, or an array of objects, used as mixin(s). This way it's easy to extend you're components capabilities in a modular way.

import gremlins from 'gremlins';
import gremlinsJquery from 'gremlins-jquery';

gremlins.create({
  mixins: [gremlinsJquery],
  created: function(){
    this.$el.text('Hello Foo');
  }
});

created()

function created()

called, when the element was created. Best understood as a constructor function that's only called once.
This happens if it's an element already existing in the HTML or after using document.createElement()

attached()

function attached()

called, when the element was added to the dom

detached()

function attached()

called, when the element was removed from the dom

attributeDidChange()

function attributeDidChange(String attributeName, previousValue, value)

called, when an attribute of the dom element changed

initialize() deprecated

function initialize()

this method will be removed in a future release. Use created instead

constructor function called for all instances on creation

destroy() deprecated

function destroy()

this method will be removed in a future release. Use detached instead

called, when the element leaves the dom. Can be used to unbind event handlers and such

Component

el

HTMLElement el

The dom element for this component. Available inside the initialize call and all other component methods

gremlins.create({
  name: 'foo', 
  initialize: function(){
    this.el.innerHTML = 'Hello Foo';
  }
});

MIXINS / MODULES

Mixins are an easy way to share component behaviour between components.
Mixins are simple javascript object literals extending the components prototype.

If a mixin and a component or another mixin use the same method names, they will be decorated and called in the order they were added to the spec, the mixins are always called before the actual spec method.

jqueryMixin.js

import $ from 'jquery';

export default {
  initialize: function(){
    this.$el = $(this.el);
  }
}

HelloWorld.js

import gremlinsJquery from './jqueryMixin';

gremlins.create('my-element', {
  mixins: [gremlinsJquery],
  initialize: function(){
    this.$el.text('Hello Foo');
  }
});