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;
        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 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.range = json.extract;
        this.syntax = syntax(json.unwrap, null, null, function(x) { return new Term(x, source); });
        return this;
    }

    function toDOM(model) {
        var element;

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

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

        if (model instanceof Replace) {
            element = document.createElement("div");
            element.classList.add("replace");
            element.appendChild(toDOM(model.before));
            element.appendChild(toDOM(model.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");
            for (i in model.values) {
                element.appendChild(wrap("li", toDOM(model.values[i])));
            }
        }

        if (model instanceof Keyed) {
            element = document.createElement("dl");
            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");
            // ?
        }

        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, a, b, continuation) {
        this.values = [];
        for (index in array) {
            this.values.push(continuation(array[index], a, b));
        }
        return this;
    }

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

    function Leaf(object, a, b) {
        return this;
    }

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

    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, a, b, function(x, a, b) { return new Diff(x, a, b); }); }
        return this;
    }
    </script>
  </head>
  <body>
    <div id="diff"></div>
    <script type="text/javascript">
    loadJSON('diff.json', function (json) {
        console.log(json.diff);
        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;`
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;`
			`}`

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) {`
Construct terms directly. 2015-10-21 23:19:29 +03:00			`this.range = json.extract;`
Patches construct their own terms. Terms also only take a single string. 2015-10-21 23:51:19 +03:00			`this.syntax = syntax(json.unwrap, null, null, function(x) { return new Term(x, source); });`
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");`
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");`
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");`
Construct DOM for replacements. 2015-10-21 23:40:02 +03:00			`element.classList.add("replace");`
			`element.appendChild(toDOM(model.before));`
			`element.appendChild(toDOM(model.after));`
			`}`

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");`
Enumerate the right property. 2015-10-21 23:35:39 +03:00			`for (i in model.values) {`
And finally, retrieve elements from the right property. 2015-10-21 23:38:02 +03:00			`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");`
Enumerate the right property. 2015-10-21 23:35:39 +03:00			`for (k in model.values) {`
Construct keyed nodes as a definition list. 2015-10-21 23:34:20 +03:00			`var dt = document.createElement("dt");`
			`dt.textContent = k;`
			`element.appendChild(dt);`
And finally, retrieve elements from the right property. 2015-10-21 23:38:02 +03:00			`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");`
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			`}`

Indexed/Keyed construct objects. 2015-10-21 23:16:11 +03:00			`function Indexed(array, a, b, continuation) {`
			`this.values = [];`
Add a function for processing indexed elements. 2015-10-21 18:17:16 +03:00			`for (index in array) {`
Indexed/Keyed construct objects. 2015-10-21 23:16:11 +03:00			`this.values.push(continuation(array[index], a, b));`
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
Indexed/Keyed construct objects. 2015-10-21 23:16:11 +03:00			`function Keyed(object, a, b, continuation) {`
			`this.values = {};`
Add a function for processing keyed syntax elements. 2015-10-21 18:17:25 +03:00			`for (key in object) {`
Indexed/Keyed construct objects. 2015-10-21 23:16:11 +03:00			`this.values[key] = continuation(object[key], a, b);`
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
Construct leaves. 2015-10-21 23:22:19 +03:00			`function Leaf(object, a, b) {`
			`return this;`
			`}`

Pass the input strings around everywhere. 2015-10-21 22:54:10 +03:00			`function syntax(json, a, b, continuation) {`
Indexed/Keyed construct objects. 2015-10-21 23:16:11 +03:00			`if (json instanceof Array) { return new Indexed(json, a, b, continuation); }`
			`if (json instanceof Object) { return new Keyed(json, a, b, continuation); }`
Construct leaves. 2015-10-21 23:22:19 +03:00			`return new Leaf(json, a, b);`
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); }`
Construct Diffs recursively. 2015-10-21 23:26:36 +03:00			`if (json.roll != null) { this.roll = syntax(json.roll, a, b, function(x, a, b) { 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) {`
Use .notation instead of subscripting. 2015-10-21 21:08:35 +03:00			`console.log(json.diff);`
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>`