angular-diff-match-patch/index.html at master · amweiss/angular-diff-match-patch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app="diffDemo">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>angular-diff-match-patch</title>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.2.2/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="icon" type="image/x-icon" href="https://angularjs.org/favicon.ico">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.2.2/angular-material.min.js"></script>
  <script src="//rawgit.com/google/diff-match-patch/master/javascript/diff_match_patch.js"></script>
  <script src="angular-diff-match-patch.js"></script>
  <style>
    body md-content {
      background-color: #f7f7f7;
    }

    md-card-content pre {
      overflow: auto
    }

    .inputBox {
      height: 100px;
    }

    .match,
    .textdiff span {
      color: gray;
    }

    .ins,
    ins {
      color: black;
      background: #bbffbb;
    }

    .del,
    del {
      color: black;
      background: #ffbbbb;
    }

    .noselect {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  </style>
</head>

<body layout="column" flex ng-controller="diffCtrl">
  <script>
    var app = angular.module('diffDemo', ['ngMaterial', 'diff-match-patch']);
    app.config(function($mdThemingProvider) {
      $mdThemingProvider.theme('default')
        .primaryPalette('indigo')
        .accentPalette('blue');
    });

    app.controller('diffCtrl', ['$scope', function($scope) {
      $scope.left = ['I am the very model of a modern Major-General,',
        'I\'ve information vegetable, animal, and mineral,',
        'I know the kings of England, and I quote the fights historical,',
        'From Marathon to Waterloo, in order categorical.'
      ].join('\n');

      $scope.right = ['I am the very model of a cartoon individual,',
        'My animation\'s comical, unusual, and whimsical,',
        'I know the kings of England, and I quote the fights historical,',
        'From wicked puns and stupid jokes to anvils that drop on your head.'
      ].join('\n');

      $scope.options = {
        editCost: 4,
        interLineDiff: true,
        ignoreTrailingNewLines: true,
        attrs: {
          insert: {
            'data-attr': 'insert',
            'class': 'insertion'
          },
          delete: {
            'data-attr': 'delete'
          },
          equal: {
            'data-attr': 'equal'
          }
        }
      };
    }]);
  </script>

  <md-toolbar>
    <div class="md-toolbar-tools" layout="row">
      <span>angular-diff-match-patch</span>
      <md-button class="md-icon-button" href="https://github.com/amweiss/angular-diff-match-patch" aria-label="Fork me on Github">
        <md-icon>code</md-icon>
      </md-button>
      <md-button class="md-icon-button" href="https://codepen.io/amweiss/pen/grXNPm" aria-label="Open in Codepen">
        <md-icon>edit</md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <md-content flex layout-padding>
    <div flex layout="column">
      <div flex layout="column" layout-gt-md="row">
        <md-card flex>
          <md-card-content>
            <textarea layout-fill class="inputBox" ng-model="left"></textarea>
          </md-card-content>
        </md-card>
        <md-card flex>
          <md-card-content>
            <textarea layout-fill class="inputBox" ng-model="right"></textarea>
          </md-card-content>
        </md-card>
      </div>
      <div flex layout="column" layout-gt-md="row">
        <md-card flex>
          <md-card-content>
            <h2>diff</h2>
            <pre class="textdiff" diff left-obj="left" right-obj="right"></pre>
          </md-card-content>
        </md-card>
        <md-card flex>
          <md-card-content>
            <div layout="row">
              <h2>processingDiff</h2>
              <span flex></span>
              <md-input-container>
                <label>editCost</label><input type="number" step="1" name="editCost" ng-model="options.editCost" min="1"
                  max="99999">
              </md-input-container>
            </div>
            <pre class="textdiff" processing-diff left-obj="left" right-obj="right" options="options"></pre>
          </md-card-content>
        </md-card>
      </div>
      <div flex layout="column" layout-gt-md="row">
        <md-card flex>
          <md-card-content>
            <h2>semanticDiff (with custom attributes)</h2>
            <pre class="textdiff" semantic-diff left-obj="left" right-obj="right" options="options"></pre>
          </md-card-content>
        </md-card>
        <md-card flex>
          <md-card-content>
            <div layout="row">
              <h2>lineDiff</h2>
              <span flex></span>
              <md-input-container>
                <md-checkbox name="interLineDiff" ng-model="options.interLineDiff">interLineDiff</md-checkbox>
              </md-input-container>
              <md-input-container>
                <md-checkbox name="ignoreTrailingNewLines" ng-model="options.ignoreTrailingNewLines">ignoreTrailingNewLines</md-checkbox>
              </md-input-container>
            </div>
            <pre class="textdiff" line-diff left-obj="left" right-obj="right" options="options"></pre>
          </md-card-content>
        </md-card>
      </div>
    </div>
  </md-content>
</body>