Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Landing pull request 3.

More Details:
 - kpdecker#3
  • Loading branch information...
commit 8357475c8acff67b01de501115a056f9e6dba848 1 parent 005073c
@NV NV authored kpdecker committed
Showing with 171 additions and 2 deletions.
  1. +1 −2  README.md
  2. +89 −0 index.html
  3. +81 −0 style.css
View
3  README.md
@@ -57,8 +57,7 @@ Many of the methods above return change objects. These objects are consist of th
Note that some cases may omit a particular flag field. Comparison on the flag fields should always be done in a truthy or falsy manner.
-## Example
-[maxogden](https://github.com/maxogden) has put together an excellent [example application](http://bl.ocks.org/893372).
+## [Example](http://nv.github.com/jsdiff)
## License
View
89 index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Diff</title>
+ <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+
+<div id="settings">
+ <h1>Diff</h1>
+ <label><input type="radio" name="diff_type" value="diffChars" checked> Chars</label>
+ <label><input type="radio" name="diff_type" value="diffWords"> Words</label>
+ <label><input type="radio" name="diff_type" value="diffLines"> Lines</label>
+</div>
+
+<a href="https://github.com/kpdecker/jsdiff" class="source">github.com/kpdecker/jsdiff</a>
+
+<table>
+ <tr>
+ <td contenteditable="true" id="a">restaurant</td>
+ <td contenteditable="true" id="b">aura</td>
+ <td><pre id="result"></pre></td>
+ </tr>
+</table>
+
+<script src="diff.js"></script>
+<script defer>
+var a = document.getElementById('a');
+var b = document.getElementById('b');
+var result = document.getElementById('result');
+
+function changed() {
+ var diff = JsDiff[window.diffType](a.textContent, b.textContent);
+ var fragment = document.createDocumentFragment();
+ for (var i=0; i < diff.length; i++) {
+
+ if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
+ var swap = diff[i];
+ diff[i] = diff[i + 1];
+ diff[i + 1] = swap;
+ }
+
+ var node;
+ if (diff[i].removed) {
+ node = document.createElement('del');
+ node.appendChild(document.createTextNode(diff[i].value));
+ } else if (diff[i].added) {
+ node = document.createElement('ins');
+ node.appendChild(document.createTextNode(diff[i].value));
+ } else {
+ node = document.createTextNode(diff[i].value);
+ }
+ fragment.appendChild(node);
+ }
+
+ result.textContent = '';
+ result.appendChild(fragment);
+}
+
+window.onload = function() {
+ onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked'));
+ changed();
+};
+
+a.onpaste = a.onchange =
+b.onpaste = b.onchange = changed;
+
+if ('oninput' in a) {
+ a.oninput = b.oninput = changed;
+} else {
+ a.onkeyup = b.onkeyup = changed;
+}
+
+function onDiffTypeChange(radio) {
+ window.diffType = radio.value;
+ document.title = "Diff " + radio.value.slice(4);
+}
+
+var radio = document.getElementsByName('diff_type');
+for (var i = 0; i < radio.length; i++) {
+ radio[i].onchange = function(e) {
+ onDiffTypeChange(e.target);
+ changed();
+ }
+}
+</script>
+</body>
+</html>
View
81 style.css
@@ -0,0 +1,81 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+html, body {
+ background: #EEE;
+ font: 12px sans-serif;
+}
+body {
+ padding-top: 1.8em;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+html, body, table, tbody, tr, td {
+ height: 100%
+}
+table {
+ table-layout: fixed;
+ width: 100%;
+}
+td {
+ width: 33%;
+ padding: 3px 4px;
+ border: 1px solid transparent;
+ vertical-align: top;
+ font: 1em monospace;
+ text-align: left;
+ white-space: pre-wrap;
+}
+h1 {
+ display: inline;
+ font-size: 100%;
+}
+del {
+ text-decoration: none;
+ color: #b30000;
+ background: #fadad7;
+}
+ins {
+ background: #eaf2c2;
+ color: #406619;
+ text-decoration: none;
+}
+
+#settings {
+ position: absolute;
+ top: 0;
+ left: 5px;
+ right: 5px;
+ height: 2em;
+ line-height: 2em;
+}
+#settings label {
+ margin-left: 1em;
+}
+
+.source {
+ position: absolute;
+ right: 1%;
+ top: .2em;
+}
+
+[contentEditable] {
+ background: #F9F9F9;
+ border-color: #BBB #D9D9D9 #DDD;
+ border-radius: 4px;
+ -webkit-user-modify: read-write-plaintext-only;
+ outline: none;
+}
+[contentEditable]:focus {
+ background: #FFF;
+ border-color: #6699cc;
+ box-shadow: 0 0 4px #2175c9;
+}
+
+@-moz-document url-prefix() {
+ body {
+ height: 99%; /* Hide scroll bar in Firefox */
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.