setup base frontend framework

data/scripts.js

@@ -0,0 +1,185 @@
+/**
+ * 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: function(node){
+            return (actuator) => {
+                let update = function(endpoint, method, props) {
+                    Sui.http.ajax({
+                        method: method,
+                        endpoint: node.api[endpoint] + props.join('/'),
+                        cache: false
+                    }, actuator.onResponse || null);
+                };
+                Sui.select(actuator.selector).forEach( (domEl) =>{
+                    let handle = function(event) {
+                        data = [this.value];
+                        actuator.data ? data.push(actuator.data.call(this)) : undefined;
+                        update.call(this, actuator.api, 'GET', data);
+                    }
+                    $(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 =  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: 'GET',
+        selector: '.motor.slider',
+        event: 'change',
+        data: function(){
+            return this.getAttribute('data-motor-nr');
+        },
+        onResponse: debugResponse
+    }, {
+        api: 'LASER',
+        method: 'GET',
+        selector: '.laser.slider',
+        event: 'change',
+        onResponse: debugResponse
+    }].forEach(Sui.link({
+        api: {
+            MOTOR: '/motor/', // {motorNr}/{value}
+            LASER: '/laser/' // {value}
+        }
+    }));
+});