pwFoo/ajax-ic.js

## ajax-ic.js
/**
 * Load Module if DOM is ready
 */
$(function () {
    /**
     * GET click events
     */
    $('[ic-get]').on('click', function () {
        icAjax(this, 'GET')
    });


    /**
     * POST click events
     */

    $('[ic-post]').on('click', function () {
        icAjax(this, 'POST')
    });


    /**
     * DELETE click events
     */
    $('[ic-delete]').on('click', function () {
        icAjax(this, 'DELETE')
    });


    /**
     * PUT click events
     */
    $('[ic-put]').on('click', function () {
        icAjax(this, 'PUT')
    });


    /**
     * PATCH click events
     */
    $('[ic-patch]').on('click', function () {
        icAjax(this, 'PATCH')
    })


    /**
     * History api change event
     */
    window.onpopstate = function (event) {
        //console.log(event.state);
        if (event.state !== null) { // changed
            $(event.state).ajax({url: window.location.href});   // Load current history url
        }
    };

    /**
     * Minimal IntercoolerJS magic
     * https://github.com/LeadDyno/intercooler-js
     * @param element Clicked element
     * @param icMethod HTTP method to use
     */
    function icAjax(clickedElement, icMethod) {
        var element = $(clickedElement),
            icTarget = element.attr('ic-target') || clickedElement, // defined destination OR current element ?! object type ?!
            icUrl = element.attr('ic-' + icMethod); // URL to load

        element.stop();         // prevent default click event

        /**
         * Quick & dirty local source solution...
         */
        if (icUrl.charAt(0) === '#') {
            $(icTarget).html($(icUrl).html());
            return;
        }

        // Ajax call
        $.ajax({
                url: icUrl,
                method: icMethod,
            },
            // success method
            function (xhr) {
                // history / url push support
                // https://css-tricks.com/using-the-html5-history-api/
                if (element.attr('ic-push-url')) {
                    history.pushState(
                        icTarget,   // content (destination element/s) assigned to the history item
                        null,       // history item title
                        icUrl       // history item address
                    );
                }

                // fill response html to target
                $(icTarget).html(xhr.response);

                // trigger dependencies if source should be changed by POST / PATCH / DELETE / UPDATE
                if (icMethod !== 'GET') {
                    /**
                     * ToDo:
                     * - reduce calls!? load identical source once and add to all targets
                     * - group elements by identical ic-get url / path
                     * - check also ic-deps to trigger manual dependencies too!
                     */
                    $('[ic-get]').each(function (elem) {
                        elem = $(elem);
                        var path = elem.attr('ic-get');
                        //if (isDependent(getPath(icUrl), getPath(path))) {
                        if (isDependent(icUrl, path)) {
                            //console.log(path);
                            elem.trigger('click');
                        }
                    });
                }
            }
        );
    }


    /**
     * Get path from url
     * @param url Address to get path from
     * @return Path of URL
     */
    function getPath(url) {
        var a = $.create('a');
        a.href = url;
        return a.pathname;
    }


    /**
     * Check url depencency
     * @param url1 First address to compare
     * @param url2 Second address to compare
     * @return boolean Is dependent?
     */
    function isDependent (url1, url2) {
        return url1.indexOf(getPath(url2)) === 0 || url2.indexOf(getPath(url1)) === 0;
    }

});

## jqSlim.js
/*!
 * jqSlim - jQuery-like API super-tinyJavaScript library
 * A ki.js fork (Copyright (c) 2015 Denis Ciccale (@tdecs))
 * Copyright (c) 2017
 * Released under MIT license
 */

/**
 * Self execute library with defaults
 * @param document mapped document
 * @param array empty array
 * @param prototype mapped string
 * @param element ???
 */
!function (document, array, prototype, element) {

    /*
     * $ main function
     * selector = css selector, dom object, or function
     * http://www.dustindiaz.com/smallest-domready-ever
     * returns instance or executes function on ready
     */
    $ = function (selector) {
        return /^f/.test(typeof selector) ?                     // IF1 selector is a function (type starts with "f")
            /c/.test(document.readyState) ?                     // IF2 dom ready (readyState contains "c")
                selector() :                                    // THEN2 call selector as function
                $(document).on('DOMContentLoaded', selector) :  // ELSE2 delay function call until dom ready
            new jqSlim(selector);                               // ELSE1 initialize library
    }


    /*
     * init function (internal use)
     * selector = selector, dom element or function
     */
    function jqSlim(selector) {
        array.push.apply(                       // add second array to first
            this,                               // first array
            selector && selector.nodeType ?     // IF1 selector is type node
                [selector] :                    // THEN1 concat collection
            '' + selector === selector ?        // ELSE1 IF2 selector is string
                query(selector) :               // THEN2 query and concat collection
                element                         // ELSE2 concat element (NULL?!)
        );
    }


    /*
     * improved query function
     * http://ryanmorr.com/abstract-away-the-performance-faults-of-queryselectorall/
     * https://github.com/james2doyle/saltjs
     *
     * @param selector css selector to get an array of elements
     * @param context dom context element
     * @return collection of elements
     */
     function query(selector, context) {
         context = context || document;
         var type = selector.charAt(0),             // first char to check selector type
             selectorValue = selector.substr(1),    // selector without first char (needed if type prefixed)
             singleValue = /^[\w\*\-_\.\#\@]+$/;    // # . @ * - _ aA-zZ 0-9

         if (singleValue.exec(selector)) {   // simple single word selector?
             if (type === '#') { // single ID
                 return [context.getElementById(selectorValue)];
             } else if (type === '.') {  // single CLASS
                 return context.getElementsByClassName(selectorValue);
             } else if (type === '@') {  // elements name attribute
                 return context.getElementsByName(selectorValue);
             } else {    // single TAG NAME
                 return context.getElementsByTagName(selector);
             }
         } else {    // complex selector...
             return context.querySelectorAll(selector);
         }
     }


    // set jqSlim prototype
    $[prototype] = jqSlim[prototype] = $.fn = jqSlim.fn = {

        // default length
        length: 0,

        /*
        * on method
        * @param eventType String event type i.e 'click'
        * @param eventFunction Event callback function to bind
        */
        on: function (eventType, eventFunction) {
            return this.each(function (array) {
                array.addEventListener(eventType, eventFunction);
            });
        },

        /*
        * off method
        * @param eventType String event type i.e 'click'
        * @param eventFunction Event callback function to remove
        */
        off: function (eventType, eventFunction) {
            return this.each(function (array) {
                array.removeEventListener(eventType, eventFunction);
            });
        },


        /**
         * Trigger event on current colletion of elements
         * modern browsers, IE9+
         * @param type Event type to trigger
         */
        trigger: function(type) {
            var event = document.createEvent('HTMLEvents');
            event.initEvent(type, false, true);

            // Trigger event on each element in collection
            this.each(function(element) {
                element.dispatchEvent(event);
            });
        },


        /**
         * Prevent default event
         * @return "this" because of chaining
         */
        stop: function() {
            window.event.preventDefault();
            return this;
        },


        /*
        * each loop method
        * use native forEach to iterate collection
        * @param callbackFunction The function to call on each iteration
        * @param callbackParams Callback params
        * @return "this" because of chaining
        */
        each: function (callbackFunction, callbackParams) {
            array.forEach.call(
                this,
                callbackFunction,
                callbackParams
            );
            return this;
        },


        /**
         * query dom element(s) in current element context
         * @param selector A selector string
         * @return Collection of matching elements
         */
        query: function (selector) {
            return query(selector, this);
        },


        /**
         * Remove current colletion of elements
         */
        remove: function() {
            return this.each(function(element) {
                element.parentNode.removeChild(element);
            });
        },


        /**
         * Insert element
         * Maybe replacement for append / prepend
         * @param insertElement new element
         * @param position optional, prepend (0), append (null) or insert before position reference element
         *
         * ToDo:
         * - Use append / prepend instead?!
         * - Improve position check?!
         */
        insert: function(insertElement, position) {
            return this.each(function(element) {
                position = (
                    position === 0 ?            // IF
                        element.firstChild :    // 0 = first child
                        !position ?             // ELSE IF
                            null :              // null = last child
                            position[0]         // ELSE given position
                );
                element.insertBefore(insertElement, position);
            });
        },


        /**
         * Append an element to the current one
         * jQuery compatibility...
         * @param appendElement element to append
         *
         * ToDo:
         * Move to a separated plugin if insert() will still be used
         */
        append: function(appendElement) {
            return this.insert (appendElement, null);
        },


        /**
         * Prepend element to current one
         * jQuery compatibility...
         * @param insertElement element to prepend or insert before position
         *
         * ToDo:
         * Move to a separated plugin if insert() will still be used
         */
        prepend: function(insertElement) {
            return this.insert (appendElement, 0);
        },


        /**
         * Insert before element
         * jQuery compatibility...
         * @param html Content to insert
         */
        before: function(html) {
            return this.each(function(element) {
                element.insertAdjacentHTML('beforebegin', html);
            });
        },


        /**
         * Insert before element
         * jQuery compatibility...
         * @param html Content to insert
         */
        after: function(html) {
            return this.each(function(element) {
                element.insertAdjacentHTML('afterend', html);
            });
        },


        /**
         * Set collection / get single element html content
         * @param html Optional value to set to the collection
         * @return Optional return single / first element html content
         */
        html: function (html) {
            return html === []._ ?              // IF param is undefined
                this[0].innerHTML :             // get element content
                this.each(function(element) {   // ELSE
                    element.innerHTML = html;   // set new value
                });
        },


        /**
         * Set collection / get single element text content
         * @param text Optional value to set to the collection
         * @return Optional return single / first element text content
         */
        text: function (text) {
            return text === []._ ?              // IF param is undefined
                this[0].textContent :           // get element content
                this.each(function(element) {   // ELSE
                    element.textContent = text; // set new value
                });
        },


        /**
         * Get parent for each DOM element in the collection
         * @return Array of parent elements of each element in collection
         *
         * ToDo:
         * Move to a separated plugin?
         */
        parent: function() {
            var result = [];
            this.each(function(element) {
                result.push(
                    element.parentNode ?        // IF parent element
                        element.parentNode :    // ... return it
                        []                      // ELSE empty array
                );
            });
            return result;
        },


        /**
         * Check single element matches against selector
         * modern browsers, IE9+
         * @param selector to check against the current element
         * @return boolean
         *
         * ToDo:
         * Move to a separated plugin?
         */
        is: function(selector) {
            var flag = false;

            this.each(function(element) {
                // cross (modern) browser match test
                if ((element.matches ||
                     element.matchesSelector ||
                     element.msMatchesSelector ||
                     element.webkitMatchesSelector
                ).call(element, selector)) {    // element matching selector?
                    flag = true;    // true if single hit in collection
                }
            });

            return flag;
         },


        /**
         * Closest single ancestors element matches selector
         * http://clubmate.fi/jquerys-closest-function-and-pure-javascript-alternatives/
         * @param selector Searched for matches
         * @return Single dom element
         *
         * ToDo:
         * Move to a separated plugin?
         */
        closest: function(selector) {
            var result = [];

            this.each(function(element) {
                result.push(
                    $(element).is(selector) ?                   // IF match
                        element :                               // ... return element
                        $(element.parentNode).closest(selector) // ELSE recursive call...
                );
            });

            return result;
        },


        /**
         * Filter collection of dom elements
         * @param selector for find / filter matches
         * @return Collection of elements
         *
         * ToDo:
         * Move to a separated plugin?
         */
        find: function (selector) {
            var result = [];
            this.each(function(element) {
                result.push($(element).query(selector));
            });
            return result;
        },


        /**
         * Get first element in collection
         * @return Single DOM element object
         */
        first: function() {
            return $(this[0]);
        },


        /**
         * Get last element in collection
         * @return Single DOM element object
         */
        last: function() {
            return $(this[this.length - 1]);
        },


        /**
         * Get element in collection
         * @param index
         * @return Single DOM element object
         */
        get: function(index) {
            return $(this[index]);
        },

        /**
         * Get element / set elements attribute
         * @param attribtue to handle
         * @param value Optional value to set to the collection
         * @return Optional attribute value
         */
        attr: function(attribute, value) {
            return value !== []._ ?                                 // set mode because value is given
                this.each(function(element) {                       // each element in collection
                    element.setAttribute(attribute, value);         // set attribute value
                }) :
                this[0] == null ?                                   // no dom element given...
                    false :                                         // ... return false
                    this[0].getAttribute(attribute) || false;       // attribute value OR false
        },


        /**
         * Remove elements attribute
         * @param attribute Attribute name
         */
        removeAttr: function(attribute) {
            return this.each(function(element) {
                element.removeAttribute(attribute);
            });
        },


        /**
         * Add class to elements
         * @param value Class to add
         */
        addClass: function(classValue) {
            return this.each(function(element) {
                element.classList.add(classValue);
            });
        },


        /**
         * Remove class from elements
         * @param value Class to remove
         */
        removeClass: function(classValue) {
            return this.each(function(element) {
                element.classList.remove(classValue);
            });
        },


        /**
         * Toggle class from elements
         * @param value Class to toggle
         */
        toggleClass: function(classValue) {
            return this.each(function(element) {
                element.classList.toggle(classValue);
            });
        },


        /**
         * Check if element class list contains class
         * @param value Class to check
         * @return boolean
         */
        hasClass: function(value) {
            var flag = false;
            this.each(function(element) {
                if (element.classList.contains(value)) {
                    flag = true;
                }
            });
            return flag;
        },


        /**
         * Get single element style / set elements style by string or key => value object
         * https://plainjs.com/javascript/styles/set-and-get-css-styles-of-elements-53/
         * @param styleAttr style key string or object with key => value to handle
         * @param value Optional value to set to the collection
         * @return Optional style value
         */
        /*
        css: function (styleAttr, value) {
            return value === []._  &&                               // IF value is undefined
                styleAttr === '' + styleAttr ?                      // AND IF styleAttr is string
                getComputedStyle(this[0])[styleAttr] :              // get style value of first element
                this.each(function(element) {                       // ELSE set to each element in collection
                    if (styleAttr === '' + styleAttr) {             // IF styleAttr is string
                        element.style[styleAttr] = value;           // set style value to first element
                    } else {                                        // ESLE styleAttr should be an object
                        for (var key in styleAttr) {                // loop object key => value
                            $(element).css (key, styleAttr[key]);   // set each pair to element
                        }
                    }
                });
        },*/

        /**
         * Get single element style / set elements style by string or key => value object
         * Optional save original style value to restore / toggle styles
         * https://plainjs.com/javascript/styles/set-and-get-css-styles-of-elements-53/
         * @param styleAttr style key string or object with key => value to handle
         * @param value Optional value to set to the collection
         * @param restore Optional save / restore orig value to data attribute
         * @return Optional style value
         *
         * ToDo:
         * Move to a separated plugin?
         */
        css: function (styleAttr, value, restore) {
            if (styleAttr === '' + styleAttr) {
                if (value === []._) {             // undefined
                    return getComputedStyle(this[0])[styleAttr];    // get current value
                } else {
                    this.each(function(element) {   // loop dom elements
                        if (restore !== []._) {     // isset restore param
                            if (element.dataset['__' + styleAttr] !== []._) {   // isset backuped orig value
                                value = element.dataset['__' + styleAttr];      // get orig value
                                delete element.dataset['__' + styleAttr];       // delete orig value backup data attribute
                            } else if (element.style[styleAttr] !== []._) {     // no saved orig value? first change...
                                element.dataset['__' + styleAttr] = element.style[styleAttr];   // set backup orig value to data attribute
                            }
                        }
                        element.style[styleAttr] = value;       // set element style value...
                    });
                }
            } else {
                // object! Loop properties and recursive call method self
                for (var key in styleAttr) {
                    this.css (key, styleAttr[key], restore);
                }
            }
            return this;
        },


        /**
         * Hide current element
         *
         * ToDo:
         * Move to a separated plugin?
         */
        hide: function() {
            this.css('display', 'none', true);
            /*var display = 'display';
            return this.each(function(element) {
                if (element.dataset['__' + display] === []._) { // is undefined
                    // set helper attribute with element style or just null value
                    element.dataset['__' + display] = element.style[display];
                    element.style[display] = 'none';
                }
            });*/
        },


        /**
         * Show current element
         *
         * ToDo:
         * Move to a separated plugin?
         */
        show: function() {
            this.css('display', null, true);
            /*var display = 'display';
            return this.each(function(element) {
                if (element.dataset['__' + display] !== []._) { // is undefined
                    // restore initial value or computed default display style
                    element.style[display] = element.dataset['__' + display] || '';
                    delete element.dataset['__' + display];
                }
            });*/
        },

        /**
         * $.ajax() wrapper with destination current element
         * @param options Ajax call options to pass
         */
        ajax: function(options) {
            var element = this;
            $.ajax(
                options,
                function (xhr) {
                    element.html(xhr.response);
                },
                function () {
                    element.html('Ajax error!')
                }
            );
        },

        // for some reason is needed to get an array-like
        // representation instead of an object
        splice: array.splice,
    }


    /**
     * Ajax implementation
     * https://blog.garstasio.com/you-dont-need-jquery/ajax/
     * @param options Ajac call options object
     * @param success Callback executed on successful ajax call
     * @param error Callback function executed on failure
     * @return Execute the success | error callback
     *
     * ToDo:
     * Move to a separated plugin?
     */
    $.ajax = function(options, success, error) {
        var method = options.method || 'GET',               // method OR default GET
            url = options.cache == false ?                  // IF caching disabled
                options.url + '?' + new Date().getTime()    // add get param to avoid caching
                :                                           // ELSE = caching is allowed
                options.url,                                // just set the url
            httpRequest = new XMLHttpRequest();             // create XHR object

        httpRequest.open(method, url, true);
        httpRequest.withCredentials = options.hasOwnProperty('withCredentials');    // true || false
        setHeaders(options.headers, httpRequest);           // set all the headers from options object

        httpRequest.onload = function() {
            if (httpRequest.status >= 200 && httpRequest.status < 400) {
                // Call sucessfully done! Execute and success callback
                return success(httpRequest);
            } else {
                // We reached our target server, but it returned an error
                // execute and success callback
                return error(httpRequest);
            }
        };

        httpRequest.onerror = function() {
            // There was a connection error of some sort
            return error(httpRequest);
        };
        // Send ajax call with data
        httpRequest.send(setData(options.data));

        /**
         * Set header pairs
         * @param params Key => value array
         * @param xhr The httpRequest object to add the header information
         */
        function setHeaders(params, xhr) {
            for (var property in params) {
                xhr.setRequestHeader(property, params[property])
            };
        }

        /**
         * Check if content-type option is set
         * @param headers Array with header pairs
         * @return boolean
         */
        function hasContentType (headers) {
            return Object.keys(headers).some(function (name) {
                return name.toLowerCase() === 'content-type'
            })
        }

        /**
         * Set xhr request data
         * @param data Object with key => value pairs
         * @return Param (encoded) string
         */
        function setData (data) {
            return data === []._ ? null : data === '' + data ? data : Object.keys(data).map(
                function(key){ return encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) }
            ).join('&');
        }
    }

    /**
     * Example ajax GET shorthand
     */
    /*
    $.get = function (url, data, success) {
        return $.ajax({
            method: 'GET',
            url: url,
            data: data || {}
        },
        success);
    }
    */


    /**
     * Create a new dom element
     * @param elementTagName dom element to create
     * @return created and empty dom element
     */
    $.create = function (elementTagName) {
        return document.createElement(elementTagName);
    }


    /**
     * Simple map method
     * @param array
     * @param callback Function to execute as callback
     *
     * ToDo:
     * Really needed?
     */
    $.map = function (array, callback) {
        return array.map(callback);
    }


    /**
     * Simple each loop method
     * @param collection DOM elements
     * @param callback Function to execute
     * @param callbackParams Callback params
     *
     * ToDo:
     * Really needed?
     */
    $.each = function (collection, callback, callbackParams) {
        collection.forEach.call(this, callback, callbackParams);
    }

}( document, [], 'prototype' );
	/**
	* Load Module if DOM is ready
	*/
	$(function () {
	/**
	* GET click events
	*/
	$('[ic-get]').on('click', function () {
	icAjax(this, 'GET')
	});


	/**
	* POST click events
	*/

	$('[ic-post]').on('click', function () {
	icAjax(this, 'POST')
	});


	/**
	* DELETE click events
	*/
	$('[ic-delete]').on('click', function () {
	icAjax(this, 'DELETE')
	});


	/**
	* PUT click events
	*/
	$('[ic-put]').on('click', function () {
	icAjax(this, 'PUT')
	});


	/**
	* PATCH click events
	*/
	$('[ic-patch]').on('click', function () {
	icAjax(this, 'PATCH')
	})


	/**
	* History api change event
	*/
	window.onpopstate = function (event) {
	//console.log(event.state);
	if (event.state !== null) { // changed
	$(event.state).ajax({url: window.location.href}); // Load current history url
	}
	};

	/**
	* Minimal IntercoolerJS magic
	* https://github.com/LeadDyno/intercooler-js
	* @param element Clicked element
	* @param icMethod HTTP method to use
	*/
	function icAjax(clickedElement, icMethod) {
	var element = $(clickedElement),
	icTarget = element.attr('ic-target') \|\| clickedElement, // defined destination OR current element ?! object type ?!
	icUrl = element.attr('ic-' + icMethod); // URL to load

	element.stop(); // prevent default click event

	/**
	* Quick & dirty local source solution...
	*/
	if (icUrl.charAt(0) === '#') {
	$(icTarget).html($(icUrl).html());
	return;
	}

	// Ajax call
	$.ajax({
	url: icUrl,
	method: icMethod,
	},
	// success method
	function (xhr) {
	// history / url push support
	// https://css-tricks.com/using-the-html5-history-api/
	if (element.attr('ic-push-url')) {
	history.pushState(
	icTarget, // content (destination element/s) assigned to the history item
	null, // history item title
	icUrl // history item address
	);
	}

	// fill response html to target
	$(icTarget).html(xhr.response);

	// trigger dependencies if source should be changed by POST / PATCH / DELETE / UPDATE
	if (icMethod !== 'GET') {
	/**
	* ToDo:
	* - reduce calls!? load identical source once and add to all targets
	* - group elements by identical ic-get url / path
	* - check also ic-deps to trigger manual dependencies too!
	*/
	$('[ic-get]').each(function (elem) {
	elem = $(elem);
	var path = elem.attr('ic-get');
	//if (isDependent(getPath(icUrl), getPath(path))) {
	if (isDependent(icUrl, path)) {
	//console.log(path);
	elem.trigger('click');
	}
	});
	}
	}
	);
	}


	/**
	* Get path from url
	* @param url Address to get path from
	* @return Path of URL
	*/
	function getPath(url) {
	var a = $.create('a');
	a.href = url;
	return a.pathname;
	}


	/**
	* Check url depencency
	* @param url1 First address to compare
	* @param url2 Second address to compare
	* @return boolean Is dependent?
	*/
	function isDependent (url1, url2) {
	return url1.indexOf(getPath(url2)) === 0 \|\| url2.indexOf(getPath(url1)) === 0;
	}

	});
	/*!
	* jqSlim - jQuery-like API super-tinyJavaScript library
	* A ki.js fork (Copyright (c) 2015 Denis Ciccale (@tdecs))
	* Copyright (c) 2017
	* Released under MIT license
	*/

	/**
	* Self execute library with defaults
	* @param document mapped document
	* @param array empty array
	* @param prototype mapped string
	* @param element ???
	*/
	!function (document, array, prototype, element) {

	/*
	* $ main function
	* selector = css selector, dom object, or function
	* http://www.dustindiaz.com/smallest-domready-ever
	* returns instance or executes function on ready
	*/
	$ = function (selector) {
	return /^f/.test(typeof selector) ? // IF1 selector is a function (type starts with "f")
	/c/.test(document.readyState) ? // IF2 dom ready (readyState contains "c")
	selector() : // THEN2 call selector as function
	$(document).on('DOMContentLoaded', selector) : // ELSE2 delay function call until dom ready
	new jqSlim(selector); // ELSE1 initialize library
	}


	/*
	* init function (internal use)
	* selector = selector, dom element or function
	*/
	function jqSlim(selector) {
	array.push.apply( // add second array to first
	this, // first array
	selector && selector.nodeType ? // IF1 selector is type node
	[selector] : // THEN1 concat collection
	'' + selector === selector ? // ELSE1 IF2 selector is string
	query(selector) : // THEN2 query and concat collection
	element // ELSE2 concat element (NULL?!)
	);
	}


	/*
	* improved query function
	* http://ryanmorr.com/abstract-away-the-performance-faults-of-queryselectorall/
	* https://github.com/james2doyle/saltjs
	*
	* @param selector css selector to get an array of elements
	* @param context dom context element
	* @return collection of elements
	*/
	function query(selector, context) {
	context = context \|\| document;
	var type = selector.charAt(0), // first char to check selector type
	selectorValue = selector.substr(1), // selector without first char (needed if type prefixed)
	singleValue = /^[\w\\-_\.\#\@]+$/; // # . @ - _ aA-zZ 0-9

	if (singleValue.exec(selector)) { // simple single word selector?
	if (type === '#') { // single ID
	return [context.getElementById(selectorValue)];
	} else if (type === '.') { // single CLASS
	return context.getElementsByClassName(selectorValue);
	} else if (type === '@') { // elements name attribute
	return context.getElementsByName(selectorValue);
	} else { // single TAG NAME
	return context.getElementsByTagName(selector);
	}
	} else { // complex selector...
	return context.querySelectorAll(selector);
	}
	}


	// set jqSlim prototype
	$[prototype] = jqSlim[prototype] = $.fn = jqSlim.fn = {

	// default length
	length: 0,

	/*
	* on method
	* @param eventType String event type i.e 'click'
	* @param eventFunction Event callback function to bind
	*/
	on: function (eventType, eventFunction) {
	return this.each(function (array) {
	array.addEventListener(eventType, eventFunction);
	});
	},

	/*
	* off method
	* @param eventType String event type i.e 'click'
	* @param eventFunction Event callback function to remove
	*/
	off: function (eventType, eventFunction) {
	return this.each(function (array) {
	array.removeEventListener(eventType, eventFunction);
	});
	},


	/**
	* Trigger event on current colletion of elements
	* modern browsers, IE9+
	* @param type Event type to trigger
	*/
	trigger: function(type) {
	var event = document.createEvent('HTMLEvents');
	event.initEvent(type, false, true);

	// Trigger event on each element in collection
	this.each(function(element) {
	element.dispatchEvent(event);
	});
	},


	/**
	* Prevent default event
	* @return "this" because of chaining
	*/
	stop: function() {
	window.event.preventDefault();
	return this;
	},


	/*
	* each loop method
	* use native forEach to iterate collection
	* @param callbackFunction The function to call on each iteration
	* @param callbackParams Callback params
	* @return "this" because of chaining
	*/
	each: function (callbackFunction, callbackParams) {
	array.forEach.call(
	this,
	callbackFunction,
	callbackParams
	);
	return this;
	},


	/**
	* query dom element(s) in current element context
	* @param selector A selector string
	* @return Collection of matching elements
	*/
	query: function (selector) {
	return query(selector, this);
	},


	/**
	* Remove current colletion of elements
	*/
	remove: function() {
	return this.each(function(element) {
	element.parentNode.removeChild(element);
	});
	},


	/**
	* Insert element
	* Maybe replacement for append / prepend
	* @param insertElement new element
	* @param position optional, prepend (0), append (null) or insert before position reference element
	*
	* ToDo:
	* - Use append / prepend instead?!
	* - Improve position check?!
	*/
	insert: function(insertElement, position) {
	return this.each(function(element) {
	position = (
	position === 0 ? // IF
	element.firstChild : // 0 = first child
	!position ? // ELSE IF
	null : // null = last child
	position[0] // ELSE given position
	);
	element.insertBefore(insertElement, position);
	});
	},


	/**
	* Append an element to the current one
	* jQuery compatibility...
	* @param appendElement element to append
	*
	* ToDo:
	* Move to a separated plugin if insert() will still be used
	*/
	append: function(appendElement) {
	return this.insert (appendElement, null);
	},


	/**
	* Prepend element to current one
	* jQuery compatibility...
	* @param insertElement element to prepend or insert before position
	*
	* ToDo:
	* Move to a separated plugin if insert() will still be used
	*/
	prepend: function(insertElement) {
	return this.insert (appendElement, 0);
	},


	/**
	* Insert before element
	* jQuery compatibility...
	* @param html Content to insert
	*/
	before: function(html) {
	return this.each(function(element) {
	element.insertAdjacentHTML('beforebegin', html);
	});
	},


	/**
	* Insert before element
	* jQuery compatibility...
	* @param html Content to insert
	*/
	after: function(html) {
	return this.each(function(element) {
	element.insertAdjacentHTML('afterend', html);
	});
	},


	/**
	* Set collection / get single element html content
	* @param html Optional value to set to the collection
	* @return Optional return single / first element html content
	*/
	html: function (html) {
	return html === []._ ? // IF param is undefined
	this[0].innerHTML : // get element content
	this.each(function(element) { // ELSE
	element.innerHTML = html; // set new value
	});
	},


	/**
	* Set collection / get single element text content
	* @param text Optional value to set to the collection
	* @return Optional return single / first element text content
	*/
	text: function (text) {
	return text === []._ ? // IF param is undefined
	this[0].textContent : // get element content
	this.each(function(element) { // ELSE
	element.textContent = text; // set new value
	});
	},


	/**
	* Get parent for each DOM element in the collection
	* @return Array of parent elements of each element in collection
	*
	* ToDo:
	* Move to a separated plugin?
	*/
	parent: function() {
	var result = [];
	this.each(function(element) {
	result.push(
	element.parentNode ? // IF parent element
	element.parentNode : // ... return it
	[] // ELSE empty array
	);
	});
	return result;
	},


	/**
	* Check single element matches against selector
	* modern browsers, IE9+
	* @param selector to check against the current element
	* @return boolean
	*
	* ToDo:
	* Move to a separated plugin?
	*/
	is: function(selector) {
	var flag = false;

	this.each(function(element) {
	// cross (modern) browser match test
	if ((element.matches \|\|
	element.matchesSelector \|\|
	element.msMatchesSelector \|\|
	element.webkitMatchesSelector
	).call(element, selector)) { // element matching selector?
	flag = true; // true if single hit in collection
	}
	});

	return flag;
	},


	/**
	* Closest single ancestors element matches selector
	* http://clubmate.fi/jquerys-closest-function-and-pure-javascript-alternatives/
	* @param selector Searched for matches
	* @return Single dom element
	*
	* ToDo:
	* Move to a separated plugin?
	*/
	closest: function(selector) {
	var result = [];

	this.each(function(element) {
	result.push(
	$(element).is(selector) ? // IF match
	element : // ... return element
	$(element.parentNode).closest(selector) // ELSE recursive call...
	);
	});

	return result;
	},


	/**
	* Filter collection of dom elements
	* @param selector for find / filter matches
	* @return Collection of elements
	*
	* ToDo:
	* Move to a separated plugin?
	*/
	find: function (selector) {
	var result = [];
	this.each(function(element) {
	result.push($(element).query(selector));
	});
	return result;
	},


	/**
	* Get first element in collection
	* @return Single DOM element object
	*/
	first: function() {
	return $(this[0]);
	},


	/**
	* Get last element in collection
	* @return Single DOM element object
	*/
	last: function() {
	return $(this[this.length - 1]);
	},


	/**
	* Get element in collection
	* @param index
	* @return Single DOM element object
	*/
	get: function(index) {
	return $(this[index]);
	},

	/**
	* Get element / set elements attribute
	* @param attribtue to handle
	* @param value Optional value to set to the collection
	* @return Optional attribute value
	*/
	attr: function(attribute, value) {
	return value !== []._ ? // set mode because value is given
	this.each(function(element) { // each element in collection
	element.setAttribute(attribute, value); // set attribute value
	}) :
	this[0] == null ? // no dom element given...
	false : // ... return false
	this[0].getAttribute(attribute) \|\| false; // attribute value OR false
	},


	/**
	* Remove elements attribute
	* @param attribute Attribute name
	*/
	removeAttr: function(attribute) {
	return this.each(function(element) {
	element.removeAttribute(attribute);
	});
	},


	/**
	* Add class to elements
	* @param value Class to add
	*/
	addClass: function(classValue) {
	return this.each(function(element) {
	element.classList.add(classValue);
	});
	},


	/**
	* Remove class from elements
	* @param value Class to remove
	*/
	removeClass: function(classValue) {
	return this.each(function(element) {
	element.classList.remove(classValue);
	});
	},


	/**
	* Toggle class from elements
	* @param value Class to toggle
	*/
	toggleClass: function(classValue) {
	return this.each(function(element) {
	element.classList.toggle(classValue);
	});
	},


	/**
	* Check if element class list contains class
	* @param value Class to check
	* @return boolean
	*/
	hasClass: function(value) {
	var flag = false;
	this.each(function(element) {
	if (element.classList.contains(value)) {
	flag = true;
	}
	});
	return flag;
	},


	/**
	* Get single element style / set elements style by string or key => value object
	* https://plainjs.com/javascript/styles/set-and-get-css-styles-of-elements-53/
	* @param styleAttr style key string or object with key => value to handle
	* @param value Optional value to set to the collection
	* @return Optional style value
	*/
	/*
	css: function (styleAttr, value) {
	return value === []._ && // IF value is undefined
	styleAttr === '' + styleAttr ? // AND IF styleAttr is string
	getComputedStyle(this[0])[styleAttr] : // get style value of first element
	this.each(function(element) { // ELSE set to each element in collection
	if (styleAttr === '' + styleAttr) { // IF styleAttr is string
	element.style[styleAttr] = value; // set style value to first element
	} else { // ESLE styleAttr should be an object
	for (var key in styleAttr) { // loop object key => value
	$(element).css (key, styleAttr[key]); // set each pair to element
	}
	}
	});
	},*/

	/**
	* Get single element style / set elements style by string or key => value object
	* Optional save original style value to restore / toggle styles
	* https://plainjs.com/javascript/styles/set-and-get-css-styles-of-elements-53/
	* @param styleAttr style key string or object with key => value to handle
	* @param value Optional value to set to the collection
	* @param restore Optional save / restore orig value to data attribute
	* @return Optional style value
	*
	* ToDo:
	* Move to a separated plugin?
	*/
	css: function (styleAttr, value, restore) {
	if (styleAttr === '' + styleAttr) {
	if (value === []._) { // undefined
	return getComputedStyle(this[0])[styleAttr]; // get current value
	} else {
	this.each(function(element) { // loop dom elements
	if (restore !== []._) { // isset restore param
	if (element.dataset['__' + styleAttr] !== []._) { // isset backuped orig value
	value = element.dataset['__' + styleAttr]; // get orig value
	delete element.dataset['__' + styleAttr]; // delete orig value backup data attribute
	} else if (element.style[styleAttr] !== []._) { // no saved orig value? first change...
	element.dataset['__' + styleAttr] = element.style[styleAttr]; // set backup orig value to data attribute
	}
	}
	element.style[styleAttr] = value; // set element style value...
	});
	}
	} else {
	// object! Loop properties and recursive call method self
	for (var key in styleAttr) {
	this.css (key, styleAttr[key], restore);
	}
	}
	return this;
	},


	/**
	* Hide current element
	*
	* ToDo:
	* Move to a separated plugin?
	*/
	hide: function() {
	this.css('display', 'none', true);
	/*var display = 'display';
	return this.each(function(element) {
	if (element.dataset['__' + display] === []._) { // is undefined
	// set helper attribute with element style or just null value
	element.dataset['__' + display] = element.style[display];
	element.style[display] = 'none';
	}
	});*/
	},


	/**
	* Show current element
	*
	* ToDo:
	* Move to a separated plugin?
	*/
	show: function() {
	this.css('display', null, true);
	/*var display = 'display';
	return this.each(function(element) {
	if (element.dataset['__' + display] !== []._) { // is undefined
	// restore initial value or computed default display style
	element.style[display] = element.dataset['__' + display] \|\| '';
	delete element.dataset['__' + display];
	}
	});*/
	},

	/**
	* $.ajax() wrapper with destination current element
	* @param options Ajax call options to pass
	*/
	ajax: function(options) {
	var element = this;
	$.ajax(
	options,
	function (xhr) {
	element.html(xhr.response);
	},
	function () {
	element.html('Ajax error!')
	}
	);
	},

	// for some reason is needed to get an array-like
	// representation instead of an object
	splice: array.splice,
	}


	/**
	* Ajax implementation
	* https://blog.garstasio.com/you-dont-need-jquery/ajax/
	* @param options Ajac call options object
	* @param success Callback executed on successful ajax call
	* @param error Callback function executed on failure
	* @return Execute the success \| error callback
	*
	* ToDo:
	* Move to a separated plugin?
	*/
	$.ajax = function(options, success, error) {
	var method = options.method \|\| 'GET', // method OR default GET
	url = options.cache == false ? // IF caching disabled
	options.url + '?' + new Date().getTime() // add get param to avoid caching
	: // ELSE = caching is allowed
	options.url, // just set the url
	httpRequest = new XMLHttpRequest(); // create XHR object

	httpRequest.open(method, url, true);
	httpRequest.withCredentials = options.hasOwnProperty('withCredentials'); // true \|\| false
	setHeaders(options.headers, httpRequest); // set all the headers from options object

	httpRequest.onload = function() {
	if (httpRequest.status >= 200 && httpRequest.status < 400) {
	// Call sucessfully done! Execute and success callback
	return success(httpRequest);
	} else {
	// We reached our target server, but it returned an error
	// execute and success callback
	return error(httpRequest);
	}
	};

	httpRequest.onerror = function() {
	// There was a connection error of some sort
	return error(httpRequest);
	};
	// Send ajax call with data
	httpRequest.send(setData(options.data));

	/**
	* Set header pairs
	* @param params Key => value array
	* @param xhr The httpRequest object to add the header information
	*/
	function setHeaders(params, xhr) {
	for (var property in params) {
	xhr.setRequestHeader(property, params[property])
	};
	}

	/**
	* Check if content-type option is set
	* @param headers Array with header pairs
	* @return boolean
	*/
	function hasContentType (headers) {
	return Object.keys(headers).some(function (name) {
	return name.toLowerCase() === 'content-type'
	})
	}

	/**
	* Set xhr request data
	* @param data Object with key => value pairs
	* @return Param (encoded) string
	*/
	function setData (data) {
	return data === []._ ? null : data === '' + data ? data : Object.keys(data).map(
	function(key){ return encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) }
	).join('&');
	}
	}

	/**
	* Example ajax GET shorthand
	*/
	/*
	$.get = function (url, data, success) {
	return $.ajax({
	method: 'GET',
	url: url,
	data: data \|\| {}
	},
	success);
	}
	*/


	/**
	* Create a new dom element
	* @param elementTagName dom element to create
	* @return created and empty dom element
	*/
	$.create = function (elementTagName) {
	return document.createElement(elementTagName);
	}


	/**
	* Simple map method
	* @param array
	* @param callback Function to execute as callback
	*
	* ToDo:
	* Really needed?
	*/
	$.map = function (array, callback) {
	return array.map(callback);
	}


	/**
	* Simple each loop method
	* @param collection DOM elements
	* @param callback Function to execute
	* @param callbackParams Callback params
	*
	* ToDo:
	* Really needed?
	*/
	$.each = function (collection, callback, callbackParams) {
	collection.forEach.call(this, callback, callbackParams);
	}

	}( document, [], 'prototype' );