semantic/prototype/UI/index.html

<!doctype html>
<html>
  <head>
  	<title>semantic-diff</title>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }
    .insert {
        background-color: #eaffea;
        outline: 1px solid #c1e9c1;
    }
    .delete {
        background-color: #ffecec;
        outline: 1px solid #f1c0c0;
    }
    .replace {
        background-color: #eee;
    }

    #diff * {
        white-space: pre-wrap;
        display: inline;
    }
    </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 Delete(before, a, b) {
        this.before = new Term(before, a);
        return this;
    }

    function Insert(after, a, b) {
        this.after = new Term(after, b);
        return this;
    }

    function Replace(before, after, a, b) {
        this.before = new Term(before, a);
        this.after = new Term(after, b);
        return this;
    }

    function Term(json, source) {
        this.source = source;
        this.range = json.extract;
        this.syntax = syntax(json.unwrap, function(x) { return new Term(x, source); });
        this.syntax.source = source;
        this.syntax.range = this.range;
        return this;
    }

    function toDOM(model) {
        var element;

        if (model instanceof Delete) {
            element = document.createElement("div");
            element.classList.add("patch");
            element.classList.add("delete");
            element.appendChild(toDOM(model.before));
        }

        if (model instanceof Insert) {
            element = document.createElement("div");
            element.classList.add("patch");
            element.classList.add("insert");
            element.appendChild(toDOM(model.after));
        }

        if (model instanceof Replace) {
            element = document.createElement("div");
            element.classList.add("patch");
            element.classList.add("replace");
            var before = toDOM(model.before);
            before.classList.add("delete");
            element.appendChild(before);
            var after = toDOM(model.after);
            after.classList.add("insert");
            element.appendChild(after);
        }

        if (model instanceof Term) {
            element = document.createElement("div");
            element.classList.add("term");
            element.appendChild(toDOM(model.syntax));
        }

        if (model instanceof Diff) {
            element = document.createElement("div");
            element.classList.add("diff");
            if (model.pure != null) {
                element.classList.add("pure");
                element.appendChild(toDOM(model.pure));
            } else if(model.roll != null) {
                element.classList.add("roll");
                element.appendChild(toDOM(model.roll));
            }
        }

        if (model instanceof Indexed) {
            element = document.createElement("ul");
            if (model.source != null && model.range != null) {
                var previous = model.range[0];
                for (i in model.values) {
                    var value = model.values[i];
                    element.appendChild(document.createTextNode(model.source.substr(previous, value.range[0] - previous)));
                    element.appendChild(wrap("li", toDOM(value)));
                    previous = value.range[0] + value.range[1];
                }
                element.appendChild(document.createTextNode(model.source.substr(previous, model.range[0] + model.range[1] - previous)));
            } else {
                for (i in model.values) {
                    element.appendChild(wrap("li", toDOM(model.values[i])));
                }
            }
        }

        if (model instanceof Keyed) {
            element = document.createElement("dl");
            if (model.source != null && model.range != null) {
                var values = [];
                for (k in model.values) {
                    values.push([ k, model.values[k] ]);
                }
                values.sort(function(a, b) {
                    if (a[1].range[0] < b[1].range[0]) {
                        return -1;
                    } else if (a[1].range[0] > b[1].range[0]) {
                        return 1;
                    }
                    return 0;
                });

                var previous = model.range[0];
                for (i in values) {
                    var k = values[i][0];
                    var value = values[i][1];
                    element.appendChild(document.createTextNode(model.source.substr(previous, value.range[0] - previous)));
                    var dt = document.createElement("dt");
                    dt.textContent = k;
                    element.appendChild(dt);
                    element.appendChild(wrap("dd", toDOM(value)));
                    previous = value.range[0] + value.range[1];
                }
                element.appendChild(document.createTextNode(model.source.substr(previous, model.range[0] + model.range[1] - previous)));
            } else {
                for (k in model.values) {
                    var dt = document.createElement("dt");
                    dt.textContent = k;
                    element.appendChild(dt);
                    element.appendChild(wrap("dd", toDOM(model.values[k])));
                }
            }
        }

        if (model instanceof Leaf) {
            element = document.createElement("span");
            if (model.source != null && model.range != null) {
                element.textContent = model.source.substr(model.range[0], model.range[1]);
            }
            // ?
        }

        return element;
    }

    function patch(patch, a, b) {
        if (patch.delete != null) { return new Delete(patch.delete, a, b); }
        if (patch.insert != null) { return new Insert(patch.insert, a, b); }
        if (patch.replace != null) { return new Replace(patch.replace.before, patch.replace.after, a, b); }
    }

    function Indexed(array, continuation) {
        this.values = [];
        for (index in array) {
            this.values.push(continuation(array[index]));
        }
        return this;
    }

    function Keyed(object, continuation) {
        this.values = {};
        for (key in object) {
            this.values[key] = continuation(object[key]);
        }
        return this;
    }

    function Leaf(object) {
        this.value = object;
        return this;
    }

    function syntax(json, continuation) {
        if (json instanceof Array) { return new Indexed(json, continuation); }
        if (json instanceof Object) { return new Keyed(json, continuation); }
        return new Leaf(json);
    }

    function Diff(json, a, b) {
        if (json.pure != null) { this.pure = patch(json.pure, a, b); }
        if (json.roll != null) { this.roll = syntax(json.roll, function(x) { return new Diff(x, a, b); }); }
        return this;
    }
    </script>
  </head>
  <body>
    <div id="diff"></div>
    <script type="text/javascript">
    loadJSON('diff.json', function (json) {
        var model = new Diff(json.diff, json.a, json.b);
        var dom = toDOM(model);
        var root = document.getElementById("diff");
        root.appendChild(dom);
    });
    </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">`
No margin/padding. 2015-10-21 18:48:46 +03:00			`body {`
			`margin: 0;`
			`padding: 0;`
			`}`
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 {`
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			`}`
Respect source whitespace in #diff. 2015-10-22 00:34:10 +03:00
Respect source whitespace in any child of #diff. 2015-10-22 00:34:30 +03:00			`#diff * {`
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;`
Respect source whitespace in #diff. 2015-10-22 00:34:10 +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;`
			`}`

Patch constructors take strings. 2015-10-21 23:47:32 +03:00			`function Delete(before, a, b) {`
Patches construct their own terms. Terms also only take a single string. 2015-10-21 23:51:19 +03:00			`this.before = new Term(before, a);`
Add values for patches. 2015-10-21 22:50:06 +03:00			`return this;`
			`}`

Patch constructors take strings. 2015-10-21 23:47:32 +03:00			`function Insert(after, a, b) {`
Patches construct their own terms. Terms also only take a single string. 2015-10-21 23:51:19 +03:00			`this.after = new Term(after, b);`
Add values for patches. 2015-10-21 22:50:06 +03:00			`return this;`
			`}`

Patch constructors take strings. 2015-10-21 23:47:32 +03:00			`function Replace(before, after, a, b) {`
Patches construct their own terms. Terms also only take a single string. 2015-10-21 23:51:19 +03:00			`this.before = new Term(before, a);`
			`this.after = new Term(after, b);`
Add values for patches. 2015-10-21 22:50:06 +03:00			`return this;`
			`}`

Patches construct their own terms. Terms also only take a single string. 2015-10-21 23:51:19 +03:00			`function Term(json, source) {`
Terms hold the source string. 2015-10-22 00:28:42 +03:00			`this.source = source;`
Construct terms directly. 2015-10-21 23:19:29 +03:00			`this.range = json.extract;`
Recursive constructors close over a/b instead of passing them. 2015-10-21 23:52:49 +03:00			`this.syntax = syntax(json.unwrap, function(x) { return new Term(x, source); });`
Do add the text content to leaf nodes. 2015-10-22 00:28:38 +03:00			`this.syntax.source = source;`
Assign the source and range to syntax nodes. 2015-10-22 00:15:25 +03:00			`this.syntax.range = this.range;`
Add a value for terms. 2015-10-21 22:58:00 +03:00			`return this;`
			`}`

Rename view to model. 2015-10-21 23:25:46 +03:00			`function toDOM(model) {`
Construct a single element. 2015-10-21 23:43:18 +03:00			`var element;`

Rename view to model. 2015-10-21 23:25:46 +03:00			`if (model instanceof Delete) {`
Construct a single element. 2015-10-21 23:43:18 +03:00			`element = document.createElement("div");`
Mark patches as such. 2015-10-22 00:37:28 +03:00			`element.classList.add("patch");`
Map deletions into DOM. 2015-10-21 22:50:13 +03:00			`element.classList.add("delete");`
Rename view to model. 2015-10-21 23:25:46 +03:00			`element.appendChild(toDOM(model.before));`
Map deletions into DOM. 2015-10-21 22:50:13 +03:00			`}`
Map terms into DOM nodes. 2015-10-21 23:05:34 +03:00
Construct DOM for insertions. 2015-10-21 23:39:55 +03:00			`if (model instanceof Insert) {`
Construct a single element. 2015-10-21 23:43:18 +03:00			`element = document.createElement("div");`
Mark patches as such. 2015-10-22 00:37:28 +03:00			`element.classList.add("patch");`
Construct DOM for insertions. 2015-10-21 23:39:55 +03:00			`element.classList.add("insert");`
			`element.appendChild(toDOM(model.after));`
			`}`

Construct DOM for replacements. 2015-10-21 23:40:02 +03:00			`if (model instanceof Replace) {`
Construct a single element. 2015-10-21 23:43:18 +03:00			`element = document.createElement("div");`
Mark patches as such. 2015-10-22 00:37:28 +03:00			`element.classList.add("patch");`
Construct DOM for replacements. 2015-10-21 23:40:02 +03:00			`element.classList.add("replace");`
Add classes to both halves of replacements. 2015-10-22 00:04:35 +03:00			`var before = toDOM(model.before);`
			`before.classList.add("delete");`
			`element.appendChild(before);`
			`var after = toDOM(model.after);`
			`after.classList.add("insert");`
			`element.appendChild(after);`
Construct DOM for replacements. 2015-10-21 23:40:02 +03:00			`}`

Rename view to model. 2015-10-21 23:25:46 +03:00			`if (model instanceof Term) {`
Construct a single element. 2015-10-21 23:43:18 +03:00			`element = document.createElement("div");`
Map terms into DOM nodes. 2015-10-21 23:05:34 +03:00			`element.classList.add("term");`
Terms call directly recursively. 2015-10-21 23:30:51 +03:00			`element.appendChild(toDOM(model.syntax));`
Map terms into DOM nodes. 2015-10-21 23:05:34 +03:00			`}`
Map diffs to divs. 2015-10-21 23:29:42 +03:00
			`if (model instanceof Diff) {`
Construct a single element. 2015-10-21 23:43:18 +03:00			`element = document.createElement("div");`
Map diffs to divs. 2015-10-21 23:29:42 +03:00			`element.classList.add("diff");`
			`if (model.pure != null) {`
			`element.classList.add("pure");`
			`element.appendChild(toDOM(model.pure));`
			`} else if(model.roll != null) {`
			`element.classList.add("roll");`
			`element.appendChild(toDOM(model.roll));`
			`}`
			`}`
Insert indexed nodes as a list. 2015-10-21 23:31:53 +03:00
Test the right property, too. 2015-10-21 23:37:08 +03:00			`if (model instanceof Indexed) {`
Construct a single element. 2015-10-21 23:43:18 +03:00			`element = document.createElement("ul");`
Add text nodes to lists. 2015-10-22 00:32:48 +03:00			`if (model.source != null && model.range != null) {`
Extract the values from the correct objects. 2015-10-22 00:53:46 +03:00			`var previous = model.range[0];`
			`for (i in model.values) {`
			`var value = model.values[i];`
			`element.appendChild(document.createTextNode(model.source.substr(previous, value.range[0] - previous)));`
Restore the original loops. 2015-10-22 00:51:57 +03:00			`element.appendChild(wrap("li", toDOM(value)));`
			`previous = value.range[0] + value.range[1];`
			`}`
Extract the values from the correct objects. 2015-10-22 00:53:46 +03:00			`element.appendChild(document.createTextNode(model.source.substr(previous, model.range[0] + model.range[1] - previous)));`
Add text nodes to lists. 2015-10-22 00:32:48 +03:00			`} else {`
			`for (i in model.values) {`
			`element.appendChild(wrap("li", toDOM(model.values[i])));`
			`}`
Insert indexed nodes as a list. 2015-10-21 23:31:53 +03:00			`}`
			`}`
Return an element for leaves. 2015-10-21 23:32:21 +03:00
Test the right property, too. 2015-10-21 23:37:08 +03:00			`if (model instanceof Keyed) {`
Construct a single element. 2015-10-21 23:43:18 +03:00			`element = document.createElement("dl");`
Handle keyed elements specially when there’s source ranges. 2015-10-22 00:38:11 +03:00			`if (model.source != null && model.range != null) {`
Sort values. 2015-10-22 00:46:07 +03:00			`var values = [];`
Add elements to keyed elements with source ranges. 2015-10-22 00:39:35 +03:00			`for (k in model.values) {`
Sort values. 2015-10-22 00:46:07 +03:00			`values.push([ k, model.values[k] ]);`
			`}`
			`values.sort(function(a, b) {`
			`if (a[1].range[0] < b[1].range[0]) {`
			`return -1;`
			`} else if (a[1].range[0] > b[1].range[0]) {`
			`return 1;`
			`}`
			`return 0;`
			`});`

Extract the values from the correct objects. 2015-10-22 00:53:46 +03:00			`var previous = model.range[0];`
Restore the original loops. 2015-10-22 00:51:57 +03:00			`for (i in values) {`
Extract the values from the correct objects. 2015-10-22 00:53:46 +03:00			`var k = values[i][0];`
			`var value = values[i][1];`
			`element.appendChild(document.createTextNode(model.source.substr(previous, value.range[0] - previous)));`
Restore the original loops. 2015-10-22 00:51:57 +03:00			`var dt = document.createElement("dt");`
			`dt.textContent = k;`
			`element.appendChild(dt);`
			`element.appendChild(wrap("dd", toDOM(value)));`
			`previous = value.range[0] + value.range[1];`
			`}`
Extract the values from the correct objects. 2015-10-22 00:53:46 +03:00			`element.appendChild(document.createTextNode(model.source.substr(previous, model.range[0] + model.range[1] - previous)));`
Handle keyed elements specially when there’s source ranges. 2015-10-22 00:38:11 +03:00			`} else {`
			`for (k in model.values) {`
			`var dt = document.createElement("dt");`
			`dt.textContent = k;`
			`element.appendChild(dt);`
			`element.appendChild(wrap("dd", toDOM(model.values[k])));`
			`}`
Construct keyed nodes as a definition list. 2015-10-21 23:34:20 +03:00			`}`
			`}`

Test the right property, too. 2015-10-21 23:37:08 +03:00			`if (model instanceof Leaf) {`
Construct a single element. 2015-10-21 23:43:18 +03:00			`element = document.createElement("span");`
Do add the text content to leaf nodes. 2015-10-22 00:28:38 +03:00			`if (model.source != null && model.range != null) {`
Reference the correct range. 2015-10-22 00:31:56 +03:00			`element.textContent = model.source.substr(model.range[0], model.range[1]);`
Do add the text content to leaf nodes. 2015-10-22 00:28:38 +03:00			`}`
Return an element for leaves. 2015-10-21 23:32:21 +03:00			`// ?`
			`}`
Construct a single element. 2015-10-21 23:43:18 +03:00
			`return element;`
Map deletions into DOM. 2015-10-21 22:50:13 +03:00			`}`

Pass the input strings around everywhere. 2015-10-21 22:54:10 +03:00			`function patch(patch, a, b) {`
Patches construct their own terms. Terms also only take a single string. 2015-10-21 23:51:19 +03:00			`if (patch.delete != null) { return new Delete(patch.delete, a, b); }`
			`if (patch.insert != null) { return new Insert(patch.insert, a, b); }`
			`if (patch.replace != null) { return new Replace(patch.replace.before, patch.replace.after, a, b); }`
Stub in a function to process patches. 2015-10-21 18:49:03 +03:00			`}`

Syntax constructors don’t take the strings. 2015-10-21 23:53:31 +03:00			`function Indexed(array, continuation) {`
Indexed/Keyed construct objects. 2015-10-21 23:16:11 +03:00			`this.values = [];`
Add a function for processing indexed elements. 2015-10-21 18:17:16 +03:00			`for (index in array) {`
Syntax constructors don’t take the strings. 2015-10-21 23:53:31 +03:00			`this.values.push(continuation(array[index]));`
Add a function for processing indexed elements. 2015-10-21 18:17:16 +03:00			`}`
Indexed/Keyed construct objects. 2015-10-21 23:16:11 +03:00			`return this;`
Add a function for processing indexed elements. 2015-10-21 18:17:16 +03:00			`}`
Add a function for processing keyed syntax elements. 2015-10-21 18:17:25 +03:00
Syntax constructors don’t take the strings. 2015-10-21 23:53:31 +03:00			`function Keyed(object, continuation) {`
Indexed/Keyed construct objects. 2015-10-21 23:16:11 +03:00			`this.values = {};`
Add a function for processing keyed syntax elements. 2015-10-21 18:17:25 +03:00			`for (key in object) {`
Syntax constructors don’t take the strings. 2015-10-21 23:53:31 +03:00			`this.values[key] = continuation(object[key]);`
Add a function for processing keyed syntax elements. 2015-10-21 18:17:25 +03:00			`}`
Indexed/Keyed construct objects. 2015-10-21 23:16:11 +03:00			`return this;`
Add a function for processing keyed syntax elements. 2015-10-21 18:17:25 +03:00			`}`
Add a function for processing syntax elements. 2015-10-21 18:17:33 +03:00
Syntax constructors don’t take the strings. 2015-10-21 23:53:31 +03:00			`function Leaf(object) {`
Leaves hold their values. 2015-10-21 23:52:09 +03:00			`this.value = object;`
Construct leaves. 2015-10-21 23:22:19 +03:00			`return this;`
			`}`

Recursive constructors close over a/b instead of passing them. 2015-10-21 23:52:49 +03:00			`function syntax(json, continuation) {`
			`if (json instanceof Array) { return new Indexed(json, continuation); }`
			`if (json instanceof Object) { return new Keyed(json, continuation); }`
			`return new Leaf(json);`
Add a function for processing syntax elements. 2015-10-21 18:17:33 +03:00			`}`
Call out to patch/syntax when processing a diff. 2015-10-21 18:59:48 +03:00
Diffs are model objects. 2015-10-21 23:24:56 +03:00			`function Diff(json, a, b) {`
			`if (json.pure != null) { this.pure = patch(json.pure, a, b); }`
Recursive constructors close over a/b instead of passing them. 2015-10-21 23:52:49 +03:00			`if (json.roll != null) { this.roll = syntax(json.roll, function(x) { return new Diff(x, a, b); }); }`
Diffs are model objects. 2015-10-21 23:24:56 +03:00			`return this;`
Call out to patch/syntax when processing a diff. 2015-10-21 18:59:48 +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>`
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) {`
Diffs are model objects. 2015-10-21 23:24:56 +03:00			`var model = new Diff(json.diff, json.a, json.b);`
Split things out into temporaries for debugging. 2015-10-21 23:23:25 +03:00			`var dom = toDOM(model);`
			`var root = document.getElementById("diff");`
			`root.appendChild(dom);`
Add a simple scaffold web page loading the doubt-swift JSON output fixture. 2015-10-09 21:31:06 +03:00			`});`
			`</script>`
			`</body>`
			`</html>`