swalke16/external-app-test.html

## external-app-test.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>IKE Custom Application Example</title>
</head>
<body style="background-color: white; font-size: 32px;">
  <input type='text' id="txtBox" />
</body>
<script>
  // For security reasons the external application should only receive or
  // send events from the IKE application. The origin below is the correct origin
  // for the application to run on production. For the IKE Test environment you
  // will need to change that origin to the IKE test environment Url which is
  // https://ike-production-pr-1659.herokuapp.com
  const allowedOrigin = 'http://localhost:3000'
  window.addEventListener('message', receiveMessage, false);

  let currentInput = null
  let usedKeyboard = false

  const input = document.getElementById('txtBox')
  input.addEventListener('focus', handleFocus)
  input.addEventListener('blur', handleBlur)

  function openKeyboard() {
    window.parent.postMessage({type: 'KEYBOARD_OPEN'}, allowedOrigin)
  }

  function closeKeyboard() {
    window.parent.postMessage({type: 'KEYBOARD_CLOSE'}, allowedOrigin)
  }

  function receiveMessage(e)
  {
    if (!currentInput) {
      return
    }

    if (e.data.type === 'KEYBOARD_PRESS') {
      console.log('got char: ' + e.data.payload.key)
      enterCharacter(currentInput, e.data.payload.key)
      usedKeyboard = true
    }
    else if (e.data.type === 'KEYBOARD_TOGGLE_NUMERIC') {
      usedKeyboard = true
    }
    else if (e.data.type === 'KEYBOARD_TOGGLE_CAPS') {
      usedKeyboard = true
    }
    else if (e.data.type === 'KEYBOARD_ENTER') {
    }
    else if (e.data.type === 'KEYBOARD_DELETE') {
      removeCharacter(currentInput)
      usedKeyboard = true
    }
    else if (e.data.type === 'KEYBOARD_OPENED') {
      usedKeyboard = true
    }
    else {
      console.log(e.data.type, e.data.payload)
    }
  }

  function handleFocus() {
    console.log('focus')
    currentInput = this
    openKeyboard()
  }

  function handleBlur() {
    const priorInput = currentInput
    usedKeyboard = false
    console.log('blur')

    setTimeout(() => {
      console.log('blur timeout')
      if (priorInput === currentInput) {
        if (!usedKeyboard) {
          console.log('unused Keyboard')
          currentInput = null;
          closeKeyboard()
        }
        else {
          console.log('used Keyboard')
          priorInput.focus();
        }
      }
    }, 100)
  }

  function enterCharacter(input, char) {
    let text = input.value
    const start = input.selectionStart;
    const end = input.selectionEnd;

    text = text.slice(0, start) + char + text.slice(end);
    input.value = text
  }

  function removeCharacter(input) {
    let text = input.value
    const start = input.selectionStart;
    const end = input.selectionEnd;

    if (start === end) {
      text = text.slice(0, start - 1) + text.slice(start)
    }
    else {
      text = text.slice(0, start) + text.slice(end)
    }

    input.value = text
  }


</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>IKE Custom Application Example</title>
	</head>
	<body style="background-color: white; font-size: 32px;">
	<input type='text' id="txtBox" />
	</body>
	<script>
	// For security reasons the external application should only receive or
	// send events from the IKE application. The origin below is the correct origin
	// for the application to run on production. For the IKE Test environment you
	// will need to change that origin to the IKE test environment Url which is
	// https://ike-production-pr-1659.herokuapp.com
	const allowedOrigin = 'http://localhost:3000'
	window.addEventListener('message', receiveMessage, false);

	let currentInput = null
	let usedKeyboard = false

	const input = document.getElementById('txtBox')
	input.addEventListener('focus', handleFocus)
	input.addEventListener('blur', handleBlur)

	function openKeyboard() {
	window.parent.postMessage({type: 'KEYBOARD_OPEN'}, allowedOrigin)
	}

	function closeKeyboard() {
	window.parent.postMessage({type: 'KEYBOARD_CLOSE'}, allowedOrigin)
	}

	function receiveMessage(e)
	{
	if (!currentInput) {
	return
	}

	if (e.data.type === 'KEYBOARD_PRESS') {
	console.log('got char: ' + e.data.payload.key)
	enterCharacter(currentInput, e.data.payload.key)
	usedKeyboard = true
	}
	else if (e.data.type === 'KEYBOARD_TOGGLE_NUMERIC') {
	usedKeyboard = true
	}
	else if (e.data.type === 'KEYBOARD_TOGGLE_CAPS') {
	usedKeyboard = true
	}
	else if (e.data.type === 'KEYBOARD_ENTER') {
	}
	else if (e.data.type === 'KEYBOARD_DELETE') {
	removeCharacter(currentInput)
	usedKeyboard = true
	}
	else if (e.data.type === 'KEYBOARD_OPENED') {
	usedKeyboard = true
	}
	else {
	console.log(e.data.type, e.data.payload)
	}
	}

	function handleFocus() {
	console.log('focus')
	currentInput = this
	openKeyboard()
	}

	function handleBlur() {
	const priorInput = currentInput
	usedKeyboard = false
	console.log('blur')

	setTimeout(() => {
	console.log('blur timeout')
	if (priorInput === currentInput) {
	if (!usedKeyboard) {
	console.log('unused Keyboard')
	currentInput = null;
	closeKeyboard()
	}
	else {
	console.log('used Keyboard')
	priorInput.focus();
	}
	}
	}, 100)
	}

	function enterCharacter(input, char) {
	let text = input.value
	const start = input.selectionStart;
	const end = input.selectionEnd;

	text = text.slice(0, start) + char + text.slice(end);
	input.value = text
	}

	function removeCharacter(input) {
	let text = input.value
	const start = input.selectionStart;
	const end = input.selectionEnd;

	if (start === end) {
	text = text.slice(0, start - 1) + text.slice(start)
	}
	else {
	text = text.slice(0, start) + text.slice(end)
	}

	input.value = text
	}


	</script>
	</html>