spiegel-keyman/web/testing/gesture-recognizer/hostConfiguration.js

// -- BEGIN:  Code for controlling the layout-simulation elements --

function updateConfig() {
  let layout = document.config.screen;
  let bounds = document.config.bounds;
  let receiver = document.config.receiver;
  let safe = document.config.safeZone;

  let demoContainer = document.getElementById("demo-container");
  demoContainer.className = layout.value + " " + bounds.value + " " + receiver.value + " " + safe.value;
}

window.addEventListener('load', function(ev) {
  let layoutGroup = document.config.screen;
  let boundsGroup = document.config.bounds;
  let receiverGroup = document.config.receiver;
  let safeGroup = document.config.safeZone;

  for(entry of layoutGroup) {
    entry.addEventListener('change', updateConfig);
  }

  for(entry of boundsGroup) {
    entry.addEventListener('change', updateConfig);
  }

  for(entry of receiverGroup) {
    if(entry.value == 'full') {
      entry.addEventListener('change', function() {
        let topRange = document.getElementById('topOnlyRadio');
        topRange.checked = 'checked';
        updateConfig();
      });
    } else { // Popup will be the 'default' case - we may want to test multiple 'popup' configs.
      entry.addEventListener('change', function() {
        let popupRange = document.getElementById('popupRadio');
        popupRange.checked = 'checked';
        updateConfig();
      });
    }
  }

  for(entry of safeGroup) {
    entry.addEventListener('change', updateConfig);
  }

  updateConfig();
});

// END: Layout-simulation setup & handling

// START:  Gesture-recognizer integration code!

// This will hold the main gesture-recognizer instance.
// Not great standard practice... but this is a development/debugging page, so we want access to it.
let recognizer;

window.addEventListener('load', function() {
  let recognizerConfig = {
    mouseEventRoot: document.body,
    targetRoot: document.getElementById('target-root'),
    maxRoamingBounds: document.getElementById('roaming-bounds'),
    safeBounds: document.getElementById('safe-zone'),
    paddedSafeBounds: document.getElementById('padded-safe-zone')
  };

  recognizer = new com.keyman.osk.GestureRecognizer(recognizerConfig);

  let console = {};
  let logElement = document.getElementById('event-log');
  console.log = function(str) {
    logElement.value += str + '\n';
  }

  let logClearButton = document.getElementById('log-clear-button');
  logClearButton.onclick = function() {
    logElement.value = '';
  }

  recognizer.on('inputstart', function(sequence) {
    console.log(`new input sequence started: identifier ${sequence.identifier}`);

    sequence.on('inputupdate', function(seq, sample) {
      console.log(`identifier ${seq.identifier}:  ${JSON.stringify(sample)}`);
    });

    sequence.on('inputcancel', function(seq) {
      console.log(`identifier ${seq.identifier} cancelled`);
    });

    sequence.on('inputend', function(seq) {
      console.log(`identifier ${seq.identifier} ended`);
    });
  });
});

// END:  Gesture-recognizer integration code.