nfreear/self-replicator.js.html

## self-replicator.js.html
<!doctype html><html lang="en"> <title> Self-replicator HTML + JS </title>

<h1> Self-replicator HTML + JS </h1>

<div id="my-container">

  <p><form class="saveForm">
    <label>File <input class="filename" value="journey-test.html" required pattern="[a-z][\w\-]+\.html" /></label>

    <button type="submit">Save HTML journey</button>
  </form>

  <p><form class="loadForm">
    <input type="file" accept="text/html" aria-label="Select a HTML journey file" title="Select a HTML journey file" required />

    <button type="submit">Load journey from HTML</button>
  </form>

  <script class="jsonData" type="application/our-journey+json"></script>

</div>


<script>
/*!
  Nick Freear, based on discussion with Tim Coughlan / 26-Sep-2018.

  https://github.com/IET-OU/our-journey/blob/master/tool/src/file.js
*/
(function (W, D) {

  const EXAMPLE_DATA = {
    created: '2018-09-26T14:20',
    journey: []
  };

  const CONTAINER = D.querySelector('#my-container');

  const FILE_INPUT = CONTAINER.querySelector('.loadForm input[ type = file ]');
  const JSON_ELEM = CONTAINER.querySelector('.jsonData');
  const JSON_REGEX = new RegExp('<' + 'script[^>]+jsonData[^>]+>([^<]+)<\/' + 'script>', 'm');
  const CONFIG_REGEX = /\/\*__CONFIG__\*\//;

  // Save HTML journey file.
  CONTAINER.querySelector('.saveForm').addEventListener('submit', function (ev) {
    ev.preventDefault();

    W.alert('Saving HTML journey file.');

    JSON_ELEM.innerHTML = "\n" + JSON.stringify(EXAMPLE_DATA, null, 2) + "\n";

    const FILE_NAME = CONTAINER.querySelector('.saveForm input.filename').value; // Was: 'journey-test.html';
    const HTML = D.documentElement.outerHTML;
    // const CONFIG_OPT = JSON.stringify({ loadJourneySelector: '.jsonData', readonly: true }).replace(/^{/, '').replace(/}$/, '');
    // const FINAL = HTML.replace(CONFIG_REGEX, CONFIG_OPT);
    const ANC = D.createElement('a');

    ANC.href = 'data:text/html;charset=utf-u,' + encodeURIComponent(HTML);
    ANC.setAttribute('download', FILE_NAME);
    ANC.click();

    console.warn('HTML file saved:', HTML, ev);
  });

  // Load HTML journey file.
  D.querySelector('.loadForm').addEventListener('submit', function (ev) {
    ev.preventDefault();

    const FILE = FILE_INPUT.files[ 0 ];
    const FR = new W.FileReader();

    FR.addEventListener('load', function (frEvent) {
      const HTML = frEvent.target.result;
      const MATCHES = HTML.match(JSON_REGEX);

      console.warn('Matches?', HTML, JSON_REGEX, MATCHES);

      const DATA = JSON.parse(MATCHES[ 1 ]);

      console.warn('HTML file loaded OK. Data extracted:', DATA, ev, frEvent);

      // Continue, using the extracted JSON data ...
    });

    FR.readAsText(FILE);
  });

  // Set options on load.
  const CONFIG = {
    /*__CONFIG__*/
  };

  console.warn('Config options on load:', CONFIG);

})(window, document);
</script>

</html>
	<!doctype html><html lang="en"> <title> Self-replicator HTML + JS </title>

	<h1> Self-replicator HTML + JS </h1>

	<div id="my-container">

	<p><form class="saveForm">
	<label>File <input class="filename" value="journey-test.html" required pattern="[a-z][\w\-]+\.html" /></label>

	<button type="submit">Save HTML journey</button>
	</form>

	<p><form class="loadForm">
	<input type="file" accept="text/html" aria-label="Select a HTML journey file" title="Select a HTML journey file" required />

	<button type="submit">Load journey from HTML</button>
	</form>

	<script class="jsonData" type="application/our-journey+json"></script>

	</div>


	<script>
	/*!
	Nick Freear, based on discussion with Tim Coughlan / 26-Sep-2018.

	https://github.com/IET-OU/our-journey/blob/master/tool/src/file.js
	*/
	(function (W, D) {

	const EXAMPLE_DATA = {
	created: '2018-09-26T14:20',
	journey: []
	};

	const CONTAINER = D.querySelector('#my-container');

	const FILE_INPUT = CONTAINER.querySelector('.loadForm input[ type = file ]');
	const JSON_ELEM = CONTAINER.querySelector('.jsonData');
	const JSON_REGEX = new RegExp('<' + 'script[^>]+jsonData[^>]+>([^<]+)<\/' + 'script>', 'm');
	const CONFIG_REGEX = /\/\__CONFIG__\\//;

	// Save HTML journey file.
	CONTAINER.querySelector('.saveForm').addEventListener('submit', function (ev) {
	ev.preventDefault();

	W.alert('Saving HTML journey file.');

	JSON_ELEM.innerHTML = "\n" + JSON.stringify(EXAMPLE_DATA, null, 2) + "\n";

	const FILE_NAME = CONTAINER.querySelector('.saveForm input.filename').value; // Was: 'journey-test.html';
	const HTML = D.documentElement.outerHTML;
	// const CONFIG_OPT = JSON.stringify({ loadJourneySelector: '.jsonData', readonly: true }).replace(/^{/, '').replace(/}$/, '');
	// const FINAL = HTML.replace(CONFIG_REGEX, CONFIG_OPT);
	const ANC = D.createElement('a');

	ANC.href = 'data:text/html;charset=utf-u,' + encodeURIComponent(HTML);
	ANC.setAttribute('download', FILE_NAME);
	ANC.click();

	console.warn('HTML file saved:', HTML, ev);
	});

	// Load HTML journey file.
	D.querySelector('.loadForm').addEventListener('submit', function (ev) {
	ev.preventDefault();

	const FILE = FILE_INPUT.files[ 0 ];
	const FR = new W.FileReader();

	FR.addEventListener('load', function (frEvent) {
	const HTML = frEvent.target.result;
	const MATCHES = HTML.match(JSON_REGEX);

	console.warn('Matches?', HTML, JSON_REGEX, MATCHES);

	const DATA = JSON.parse(MATCHES[ 1 ]);

	console.warn('HTML file loaded OK. Data extracted:', DATA, ev, frEvent);

	// Continue, using the extracted JSON data ...
	});

	FR.readAsText(FILE);
	});

	// Set options on load.
	const CONFIG = {
	/__CONFIG__/
	};

	console.warn('Config options on load:', CONFIG);

	})(window, document);
	</script>

	</html>