Golpha · February 28, 2022 22:53
diff --git a/jquery.interlink.js b/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 );
diff --git a/react.html b/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>
diff --git a/regular.html b/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>
	/**
	* 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 );
	<!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>