esp8266-laser/data/scripts.js

/**
 * Poor Man's JQuery
 * Lightweight DOM manipulation utility
 */
var $ = function(selector){
    
    var that = this;
    var element = selector.nodeType === 1 ? selector : {};

    // utility functions    
    this.util = {
        // build a fragment from a given html string
        buildFragment: function(html){
            // set the html to a temporary element
            var nodeHolder = document.createElement('div');
            nodeHolder.innerHTML = html;
            // create a document fragment and append all input nodes
            var fragment = document.createDocumentFragment();
            while(nodeHolder.firstChild){
                fragment.appendChild(nodeHolder.firstChild);
            }
            return fragment;
        }
    };
    // check if the input selector is already an element or a css selector
    if(selector.nodeType === 1){ // is element
        if(selector.is$ ? selector.is$() : false){ // check if the element is already extended
            return selector;
        }
        element = selector; // set the element to be extended
    } else { // the element is in fact a css selector
        element = document.querySelector(selector); // search for the element
    }

    // overload the innerHTML attribute
    element.html = function(val){
        this.innerHTML = val;
        return this;
    };

    // overload the value attribute
    element.val = function(val){
        this.value = val;
        return this;
    };

    // append the given string as child fragment
    element.append = function(html){
        var fragment = that.util.buildFragment(html); 
        this.appendChild(fragment);
        return this;
    };

    // prepend the given string as child fragment
    element.prepend = function(html){
        var fragment = that.util.buildFragment(html); 
        this.insertBefore(fragment,this.firstChild);        
        return this;
    };

    // search for an element inside of an element
    element.find = function(what){
        var found = $(what);
        if(found){
            return $(found);
        }
        return;
    }
    
    // get parent of the current element
    element.parent = function(){
        if(this.parentElement){
            return $(this.parentElement);
        }
    }

    // indicates that this element is a $ function
    element.is$ = function(){
        return true;
    }

    element.on = function(event, func, useCapture) {
        this.addEventListener(event, func, useCapture);
        return this;
    }

    return element;
};var Sui = {
        ready: (callback) => {
            document.addEventListener("DOMContentLoaded", function() {
                callback();
            }, false);
        },
        select: (selector) => {
            return document.querySelectorAll(selector);
        },
        link: (node) => {
            return (actuator) => {
                let update = function(endpoint, method, props) {
                    Sui.http.ajax({
                        method: method,
                        endpoint: node.api[endpoint],
                        data: props,
                        cache: false
                    }, actuator.onResponse || null);
                };
                Sui.select(actuator.selector).forEach( (domEl) =>{
                    let handle = function(event) {
                        update.call(this, 
                            actuator.api, 
                            actuator.method, 
                            actuator.data ? 
                                actuator.data.call(this) : [this.value]
                        );
                    }
                    $(domEl).on(actuator.event, handle) 
                });
            };
        },
        util: {
            
            /**
             * serialize a flat json object
             */
            serialize: (obj) => {
                var str = [];
                for(var p in obj){
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                }
                return str.join("&");
            }
        },      
        http: {
    
            /**
             * ajax request
             * {
             *      method: <'GET', 'POST', whatever >,
             *      endpoint: <URL to the service endpoint>,
             *      async: <true or false>, (default true)
             *      data: <json object with data to transmit>,
             *      cache: <true or false> (default false)
             *  }
             */
            ajax: (config, callback) => {
                var cache = config.cache || false;
                var data = config.data || {};
                if(!cache) {
                    data['_'] = new Date().getTime();
                }
                var serializedData =  data; //Sui.util.serialize(data);
                var endPointUrl = (config.method === 'GET' || config.method === 'DELETE') && data ? config.endpoint+'?'+serializedData : config.endpoint;
                var postData = config.method === 'POST' || config.method === 'PUT' ? serializedData : null;
    
                var request = new XMLHttpRequest();
                request.open(config.method, endPointUrl, config.async || true);
                request.onreadystatechange = function () {
                    // TODO handle response properly
                    callback ? callback(request.responseText, request.status) : undefined;
                };
                request.send(postData);
            }
        }
    };Sui.ready(() => {
    let debugResponse = (data) => {
        $('#response').html(data);
    };
    [{
        api: 'MOTOR',
        method: 'POST',
        selector: '.motor.slider',
        event: 'change',
        data: function() {
            let payload = {};
            payload['motor' + this.getAttribute('data-motor-nr')] = this.value;
            return Sui.util.serialize(payload);
        },
        onResponse: debugResponse
    }, {
        api: 'LASER',
        method: 'POST',
        selector: '.laser.slider',
        event: 'change',
        onResponse: debugResponse,
        data: function() {
            return Sui.util.serialize({
                laser: this.value
            });
        }
    }].forEach(Sui.link({
        api: {
            MOTOR: '/spirograph', // {motorNr}/{value}
            LASER: '/spirograph' // {value}
        }
    }));
});