semantic/prototype/UI/index.html

<!doctype html>
<html>
  <head>
  	<title>semantic-diff</title>
    <style type="text/css">
    #before, #after {
        width: 50%;
    }
    #before {
        float: left;
    }
    #after {
        float: right;
    }
    body {
        margin: 0;
        padding: 0;
        font-family: monospace;
    }
    .insert {
        background-color: #eaffea;
        outline: 1px solid #c1e9c1;
    }
    .delete {
        background-color: #ffecec;
        outline: 1px solid #f1c0c0;
    }
    .replace {
        background-color: #ffffec;
        outline: 1px solid #e9e9c0;
    }

    .invisible {
    	background-color: #fff;
    	visibility: hidden;
    }

    .diff div, .diff ul, .diff li, .diff dl, .diff dd, .diff span {
        white-space: pre-wrap;
        display: inline;
        margin: 0;
        padding: 0;
        color: initial;
    }

		ul.line-numbers {
			list-style: none;
			margin: 0;
			padding: 0;
			float: left;
		}

    .diff dt {
        display: none;
    }

    /* syntax highlighting */
    .diff .category-regex,
    .diff .category-string {
        color: #183691;
    }

    .diff .category-false,
    .diff .category-true,
    .diff .category-null,
    .diff .category-undefined,
    .diff .category-number,
    .diff .category-function_call>li>.category-identifier,
    .diff .category-function_call>li>.category-member_access>.category-identifier,
    .diff .category-member_access>:not(:first-child)>.category-identifier {
        color: #0086b3;
    }

    .diff .category-comment {
        color: #969896;
    }

    .diff [class^="category-"][class$="_op"],
    .diff .category-ternary,
    .diff .category-var_declaration,
    .diff .category-new_expression,
    .diff .category-if_statement,
    .diff .category-do_statement,
    .diff .category-for_statement,
    .diff .category-for_in_statement,
    .diff .category-return_statement,
    .diff .category-function,
    .diff .category-assignment,
    .diff .category-var_assignment {
        color: #a71d5d;
    }

    .diff .category-function>li:first-child>.category-identifier,
    .diff .category-new_expression>li>.category-function_call>li:first-child>.category-identifier,
    .diff .category-pair>li:first-child>.category-identifier,
    .diff .category-assignment>li:first-child>.category-member_access>:not(:first-child)>.category-identifier {
        color: #795da3;
    }
    </style>
    <script type="text/javascript" src="dictionary.js"></script>
    <script type="text/javascript" src="diff.js"></script>
    <script type="text/javascript" src="patch.js"></script>
    <script type="text/javascript" src="syntax.js"></script>
    <script type="text/javascript" src="term.js"></script>
    <script type="text/javascript">
    function loadJSON(path, callback) {
        var request = new XMLHttpRequest();
        request.overrideMimeType("application/json");
        request.open('GET', '' + path, true);
        request.onreadystatechange = function () {
            if (request.readyState == 4 && (request.status == "200" || request.status == 0)) {
                callback(JSON.parse(request.responseText));
            }
        };
        request.send(null);
    }
    </script>
  </head>
  <body>
	<div id="before">
		<ul id="before-lines" class="line-numbers"></ul>
		<div id="before-diff" class="diff"></div>
	</div>
	<div id="after">
		<ul id="after-lines" class="line-numbers"></ul>
		<div id="after-diff" class="diff"></div>
	</div>

	<script type="text/javascript">
	var unique = function(array) {
		return array.reduce(function(accum, current) {
			if (accum.indexOf(current) < 0) {
				accum.push(current);
			}
			return accum;
		}, []);
	}

	loadJSON((window.location.search || '?diff.json').substr(1), function (json) {
		var diff = diffFromJSON(json.diff);

		var beforeLinesEl = document.getElementById("before-lines")
		var afterLinesEl = document.getElementById("after-lines")

		var dom = diffToDOM(diff,
			{ "before": json["before"] , "after": json["after"] },
			{ "before": beforeLinesEl, "after": afterLinesEl });

			var beforeLines = dom.before.getAttribute("data-line-number").split(",")
			unique(beforeLines).forEach(function(lineNumber) {
				var node = wrap("li", document.createTextNode(lineNumber));
				beforeLinesEl.appendChild(node);
			});
			var afterLines = dom.after.getAttribute("data-line-number").split(",")
			unique(afterLines).forEach(function(lineNumber) {
				var node = wrap("li", document.createTextNode(lineNumber));
				afterLinesEl.appendChild(node);
			});


			document.getElementById("before-diff").appendChild(dom.before);
			document.getElementById("after-diff").appendChild(dom.after);
		});
		</script>
	</body>
	</html>
Add a simple scaffold web page loading the doubt-swift JSON output fixture. 2015-10-09 21:31:06 +03:00			`<!doctype html>`
			`<html>`
			`<head>`
			`<title>semantic-diff</title>`
Add left/right divs. 2015-10-09 22:27:44 +03:00			`<style type="text/css">`
Rename left/right to before/after. 2015-10-23 23:53:02 +03:00			`#before, #after {`
Re-add the left/right column divs. 2015-10-23 21:00:25 +03:00			`width: 50%;`
			`}`
Rename left/right to before/after. 2015-10-23 23:53:02 +03:00			`#before {`
Re-add the left/right column divs. 2015-10-23 21:00:25 +03:00			`float: left;`
			`}`
Rename left/right to before/after. 2015-10-23 23:53:02 +03:00			`#after {`
Re-add the left/right column divs. 2015-10-23 21:00:25 +03:00			`float: right;`
			`}`
No margin/padding. 2015-10-21 18:48:46 +03:00			`body {`
			`margin: 0;`
			`padding: 0;`
Monospace. 2015-10-22 01:06:45 +03:00			`font-family: monospace;`
No margin/padding. 2015-10-21 18:48:46 +03:00			`}`
Style insertions/deletions a little. 2015-10-13 18:07:40 +03:00			`.insert {`
Background colours for insertions/deletions. 2015-10-13 18:43:25 +03:00			`background-color: #eaffea;`
Change up the outline colours. 2015-10-13 18:43:17 +03:00			`outline: 1px solid #c1e9c1;`
Style insertions/deletions a little. 2015-10-13 18:07:40 +03:00			`}`
			`.delete {`
Background colours for insertions/deletions. 2015-10-13 18:43:25 +03:00			`background-color: #ffecec;`
Change up the outline colours. 2015-10-13 18:43:17 +03:00			`outline: 1px solid #f1c0c0;`
Style insertions/deletions a little. 2015-10-13 18:07:40 +03:00			`}`
HIghlight replacements. 2015-10-13 18:25:20 +03:00			`.replace {`
Replacements are yellow. 2015-10-24 04:29:02 +03:00			`background-color: #ffffec;`
			`outline: 1px solid #e9e9c0;`
HIghlight replacements. 2015-10-13 18:25:20 +03:00			`}`
Indentation. 2015-11-03 21:12:35 +03:00
			`.invisible {`
			`background-color: #fff;`
			`visibility: hidden;`
			`}`
Respect source whitespace in #diff. 2015-10-22 00:34:10 +03:00
Use classes to signal diffs. 2015-10-24 04:19:19 +03:00			`.diff div, .diff ul, .diff li, .diff dl, .diff dd, .diff span {`
Respect source whitespace in #diff. 2015-10-22 00:34:10 +03:00			`white-space: pre-wrap;`
Diff elements are displayed inline. 2015-10-22 00:35:12 +03:00			`display: inline;`
No margin or padding on diff elements. 2015-10-22 00:53:57 +03:00			`margin: 0;`
			`padding: 0;`
Don’t inherit syntax highlighting by default. 2015-11-03 22:31:36 +03:00			`color: initial;`
Respect source whitespace in #diff. 2015-10-22 00:34:10 +03:00			`}`
No really, hide terms. 2015-10-22 01:07:08 +03:00
insert line numbers 2015-11-08 23:20:32 +03:00			`ul.line-numbers {`
			`list-style: none;`
			`margin: 0;`
			`padding: 0;`
			`float: left;`
			`}`

Use classes to signal diffs. 2015-10-24 04:19:19 +03:00			`.diff dt {`
No really, hide terms. 2015-10-22 01:07:08 +03:00			`display: none;`
			`}`
Highlight strings. 2015-11-03 22:12:41 +03:00
			`/* syntax highlighting */`
Highlight regexps. 2015-11-03 23:12:44 +03:00			`.diff .category-regex,`
Prefix the highlighting selectors with `.diff`. 2015-11-03 22:31:22 +03:00			`.diff .category-string {`
Highlight strings. 2015-11-03 22:12:41 +03:00			`color: #183691;`
			`}`
Highlight numbers. 2015-11-03 22:12:45 +03:00
Highlight true and false. 2015-11-03 22:54:28 +03:00			`.diff .category-false,`
			`.diff .category-true,`
Highlight null. 2015-11-03 23:07:17 +03:00			`.diff .category-null,`
Highlight undefined. 2015-11-03 23:07:20 +03:00			`.diff .category-undefined,`
Highlight true and false. 2015-11-03 22:54:28 +03:00			`.diff .category-number,`
Highlight function calls. 2015-11-03 23:00:49 +03:00			`.diff .category-function_call>li>.category-identifier,`
			`.diff .category-function_call>li>.category-member_access>.category-identifier,`
Match member access a little more carefully. 2015-11-03 22:48:22 +03:00			`.diff .category-member_access>:not(:first-child)>.category-identifier {`
Highlight member accesses. 2015-11-03 22:35:12 +03:00			`color: #0086b3;`
			`}`
Highlight comments. 2015-11-03 22:35:19 +03:00
			`.diff .category-comment {`
			`color: #969896;`
			`}`
Highlight a bunch of operators and statements. 2015-11-03 22:40:37 +03:00
Highlight the operators en masse. 2015-11-03 23:06:58 +03:00			`.diff [class^="category-"][class$="_op"],`
Highlight ternaries. 2015-11-03 22:55:51 +03:00			`.diff .category-ternary,`
Highlight a bunch of operators and statements. 2015-11-03 22:40:37 +03:00			`.diff .category-var_declaration,`
Highlight `new`. 2015-11-03 23:09:50 +03:00			`.diff .category-new_expression,`
Highlight a bunch of operators and statements. 2015-11-03 22:40:37 +03:00			`.diff .category-if_statement,`
			`.diff .category-do_statement,`
			`.diff .category-for_statement,`
Highlight for/in statements. 2015-11-03 23:30:34 +03:00			`.diff .category-for_in_statement,`
Highlight a bunch of operators and statements. 2015-11-03 22:40:37 +03:00			`.diff .category-return_statement,`
Highlight assignments. 2015-11-03 22:57:22 +03:00			`.diff .category-function,`
			`.diff .category-assignment,`
			`.diff .category-var_assignment {`
Highlight a bunch of operators and statements. 2015-11-03 22:40:37 +03:00			`color: #a71d5d;`
			`}`
Match member assignment a little more carefully. 2015-11-03 22:48:30 +03:00
Highlight function names. 2015-11-03 23:13:39 +03:00			`.diff .category-function>li:first-child>.category-identifier,`
Highlight type names. 2015-11-03 23:09:55 +03:00			`.diff .category-new_expression>li>.category-function_call>li:first-child>.category-identifier,`
Highlight keys in objects. 2015-11-03 22:51:41 +03:00			`.diff .category-pair>li:first-child>.category-identifier,`
Only match the assigned-to property with this rule. 2015-11-03 22:49:45 +03:00			`.diff .category-assignment>li:first-child>.category-member_access>:not(:first-child)>.category-identifier {`
Match member assignment a little more carefully. 2015-11-03 22:48:30 +03:00			`color: #795da3;`
			`}`
Add left/right divs. 2015-10-09 22:27:44 +03:00			`</style>`
Dictionary is in its own file. 2015-10-27 18:09:48 +03:00			`<script type="text/javascript" src="dictionary.js"></script>`
Diff is in its own file. 2015-10-27 18:11:45 +03:00			`<script type="text/javascript" src="diff.js"></script>`
Patch is in its own file. 2015-10-27 18:09:16 +03:00			`<script type="text/javascript" src="patch.js"></script>`
Syntax is in its own file. 2015-10-27 18:10:38 +03:00			`<script type="text/javascript" src="syntax.js"></script>`
			`<script type="text/javascript" src="term.js"></script>`
Add a simple scaffold web page loading the doubt-swift JSON output fixture. 2015-10-09 21:31:06 +03:00			`<script type="text/javascript">`
			`function loadJSON(path, callback) {`
			`var request = new XMLHttpRequest();`
			`request.overrideMimeType("application/json");`
			`request.open('GET', '' + path, true);`
			`request.onreadystatechange = function () {`
			`if (request.readyState == 4 && (request.status == "200" \|\| request.status == 0)) {`
Parse the response text. 2015-10-09 21:36:18 +03:00			`callback(JSON.parse(request.responseText));`
Add a simple scaffold web page loading the doubt-swift JSON output fixture. 2015-10-09 21:31:06 +03:00			`}`
			`};`
			`request.send(null);`
			`}`
			`</script>`
			`</head>`
			`<body>`
insert line numbers 2015-11-08 23:20:32 +03:00			`<div id="before">`
			`<ul id="before-lines" class="line-numbers"></ul>`
			`<div id="before-diff" class="diff"></div>`
			`</div>`
			`<div id="after">`
			`<ul id="after-lines" class="line-numbers"></ul>`
			`<div id="after-diff" class="diff"></div>`
			`</div>`
Construct both diffs at the same time 2015-10-29 22:11:18 +03:00
calculate line numbers 2015-11-09 22:13:47 +03:00			`<script type="text/javascript">`
			`var unique = function(array) {`
			`return array.reduce(function(accum, current) {`
			`if (accum.indexOf(current) < 0) {`
			`accum.push(current);`
			`}`
			`return accum;`
			`}, []);`
			`}`
insert line numbers 2015-11-08 23:20:32 +03:00
calculate line numbers 2015-11-09 22:13:47 +03:00			`loadJSON((window.location.search \|\| '?diff.json').substr(1), function (json) {`
			`var diff = diffFromJSON(json.diff);`
insert line numbers 2015-11-08 23:20:32 +03:00
			`var beforeLinesEl = document.getElementById("before-lines")`
			`var afterLinesEl = document.getElementById("after-lines")`

pass lineNumbers to diffToDOM 2015-11-09 20:06:45 +03:00			`var dom = diffToDOM(diff,`
			`{ "before": json["before"] , "after": json["after"] },`
			`{ "before": beforeLinesEl, "after": afterLinesEl });`
insert line numbers 2015-11-08 23:20:32 +03:00
calculate line numbers 2015-11-09 22:13:47 +03:00			`var beforeLines = dom.before.getAttribute("data-line-number").split(",")`
			`unique(beforeLines).forEach(function(lineNumber) {`
			`var node = wrap("li", document.createTextNode(lineNumber));`
			`beforeLinesEl.appendChild(node);`
			`});`
			`var afterLines = dom.after.getAttribute("data-line-number").split(",")`
			`unique(afterLines).forEach(function(lineNumber) {`
			`var node = wrap("li", document.createTextNode(lineNumber));`
			`afterLinesEl.appendChild(node);`
			`});`


			`document.getElementById("before-diff").appendChild(dom.before);`
			`document.getElementById("after-diff").appendChild(dom.after);`
			`});`
			`</script>`
			`</body>`
			`</html>`