Skip to content

Commit 0c5e1a4

Browse files
DigiLiveDigiLive
committed
HTML Unified Renderer added, Code optimization, cleanup and commenting.
A HTML Unified Renderer class is added. The example is updated so it includes this renderer.
1 parent 122a72c commit 0c5e1a4

File tree

3 files changed

+344
-86
lines changed

3 files changed

+344
-86
lines changed

‎example/example.php

Lines changed: 61 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1+
<?php
2+
use jblond\Autoloader;
3+
use jblond\Diff;
4+
use jblond\Diff\Renderer\Html\Inline;
5+
use jblond\Diff\Renderer\Html\Unified as HtmlUnified;
6+
use jblond\Diff\Renderer\Html\SideBySide;
7+
use jblond\Diff\Renderer\Text\Context;
8+
use jblond\Diff\Renderer\Text\Unified;
9+
10+
// Include and instantiate autoloader.
11+
require dirname(__FILE__) . '/../lib/Autoloader.php';
12+
new Autoloader();
13+
14+
// Include two sample files for comparison.
15+
$a = file_get_contents(dirname(__FILE__) . '/a.txt');
16+
$b = file_get_contents(dirname(__FILE__) . '/b.txt');
17+
18+
// Options for generating the diff.
19+
$options = [
20+
//'ignoreWhitespace' => true,
21+
//'ignoreCase' => true,
22+
];
23+
24+
// Initialize the diff class.
25+
// \jblond\diff
26+
$diff = new Diff($a, $b, $options);
27+
?>
28+
129
<!DOCTYPE html>
230
<html lang="en">
331
<head>
@@ -8,72 +36,58 @@
836
<body>
937
<h1>PHP LibDiff - Examples</h1>
1038
<hr />
11-
<?php
12-
// include autoloader
13-
use jblond\Autoloader;
14-
use jblond\Diff;
15-
use jblond\Diff\Renderer\Html\Inline;
16-
use jblond\Diff\Renderer\Html\SideBySide;
17-
use jblond\Diff\Renderer\Text\Context;
18-
use jblond\Diff\Renderer\Text\Unified;
19-
20-
require dirname(__FILE__) . '/../lib/Autoloader.php';
21-
new Autoloader();
22-
23-
// Include two sample files for comparison
24-
$a = explode("\n", file_get_contents(dirname(__FILE__) . '/a.txt'));
25-
$b = explode("\n", file_get_contents(dirname(__FILE__) . '/b.txt'));
26-
27-
// Options for generating the diff
28-
$options = array(
29-
//'ignoreWhitespace' => true,
30-
//'ignoreCase' => true,
31-
);
3239

33-
// Initialize the diff class
34-
// \jblond\diff
35-
$diff = new Diff($a, $b, $options);
40+
<h2>HTML Side by Side Diff</h2>
3641

37-
?>
38-
<h2>Side by Side Diff</h2>
3942
<?php
40-
41-
// Generate a side by side diff
43+
// Generate a side by side diff.
4244
// \jblond\Diff\Renderer\Html
43-
$renderer = new SideBySide(array(
45+
$renderer = new SideBySide([
4446
'title_a' => 'Custom title for OLD version',
4547
'title_b' => 'Custom title for NEW version',
46-
));
48+
]);
4749
echo $diff->Render($renderer);
4850

4951
?>
50-
<h2>Inline Diff</h2>
52+
53+
<h2>HTML Inline Diff</h2>
54+
5155
<?php
5256

53-
// Generate an inline diff
57+
// Generate an inline diff.
5458
// \jblond\Diff\Renderer\Html
5559
$renderer = new Inline();
5660
echo $diff->render($renderer);
57-
5861
?>
59-
<h2>Unified Diff</h2>
60-
<pre><?php
6162

62-
// Generate a unified diff
63-
// \jblond\Diff\Renderer\Text
64-
$renderer = new Unified();
65-
echo htmlspecialchars($diff->render($renderer));
63+
<h2>HTML Unified Diff</h2>
64+
<pre>
65+
<?php
66+
// Generate a unified diff.
67+
// \jblond\Diff\Renderer\Html
68+
$renderer = new HtmlUnified();
69+
echo $diff->render($renderer);
70+
?>
71+
</pre>
6672

67-
?>
73+
<h2>Text Unified Diff</h2>
74+
<pre>
75+
<?php
76+
// Generate a unified diff.
77+
// \jblond\Diff\Renderer\Text
78+
$renderer = new Unified();
79+
echo htmlspecialchars($diff->render($renderer));
80+
?>
6881
</pre>
69-
<h2>Context Diff</h2>
70-
<pre><?php
7182

72-
// Generate a context diff
73-
// jblond\Diff\Renderer\Text\Context
74-
$renderer = new Context();
75-
echo htmlspecialchars($diff->render($renderer));
76-
?>
83+
<h2>Text Context Diff</h2>
84+
<pre>
85+
<?php
86+
// Generate a context diff.
87+
// jblond\Diff\Renderer\Text\Context
88+
$renderer = new Context();
89+
echo htmlspecialchars($diff->render($renderer));
90+
?>
7791
</pre>
7892
</body>
7993
</html>

‎example/styles.css

Lines changed: 115 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,165 @@
11
body {
2-
background: #fff;
3-
font-family: Arial;
4-
font-size: 12px;
2+
background: #FFFFFF;
3+
font-family: Arial;
4+
font-size: 12px;
55
}
6+
7+
pre {
8+
width: 100%;
9+
overflow: auto;
10+
}
11+
12+
/*
13+
* HTML Renderers - General
14+
*/
15+
616
.Differences {
7-
width: 100%;
8-
border-collapse: collapse;
9-
border-spacing: 0;
10-
empty-cells: show;
17+
width: 100%;
18+
border-collapse: collapse;
19+
border-spacing: 0;
20+
empty-cells: show;
1121
}
1222

1323
.Differences thead th {
14-
text-align: left;
15-
border-bottom: 1px solid #000;
16-
background: #aaa;
17-
color: #000;
18-
padding: 4px;
24+
text-align: left;
25+
border-bottom: 1px solid #000000;
26+
background: #AAAAAA;
27+
color: #000000;
28+
padding: 4px;
1929
}
30+
2031
.Differences tbody th {
21-
text-align: right;
22-
background: #ccc;
23-
width: 4em;
24-
padding: 1px 2px;
25-
border-right: 1px solid #000;
26-
vertical-align: top;
27-
font-size: 13px;
32+
text-align: right;
33+
background: #CCCCCC;
34+
width: 4em;
35+
padding: 1px 2px;
36+
border-right: 1px solid #000000;
37+
vertical-align: top;
38+
font-size: 13px;
2839
}
2940

3041
.Differences td {
31-
padding: 1px 2px;
32-
font-family: Consolas, monospace;
33-
font-size: 13px;
42+
padding: 1px 2px;
43+
font-family: Consolas, monospace;
44+
font-size: 13px;
45+
}
46+
47+
.Differences .Skipped {
48+
background: #F7F7F7;
3449
}
3550

51+
/*
52+
* HTML Side by Side Diff
53+
*/
3654
.DifferencesSideBySide .ChangeInsert td.Left {
37-
background: #dfd;
55+
background: #DDFFDD;
3856
}
3957

4058
.DifferencesSideBySide .ChangeInsert td.Right {
41-
background: #cfc;
59+
background: #CCFFCC;
4260
}
4361

4462
.DifferencesSideBySide .ChangeDelete td.Left {
45-
background: #f88;
63+
background: #FF8888;
4664
}
4765

4866
.DifferencesSideBySide .ChangeDelete td.Right {
49-
background: #faa;
67+
background: #FFAAAA;
5068
}
5169

5270
.DifferencesSideBySide .ChangeReplace .Left {
53-
background: #fe9;
71+
background: #FFEE99;
5472
}
5573

5674
.DifferencesSideBySide .ChangeReplace .Right {
57-
background: #fd8;
75+
background: #FFDD88;
5876
}
5977

60-
.Differences ins, .Differences del {
61-
text-decoration: none;
78+
.Differences ins,
79+
.Differences del {
80+
text-decoration: none;
6281
}
6382

64-
.DifferencesSideBySide .ChangeReplace ins, .DifferencesSideBySide .ChangeReplace del {
65-
background: #fc0;
83+
.DifferencesSideBySide .ChangeReplace ins,
84+
.DifferencesSideBySide .ChangeReplace del {
85+
background: #FFCC00;
6686
}
6787

88+
/*
89+
* HTML Inline Diff
90+
*/
6891
.DifferencesInline .ChangeReplace .Left,
6992
.DifferencesInline .ChangeDelete .Left {
70-
background: #fdd;
93+
background: #FFDDDD;
7194
}
7295

7396
.DifferencesInline .ChangeReplace .Right,
7497
.DifferencesInline .ChangeInsert .Right {
75-
background: #dfd;
98+
background: #DDFFDD;
7699
}
77100

78101
.DifferencesInline .ChangeReplace ins {
79-
background: #9e9;
102+
background: #99EE99;
80103
}
81104

82105
.DifferencesInline .ChangeReplace del {
83-
background: #e99;
106+
background: #EE9999;
84107
}
85108

86-
pre {
87-
width: 100%;
88-
overflow: auto;
109+
/*
110+
* HTML Unified Diff
111+
*/
112+
113+
/* Line removed in new */
114+
.DifferencesUnified .ChangeDelete .Left::before {
115+
content: "- \00a0";
116+
}
117+
118+
.DifferencesUnified .ChangeDelete .Left {
119+
background: #CCCCCC;
120+
}
121+
122+
/* Line modified in old and new */
123+
.DifferencesUnified .ChangeReplace {
124+
display: table;
125+
background: #FFEE99;
126+
}
127+
128+
/* Line in old replaced by line in new */
129+
.DifferencesUnified .ChangeReplace .Left:first-child:before {
130+
content: "\250C \00a0";
131+
}
132+
.DifferencesUnified .ChangeReplace .Left:before {
133+
content: "\251C \00a0";
134+
}
135+
.DifferencesUnified .ChangeReplace .Left {
136+
background: #fe9;
137+
}
138+
139+
/* Line in new replaced line in old */
140+
.DifferencesUnified .ChangeReplace .Right:last-of-type:before {
141+
content: "\2514 \00a0";
142+
}
143+
144+
.DifferencesUnified .ChangeReplace .Right:before {
145+
content: "\251C \00a0";
146+
}
147+
148+
.DifferencesUnified .ChangeReplace .Right {
149+
background: #FFEE99;
150+
}
151+
152+
/* Line inserted in new */
153+
.DifferencesUnified .ChangeInsert .Right:before {
154+
content: "+ \00A0";
155+
}
156+
157+
/* Character inserted in line of new */
158+
.DifferencesUnified .ChangeReplace ins {
159+
background: #99EE99;
160+
}
161+
162+
/* Chararcter removed from line in old */
163+
.DifferencesUnified .ChangeReplace del {
164+
background: #EE9999;
89165
}

0 commit comments

Comments
 (0)