semantic/prototype/UI/index.html

<!doctype html>
<html>
  <head>
  	<title>semantic-diff</title>
    <style type="text/css">
    #before {
        width: 50%;
        background: #ffecec;
        float: left;
        white-space: pre-wrap;
    }
    #after {
        width: 50%;
        background: #eaffea;
        float: right;
        white-space: pre-wrap;
    }
    .insert {
        background-color: #eaffea;
        outline: 1px solid #c1e9c1;
        margin-left: 50%;
    }
    .delete {
        background-color: #ffecec;
        outline: 1px solid #f1c0c0;
        margin-right: 50%;
    }
    .replace {
        background-color: #eee;
    }
    </style>
    <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);
    }

    function wrap(tagName, element) {
        if (element == null) { return null; }
        var node = document.createElement(tagName);
        node.appendChild(element);
        return node;
    }

    function toDOM(json) {
        var node;
        if (json instanceof Array) {
            node = document.createElement("ol");
            for (index in json) {
                var child = wrap("li", toDOM(json[index]));
                if (child != null) {
                    node.appendChild(child);
                }
            }
            if (node.childNodes.length == 0) {
                node = null;
            }
        } else if (json instanceof Object) {
            node = document.createElement("div");
            if (json['source'] != null) {
                node = document.createElement("p");
                node.textContent = json['source'];
            } else if (json['insert'] != null) {
                node.classList.add('insert');
                node.appendChild(toDOM(json['insert']));
            } else if (json['delete'] != null) {
                node.classList.add('delete');
                node.appendChild(toDOM(json['delete']));
            } else if (json['replace'] != null) {
                node.classList.add('replace');
                node.appendChild(toDOM(json['replace']));
            } else if (json['before'] != null) {
                node.classList.add('delete');
                node.appendChild(toDOM(json['before']));
            } else if (json['after'] != null) {
                node.classList.add('insert');
                node.appendChild(toDOM(json['after']));
            }
            if (json['categories'] != null) {
                for (index in json['categories']) {
                    node.classList.add('category-'+json['categories'][index]);
                }
            }
        }
        return node;
    }
    </script>
  </head>
  <body>
    <div id="before"></div>
    <div id="after"></div>
    <div id="diff"></div>
    <script type="text/javascript">
    loadJSON('diff.json', function (json) {
        document.getElementById("before").textContent = json.a;
        document.getElementById("after").textContent = json.b;
    });
    </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">`
Position the columns. 2015-10-21 18:11:14 +03:00			`#before {`
			`width: 50%;`
Paint the columns. 2015-10-21 18:11:37 +03:00			`background: #ffecec;`
Position the columns. 2015-10-21 18:11:14 +03:00			`float: left;`
Treat whitespace in the columns as significant. 2015-10-21 18:11:30 +03:00			`white-space: pre-wrap;`
Position the columns. 2015-10-21 18:11:14 +03:00			`}`
			`#after {`
			`width: 50%;`
Paint the columns. 2015-10-21 18:11:37 +03:00			`background: #eaffea;`
Position the columns. 2015-10-21 18:11:14 +03:00			`float: right;`
Treat whitespace in the columns as significant. 2015-10-21 18:11:30 +03:00			`white-space: pre-wrap;`
Position the columns. 2015-10-21 18:11:14 +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;`
Shift things to either side. 2015-10-13 18:24:55 +03:00			`margin-left: 50%;`
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;`
Shift things to either side. 2015-10-13 18:24:55 +03:00			`margin-right: 50%;`
Style insertions/deletions a little. 2015-10-13 18:07:40 +03:00			`}`
HIghlight replacements. 2015-10-13 18:25:20 +03:00			`.replace {`
Grey backgrounds for replacements. 2015-10-13 20:17:18 +03:00			`background-color: #eee;`
HIghlight replacements. 2015-10-13 18:25:20 +03:00			`}`
Add left/right divs. 2015-10-09 22:27:44 +03:00			`</style>`
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);`
			`}`
Add a function doing faux sum typing on JSON. 2015-10-13 16:47:47 +03:00
Add a function to wrap a node in another node. 2015-10-13 18:10:54 +03:00			`function wrap(tagName, element) {`
Only wrap elements that exist. 2015-10-13 18:22:56 +03:00			`if (element == null) { return null; }`
Add a function to wrap a node in another node. 2015-10-13 18:10:54 +03:00			`var node = document.createElement(tagName);`
			`node.appendChild(element);`
			`return node;`
			`}`

Add a function doing faux sum typing on JSON. 2015-10-13 16:47:47 +03:00			`function toDOM(json) {`
Arrays add <ol> elements. 2015-10-13 18:15:23 +03:00			`var node;`
Add a function doing faux sum typing on JSON. 2015-10-13 16:47:47 +03:00			`if (json instanceof Array) {`
Arrays add <ol> elements. 2015-10-13 18:15:23 +03:00			`node = document.createElement("ol");`
Add a function doing faux sum typing on JSON. 2015-10-13 16:47:47 +03:00			`for (index in json) {`
Only add children that exist. 2015-10-13 18:22:34 +03:00			`var child = wrap("li", toDOM(json[index]));`
			`if (child != null) {`
			`node.appendChild(child);`
			`}`
Add a function doing faux sum typing on JSON. 2015-10-13 16:47:47 +03:00			`}`
Skip empty branches. 2015-10-13 18:24:08 +03:00			`if (node.childNodes.length == 0) {`
			`node = null;`
			`}`
Add a function doing faux sum typing on JSON. 2015-10-13 16:47:47 +03:00			`} else if (json instanceof Object) {`
Arrays add <ol> elements. 2015-10-13 18:15:23 +03:00			`node = document.createElement("div");`
Add nodes’ text content. 2015-10-13 17:56:34 +03:00			`if (json['source'] != null) {`
Leaves are wrapped in paragraphs. 2015-10-13 18:16:52 +03:00			`node = document.createElement("p");`
Rename the DOM variable. 2015-10-13 18:09:30 +03:00			`node.textContent = json['source'];`
Careful with your null checks, there. 2015-10-13 18:00:38 +03:00			`} else if (json['insert'] != null) {`
Rename the DOM variable. 2015-10-13 18:09:30 +03:00			`node.classList.add('insert');`
			`node.appendChild(toDOM(json['insert']));`
Add deletions. 2015-10-13 18:00:29 +03:00			`} else if (json['delete'] != null) {`
Rename the DOM variable. 2015-10-13 18:09:30 +03:00			`node.classList.add('delete');`
			`node.appendChild(toDOM(json['delete']));`
Add replacements to the DOM. 2015-10-13 18:01:32 +03:00			`} else if (json['replace'] != null) {`
Rename the DOM variable. 2015-10-13 18:09:30 +03:00			`node.classList.add('replace');`
			`node.appendChild(toDOM(json['replace']));`
Add before/after states. 2015-10-13 18:03:27 +03:00			`} else if (json['before'] != null) {`
Rename the DOM variable. 2015-10-13 18:09:30 +03:00			`node.classList.add('delete');`
			`node.appendChild(toDOM(json['before']));`
Add before/after states. 2015-10-13 18:03:27 +03:00			`} else if (json['after'] != null) {`
Rename the DOM variable. 2015-10-13 18:09:30 +03:00			`node.classList.add('insert');`
			`node.appendChild(toDOM(json['after']));`
Add nodes’ text content. 2015-10-13 17:56:34 +03:00			`}`
Add categories. 2015-10-13 17:57:01 +03:00			`if (json['categories'] != null) {`
			`for (index in json['categories']) {`
Rename the DOM variable. 2015-10-13 18:09:30 +03:00			`node.classList.add('category-'+json['categories'][index]);`
Add categories. 2015-10-13 17:57:01 +03:00			`}`
			`}`
Add a function doing faux sum typing on JSON. 2015-10-13 16:47:47 +03:00			`}`
Rename the DOM variable. 2015-10-13 18:09:30 +03:00			`return node;`
Add a function doing faux sum typing on JSON. 2015-10-13 16:47:47 +03:00			`}`
Add a simple scaffold web page loading the doubt-swift JSON output fixture. 2015-10-09 21:31:06 +03:00			`</script>`
			`</head>`
			`<body>`
Add column elements to the HTML. 2015-10-21 18:11:01 +03:00			`<div id="before"></div>`
			`<div id="after"></div>`
Insert the diffs into a #diff element. 2015-10-13 18:05:13 +03:00			`<div id="diff"></div>`
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">`
Load diff.json. 2015-10-21 00:52:04 +03:00			`loadJSON('diff.json', function (json) {`
Populate the columns with the original sources. 2015-10-21 18:11:50 +03:00			`document.getElementById("before").textContent = json.a;`
			`document.getElementById("after").textContent = json.b;`
Add a simple scaffold web page loading the doubt-swift JSON output fixture. 2015-10-09 21:31:06 +03:00			`});`
			`</script>`
			`</body>`
			`</html>`