Skip to content

Instantly share code, notes, and snippets.

@JosephShering

JosephShering/index.html

Created May 28, 2015 17:35
Show Gist options
  • Save JosephShering/d57f0d751e52e83eeba6 to your computer and use it in GitHub Desktop.
Save JosephShering/d57f0d751e52e83eeba6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/loqezi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
textarea {
height:500px;
width:100%;
border:none;
}
textarea:focus {
outline:0;
}
</style>
</head>
<body>
<br />
<input type="text" name="varName" class="form-control" placeholder="Form Variable Name" />
<br />
<button class="btn btn-primary pull-right" id="compare">Compare</button>
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#yours" aria-controls="yours" role="tab" data-toggle="tab">
Yours
</a>
</li>
<li role="presentation">
<a href="#theirs" aria-controls="theirs" role="tab" data-toggle="tab">
Theirs
</a>
</li>
<li role="presentation">
<a href="#results" aria-controls="results" role="tab" data-toggle="tab">
Results
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="yours">
<textarea id="yours-textarea"></textarea>
</div>
<div role="tabpanel" class="tab-pane" id="theirs">
<textarea id="theirs-textarea"></textarea>
</div>
<div role="tabpanel" class="tab-pane" id="results">
<textarea id="results-textarea"></textarea>
</div>
</div>
</div>
<script id="jsbin-javascript">
$('#compare').on('click', function(e) {
var yours = $('#yours-textarea').val().trim();
var theirs = $('#theirs-textarea').val().trim();
var $results = $('#results-textarea');
var text = '';
var formVariableName = $('[name=varName]').val() || 'form';
var diff = compare(yours, theirs);
var diff2 = compare(theirs, yours, 'add');
var fullDiff = diff.concat(diff2);
for(var i = 0; i < fullDiff.length; i++) {
var act = fullDiff[i];
if(act.action === 'remove') {
text += formVariableName + '.remove(\'' + act.name + '\');\n';
} else {
text += formVariableName + '.set(\'' + act.name + '\', \'\');\n';
}
}
$results.val(text);
function compare(compareA, compareB, action) {
var action = action || 'remove';
var compareAArray = compareA.split('\n');
var results = [];
//compare
for(var i = 0; i < compareAArray.length; i++) {
var aLine = compareAArray[i];
var aName = aLine.split(/\s+/)[0];
var aValue = aLine.split(/\s+/)[1];
var diff = {
action: ''
};
if(aLine.indexOf('VIEWSTATE') !== -1) {
continue;
}
var lineIndex = compareB.indexOf(aLine);
var nameIndex = compareB.indexOf(aName)
if(lineIndex !== -1) {
continue;
} else if(nameIndex !== -1) {
//Figures out how to grab the value
var newLineIndex = compareB.indexOf('\n', nameIndex + 1);
diff.action = 'modify';
diff.value = compareB.substr(nameIndex, newLineIndex);
} else {
diff.action = action;
}
diff.line = aLine;
diff.name = aName;
if(diff.action) {
results.push(diff);
}
}
return results;
}
});
</script>
<script id="jsbin-source-css" type="text/css">textarea {
height:500px;
width:100%;
border:none;
}
textarea:focus {
outline:0;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$('#compare').on('click', function(e) {
var yours = $('#yours-textarea').val().trim();
var theirs = $('#theirs-textarea').val().trim();
var $results = $('#results-textarea');
var text = '';
var formVariableName = $('[name=varName]').val() || 'form';
var diff = compare(yours, theirs);
var diff2 = compare(theirs, yours, 'add');
var fullDiff = diff.concat(diff2);
for(var i = 0; i < fullDiff.length; i++) {
var act = fullDiff[i];
if(act.action === 'remove') {
text += formVariableName + '.remove(\'' + act.name + '\');\n';
} else {
text += formVariableName + '.set(\'' + act.name + '\', \'\');\n';
}
}
$results.val(text);
function compare(compareA, compareB, action) {
var action = action || 'remove';
var compareAArray = compareA.split('\n');
var results = [];
//compare
for(var i = 0; i < compareAArray.length; i++) {
var aLine = compareAArray[i];
var aName = aLine.split(/\s+/)[0];
var aValue = aLine.split(/\s+/)[1];
var diff = {
action: ''
};
if(aLine.indexOf('VIEWSTATE') !== -1) {
continue;
}
var lineIndex = compareB.indexOf(aLine);
var nameIndex = compareB.indexOf(aName)
if(lineIndex !== -1) {
continue;
} else if(nameIndex !== -1) {
//Figures out how to grab the value
var newLineIndex = compareB.indexOf('\n', nameIndex + 1);
diff.action = 'modify';
diff.value = compareB.substr(nameIndex, newLineIndex);
} else {
diff.action = action;
}
diff.line = aLine;
diff.name = aName;
if(diff.action) {
results.push(diff);
}
}
return results;
}
});</script></body>
</html>
Raw
jsbin.loqezi.css
textarea {
height:500px;
width:100%;
border:none;
}
textarea:focus {
outline:0;
}
Raw
jsbin.loqezi.js
$('#compare').on('click', function(e) {
var yours = $('#yours-textarea').val().trim();
var theirs = $('#theirs-textarea').val().trim();
var $results = $('#results-textarea');
var text = '';
var formVariableName = $('[name=varName]').val() || 'form';
var diff = compare(yours, theirs);
var diff2 = compare(theirs, yours, 'add');
var fullDiff = diff.concat(diff2);
for(var i = 0; i < fullDiff.length; i++) {
var act = fullDiff[i];
if(act.action === 'remove') {
text += formVariableName + '.remove(\'' + act.name + '\');\n';
} else {
text += formVariableName + '.set(\'' + act.name + '\', \'\');\n';
}
}
$results.val(text);
function compare(compareA, compareB, action) {
var action = action || 'remove';
var compareAArray = compareA.split('\n');
var results = [];
//compare
for(var i = 0; i < compareAArray.length; i++) {
var aLine = compareAArray[i];
var aName = aLine.split(/\s+/)[0];
var aValue = aLine.split(/\s+/)[1];
var diff = {
action: ''
};
if(aLine.indexOf('VIEWSTATE') !== -1) {
continue;
}
var lineIndex = compareB.indexOf(aLine);
var nameIndex = compareB.indexOf(aName)
if(lineIndex !== -1) {
continue;
} else if(nameIndex !== -1) {
//Figures out how to grab the value
var newLineIndex = compareB.indexOf('\n', nameIndex + 1);
diff.action = 'modify';
diff.value = compareB.substr(nameIndex, newLineIndex);
} else {
diff.action = action;
}
diff.line = aLine;
diff.name = aName;
if(diff.action) {
results.push(diff);
}
}
return results;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment