Skip to content

Commit 5073ef7

Browse files
jschroed91jschroed91
committed
Updated demo to accept input and diff on the fly
1 parent d22deb9 commit 5073ef7

File tree

2 files changed

+170
-21
lines changed

2 files changed

+170
-21
lines changed

‎demo/demo_text.php‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?php
2+
3+
$demos = array(
4+
array(
5+
'old' => "<p><i>This is</i> some sample text to <strong>demonstrate</strong> the capability of the <strong>HTML diff tool</strong>.</p>
6+
<p>It is based on the <b>Ruby</b> implementation found <a href='http://github.com/myobie/htmldiff'>here</a>. Note how the link has no tooltip</p>
7+
<table cellpadding='0' cellspacing='0'>
8+
<tr><td>Some sample text</td><td>Some sample value</td></tr>
9+
<tr><td>Data 1 (this row will be removed)</td><td>Data 2</td></tr>
10+
</table>
11+
Here is a number 2 32<br />
12+
Section 602.1 NAME OF SECTION<br />
13+
Large number 5,000",
14+
15+
'new' => "<p>This is some sample <strong>text to</strong> demonstrate the awesome capabilities of the <strong>HTML <u>diff</u> tool</strong>.</p><br/><br/>Extra spacing here that was not here before.
16+
<p>It is <i>based</i> on the Ruby implementation found <a title='Cool tooltip' href='http://github.com/myobie/htmldiff'>here</a>. Note how the link has a tooltip now and the HTML diff algorithm has preserved formatting.</p>
17+
<table cellpadding='0' cellspacing='0'>
18+
<tr><td>Some sample <strong>bold text</strong></td><td>Some sample value</td></tr>
19+
</table>
20+
Here is a number 2 <sup>32</sup><br />
21+
Section 602.2 NAME OF SECTION.<br />
22+
Large numbers 5,001 and 10,000,154"
23+
)
24+
);
25+
header('Content-Type: application/json');
26+
echo json_encode($demos);

‎demo/index.php‎

Lines changed: 144 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,147 @@
66
require __DIR__.'/../lib/Caxy/HtmlDiff/Match.php';
77
require __DIR__.'/../lib/Caxy/HtmlDiff/Operation.php';
88

9-
$html1 = "<p><i>This is</i> some sample text to <strong>demonstrate</strong> the capability of the <strong>HTML diff tool</strong>.</p>
10-
<p>It is based on the <b>Ruby</b> implementation found <a href='http://github.com/myobie/htmldiff'>here</a>. Note how the link has no tooltip</p>
11-
<table cellpadding='0' cellspacing='0'>
12-
<tr><td>Some sample text</td><td>Some sample value</td></tr>
13-
<tr><td>Data 1 (this row will be removed)</td><td>Data 2</td></tr>
14-
</table>
15-
Here is a number 2 32";
16-
$html2 = "<p>This is some sample <strong>text to</strong> demonstrate the awesome capabilities of the <strong>HTML <u>diff</u> tool</strong>.</p><br/><br/>Extra spacing here that was not here before.
17-
<p>It is <i>based</i> on the Ruby implementation found <a title='Cool tooltip' href='http://github.com/myobie/htmldiff'>here</a>. Note how the link has a tooltip now and the HTML diff algorithm has preserved formatting.</p>
18-
<table cellpadding='0' cellspacing='0'>
19-
<tr><td>Some sample <strong>bold text</strong></td><td>Some sample value</td></tr>
20-
</table>
21-
Here is a number 2 <sup>32</sup>";
22-
$diff = new HtmlDiff( $html1, $html2 );
23-
$diff->build();
24-
echo "<h2>Old html</h2>";
25-
echo $diff->getOldHtml();
26-
echo "<h2>New html</h2>";
27-
echo $diff->getNewHtml();
28-
echo "<h2>Compared html</h2>";
29-
echo $diff->getDifference();
9+
$input = file_get_contents('php://input');
10+
11+
if ($input) {
12+
$data = json_decode($input, true);
13+
$diff = new HtmlDiff($data['oldText'], $data['newText']);
14+
$diff->build();
15+
16+
header('Content-Type: application/json');
17+
echo json_encode(array('diff' => $diff->getDifference()));
18+
} else {
19+
?>
20+
<html ng-app="demo">
21+
<head>
22+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
23+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
24+
<style>
25+
.row {
26+
width: 90%;
27+
clear: both;
28+
margin: 0 auto;
29+
}
30+
.html-edit {
31+
float: left;
32+
width: 45%;
33+
position: relative;
34+
}
35+
.html-preview {
36+
float: right;
37+
width: 45%;
38+
border: 1px solid #999;
39+
height: 200px;
40+
overflow: auto;
41+
padding: 5px;
42+
}
43+
textarea {
44+
width: 100%;
45+
height: 210px;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<div ng-controller="diffCtrl">
51+
<div class="controls row">
52+
<button ng-click="reset()">RESET</button>
53+
<span ng-repeat="demo in demos">
54+
<button ng-click="diffDemo($index)">DEMO {{$index + 1}}</button>
55+
</span>
56+
</div>
57+
58+
<div class="row">
59+
<h2>Old HTML</h2>
60+
<div class="html-edit">
61+
<textarea ng-model="oldText" name="old_text" ng-change="update()"></textarea>
62+
</div>
63+
<div class="html-preview" ng-bind-html="trustHtml(oldText)"></div>
64+
</div>
65+
<div class="row">
66+
<h2>New HTML</h2>
67+
<div class="html-edit">
68+
<textarea ng-model="newText" name="new_text" ng-change="update()"></textarea>
69+
</div>
70+
<div class="html-preview" ng-bind-html="trustHtml(newText)"></div>
71+
</div>
72+
73+
<div class="row">
74+
<h2>Compared HTML <span ng-show="loading || waiting">- {{ loading ? 'Loading' : 'Waiting' }}...</span></h2>
75+
<div class="html-edit">
76+
<textarea ng-model="diff" name="diff" disabled ng-change="update()"></textarea>
77+
</div>
78+
<div class="html-preview" ng-bind-html="trustHtml(diff)"></div>
79+
</div>
80+
</div>
81+
82+
<script type="text/javascript">
83+
var demo = angular.module('demo', ['ngSanitize']);
84+
85+
demo.controller('diffCtrl', ['$scope', '$http', '$sce', '$timeout', function ($scope, $http, $sce, $timeout) {
86+
$scope.demos = [];
87+
$scope.updateDelay = 800;
88+
$scope.currentTimeout = null;
89+
$scope.loading = false;
90+
$scope.waiting = false;
91+
92+
$scope.trustHtml = function (text) {
93+
return typeof text !== 'undefined' ? $sce.trustAsHtml(text) : '';
94+
};
95+
96+
$scope.reset = function () {
97+
$scope.oldText = '';
98+
$scope.newText = '';
99+
$scope.diff = '';
100+
$scope.loading = false;
101+
$scope.waiting = false;
102+
if ($scope.currentTimeout) {
103+
$timeout.cancel($scope.currentTimeout);
104+
}
105+
}
106+
107+
$scope.update = function () {
108+
if ($scope.currentTimeout) {
109+
$timeout.cancel($scope.currentTimeout);
110+
}
111+
$scope.currentTimeout = $timeout(function () {
112+
$scope.getDiff();
113+
}, $scope.updateDelay);
114+
115+
$scope.waiting = true;
116+
};
117+
118+
$scope.getDiff = function () {
119+
$scope.waiting = false;
120+
$scope.loading = true;
121+
$http.post('index.php', { oldText: $scope.oldText, newText: $scope.newText })
122+
.success(function (data) {
123+
$scope.diff = data.diff;
124+
$scope.loading = false;
125+
});
126+
};
127+
128+
$scope.loadDemos = function () {
129+
$http.get('demo_text.php')
130+
.success(function (data) {
131+
$scope.demos = data;
132+
});
133+
};
134+
135+
$scope.diffDemo = function (index) {
136+
if (typeof index === 'undefined') {
137+
index = 0;
138+
}
139+
140+
$scope.oldText = $scope.demos[index]['old'];
141+
$scope.newText = $scope.demos[index]['new'];
142+
$scope.getDiff();
143+
};
144+
145+
$scope.loadDemos();
146+
}]);
147+
</script>
148+
</body>
149+
</html>
150+
151+
<?php
152+
}

0 commit comments

Comments
 (0)