Initial import

boilerplate.js

@@ -0,0 +1,132 @@
+
+window._web_wire_evt_queue = [];
+
+window._web_wire_queue_worker = function() {
+  if (typeof web_ui_wire_handle_event === 'function') {
+     while (window._web_wire_evt_queue.length > 0) {
+        let evt = window._web_wire_evt_queue.shift();
+        web_ui_wire_handle_event(JSON.stringify(evt));
+     }
+  }
+  window.setTimeout(window._web_wire_queue_worker, 5);
+};
+window.setTimeout(window._web_wire_queue_worker, 15);
+
+window._web_wire_put_evt = function(evt) { window._web_wire_evt_queue.push(evt); };
+
+window._web_wire_event_info = function(e, id, evt) {
+  let obj = {};
+  if (e == 'input') {
+     obj['data'] = evt.data;
+     obj['dataTransfer'] = evt.dataTransfer;
+     obj['inputType'] = evt.inputType;
+     obj['isComposing'] = evt.isComposing;
+     obj['value'] = document.getElementById(id).value;
+  } else if (e == 'change') {
+     obj['value'] = document.getElementById(id).value;
+  } else if (e == 'mousemove' || e == 'mouseover' || e == 'mouseenter' || 
+			 e == 'mouseleave' || e == 'click' || e == 'dblclick' || e == 'contextmenu' ||
+			 e == 'mousedown' || e == 'mouseup' ) {
+     obj['altKey'] = evt.altKey;
+     obj['buttons'] = evt.buttons;
+     obj['clientX'] = evt.clientX;
+     obj['clientY'] = evt.clientY;
+     obj['ctrlKey'] = evt.ctrlKey;
+     obj['metaKey'] = evt.metaKey;
+     obj['movementX'] = evt.movementX;
+     obj['movementY'] = evt.movementY;
+     obj['screenX'] = evt.screenX;
+     obj['screenY'] = evt.screenY;
+     obj['shiftKey'] = evt.shiftKey;
+     obj['x'] = evt.x;
+     obj['y'] = evt.y;
+  } else if (e == 'keydown' || e == 'keyup' || e == 'keypress') {
+     obj['key'] = evt.key;
+     obj['code'] = evt.code;
+     obj['altKey'] = evt.altKey;
+     obj['ctrlKey'] = evt.ctrlKey;
+     obj['metaKey'] = evt.metaKey;
+     obj['repeat'] = evt.repeat;
+     obj['shiftKey'] = evt.shiftKey;
+  }
+        // More events can be added like pointerEvent, clipboardEvent, etc.
+  return obj;
+};
+
+window._web_wire_get_evts = function() {
+   let v = _web_wire_evt_queue;
+   _web_wire_evt_queue = [];
+   return JSON.stringify(v);      // This needs no extra type info, as it is internally used only
+};
+
+window._web_wire_bind_evt_ids = function(win_nr, selector, event_kind) {
+   try {
+     let nodelist = document.querySelectorAll(selector);
+     if (nodelist === undefined || nodelist === null) {
+        return 'json:[]';
+     }
+     let ids = [];
+     nodelist.forEach(function(el) { 
+       let el_id = el.getAttribute('id');
+       let el_tag = el.nodeName;
+       let el_type = el.getAttribute('type');
+       if (el_type === null) { el_type = ''; }
+       if (el_id !== null) {
+         el.addEventListener(event_kind, 
+           function(e) {
+              let obj = {evt: event_kind, id: el_id, selector: selector, window: win_nr, 
+						 js_evt: window._web_wire_event_info(event_kind, el_id, e) };
+              window._web_wire_put_evt(obj);
+           }
+         );
+         let info = [ el_id, el_tag, el_type ];
+         ids.push(info);
+       }
+    });
+    return 'json:' + JSON.stringify(ids);
+  } catch(e) {
+    return 'json:[]';
+  }
+};
+
+window._web_wire_resize_timeout = false;
+window.addEventListener('resize', function() {
+   clearTimeout(window._web_wire_resize_timeout);
+   let f = function() {
+	 let obj = { selector: 'global', evt: 'window-resize', h: window.outerWidth, w: window.outerHeight };
+	 window._web_wire_put_evt(obj);
+   };
+   window._web_wire_resize_timeout = setTimeout(f, 250);
+});
+
+window._web_wire_x = window.screenX;
+window._web_wire_y = window.screenY;
+window._web_wire_move_interval = setInterval(function() {
+   let x = window.screenX;
+   let y = window.screenY;
+   if (x != window._web_wire_x || y != window._web_wire_y) {
+      window._web_wire_x = x;
+      window._web_wire_y = y;
+	  let obj = { selector: 'global', evt: 'window-move', x: x, y: y };
+	  window._web_wire_put_evt(obj);
+   }
+}, 500);
+
+
+document.addEventListener('readystatechange', event => { 
+
+    // When HTML/DOM elements are ready:
+    //if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
+    //    alert("hi 1");
+    //}
+
+    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
+    if (event.target.readyState === "complete") {
+		let obj = { selector: 'global', evt: 'html-loaded' };
+		window._web_wire_put_evt(obj);
+    }
+});
+//document.body.onload = function() {
+//	let obj = { selector: 'global', evt: 'html-loaded' };
+//	window._web_wire_put_evt(obj);
+//};