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) {
        this.before = before;
        return this;
    }

    function Insert(after) {
        this.after = after;
        return this;
    }

    function Replace(before, after) {
        this.before = before;
        this.after = after;
        return this;
    }

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

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

        if (view instanceof Term) {
            var element = document.createElement("div");
            element.classList.add("term");
            if (view.syntax instanceof Indexed) {
                for (i in view.syntax) {
                    element.appendChild(toDOM(view.syntax[i]));
                }
            } else if (view.syntax instanceof Keyed) {
                for (k in view.syntax) {
                    element.appendChild(toDOM(view.syntax[k]));
                }
            }

            return element;
        }
    }

    function patch(patch, a, b) {
        if (patch.delete != null) { return new Delete(new Term(patch.delete, a, b)); }
        if (patch.insert != null) { return new Insert(new Term(patch.insert, a, b)); }
        if (patch.replace != null) { return new Replace(new Term(patch.replace.before, a, b), new Term(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) { return patch(json.pure, a, b); }
        if (json.roll != null) { return syntax(json.roll, a, b, diff); }
    }
    </script>
  </head>
  <body>
    <div id="diff"></div>
    <script type="text/javascript">
    loadJSON('diff.json', function (json) {
        console.log(json.diff);
        var model = 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;`
			`}`

Add values for patches. 2015-10-21 22:50:06 +03:00			`function Delete(before) {`
			`this.before = before;`
			`return this;`
			`}`

			`function Insert(after) {`
			`this.after = after;`
			`return this;`
			`}`

			`function Replace(before, after) {`
			`this.before = before;`
			`this.after = after;`
			`return this;`
			`}`

Construct terms directly. 2015-10-21 23:19:29 +03:00			`function Term(json, a, b) {`
			`this.range = json.extract;`
			`this.syntax = syntax(json.unwrap, a, b, function(x, a, b) { return new Term(x, a, b); });`
Add a value for terms. 2015-10-21 22:58:00 +03:00			`return this;`
			`}`

Map deletions into DOM. 2015-10-21 22:50:13 +03:00			`function toDOM(view) {`
			`if (view instanceof Delete) {`
			`var element = document.createElement("div");`
			`element.classList.add("delete");`
			`element.appendChild(toDOM(view.before));`
Return the element representing deletions. 2015-10-21 22:55:02 +03:00			`return element;`
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
			`if (view instanceof Term) {`
			`var element = document.createElement("div");`
			`element.classList.add("term");`
Use Indexed/Keyed so we can differentiate leaves. 2015-10-21 23:17:30 +03:00			`if (view.syntax instanceof Indexed) {`
Add elements for arrays. 2015-10-21 23:07:39 +03:00			`for (i in view.syntax) {`
			`element.appendChild(toDOM(view.syntax[i]));`
			`}`
Use Indexed/Keyed so we can differentiate leaves. 2015-10-21 23:17:30 +03:00			`} else if (view.syntax instanceof Keyed) {`
Add elements for keyed nodes. 2015-10-21 23:07:47 +03:00			`for (k in view.syntax) {`
			`element.appendChild(toDOM(view.syntax[k]));`
			`}`
Add elements for arrays. 2015-10-21 23:07:39 +03:00			`}`

Map terms into DOM nodes. 2015-10-21 23:05:34 +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) {`
Construct terms directly. 2015-10-21 23:19:29 +03:00			`if (patch.delete != null) { return new Delete(new Term(patch.delete, a, b)); }`
			`if (patch.insert != null) { return new Insert(new Term(patch.insert, a, b)); }`
			`if (patch.replace != null) { return new Replace(new Term(patch.replace.before, a, b), new Term(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
Pass the input strings around everywhere. 2015-10-21 22:54:10 +03:00			`function diff(json, a, b) {`
			`if (json.pure != null) { return patch(json.pure, a, b); }`
			`if (json.roll != null) { return syntax(json.roll, a, b, diff); }`
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);`
Split things out into temporaries for debugging. 2015-10-21 23:23:25 +03:00			`var model = diff(json.diff, json.a, json.b);`
			`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>`