semantic/prototype/UI/index.html

<!doctype html>
<html>
  <head>
  	<title>semantic-diff</title>
    <style type="text/css">
    #before, #after {
        width: 50%;
    }
    #before {
        margin-right: 50%;
        float: left;
        background-color: #ffecec;
    }
    #after {
        margin-left: 50%;
        float: right;
        background-color: #eaffea;
    }
    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: #eee;
    }

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

    #diff dt {
        display: none;
    }
    </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 Patch(patch) {
        if (patch.delete != null) { this.before = new Term(patch.delete); }
        if (patch.insert != null) { this.after = new Term(patch.insert); }
        if (patch.replace != null) {
            this.before = new Term(patch.replace.before);
            this.after = new Term(patch.replace.after);
        }
        return this;
    }

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

    function toDOM(model, stateName, source) {
        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 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));
            }
        }

        return element;
    }

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

    // forall a b. Dictionary String a -> (a -> b) -> Dictionary String b
    Dictionary.prototype.map = function(transform) {
        var copy = new Dictionary();
        for (key in this.values) {
            copy.values[key] = transform(this.values[key], key);
        }
        return copy;
    }

    function Syntax(json, continuation) {
        if (json.indexed != null) { this.indexed = json.map(continuation); }
        if (json.keyed != null) { this.keyed = (new Dictionary(json)).map(continuation); }
        if (json.leaf != null) { this.leaf = json; }
        return this;
    }

    // forall a b. Syntax a -> (a -> b) -> Syntax b
    Syntax.prototype.map = function(transform) {
        if (this.indexed != null) { return new Syntax(this, transform); }
        if (this.keyed != null) { return new Syntax(this, transform); }
        if (this.leaf != null) { return new Syntax(this, transform); }
    }

    function diffFromJSON(json) {
        if (json.pure != null) { return new Diff({ pure: new Patch(json.pure) }); }
        if (json.roll != null) {
            return new Diff({ ranges: json.roll.extract, roll: new Syntax(json.roll.unwrap, function(x) { return diffFromJSON(x); }) });
        }
    }

    function Diff(json) {
        if (json.pure != null) {
            this.pure = new Patch(json.pure);
        }
        if (json.roll != null) {
            this.ranges = json.roll.extract;
            this.roll = new Syntax(json.roll.unwrap, function(x) { return new Diff(x); });
        }
        return this;
    }
    </script>
  </head>
  <body>
    <div id="before"></div>
    <div id="after"></div>
    <script type="text/javascript">
    loadJSON('diff.json', function (json) {
        var model = new Diff(json.diff);
        document.getElementById("before").appendChild(toDOM(model, "before", json["before"]));
        document.getElementById("after").appendChild(toDOM(model, "after", json["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			`margin-right: 50%;`
			`float: left;`
			`background-color: #ffecec;`
			`}`
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			`margin-left: 50%;`
			`float: right;`
			`background-color: #eaffea;`
			`}`
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 {`
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
Call out the elements explicitly. 2015-10-22 01:07:02 +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;`
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
			`#diff dt {`
			`display: none;`
			`}`
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 is an object. 2015-10-23 20:48:44 +03:00			`function Patch(patch) {`
Construct Patches with Terms directly. 2015-10-24 01:26:24 +03:00			`if (patch.delete != null) { this.before = new Term(patch.delete); }`
			`if (patch.insert != null) { this.after = new Term(patch.insert); }`
			`if (patch.replace != null) {`
			`this.before = new Term(patch.replace.before);`
			`this.after = new Term(patch.replace.after);`
			`}`
Add values for patches. 2015-10-21 22:50:06 +03:00			`return this;`
			`}`

Don’t be gross. 2015-10-23 20:32:54 +03:00			`function Term(json) {`
Construct terms directly. 2015-10-21 23:19:29 +03:00			`this.range = json.extract;`
Terms construct a Syntax. 2015-10-24 01:19:11 +03:00			`this.unwrap = new Syntax(json.unwrap, function(x) { return new Term(x); });`
Add a value for terms. 2015-10-21 22:58:00 +03:00			`return this;`
			`}`

Rename left/right to before/after. 2015-10-23 23:53:02 +03:00			`function toDOM(model, stateName, source) {`
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			`}`

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
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			`}`

Replaced `Keyed` with `Dictionary`. 2015-10-24 00:16:19 +03:00			`function Dictionary(object) {`
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) {`
Replaced `Keyed` with `Dictionary`. 2015-10-24 00:16:19 +03:00			`this.values[key] = 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
Map over dictionaries. 2015-10-24 00:19:00 +03:00			`// forall a b. Dictionary String a -> (a -> b) -> Dictionary String b`
			`Dictionary.prototype.map = function(transform) {`
			`var copy = new Dictionary();`
			`for (key in this.values) {`
Dictionary mapping passes a key to the transformation function. 2015-10-24 01:21:09 +03:00			`copy.values[key] = transform(this.values[key], key);`
Map over dictionaries. 2015-10-24 00:19:00 +03:00			`}`
			`return copy;`
Construct leaves. 2015-10-21 23:22:19 +03:00			`}`

Syntax is a type. 2015-10-23 23:54:49 +03:00			`function Syntax(json, continuation) {`
Construct Syntax values correctly. 2015-10-24 01:23:25 +03:00			`if (json.indexed != null) { this.indexed = json.map(continuation); }`
			`if (json.keyed != null) { this.keyed = (new Dictionary(json)).map(continuation); }`
			`if (json.leaf != null) { this.leaf = json; }`
Syntax is a type. 2015-10-23 23:54:49 +03:00			`return this;`
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
Map over Syntax. 2015-10-24 00:19:07 +03:00			`// forall a b. Syntax a -> (a -> b) -> Syntax b`
			`Syntax.prototype.map = function(transform) {`
Map Syntax by construction. 2015-10-24 01:24:19 +03:00			`if (this.indexed != null) { return new Syntax(this, transform); }`
			`if (this.keyed != null) { return new Syntax(this, transform); }`
			`if (this.leaf != null) { return new Syntax(this, transform); }`
Map over Syntax. 2015-10-24 00:19:07 +03:00			`}`

Add a function to construct diffs from JSON. 2015-10-24 01:54:24 +03:00			`function diffFromJSON(json) {`
			`if (json.pure != null) { return new Diff({ pure: new Patch(json.pure) }); }`
			`if (json.roll != null) {`
			`return new Diff({ ranges: json.roll.extract, roll: new Syntax(json.roll.unwrap, function(x) { return diffFromJSON(x); }) });`
			`}`
			`}`

Don’t thread the original strings through model construction. 2015-10-23 20:31:14 +03:00			`function Diff(json) {`
Assign patch ranges to Diff.Pures. 2015-10-23 18:14:45 +03:00			`if (json.pure != null) {`
Patch is an object. 2015-10-23 20:48:44 +03:00			`this.pure = new Patch(json.pure);`
Assign patch ranges to Diff.Pures. 2015-10-23 18:14:45 +03:00			`}`
Formatting. 2015-10-23 18:01:14 +03:00			`if (json.roll != null) {`
Keep the correct ranges. 2015-10-23 18:04:03 +03:00			`this.ranges = json.roll.extract;`
Syntax is a type. 2015-10-23 23:54:49 +03:00			`this.roll = new Syntax(json.roll.unwrap, function(x) { return new Diff(x); });`
Formatting. 2015-10-23 18:01:14 +03:00			`}`
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>`
Rename left/right to before/after. 2015-10-23 23:53:02 +03:00			`<div id="before"></div>`
			`<div id="after"></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) {`
Don’t thread the original strings through model construction. 2015-10-23 20:31:14 +03:00			`var model = new Diff(json.diff);`
Rename left/right to before/after. 2015-10-23 23:53:02 +03:00			`document.getElementById("before").appendChild(toDOM(model, "before", json["before"]));`
			`document.getElementById("after").appendChild(toDOM(model, "after", json["after"]));`
Add a simple scaffold web page loading the doubt-swift JSON output fixture. 2015-10-09 21:31:06 +03:00			`});`
			`</script>`
			`</body>`
			`</html>`