racket-webview/js/boilerplate.js

if (window.rkt_event_queue === undefined) { window.rkt_event_queue = []; }

window.rkt_put_evt = function(evt) {
   window.rkt_event_queue.push(evt);
};

window.rkt_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.rkt_bounds = new Map();

window.rkt_get_evt_handler = function(event_kind, el_id, selector, win_nr)
{
   let handler_key = "h-" + event_kind + "-" + el_id + "-" + selector + "-" + win_nr;
   if (window.rkt_bounds.has(handler_key)) {
      return window.rkt_bounds.get(handler_key);
   } else {
      let handler = {
         handleEvent: function(e) {
              let obj = {evt: event_kind, id: el_id, selector: selector, window: win_nr,
						 js_evt: window.rkt_event_info(event_kind, el_id, e) };
              window.rkt_put_evt(obj);
         }
      };
      window.rkt_bounds.set(handler_key, handler);
      return handler;
   }
}

window.rkt_rm_evt_handler = function(event_kind, el_id, selector, win_nr)
{
   let handler_key = "h-" + event_kind + "-" + el_id + "-" + selector + "-" + win_nr;
   window.rkt_bounds.delete(handler_key);
}

window.rkt_bind_evt_ids = function(win_nr, selector, event_kinds) {
   try {
     let nodelist = document.querySelectorAll(selector);
     if (nodelist === undefined || nodelist === null) {
        return [];
     }
     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) {
          if (event_kinds.length > 0) {
            let i;
            for(i = 0; i < event_kinds.length; i++) {
               let event_kind = event_kinds[i];
               el.addEventListener(event_kind, window.rkt_get_evt_handler(event_kind, el_id, selector, win_nr));
            }
            let info = [ el_id, el_tag, el_type ];
            ids.push(info);
          }
       }
    });
    return ids;
  } catch(e) {
    return [];
  }
};

window.rkt_unbind_evt_ids = function(win_nr, selector, event_kinds) {
   console.log("unbind: " + selector);
   console.log(event_kinds);
   try {
     let nodelist = document.querySelectorAll(selector);
     if (nodelist === undefined || nodelist === null) {
        return [];
     }
     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) {
          if (event_kinds.length > 0) {
             let i;
             for(i = 0; i < event_kinds.length; i++) {
               let event_kind = event_kinds[i];
               el.removeEventListener(event_kind, window.rkt_get_evt_handler(event_kind, el_id, selector, win_nr));
               window.rkt_rm_evt_handler(event_kind, el_id, selector, win_nr);
             }
             let info = [ el_id, el_tag, el_type ];
             ids.push(info);
         }
       }
    });
    return ids;
  } catch(e) {
    return [];
  }
};

window.rkt_with_selector = function(selector, func) {
     let nodelist = document.querySelectorAll(selector);
     if (nodelist === undefined || nodelist === null) {
        return [];
     }
     let results = [];
     let applier = function(el) {
        let id = el.getAttribute('id');
        results.push(func(id, el));
     }
     nodelist.forEach(applier);
     let c = results.length;
     let r = { 'applied-to-elements': c, 'with-ids': results.filter((id) => id !== null) };
     return r;
}