Skip to content

Commit a2da731

Browse files
jschroed91jschroed91
committed
Merge pull request #5 from caxy/enhance-update_demo
Updated demo to accept input and diff on the fly
2 parents 2ce21c4 + 69df1de commit a2da731

File tree

5 files changed

+166
-21
lines changed

5 files changed

+166
-21
lines changed

‎demo/demo.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.row {
2+
width: 90%;
3+
clear: both;
4+
margin: 0 auto;
5+
}
6+
.html-edit {
7+
float: left;
8+
width: 45%;
9+
position: relative;
10+
}
11+
.html-preview {
12+
float: right;
13+
width: 45%;
14+
border: 1px solid #999;
15+
height: 200px;
16+
overflow: auto;
17+
padding: 5px;
18+
}
19+
textarea {
20+
width: 100%;
21+
height: 210px;
22+
}

‎demo/demo.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<html ng-app="demo">
2+
<head>
3+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
4+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
5+
<script type="text/javascript" src="demo.js"></script>
6+
<link type="text/css" href="demo.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<div ng-controller="diffCtrl">
10+
<div class="controls row">
11+
<button ng-click="reset()">RESET</button>
12+
<span ng-repeat="demo in demos">
13+
<button ng-click="diffDemo($index)">DEMO {{$index + 1}}</button>
14+
</span>
15+
</div>
16+
17+
<div class="row">
18+
<h2>Old HTML</h2>
19+
<div class="html-edit">
20+
<textarea ng-model="oldText" name="old_text" ng-change="update()"></textarea>
21+
</div>
22+
<div class="html-preview" ng-bind-html="trustHtml(oldText)"></div>
23+
</div>
24+
<div class="row">
25+
<h2>New HTML</h2>
26+
<div class="html-edit">
27+
<textarea ng-model="newText" name="new_text" ng-change="update()"></textarea>
28+
</div>
29+
<div class="html-preview" ng-bind-html="trustHtml(newText)"></div>
30+
</div>
31+
32+
<div class="row">
33+
<h2>Compared HTML <span ng-show="loading || waiting">- {{ loading ? 'Loading' : 'Waiting' }}...</span></h2>
34+
<div class="html-edit">
35+
<textarea ng-model="diff" name="diff" disabled ng-change="update()"></textarea>
36+
</div>
37+
<div class="html-preview" ng-bind-html="trustHtml(diff)"></div>
38+
</div>
39+
</div>
40+
</body>
41+
</html>

‎demo/demo.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
var demo = angular.module('demo', ['ngSanitize']);
2+
3+
demo.controller('diffCtrl', ['$scope', '$http', '$sce', '$timeout', function ($scope, $http, $sce, $timeout) {
4+
$scope.demos = [];
5+
$scope.updateDelay = 800;
6+
$scope.currentTimeout = null;
7+
$scope.loading = false;
8+
$scope.waiting = false;
9+
10+
$scope.trustHtml = function (text) {
11+
return typeof text !== 'undefined' ? $sce.trustAsHtml(text) : '';
12+
};
13+
14+
$scope.reset = function () {
15+
$scope.oldText = '';
16+
$scope.newText = '';
17+
$scope.diff = '';
18+
$scope.loading = false;
19+
$scope.waiting = false;
20+
if ($scope.currentTimeout) {
21+
$timeout.cancel($scope.currentTimeout);
22+
}
23+
}
24+
25+
$scope.update = function () {
26+
if ($scope.currentTimeout) {
27+
$timeout.cancel($scope.currentTimeout);
28+
}
29+
$scope.currentTimeout = $timeout(function () {
30+
$scope.getDiff();
31+
}, $scope.updateDelay);
32+
33+
$scope.waiting = true;
34+
};
35+
36+
$scope.getDiff = function () {
37+
$scope.waiting = false;
38+
$scope.loading = true;
39+
$http.post('index.php', { oldText: $scope.oldText, newText: $scope.newText })
40+
.success(function (data) {
41+
$scope.diff = data.diff;
42+
$scope.loading = false;
43+
});
44+
};
45+
46+
$scope.loadDemos = function () {
47+
$http.get('demo_text.php')
48+
.success(function (data) {
49+
$scope.demos = data;
50+
});
51+
};
52+
53+
$scope.diffDemo = function (index) {
54+
if (typeof index === 'undefined') {
55+
index = 0;
56+
}
57+
58+
$scope.oldText = $scope.demos[index]['old'];
59+
$scope.newText = $scope.demos[index]['new'];
60+
$scope.getDiff();
61+
};
62+
63+
$scope.loadDemos();
64+
}]);

‎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: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,16 @@
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+
header('Content-Type: text/html');
20+
echo file_get_contents('demo.html');
21+
}

0 commit comments

Comments
 (0)