Component

Base layer to help you write reusable Javascript components using jQuery.

Dependencies

The only hard dependecy is jQuery but you'll probably also want to include an inheritance helper to be able to subclass the pintxos component.

Installation

Installation is currently only possible through bower or via download. I'm planning to add the package to NPM in the near future. For now only AMD and globals are supported.

bower install pintxos-component --save

AMD

Assuming you've installed the package through bower and have set the bower_components directory as the base directory of your project. Please note that you should also create a path for jQuery, like describe here ...

define(
    [
        'pintxos-component/index', 
        'pintxos-inherit/index'
    ],
    function (
        Component,
        inherit
    ) {
        // do stuff ...
    }
);

Globals

When using the pintxos component by including script tags, you'll notice that a pintxos object is added to the window object.

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/pintxos-component/index.js"></script>
    <script src="bower_components/pintxos-inherit/index.js"></script>

    <script>
        (function ($, Component, inherit) {

            // do stuff ...

        })(jQuery, pintxos.Component, pintxos.inherit);
    </script>

Usage

Like mentioned before the pintxos Component is a base layer, it's not meant to be used on its own. I recommend to use an inheritance helper like pintxos-inherit or Heir to simplify subclassing the base component.

    var MyComponent = function (el, options) {
        Component.call(this, el, options);
    };

    inherit(MyComponent, Component);

    MyComponent.prototype.init = function () {

        this._on(this._query('.btn-show'), 'click', this._onBtnClick);

        MyComponent._super.init.call(this);
    };

    MyComponent.prototype.show = function () {
        this._query('.content').show();
    };

    MyComponent.prototype._onBtnClick = function (e) {
        e.preventDefault();
        this.show();
    };

    return MyComponent;

init / destroy

All pintxos components should have an init() and destroy() method. By default the base component already defines these methods.

Methods

init()

Triggers an init event on the main element

destroy()

Cleans up selector references and unbinds all event handlers. Also triggers a destroy event on the main element.

isDestroy()

Is this component destroy or what?

getEl()

Getter for the main element

getSettings()

Get all the settings ...

_on($el, event, selector (optional), handler)

Bind handlers to DOM events using jQuery's on() method while making sure the event handler's context is pointing to the class instance instead of the event target. Will return a unique event handler id.

_off(id (optional) )

Unbind event handlers bound with the _on() method. If the uid parameter is omitted, all event handlers will be unbind.

_query(selector, context (optional), forceQuery (optional))

Query for DOM elements using jQuery's query function while maintaining a cache to avoid unnecessary DOM queries.

_resolveElement

Given a string, jQuery object, HTML Element or undefined, this method will always make sure to return a jQuery object. Very useful when trying to convert a settings property to a jQuery object.

_clearQueryCache()

Clear the query cache which is used by the _query() method

All methods prefixed with an underscore (_on, _off, ...) are so called protected methods, only meant to be called from within the subclass and thus not directly on an instace.