Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Web UI #3

Closed
wants to merge 4 commits into from

2 participants

Nikita Vasilyev Kevin Decker
Nikita Vasilyev
NV commented May 15, 2011

I've made a web UI for jsdiff: http://nv.github.com/jsdiff/.

You could merge it into gh-pages branch and it will be available at http://kpdecker.github.com/jsdiff/.

Kevin Decker
Owner

Merged. Thanks!

Kevin Decker kpdecker closed this May 30, 2011
npm <3 component npmcomponent referenced this pull request from a commit in npmcomponent/timoxley-diff May 30, 2011
Nikita Vasilyev Landing pull request 3.
More Details:
 - kpdecker/jsdiff#3
8357475
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
3  README.md
Source Rendered
@@ -57,8 +57,7 @@ Many of the methods above return change objects. These objects are consist of th
57 57
 
58 58
 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.
59 59
 
60  
-## Example
61  
-[maxogden](https://github.com/maxogden) has put together an excellent [example application](http://bl.ocks.org/893372).
  60
+## [Example](http://nv.github.com/jsdiff)
62 61
 
63 62
 ## License
64 63
 
89  index.html
... ...
@@ -0,0 +1,89 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+	<meta charset="utf-8">
  5
+	<title>Diff</title>
  6
+	<link rel="stylesheet" href="style.css"/>
  7
+</head>
  8
+<body>
  9
+
  10
+<div id="settings">
  11
+	<h1>Diff</h1>
  12
+	<label><input type="radio" name="diff_type" value="diffChars" checked> Chars</label>
  13
+	<label><input type="radio" name="diff_type" value="diffWords"> Words</label>
  14
+	<label><input type="radio" name="diff_type" value="diffLines"> Lines</label>
  15
+</div>
  16
+
  17
+<a href="https://github.com/kpdecker/jsdiff" class="source">github.com/kpdecker/jsdiff</a>
  18
+
  19
+<table>
  20
+	<tr>
  21
+		<td contenteditable="true" id="a">restaurant</td>
  22
+		<td contenteditable="true" id="b">aura</td>
  23
+		<td><pre id="result"></pre></td>
  24
+	</tr>
  25
+</table>
  26
+
  27
+<script src="diff.js"></script>
  28
+<script defer>
  29
+var a = document.getElementById('a');
  30
+var b = document.getElementById('b');
  31
+var result = document.getElementById('result');
  32
+
  33
+function changed() {
  34
+	var diff = JsDiff[window.diffType](a.textContent, b.textContent);
  35
+	var fragment = document.createDocumentFragment();
  36
+	for (var i=0; i < diff.length; i++) {
  37
+
  38
+		if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
  39
+			var swap = diff[i];
  40
+			diff[i] = diff[i + 1];
  41
+			diff[i + 1] = swap;
  42
+		}
  43
+
  44
+		var node;
  45
+		if (diff[i].removed) {
  46
+			node = document.createElement('del');
  47
+			node.appendChild(document.createTextNode(diff[i].value));
  48
+		} else if (diff[i].added) {
  49
+			node = document.createElement('ins');
  50
+			node.appendChild(document.createTextNode(diff[i].value));
  51
+		} else {
  52
+			node = document.createTextNode(diff[i].value);
  53
+		}
  54
+		fragment.appendChild(node);
  55
+	}
  56
+
  57
+	result.textContent = '';
  58
+	result.appendChild(fragment);
  59
+}
  60
+
  61
+window.onload = function() {
  62
+	onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked'));
  63
+	changed();
  64
+};
  65
+
  66
+a.onpaste = a.onchange =
  67
+b.onpaste = b.onchange = changed;
  68
+
  69
+if ('oninput' in a) {
  70
+	a.oninput = b.oninput = changed;
  71
+} else {
  72
+	a.onkeyup = b.onkeyup = changed;
  73
+}
  74
+
  75
+function onDiffTypeChange(radio) {
  76
+	window.diffType = radio.value;
  77
+	document.title = "Diff " + radio.value.slice(4);
  78
+}
  79
+
  80
+var radio = document.getElementsByName('diff_type');
  81
+for (var i = 0; i < radio.length; i++) {
  82
+	radio[i].onchange = function(e) {
  83
+		onDiffTypeChange(e.target);
  84
+		changed();
  85
+	}
  86
+}
  87
+</script>
  88
+</body>
  89
+</html>
81  style.css
... ...
@@ -0,0 +1,81 @@
  1
+* {
  2
+	margin: 0;
  3
+	padding: 0;
  4
+}
  5
+html, body {
  6
+	background: #EEE;
  7
+	font: 12px sans-serif;
  8
+}
  9
+body {
  10
+	padding-top: 1.8em;
  11
+	-webkit-box-sizing: border-box;
  12
+	-moz-box-sizing: border-box;
  13
+	box-sizing: border-box;
  14
+}
  15
+html, body, table, tbody, tr, td {
  16
+	height: 100%
  17
+}
  18
+table {
  19
+	table-layout: fixed;
  20
+	width: 100%;
  21
+}
  22
+td {
  23
+	width: 33%;
  24
+	padding: 3px 4px;
  25
+	border: 1px solid transparent;
  26
+	vertical-align: top;
  27
+	font: 1em monospace;
  28
+	text-align: left;
  29
+	white-space: pre-wrap;
  30
+}
  31
+h1 {
  32
+	display: inline;
  33
+	font-size: 100%;
  34
+}
  35
+del {
  36
+	text-decoration: none;
  37
+	color: #b30000;
  38
+	background: #fadad7;
  39
+}
  40
+ins {
  41
+	background: #eaf2c2;
  42
+	color: #406619;
  43
+	text-decoration: none;
  44
+}
  45
+
  46
+#settings {
  47
+	position: absolute;
  48
+	top: 0;
  49
+	left: 5px;
  50
+	right: 5px;
  51
+	height: 2em;
  52
+	line-height: 2em;
  53
+}
  54
+#settings label {
  55
+	margin-left: 1em;
  56
+}
  57
+
  58
+.source {
  59
+	position: absolute;
  60
+	right: 1%;
  61
+	top: .2em;
  62
+}
  63
+
  64
+[contentEditable] {
  65
+	background: #F9F9F9;
  66
+	border-color: #BBB #D9D9D9 #DDD;
  67
+	border-radius: 4px;
  68
+	-webkit-user-modify: read-write-plaintext-only;
  69
+	outline: none;
  70
+}
  71
+[contentEditable]:focus {
  72
+	background: #FFF;
  73
+	border-color: #6699cc;
  74
+	box-shadow: 0 0 4px #2175c9;
  75
+}
  76
+
  77
+@-moz-document url-prefix() {
  78
+	body {
  79
+		height: 99%; /* Hide scroll bar in Firefox */
  80
+	}
  81
+}
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.