apg-js-examples/src/apg-conv-api/web-conv-api.js

Examples of using the suite of apg-js applications and libraries.

/* eslint-disable func-names */
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
/*  *************************************************************************************
 *   copyright: Copyright (c) 2021 Lowell D. Thomas, all rights reserved
 *     license: BSD-2-Clause (https://opensource.org/licenses/BSD-2-Clause)
 *   ********************************************************************************* */
// This is the JavaScript driving the browser demonstration.
/* the input and output elements */
const ELEMENT = {
  input: null,
  output: null,
};

/* a button click sets the type of transformation to be made */
let type = 'ascii';

/* on page load, get the input and output elements and remember them */
const onload = function () {
  ELEMENT.input = document.getElementById('input');
  ELEMENT.output = document.getElementById('output');
};

/* helper function to convert an array of character codes to HTML entities */
const charsToHtml = function (chars) {
  let html = '';
  for (let i = 0; i < chars.length; i += 1) {
    const char = chars[i];
    switch (char) {
      case 9:
        /* the "apg-ctrl-char" class requires apg-lib.css */
        html += '<span class="apg-ctrl-char">TAB</span>';
        break;
      case 10:
        html += '<span class="apg-ctrl-char">LF</span><br>';
        break;
      case 13:
        html += '<span class="apg-ctrl-char">CR</span>';
        break;
      default:
        // const x = char.toString(16);
        html += `&#x${char.toString(16)};`;
        break;
    }
  }
  return html;
};

/* the input for the ASCII test */
const ascii = function () {
  type = 'ascii';
  let str = '';
  str += 'This is an example of simple ASCII text.\n';
  str += 'Some lines have tabs \t in \t them.\n';
  str += 'But even simple ASCII has some frustrations in textareas.\n';
  str += 'What if we want to work with text with CRLF (\\r\\n) line endings?\n';
  str += "Some browsers don't allow them.\n";
  str += 'They will convert CRLF to LF when text is pasted into a textarea.\n';
  str += 'The ESCAPED format is a simple solution to this situation.\n';
  str += 'ESCAPED format is just like JavaScript string escaping,\n';
  str += 'except that it uses grave accent (``) as the escape character.\n';
  str += 'Why? Because if we used the backslash (\\) like JavaScript,\n';
  str += 'then when creating ESCAPED format strings to paste into a textarea,\n';
  str += 'all escape characters would require double backslashes (\\\\).\n';
  str += 'This can be confusing, error prone and quite annoying.\n';
  str += "Hence the grave accent, chosen because it doesn't require a shift key.\n";
  str += '\n';
  str += 'Here are a couple of lines with CRLF line endings.`x0D\n';
  str += 'The end.`x0D\n';
  ELEMENT.input.value = str;
};

/* the input for the binary values test */
const binary = function () {
  type = 'binary';
  let str = '';
  str += 'This is how you might enter binary characters into a textarea.\n';
  str += 'Binary characters are the 8-bit, one-byte character codes.\n';
  str += 'These are also sometimes referred to as "Latin 1" or "ISO 8859-1",\n';
  str += 'although some conditions on value ranges may apply to these designations.\n';
  str += 'Below are binary characters in the range 0xA0-FF.\n\n';
  str += '`xA0 `xA1 `xA2 `xA3 `xA4 `xA1 `xA5 `xA6 `xA7 `xA8 `xA9 `xAA `xAB `xAC `xAD `xAE `xAF\n';
  str += '`xB0 `xB1 `xB2 `xB3 `xB4 `xB1 `xB5 `xB6 `xB7 `xB8 `xB9 `xBA `xBB `xBC `xBD `xBE `xBF\n';
  str += '`xC0 `xC1 `xC2 `xC3 `xC4 `xC1 `xC5 `xC6 `xC7 `xC8 `xC9 `xCA `xCB `xCC `xCD `xCE `xCF\n';
  str += '`xD0 `xD1 `xD2 `xD3 `xD4 `xD1 `xD5 `xD6 `xD7 `xD8 `xD9 `xDA `xDB `xDC `xDD `xDE `xDF\n';
  str += '`xE0 `xE1 `xE2 `xE3 `xE4 `xE1 `xE5 `xE6 `xE7 `xE8 `xE9 `xEA `xEB `xEC `xED `xEE `xEF\n';
  str += '`xF0 `xF1 `xF2 `xF3 `xF4 `xF1 `xF5 `xF6 `xF7 `xF8 `xF9 `xFA `xFB `xFC `xFD `xFE `xFF\n';
  ELEMENT.input.value = str;
};

/* the input for the Cherokee test */
const cherokee = function () {
  type = 'cherokee';
  let str = '';
  str += 'VGhpcyBleGFtcGxlIGRpc3BsYXlzIHRoZSBDaGVyb2tlZSBhbHBoYWJldC4KSXQgaGFzIGJlZW4g\n';
  str += 'ZW5jb2RlZCBhcyBVVEYtOC4KRmluYWxseSwgYmFzZTY0IGVuY29kaW5nIGhhcyBiZWVuIHVzZWQg\n';
  str += 'dG8KdG8gbWFrZSBpdCBjb21wYXRpYmxlIHdpdGggYSB0ZXh0YXJlYS4KCuGOoMKg4Y6hwqDhjqLC\n';
  str += 'oOGOo8Kg4Y6kwqDhjqXCoOGOpsKg4Y6nwqDhjqjCoOGOqcKg4Y6qwqDhjqvCoOGOrMKg4Y6twqDh\n';
  str += 'jq7CoOGOrwrhjrDCoOGOscKg4Y6ywqDhjrPCoOGOtMKg4Y61wqDhjrbCoOGOt8Kg4Y64wqDhjrnC\n';
  str += 'oOGOusKg4Y67wqDhjrzCoOGOvcKg4Y6+wqDhjr8K4Y+AwqDhj4HCoOGPgsKg4Y+DwqDhj4TCoOGP\n';
  str += 'hcKg4Y+GwqDhj4fCoOGPiMKg4Y+JwqDhj4rCoOGPi8Kg4Y+MwqDhj43CoOGPjsKg4Y+PCuGPkMKg\n';
  str += '4Y+RwqDhj5LCoOGPk8Kg4Y+UwqDhj5XCoOGPlsKg4Y+XwqDhj5jCoOGPmcKg4Y+awqDhj5vCoOGP\n';
  str += 'nMKg4Y+dwqDhj57CoOGPnwrhj6DCoOGPocKg4Y+iwqDhj6PCoOGPpMKg4Y+lwqDhj6bCoOGPp8Kg\n';
  str += '4Y+owqDhj6nCoOGPqsKg4Y+rwqDhj6zCoOGPrcKg4Y+uwqDhj68K4Y+wwqDhj7HCoOGPssKg4Y+z\n';
  str += 'wqDhj7Q=\n';
  ELEMENT.input.value = str;
};

/* the input for the Playing Cards test */
const cards = function () {
  type = 'cards';
  let str = '';
  str += 'This ESCAPED example will display a deck of playing cards.\n';
  str += '\n';
  str += '`u{1f0a1}`xa0`u{1f0a2}`xa0`u{1f0a3}`xa0`u{1f0a4}`xa0`u{1f0a5}`xa0`u{1f0a6}`xa0`u{1f0a7}`xa0';
  str += '`u{1f0a8}`xa0`u{1f0a9}`xa0`u{1f0aa}`xa0`u{1f0ab}`xa0`u{1f0ac}`xa0`u{1f0ad}`xa0`u{1f0ae}`xa0\n';
  str += '\n';
  str += '`u{1f0b1}`xa0`u{1f0b2}`xa0`u{1f0b3}`xa0`u{1f0b4}`xa0`u{1f0b5}`xa0`u{1f0b6}`xa0`u{1f0b7}`xa0';
  str += '`u{1f0b8}`xa0`u{1f0b9}`xa0`u{1f0ba}`xa0`u{1f0bb}`xa0`u{1f0bc}`xa0`u{1f0bd}`xa0`u{1f0be}`xa0\n';
  str += '\n';
  str += '`u{1f0c1}`xa0`u{1f0c2}`xa0`u{1f0c3}`xa0`u{1f0c4}`xa0`u{1f0c5}`xa0`u{1f0c6}`xa0`u{1f0c7}`xa0';
  str += '`u{1f0c8}`xa0`u{1f0c9}`xa0`u{1f0ca}`xa0`u{1f0cb}`xa0`u{1f0cc}`xa0`u{1f0cd}`xa0`u{1f0ce}`xa0\n';
  str += '\n';
  str += '`u{1f0d1}`xa0`u{1f0d2}`xa0`u{1f0d3}`xa0`u{1f0d4}`xa0`u{1f0d5}`xa0`u{1f0d6}`xa0`u{1f0d7}`xa0';
  str += '`u{1f0d8}`xa0`u{1f0d9}`xa0`u{1f0da}`xa0`u{1f0db}`xa0`u{1f0dc}`xa0`u{1f0dd}`xa0`u{1f0de}`xa0\n';
  ELEMENT.input.value = str;
};

/* the input for the BASE64 test */
const base64 = function () {
  type = 'base64';
  let str = '';
  str += "Let's say we want to input that same deck of cards and\n";
  str += 'convert it to a standard text form that we can send \n';
  str += 'on to a carrier that only handles ASCII characters.\n';
  str += "We'll do that by converting it to UTF-8 and then base64 encoding it.\n";
  str += '\n';
  str += 'Here we will just strip off these first few lines\n';
  str += 'and display the final base64 result.\n';
  str += '\n';
  str += '`u{1f0a1}`xa0`u{1f0a2}`xa0`u{1f0a3}`xa0`u{1f0a4}`xa0`u{1f0a5}`xa0`u{1f0a6}`xa0`u{1f0a7}`xa0';
  str += '`u{1f0a8}`xa0`u{1f0a9}`xa0`u{1f0aa}`xa0`u{1f0ab}`xa0`u{1f0ac}`xa0`u{1f0ad}`xa0`u{1f0ae}`xa0\n';
  str += '\n';
  str += '`u{1f0b1}`xa0`u{1f0b2}`xa0`u{1f0b3}`xa0`u{1f0b4}`xa0`u{1f0b5}`xa0`u{1f0b6}`xa0`u{1f0b7}`xa0';
  str += '`u{1f0b8}`xa0`u{1f0b9}`xa0`u{1f0ba}`xa0`u{1f0bb}`xa0`u{1f0bc}`xa0`u{1f0bd}`xa0`u{1f0be}`xa0\n';
  str += '\n';
  str += '`u{1f0c1}`xa0`u{1f0c2}`xa0`u{1f0c3}`xa0`u{1f0c4}`xa0`u{1f0c5}`xa0`u{1f0c6}`xa0`u{1f0c7}`xa0';
  str += '`u{1f0c8}`xa0`u{1f0c9}`xa0`u{1f0ca}`xa0`u{1f0cb}`xa0`u{1f0cc}`xa0`u{1f0cd}`xa0`u{1f0ce}`xa0\n';
  str += '\n';
  str += '`u{1f0d1}`xa0`u{1f0d2}`xa0`u{1f0d3}`xa0`u{1f0d4}`xa0`u{1f0d5}`xa0`u{1f0d6}`xa0`u{1f0d7}`xa0';
  str += '`u{1f0d8}`xa0`u{1f0d9}`xa0`u{1f0da}`xa0`u{1f0db}`xa0`u{1f0dc}`xa0`u{1f0dd}`xa0`u{1f0de}`xa0\n';
  ELEMENT.input.value = str;
};

/* perform the requested data encoding transformation */
const trans = function () {
  let html = '';
  try {
    if (type === 'ascii') {
      const buf = apgConv.Buffer.from(ELEMENT.input.value);

      /* decode ESCAPED format */
      const chars = apgConv.decode('ESCAPED', buf);
      html = '<h1>ASCII</h1>\n';
      html += charsToHtml(chars);
    }
    if (type === 'binary') {
      const buf = apgConv.Buffer.from(ELEMENT.input.value);

      /* decode ESCAPED format */
      const chars = apgConv.decode('ESCAPED', buf);
      html = '<h1>BINARY</h1>\n';
      html += '<pre>';
      html += charsToHtml(chars);
      html += '</pre>';
    }
    if (type === 'cherokee') {
      const buf = apgConv.Buffer.from(ELEMENT.input.value);

      /* decode UTF8 that has been base64 encoded */
      const chars = apgConv.decode('BASE64:UTF8', buf);
      html = '<h1>CHEROKEE</h1>\n';
      html += charsToHtml(chars);
    }
    if (type === 'cards') {
      const buf = apgConv.Buffer.from(ELEMENT.input.value);

      /* decode ESCAPED format */
      const chars = apgConv.decode('ESCAPED', buf);
      html = '<h1>CARDS</h1>\n';
      html += charsToHtml(chars);
    }
    if (type === 'base64') {
      const lines = ELEMENT.input.value.split('\n');
      let text = '';
      for (let i = 0; i < 8; i += 1) {
        text += `${lines[i]}<br>`;
      }
      text += '<br>';
      let str = '';
      for (let i = 8; i < lines.length; i += 1) {
        str += lines[i];
      }
      let buf = apgConv.Buffer.from(str);

      /* convert from ESCAPED format to UTF8, then base64 encode */
      buf = apgConv.convert('ESCAPED', buf, 'UTF8:BASE64');
      html = '<h1>BASE64</h1>\n';
      html += text;
      html += '<pre>';

      /* transform the base64 byte stream Buffer to a string with line breaks */
      html += apgConv.transformers.base64.toString(buf);
      html += '</pre>';
    }
  } catch (e) {
    html += '<span class="apg-nomatch">apgConv EXCEPTION: ';
    html += e.message;
    html += '</span>';
  }

  /* display the output on the web page */
  ELEMENT.output.innerHTML = html;
};