setup base frontend framework

frontend/scripts/pmjq.js

@@ -0,0 +1,88 @@
+/**
+ * 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;
+};