o0101/index.js

## index.js
"use strict";
{
  const doc = document.implementation.createHTMLDocument('');
  let html;
  html = document.documentElement.innerHTML;
  doc.write(html);
  doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
  html = (new XMLSerializer).serializeToString(doc);
  console.log(html);

const canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var data = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
           <foreignObject width="100%" height="100%">
             ${html}
           </foreignObject>
           </svg>`;

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;
  document.documentElement.appendChild(img);
}

## minified.js
setTimeout(function(){
;"use strict";
{
  const doc = document.implementation.createHTMLDocument('');
  let html;
  html = document.documentElement.innerHTML;
  doc.write(html);
  doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
  html = (new XMLSerializer).serializeToString(doc);
  console.log(html);

const canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var data = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
           <foreignObject width="100%" height="100%">
             ${html}
           </foreignObject>
           </svg>`;

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;
  document.documentElement.appendChild(img);
}

;}, 0)

## package.json
{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "dosycrypt": "1.0.7"
  }
}

## page-body.html

  <h1 class=sticky id=journey>
     Journey <button class=middle name=journey.save value=journey>Save</button>
  </h1>
  <a target=_parent href=myjourneys>Back to my journeys</a>
  <button name=journey.run value=journey>Run</button>
  <h2 id=about>About</h2>
  <p>
    <input maxlength=30  required name=journey.name placeholder=name value="test journey2">
  <p>
    <textarea maxlength=140 required rows=2 name=journey.concepts;array placeholder="journey concepts" >test</textarea>
  <p>
    <textarea maxlength=140 required rows=3 name=journey.desc placeholder="about this journey">test</textarea>
  <h2 id=steplist>Steps</h2>
  <ol class=tight>

    <li>
      <span class=fixedwidth>
        <a target=prop href="prop?buildjourney=true&prop=password#prop">password</a>
      </span>
      <select name=journey.steps.0.action>
        <option  value=go>go</option>
        <option  value=report>report</option>
        <option  value=click>click</option>
        <option   value=hover>hover</option>
        <option   value=scrollto>scrollto</option>
        <option selected  value=type>type</option>
      </select>
      <button name=journey.removestep value="0">Del</button>
    </li>


    <li>
      <span class=fixedwidth>
        <a target=prop href="prop?buildjourney=true&prop=links#prop">links</a>
      </span>
      <select name=journey.steps.1.action>
        <option  value=go>go</option>
        <option  value=report>report</option>
        <option selected value=click>click</option>
        <option   value=hover>hover</option>
        <option   value=scrollto>scrollto</option>
        <option   value=type>type</option>
      </select>
      <button name=journey.removestep value="1">Del</button>
    </li>

  </ol>
  <p>
    <a rel=search target=searchmaps href="searchmaps?buildjourney=true#searchmaps">Search more maps to add</a>
  <p>
    <button class=middle name=journey.save value=journey>Save journey</button>
</form>

## page-head.html
<!-- contents of this file will be placed inside the <head> -->
<!DOCTYPE html>
            <meta charset=utf-8>
            <meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no"><link rel=stylesheet href="styles/component.css"><script src="scripts/size.js"></script><form method=POST action=journey>

## requirebin.md

      
    Raw
  

              requirebin.md
            
          
    made with requirebin
	"use strict";
	{
	const doc = document.implementation.createHTMLDocument('');
	let html;
	html = document.documentElement.innerHTML;
	doc.write(html);
	doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
	html = (new XMLSerializer).serializeToString(doc);
	console.log(html);

	const canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');

	var data = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
	<foreignObject width="100%" height="100%">
	${html}
	</foreignObject>
	</svg>`;

	var DOMURL = window.URL \|\| window.webkitURL \|\| window;

	var img = new Image();
	var svg = new Blob([data], {type: 'image/svg+xml'});
	var url = DOMURL.createObjectURL(svg);

	img.onload = function() {
	ctx.drawImage(img, 0, 0);
	DOMURL.revokeObjectURL(url);
	}

	img.src = url;
	document.documentElement.appendChild(img);
	}
	setTimeout(function(){
	;"use strict";
	{
	const doc = document.implementation.createHTMLDocument('');
	let html;
	html = document.documentElement.innerHTML;
	doc.write(html);
	doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
	html = (new XMLSerializer).serializeToString(doc);
	console.log(html);

	const canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');

	var data = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
	<foreignObject width="100%" height="100%">
	${html}
	</foreignObject>
	</svg>`;

	var DOMURL = window.URL \|\| window.webkitURL \|\| window;

	var img = new Image();
	var svg = new Blob([data], {type: 'image/svg+xml'});
	var url = DOMURL.createObjectURL(svg);

	img.onload = function() {
	ctx.drawImage(img, 0, 0);
	DOMURL.revokeObjectURL(url);
	}

	img.src = url;
	document.documentElement.appendChild(img);
	}

	;}, 0)
	{
	"name": "requirebin-sketch",
	"version": "1.0.0",
	"dependencies": {
	"dosycrypt": "1.0.7"
	}
	}

	<h1 class=sticky id=journey>
	Journey <button class=middle name=journey.save value=journey>Save</button>
	</h1>
	<a target=_parent href=myjourneys>Back to my journeys</a>
	<button name=journey.run value=journey>Run</button>
	<h2 id=about>About</h2>
	<p>
	<input maxlength=30 required name=journey.name placeholder=name value="test journey2">
	<p>
	<textarea maxlength=140 required rows=2 name=journey.concepts;array placeholder="journey concepts" >test</textarea>
	<p>
	<textarea maxlength=140 required rows=3 name=journey.desc placeholder="about this journey">test</textarea>
	<h2 id=steplist>Steps</h2>
	<ol class=tight>

	<li>
	<span class=fixedwidth>
	<a target=prop href="prop?buildjourney=true&prop=password#prop">password</a>
	</span>
	<select name=journey.steps.0.action>
	<option value=go>go</option>
	<option value=report>report</option>
	<option value=click>click</option>
	<option value=hover>hover</option>
	<option value=scrollto>scrollto</option>
	<option selected value=type>type</option>
	</select>
	<button name=journey.removestep value="0">Del</button>
	</li>


	<li>
	<span class=fixedwidth>
	<a target=prop href="prop?buildjourney=true&prop=links#prop">links</a>
	</span>
	<select name=journey.steps.1.action>
	<option value=go>go</option>
	<option value=report>report</option>
	<option selected value=click>click</option>
	<option value=hover>hover</option>
	<option value=scrollto>scrollto</option>
	<option value=type>type</option>
	</select>
	<button name=journey.removestep value="1">Del</button>
	</li>

	</ol>
	<p>
	<a rel=search target=searchmaps href="searchmaps?buildjourney=true#searchmaps">Search more maps to add</a>
	<p>
	<button class=middle name=journey.save value=journey>Save journey</button>
	</form>
	<!-- contents of this file will be placed inside the <head> -->
	<!DOCTYPE html>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no"><link rel=stylesheet href="styles/component.css"><script src="scripts/size.js"></script><form method=POST action=journey>