New Renderer (#22)

* new renderer

* fix annotation

* PSR2 Sniff

* travis build

* fix condition

* Update example

Signed-off-by: Jack Cherng <jfcherng@gmail.com>

* Some coding style fixes

Signed-off-by: Jack Cherng <jfcherng@gmail.com>

Co-authored-by: Jack Cherng <jfcherng@gmail.com>

Author: hasan-ozbey

example/demo.php

@@ -36,7 +36,7 @@
 
         // options for renderer class
         $rendererOptions = [
-            // how detailed the rendered HTML is? (line, word, char)
+            // how detailed the rendered HTML is? (none, line, word, char)
             'detailLevel' => 'line',
             // renderer language: eng, cht, chs, jpn, ...
             // or an array which has the same keys with a language file
@@ -158,6 +158,22 @@
 
         ?>
 
+        <h1>Combined Diff</h1>
+        <?php
+
+        // generate a combined diff
+        $sideBySideResult = DiffHelper::calculateFiles(
+            $oldFilePath,
+            $newFilePath,
+            'Combined',
+            $diffOptions,
+            $rendererOptions
+        );
+
+        echo $sideBySideResult;
+
+        ?>
+
         <h1>Unified Diff</h1>
         <pre><?php
 

example/diff-table.css

@@ -86,6 +86,9 @@
 .diff-wrapper.diff.diff-html .change .new {
   background: #e1fbe1;
 }
+.diff-wrapper.diff.diff-html .change .rep {
+  background: #fef6d9;
+}
 .diff-wrapper.diff.diff-html .change ins,
 .diff-wrapper.diff.diff-html .change del {
   font-weight: 700;

example/diff-table.scss

@@ -10,6 +10,7 @@
 
   $bg-color-insert-base: #8e8;
   $bg-color-delete-base: #e88;
+  $bg-color-replace-base: #fbdb65;
 
   $op-highlight-ratio: 90%;
   $op-normal-ratio: 25%;
@@ -21,6 +22,7 @@
   // colors for operation rows
   $bg-color-insert: mix($bg-color-insert-base, $bg-color, $op-normal-ratio);
   $bg-color-delete: mix($bg-color-delete-base, $bg-color, $op-normal-ratio);
+  $bg-color-replace: mix($bg-color-replace-base, $bg-color, $op-normal-ratio);
 
   $table-head-color: mix($bg-color, $text-color, 65%);
   $table-sidebar-color: mix($bg-color, $text-color, 80%);
@@ -141,6 +143,10 @@
         background: $bg-color-insert;
       }
 
+      .rep {
+        background: $bg-color-replace;
+      }
+
       ins,
       del {
         font-weight: 700;