Permalink
Browse files

started seperating html/css/library components making ready for nodejs

  • Loading branch information...
1 parent fa5d621 commit 0ef44f61580e44323c4e20579bf0054108b2722e hij1nx committed Dec 7, 2010
Showing with 279 additions and 50 deletions.
  1. +9 −0 bin/jsond
  2. +66 −7 css/json-diff.css
  3. BIN img/bg.jpg
  4. BIN img/closed.png
  5. BIN img/open.png
  6. +7 −27 index.html
  7. +44 −16 js/app.js
  8. +130 −0 js/lib/jsond.js
  9. +23 −0 package.json
View
@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+var sys = require("sys"),
+ fs = require("fs"),
+ argv = require('optimist').argv,
+ colors = require("colors"),
+ jsond = require("../js/lib/jsond");
+
+// To-Do: seperate rendering to provision for nodejs output using colors etc.
View
@@ -1,5 +1,12 @@
body {
- background-color: lightblue;
+ color: #333;
+
+ background: #eeeeee; /* old browsers */
+ background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* firefox */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* webkit */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* ie */
+
+ font-family:Arial, Helvetica, sans-serif;
}
#results li > span, #results ul > span {
@@ -18,11 +25,11 @@ body {
margin-left: -15px;
padding-top: 0px;
margin-top: 0px;
- background: url(open.png) no-repeat 2px 5px;
+ background: url(../img/open.png) no-repeat 2px 5px;
list-style-type: none;
}
#results ul[closed="yes"] {
- background: url(closed.png) no-repeat 2px 5px;
+ background: url(../img/closed.png) no-repeat 2px 5px;
}
#results ul[closed="yes"] > * {
display: none;
@@ -53,15 +60,67 @@ textarea {
}
.contentbox {
- border: 1px dashed black;
- background-color: white;
+
+ -moz-box-shadow: 2px 2px 3px #666;
+ -webkit-box-shadow: 2px 2px 3px #666;
+ box-shadow: 2px 2px 3px #666;
+
+
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+
+ background: #eeeeee; /* old browsers */
+ background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* firefox */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* webkit */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* ie */
+
+ border: 1px solid #666;
+
+ color: #666;
padding: 15px;
margin: 10px;
}
-h2 {
+input[type=button] {
+ cursor:pointer;
+ height:35px;
+ font-size: 14px;
+ padding:0 -8px;
+
+ background: #7d7e7d; /* old browsers */
+ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* firefox */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* webkit */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* ie */
+
+ color: #eee;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ border:#666 1px solid;
+}
+
+textarea {
+ border: 1px solid #666;
+
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+
+ margin-top: 10px;
+ margin-bottom: 10px;
+ background: #EDEDED; /* old browsers */
+ background: -moz-linear-gradient(top, #EDEDED 0%, #f6f6f6 47%, #FFFFFF 100%); /* firefox */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EDEDED), color-stop(47%,#f6f6f6), color-stop(100%,#FFFFFF)); /* webkit */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEDED', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
+}
+
+h1 {
text-align: center;
- margin: 0px;;
+ margin: 0px;
+ font-size: 35px;
+ color: #666;
+ text-shadow: #515151 1px 1px 1px;
}
#results {
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -4,14 +4,8 @@
<meta charset=utf8>
<link rel="stylesheet" href="css/json-diff.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
-<body onload="init();">
- <p align="center" style="margin: 2em;">Courtesy of <a href="http://tlrobinson.net/projects/javascript-fun/jsondiff/">tlrobinson</a>.
- <br>
- This version differs in that it supports <code>null</code> values,<br>
- downplays the significance of changed properties with the key <code>key</code>,<br>
- and provides links to jump from one change to the next.</p>
-
- <h2>JSON Diff</h2>
+<body>
+ <h1>json-diff</h1>
<div class="contentbox" id="instructions">
<ul>
<li>Paste some JSON in each of the text fields. Click "Compare" to see the diff.</li>
@@ -26,31 +20,17 @@
</textarea>
<textarea id="jsonB">
</textarea>
- <input type="button" value="Compare" id="compare" onclick="startCompare();" />
- <input type="button" value="Swap" id="swap" onclick="swapBoxes();"/>
- <input type="button" value="Clear" id="clear" onclick="clearBoxes();"/>
+ <input type="button" value="Compare" id="compare" />
+ <input type="button" value="Swap" id="swap" />
+ <input type="button" value="Clear" id="clear" />
</div>
<p align=center id=first style=display:none><a href=#change-0>first change</a></p>
<div class="contentbox" id="results">
</div>
- <div class="contentbox" id="issues">
- <h3>About</h3>
- <p>JSON Diff is a simple way to visualize and compare <a href="http://json.org">JSON</a>.</p>
- <h3>Known Issues</h3>
- <ul>
- <li>Diff algorithm not very intelligent when dealing with arrays</li>
- <li>Probably doesn't work in IE</li>
- </ul>
- </div>
-<br />
-<br />
- <p>
- &copy; 2006-2010 Thomas Robinson.&nbsp;<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/us/">Some rights reserved</a>. </p>
-</div>
-<script src="js/lib/json-diff.js" type="text/javascript" charset="utf-8"></script>
-<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/lib/jsond.js?v=1" type="text/javascript" charset="utf-8"></script>
+<script src="js/app.js?v=1" type="text/javascript" charset="utf-8"></script>
</body>
</html>
View
@@ -55,30 +55,58 @@ if(!window.console){
Init: function() {
- console.log('>>> Init()');
+ var self = this;
+
+ window.onload = function() {
- document.addEventListener("click", this.clickHandler, false);
+ console.log('>>> Init()');
- jsonBoxA = document.getElementById("jsonA");
- jsonBoxB = document.getElementById("jsonB");
+ document.addEventListener("click", self.clickHandler, false);
- jsonDiff.feedback = this.markChanged;
-
- this.populteSamples();
- this.startCompare();
- }
-
- populteSamples: function() {
+ jsonBoxA = document.getElementById("jsonA");
+ jsonBoxB = document.getElementById("jsonB");
+
+ function populateValues(a, b) {
+ jsonBoxA.value = JSON.stringify(a);
+ jsonBoxB.value = JSON.stringify(b);
+ }
+
+ function populateResults(results) {
+ console.log(results)
+ }
+
+ document.getElementById("swap").addEventListener("click", function() {
+ jsond.swap(populateValues);
+ }, false);
+
+ document.getElementById("clear").addEventListener("click", function() {
+ jsond.clear(populateValues);
+ }, false);
+
+ document.getElementById("compare").addEventListener("click", function() {
+ jsond.compare(JSON.parse(jsonBoxA.value), JSON.parse(jsonBoxB.value), "root", populateResults);
+ }, false);
+
+ jsond.feedback = self.markChanged;
+
+ self.assignSamples();
+ self.startCompare();
+
+ };
+
+ },
+
+ assignSamples: function() {
console.log('>>> populateSamples()');
- jsonBoxA.value = JSON.stringify(samples.a);
- jsonBoxB.value = JSON.stringify(samples.b);
+ jsonBoxA.value = JSON.stringify(jsond.a = samples.a);
+ jsonBoxB.value = JSON.stringify(jsond.b = samples.b);
},
startCompare: function () {
-
+
console.log('>>> startCompare()');
var objA, objB;
n = 0;
@@ -101,7 +129,7 @@ if(!window.console){
while (results.firstChild)
results.removeChild(results.firstChild);
- jsonDiff.compareTree(objA, objB, "root", results);
+ jsond.compare(objA, objB, "root", results);
},
markChanged: function(node) {
@@ -113,7 +141,7 @@ if(!window.console){
n += 1;
var nextNode = document.createElement('a');
nextNode.setAttribute('href', '#change-' + n);
- nextNode.appendChild(document.createTextNode('↓ next change ↓'))
+ nextNode.appendChild(document.createTextNode('↓ next change ↓'));
node.appendChild(nextNode);
},
View
@@ -0,0 +1,130 @@
+
+var jsond = (typeof exports !== "undefined" ? exports : window).jsond = (function(){
+
+ function isArray(value) {
+ return value && typeof value === "object" && value.constructor === Array;
+ }
+
+ function typeofReal(value) {
+ return isArray(value) ? "array": value === null ? 'null' : typeof value;
+ }
+
+ function getType(value) {
+ (typeA === "object" || typeA === "array") ? "": String(a) + " ";
+ }
+
+ return {
+
+ version: "0.0.1",
+
+ a: [], // first structure
+ b: [], // second structure
+
+ feedback: function() {
+ },
+
+ swap: function(fn) {
+ console.log('>>> swapBoxes()');
+ this.a = [this.b, this.b = this.a][0];
+ fn(this.a, this.b);
+ },
+
+ clear: function(fn) {
+ console.log('>>> clearValues()');
+ this.a = this.b = {};
+ fn(this.a, this.b);
+ },
+
+ compare: function(a, b, name, fn) {
+
+ // To-Do: a and/or b should accept a uri or a json structure.
+ // To-Do: this DOM manipulation should be seperated into logic and rendering so that it works with nodejs.
+
+ var self = this;
+
+ var typeA = typeofReal(a);
+ var typeB = typeofReal(b);
+
+ console.log('>>> compare(a=(', typeA, ')', a,
+ ', b=(', typeB, ')', b,
+ ', name=(', typeof name, ')', name,
+ ', results=(', typeof results, ')', results, ')');
+
+ var typeSpanA = document.createElement("span");
+ typeSpanA.appendChild(document.createTextNode("(" + typeA + ")"))
+ typeSpanA.setAttribute("class", "typeName");
+
+ var typeSpanB = document.createElement("span");
+ typeSpanB.appendChild(document.createTextNode("(" + typeB + ")"))
+ typeSpanB.setAttribute("class", "typeName");
+
+ var aString = (typeA === "object" || typeA === "array") ? "": String(a) + " ";
+ var bString = (typeB === "object" || typeB === "array") ? "": String(b) + " ";
+
+ var leafNode = document.createElement("span");
+ leafNode.appendChild(document.createTextNode(name));
+ if (a === undefined)
+ {
+ leafNode.setAttribute("class", "added");
+ leafNode.appendChild(document.createTextNode(": " + bString));
+ leafNode.appendChild(typeSpanB);
+ self.feedback(leafNode);
+ }
+ else if (b === undefined)
+ {
+ leafNode.setAttribute("class", "removed");
+ leafNode.appendChild(document.createTextNode(": " + aString));
+ leafNode.appendChild(typeSpanA);
+ self.feedback(leafNode);
+ }
+ else if (typeA !== typeB || (typeA !== "object" && typeA !== "array" && a !== b))
+ {
+ leafNode.setAttribute("class", "changed");
+ leafNode.appendChild(document.createTextNode(": " + aString));
+ leafNode.appendChild(typeSpanA);
+ leafNode.appendChild(document.createTextNode(" => " + bString));
+ leafNode.appendChild(typeSpanB);
+
+ if (name === 'key') leafNode.setAttribute('class', 'changed key');
+ else self.feedback(leafNode);
+ }
+ else
+ {
+ leafNode.appendChild(document.createTextNode(": " + aString));
+ leafNode.appendChild(typeSpanA);
+ }
+
+ if (typeA === "object" || typeA === "array" || typeB === "object" || typeB === "array")
+ {
+ var keys = [];
+ for (var i in a) keys.push(i);
+ for (var i in b) keys.push(i);
+ keys.sort();
+
+ var listNode = document.createElement("ul");
+ listNode.appendChild(leafNode);
+
+ for (var i = 0; i < keys.length; i++)
+ {
+ if (keys[i] === keys[i - 1])
+ continue;
+
+ var li = document.createElement("li");
+ listNode.appendChild(li);
+
+ self.compare(a && a[keys[i]], b && b[keys[i]], keys[i], li);
+ }
+
+ results.appendChild(listNode);
+ }
+ else
+ {
+ results.appendChild(leafNode);
+ }
+
+ }
+
+ };
+
+})();
+
Oops, something went wrong.

0 comments on commit 0ef44f6

Please sign in to comment.