jQuery Interlink Plugin

jquery.interlink.js

/**
 * jQuery Interlink Plugin
 *
 * Developed by Matthias "nihylum" Kaschubowski ( Jan 17, 2016 )
 * Available and archived at invisible.directory
 *
 * (c) 2016 Matthias Kaschubowski
 *
 * License: MIT
 */

interlinkDebug = $(document.currentScript).data('debug') ? true : false;

var interlink = function(target) {

    this.target = target;
    this.debug = interlinkDebug;

    if ( this.debug )
    {
        console.log('Interlink processing task started.');
    }

    this.match = function(props)
    {
        if ( typeof props === 'object' )
        {
            var state = true;

            for ( dataKey in props )
            {
                if ( typeof props[dataKey].source === 'undefined' )
                {
                    if ( this.debug )
                    {
                        console.log('Trying to match entire string:' + props[dataKey]);
                    }

                    if ( this.target.data(dataKey) !== props[dataKey] && state === true )
                    {
                        state = false;
                    }
                }

                if ( typeof props[dataKey].source === 'string' )
                {
                    if ( this.debug )
                    {
                        console.log('Trying to match regular expression:' + props[dataKey]);
                    }

                    if ( typeof this.target.data(dataKey) !== 'undefined' && ! props[dataKey].test(this.target.data(dataKey)) )
                    {
                        state = false;
                    }
                }
            }

            if ( this.debug )
            {
                console.log('Matching task completed, result is: ' + state);
            }

            return state;
        }
        else if ( typeof props !== 'undefined' )
        {
            throw "IllegalFormatException: match property must be an object or undefined";
        }

        return true;
    };

    this.applyStyles = function(styles)
    {
        this.target.css(styles);
    };

    this.engage = function(event, handler, fetchParams, components)
    {
        this.target.on(event, handler);

        if ( typeof fetchParams === 'object' )
        {
            var ajaxParams = $.extend({
                interlinkHandler: handler,
                interlinkTarget: this.target,
                interlinkEvent: event,
                interlinkComponents: components,
            }, fetchParams);

            $.ajax(ajaxParams).done(function(data, status, xhr) {
                var reponse = {
                    data: data,
                    status: status,
                    xhr: xhr,
                };

                this.interlinkTarget.trigger(
                    this.interlinkEvent,
                    [
                        this.interlinkTarget,
                        components,
                        reponse
                    ]
                );
            });

            return;
        }
    };
};

(function( $ ) {

    $.fn.interlink = function(settings, event)
    {
        if ( typeof settings !== 'object' )
        {
            throw "IllegalFormatException: settings argument must hold an object";
        }

        if ( typeof settings.components === 'object' && typeof settings.links === 'object' )
        {
            if ( typeof React === 'undefined' )
            {
                throw "DependencyMissingException: React.js library is not loaded.";
            }

            if ( interlinkDebug )
            {
                console.log('Interlink is in react mode');
            }

            var components = {};

            for ( currentComponent in settings.components )
            {
                if ( typeof settings.components[currentComponent] !== 'object' )
                {
                    throw "IllegalFormatException: components property must hold and array of objects";
                }

                if ( interlinkDebug )
                {
                    console.log('Interlink React-Component created: ' + currentComponent);
                }

                components[currentComponent] = React.createClass(settings.components[currentComponent]);
            }

            if ( interlinkDebug )
            {
                console.log('Interlink has created ' + components.length + ' components');
            }

            settings = settings.links;
        }

        this.each(function() {

            var linker = new interlink($(this));

            for ( key in settings )
            {
                var info = settings[key];
                var currentEvent = info.event || event;
                var currentMatch = info.match || {};

                if ( typeof currentEvent === 'undefined' )
                {
                    throw "UnexpectedEventCascade: No event defined for link " + key;
                }

                if ( linker.match(currentMatch) )
                {
                    if ( linker.debug )
                    {
                        console.log('Interlink matched on key "' + key + '"')
                    }

                    if ( typeof info.style === 'object' )
                    {
                        linker.applyStyles(info.style);
                    }

                    if ( info.handler )
                    {
                        linker.engage(currentEvent, info.handler, this.fetch, components);
                    }
                }
            }

            if ( typeof event === 'string' )
            {
                $(this).trigger(event, [this, components]);
            }
        });

        return this;
    };

})( jQuery );

react.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Example Page: regular example</title>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="jquery.interlink.js" data-debug="false"></script>
    </head>
    <body>
        <div class="example-target" data-foo="foo">

        </div>
        <div class="example-target" data-foo="bar">

        </div>
        <script type="text/babel">
            $('.example-target').interlink({
                components: {
                    common: {
                        render: function()
                        {
                            return (
                                <p className="foo">{this.props.message}</p>
                            );
                        },
                    },
                },
                links: {
                    foo: {
                        match: {
                            foo: 'bar',
                        },
                        style: {
                            backgroundColor: 'silver',
                        },
                        handler: function(event, element, components)
                        {
                            ReactDOM.render(
                                <components.common message="string matching" />,
                                element
                            );
                        },
                    },
                    bar: {
                        match: {
                            foo: /f(.*)/g,
                        },
                        style: {
                            backgroundColor: 'blue',
                            color: 'white',
                        },
                        handler: function(event, element, components)
                        {
                            ReactDOM.render(
                                <components.common message="regular expression matching" />,
                                element
                            );
                        },
                    },
                },
            }, 'ui:init');
        </script>
    </body>
</html>

regular.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Example Page: regular example</title>

        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="jquery.interlink.js" data-debug="false"></script>
    </head>
    <body>
        <div class="example-target" data-foo="foo">

        </div>
        <div class="example-target" data-foo="bar">

        </div>
        <script>
            $('.example-target').interlink({
                foo: {
                    match: {
                        foo: 'bar',
                    },
                    style: {
                        backgroundColor: 'silver',
                    },
                    handler: function(event, element)
                    {
                        element.html(
                            '<p>string matching</p>'
                        );
                    },
                },
                bar: {
                    match: {
                        foo: /f(.*)/g,
                    },
                    style: {
                        backgroundColor: 'blue',
                        color: 'white',
                    },
                    handler: function(event, element)
                    {
                        element.html(
                            '<p>regex matching</p>'
                        );
                    },
                },
            }, 'ui:init');
        </script>
    </body>
</html>