├── .gitignore
├── Gruntfile.coffee
├── LICENSE
├── dist
    ├── jquery.phpdiffmerge.css
    ├── jquery.phpdiffmerge.js
    ├── jquery.phpdiffmerge.min.css
    └── jquery.phpdiffmerge.min.js
├── example
    ├── a.txt
    ├── b.txt
    ├── composer.json
    ├── index.php
    └── style.css
├── karma.conf.coffee
├── package.json
├── readme.md
├── src
    ├── phpdiffmerge.js
    └── phpdiffmerge.less
└── tests
    └── phpdiffmergeSpec.coffee


/.gitignore:
--------------------------------------------------------------------------------
1 | /example/vendor/
2 | /node_modules/
3 | /example/composer.lock
4 | /package-lock.json
5 | 


--------------------------------------------------------------------------------
/Gruntfile.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (grunt) ->
 2 |   require('load-grunt-tasks')(grunt)
 3 |   grunt.loadTasks 'tasks'
 4 | 
 5 | 
 6 |   grunt.initConfig
 7 |     pkg: grunt.file.readJSON 'package.json'
 8 |     meta:
 9 |       banner: """/*!
10 |                   * <%= pkg.name %> - <%= pkg.description %>
11 |                   * v<%= pkg.version %> - <%= grunt.template.today("UTC:yyyy-mm-dd h:MM:ss TT Z") %>
12 |                   * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %>; License: <%= pkg.license %>
13 |                   */
14 | 
15 |               """
16 |       minbanner: """/*!
17 |                   * <%= pkg.name %> v<%= pkg.version %> - Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %> - License: <%= pkg.license %>
18 |                   */
19 |               """
20 | 
21 |     less:
22 |       dist:
23 |         files:
24 |           'dist/<%= pkg.compactname %>.css': ['src/phpdiffmerge.less']
25 | 
26 |     cssmin:
27 |       options:
28 |          banner: '<%= meta.minbanner %>'
29 |       styles:
30 |         files:
31 |           'dist/<%= pkg.compactname %>.min.css': ['dist/<%= pkg.compactname %>.css']
32 | 
33 |     concat:
34 |       options:
35 |         stripBanners: true
36 |         banner: '<%= meta.banner %>'
37 |       dist:
38 |         src: ['src/phpdiffmerge.js']
39 |         dest: 'dist/<%= pkg.compactname %>.js'
40 |       styles:
41 |         src: ['dist/<%= pkg.compactname %>.css']
42 |         dest: 'dist/<%= pkg.compactname %>.css'
43 | 
44 |     uglify:
45 |       options:
46 |          banner: '<%= meta.minbanner %>\n'
47 |       dist:
48 |         files:
49 |           'dist/<%= pkg.compactname %>.min.js': ['dist/<%= pkg.compactname %>.js']
50 | 
51 |     karma:
52 |       options:
53 |         configFile: 'karma.conf.coffee'
54 | 
55 |       single:
56 |         singleRun: true
57 | 
58 |       watch:
59 |         singleRun: false
60 |         autoWatch: true
61 | 
62 |     bump:
63 |       options:
64 |         files: ['package.json']
65 |         updateConfigs: ['pkg']
66 |         commitFiles: ['package.json', 'dist/']
67 |         tagName: 'v%VERSION%'
68 |         pushTo: 'origin'
69 | 
70 | 
71 |   grunt.registerTask 'test', ['karma:single']
72 |   grunt.registerTask 'watch', ['karma:watch']
73 |   grunt.registerTask 'build', ['less', 'cssmin', 'concat', 'uglify']
74 |   grunt.registerTask 'default', ['test', 'build']
75 |   grunt.registerTask 'release', (type) -> grunt.task.run ['test', "bump-only:#{type||'patch'}", 'build', 'bump-commit']
76 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (C) 2014 Hannes Diercks
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
 9 | of the Software, and to permit persons to whom the Software is furnished to do
10 | so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/dist/jquery.phpdiffmerge.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 | * jQuery-Merge-for-php-diff - A jQuery plugin for handling the conflicts between two documents.
 3 | * v0.3.2 - 2014-05-13 3:53:31 PM UTC
 4 | * Copyright (c) 2014 Hannes Diercks <github@xiphe.net>; License: MIT
 5 | */
 6 | .Differences .ChangeReplace td,
 7 | .Differences .ChangeInsert td,
 8 | .Differences .ChangeDelete td {
 9 |   cursor: pointer;
10 | }
11 | .Differences .ChangeReplace td.hover,
12 | .Differences .ChangeInsert td.hover,
13 | .Differences .ChangeDelete td.hover,
14 | .Differences .ChangeReplace td.dontUse.hover,
15 | .Differences .ChangeInsert td.dontUse.hover,
16 | .Differences .ChangeDelete td.dontUse.hover {
17 |   background: #000;
18 |   color: #fff;
19 | }
20 | .Differences .ChangeReplace td.hover del,
21 | .Differences .ChangeInsert td.hover del,
22 | .Differences .ChangeDelete td.hover del,
23 | .Differences .ChangeReplace td.dontUse.hover del,
24 | .Differences .ChangeInsert td.dontUse.hover del,
25 | .Differences .ChangeDelete td.dontUse.hover del,
26 | .Differences .ChangeReplace td.hover ins,
27 | .Differences .ChangeInsert td.hover ins,
28 | .Differences .ChangeDelete td.hover ins,
29 | .Differences .ChangeReplace td.dontUse.hover ins,
30 | .Differences .ChangeInsert td.dontUse.hover ins,
31 | .Differences .ChangeDelete td.dontUse.hover ins {
32 |   background: #000;
33 |   color: #fff;
34 | }
35 | .Differences .ChangeReplace td.use.hover,
36 | .Differences .ChangeInsert td.use.hover,
37 | .Differences .ChangeDelete td.use.hover {
38 |   cursor: default;
39 |   color: #000;
40 | }
41 | .Differences .ChangeReplace td.use.hover del,
42 | .Differences .ChangeInsert td.use.hover del,
43 | .Differences .ChangeDelete td.use.hover del,
44 | .Differences .ChangeReplace td.use.hover ins,
45 | .Differences .ChangeInsert td.use.hover ins,
46 | .Differences .ChangeDelete td.use.hover ins {
47 |   background: #6EEF81;
48 |   color: #000;
49 | }
50 | .Differences .ChangeReplace td.use,
51 | .Differences .ChangeInsert td.use,
52 | .Differences .ChangeDelete td.use {
53 |   background: #6EEF81;
54 | }
55 | .Differences .ChangeReplace td.dontUse,
56 | .Differences .ChangeInsert td.dontUse,
57 | .Differences .ChangeDelete td.dontUse {
58 |   background: #F7F7F7;
59 |   color: #DDDDDD;
60 | }
61 | .Differences .ChangeReplace td.use del,
62 | .Differences .ChangeReplace td.use.hover del,
63 | .Differences .ChangeReplace td.use ins,
64 | .Differences .ChangeReplace td.use.hover ins {
65 |   background: #0CD123;
66 | }
67 | .Differences .ChangeReplace td.dontUse del,
68 | .Differences .ChangeReplace td.dontUse ins {
69 |   background: #DDDDDD;
70 |   color: #BBBBBB;
71 | }
72 | .Differences.DifferencesInline .ChangeDelete td.use.hover,
73 | .Differences.DifferencesInline .ChangeInsert td.use.hover {
74 |   cursor: pointer;
75 | }
76 | .Differences.DifferencesInline .ChangeDelete td.hover,
77 | .Differences.DifferencesInline .ChangeInsert td.hover,
78 | .Differences.DifferencesInline .ChangeDelete td.dontUse.hover,
79 | .Differences.DifferencesInline .ChangeInsert td.dontUse.hover {
80 |   background: #000;
81 |   color: #fff;
82 | }
83 | .Differences.DifferencesInline .ChangeDelete td.hover del,
84 | .Differences.DifferencesInline .ChangeInsert td.hover del,
85 | .Differences.DifferencesInline .ChangeDelete td.dontUse.hover del,
86 | .Differences.DifferencesInline .ChangeInsert td.dontUse.hover del,
87 | .Differences.DifferencesInline .ChangeDelete td.hover ins,
88 | .Differences.DifferencesInline .ChangeInsert td.hover ins,
89 | .Differences.DifferencesInline .ChangeDelete td.dontUse.hover ins,
90 | .Differences.DifferencesInline .ChangeInsert td.dontUse.hover ins {
91 |   background: #000;
92 |   color: #fff;
93 | }
94 | 


--------------------------------------------------------------------------------
/dist/jquery.phpdiffmerge.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | * jQuery-Merge-for-php-diff - A jQuery plugin for handling the conflicts between two documents.
  3 | * v0.3.2 - 2014-05-13 3:53:31 PM UTC
  4 | * Copyright (c) 2014 Hannes Diercks <github@xiphe.net>; License: MIT
  5 | */
  6 | (function($) {
  7 |   'use strict';
  8 | 
  9 |   var pluginName = 'phpdiffmerge',
 10 |     defaults = {
 11 |       left: '',
 12 |       right: '',
 13 |       debug: false,
 14 |       pupupResult: false,
 15 |       pupupSources: false,
 16 |       merged: $.noop()
 17 |     },
 18 |     count = 0;
 19 | 
 20 |   /* PHPDiffMerge constructor */
 21 |   function PHPDiffMerge(element, options) {
 22 |     var self = this;
 23 | 
 24 |     self._id = 1 + count++;
 25 |     self.$el = $(element);
 26 | 
 27 |     self.options = $.extend({}, defaults, options);
 28 | 
 29 |     self._defaults = defaults;
 30 |     self._name = pluginName;
 31 | 
 32 |     /*** PUBLIC VARIABLES ***/
 33 | 
 34 |     /* The conflict elements */
 35 |     self.$conflicts = $();
 36 | 
 37 |     /* Collection of conflict classes */
 38 |     self.conflicts = [];
 39 | 
 40 |     /* Counters of conflicts left */
 41 |     self.toResolve = 0;
 42 |     self.toMerge = 0;
 43 | 
 44 |     /* Indicator if the diff is inline or side-by-side */
 45 |     self.inline = false;
 46 | 
 47 |     /* The resulting merge */
 48 |     self.result = [];
 49 | 
 50 |     self.lineOffset = 0;
 51 |     self._tmpLineOffset = 0;
 52 | 
 53 | 
 54 |     self._init();
 55 |   }
 56 | 
 57 |   PHPDiffMerge.prototype = {
 58 | 
 59 |     /*** CONSTRUCTION ***/
 60 |     _init: function() {
 61 |       var self = this;
 62 | 
 63 |       /* Say Hello */
 64 |       self._debug('PHPDiffMerge about to be initiated with options:', self.options);
 65 | 
 66 |       /* Find conflict containers */
 67 |       self.$conflicts = self.$el.find('.ChangeReplace, .ChangeDelete, .ChangeInsert');
 68 |       /* Set the counters */
 69 |       self.toResolve = self.$conflicts.length;
 70 | 
 71 |       /* Check if we have enough data to work */
 72 |       if (self.toResolve <= 0 || (self.options.left === '' && self.options.right === '')) {
 73 |         self._debug('Nothing to merge or merge sources not available - ' +
 74 |           'Please submit left and right on plug-in initiation!');
 75 |         return false;
 76 |       }
 77 | 
 78 |       /* Check if table style is inline */
 79 |       this.inline = self.$el.hasClass('DifferencesInline');
 80 | 
 81 |       self._ensurePresenceOfMergeButton();
 82 | 
 83 |       /* Initiate Conflicts */
 84 |       $.each(self.$conflicts, function() {
 85 |         self.conflicts.push(new Conflict(this, self));
 86 |       });
 87 | 
 88 |       /* Register event listeners for completion actions */
 89 |       self.$conflicts.on('xiphe_phpdiffmerge_resolved', $.proxy(self._conflictResolved, self));
 90 |       self.$conflicts.on('xiphe_phpdiffmerge_merged', $.proxy(self._conflictMerged, self));
 91 |       self.$conflicts.on('xiphe_phpdiffmerge_merged', $.proxy(self._updateLineOffset, self));
 92 | 
 93 |       self._debug('PHPDiffMerge initiated', self);
 94 |     },
 95 | 
 96 | 
 97 |     /*** PUBLIC METHODS ***/
 98 | 
 99 |     /**
100 |      * Select all changes on the right side.
101 |      */
102 |     useRight: function() {
103 |       var self = this;
104 | 
105 |       self.$conflicts.find('td.Right').click();
106 |       if (self.$el.hasClass('DifferencesInline')) {
107 |         self.$el.find('.ChangeDelete td.Left').click().click();
108 |       }
109 |     },
110 | 
111 |     /**
112 |      * Selects all changes on the right.
113 |      */
114 |     useLeft: function() {
115 |       var self = this;
116 | 
117 |       self.$conflicts.find('td.Left').click();
118 |       if (self.$el.hasClass('DifferencesInline')) {
119 |         self.$el.find('.ChangeInsert td.Right').click().click();
120 |       }
121 |     },
122 | 
123 |     /**
124 |      * Start the merge process
125 |      */
126 |     merge: function(event) {
127 |       var self = this;
128 | 
129 |       if (typeof event !== 'undefined' && event !== null) {
130 |         event.preventDefault();
131 |       }
132 | 
133 |       /* Don't work, if any conflicts are unresolved */
134 |       if (self.options.button.attr('disabled') === 'disabled') {
135 |         self._debug('Unable to merge: not all conflicts have been resolved.');
136 |         return;
137 |       }
138 | 
139 |       /* Initiate the end by cloning the left side. */
140 |       self.result = self.options.left.slice(0);
141 | 
142 |       /* Reset line offset */
143 |       self.lineOffset = 0;
144 | 
145 |       /* Reset the todo counter */
146 |       self.toMerge = self.$conflicts.length;
147 | 
148 |       for (var i = 0; i < self.conflicts.length; i++) {
149 |         self.conflicts[i].merge();
150 |       }
151 |     },
152 | 
153 |     /**
154 |      * change options AFTER initialization
155 |      *
156 |      * @param {object} options a plain options object
157 |      */
158 |     option: function(options) {
159 |       var self = this;
160 | 
161 |       if ($.isPlainObject(options)) {
162 |         self.options = $.extend(true, self.options, options);
163 |       }
164 |     },
165 | 
166 | 
167 |     /*** PROTECTED METHODS ***/
168 | 
169 |     /*
170 |      * Check if a merge button is available or generate one.
171 |      */
172 |     _ensurePresenceOfMergeButton: function() {
173 |       var self = this;
174 | 
175 |       if (typeof self.options.button === 'undefined' || !$(self.options.button).length) {
176 |         self.options.button = $('<button />')
177 |           .html('Merge')
178 |           .attr('disabled', 'disabled')
179 |           .css({
180 |             display: 'block',
181 |             height: '50px',
182 |             width: '200px',
183 |             margin: '50px auto'
184 |           });
185 |         self.$el.after(self.options.button);
186 |       } else {
187 |         self.options.button = $(self.options.button).attr('disabled', 'disabled');
188 |       }
189 | 
190 |       /* Merge on click */
191 |       self.options.button.click($.proxy(self.merge, self));
192 |     },
193 | 
194 |     _debug: function() {
195 |       if (this.options.debug && window.console && window.console.log) {
196 |         window.console.log(Array.prototype.slice.call(arguments));
197 |       }
198 |     },
199 | 
200 |     /* callback for whenever a conflict is resolved */
201 |     _conflictResolved: function() {
202 |       var self = this;
203 | 
204 |       self.toResolve--;
205 |       if (self.toResolve === 0) {
206 |         self.options.button.removeAttr('disabled');
207 |       }
208 |     },
209 | 
210 |     /* callback for whenever a conflict is merged */
211 |     _conflictMerged: function() {
212 |       var self = this;
213 | 
214 |       self.toMerge--;
215 |       if (self.toMerge === 0) {
216 |         if (self.options.pupupResult) {
217 |           popup('end', self.result.join('\n'));
218 |         }
219 |         /* Pup-up the sources if set in configuration */
220 |         if (self.options.pupupSources) {
221 |           popup('left', self.options.left.join('\n'));
222 |           popup('right', self.options.right.join('\n'));
223 |         }
224 |         /* Call the merged-callback if callable */
225 |         if (typeof self.options.merged === 'function') {
226 |           self.options.merged.call(self, self.result, self.options.left, self.options.right);
227 |         }
228 |       }
229 |     },
230 | 
231 |     /* Delete a given amount of rows at a specific index from the result. */
232 |     _deleteResult: function(index, length) {
233 |       var self = this;
234 | 
235 |       /* Delete the left rows */
236 |       self._debug('Deleting Left: ' + index + ' - ' + (index + length - 1) + '.');
237 |       var out = self.result.splice((index + self.lineOffset - 1), length);
238 | 
239 |       if (self.options.debug) {
240 |         out = out.map(function(value) { return $.trim(value).substring(0, 10) + '...'; });
241 |         self._debug('Content: ', out);
242 |       }
243 | 
244 |       /* Set new Line Offset */
245 |       self._tmpLineOffset -= length;
246 |     },
247 | 
248 |     /* Insert a given amount of rows at a specific index from the right side to the result. */
249 |     _insertResult: function(index, length, targetIndex) {
250 |       var self = this;
251 |       var insert = [];
252 | 
253 |       /* Insert the right rows. */
254 |       for (var i = 0; i < length; i++) {
255 |         /* Get the content from the right site */
256 |         var line = self.options.right[index - 1 + i];
257 |         insert.push(line);
258 | 
259 |         /* inject it to the following line on the left side */
260 |         self.result.splice((targetIndex - 1 + self.lineOffset + i), 0, line);
261 |       }
262 | 
263 |       if (self.options.debug) {
264 |         self._debug('Left line prior to insertion: ' + (targetIndex - 1));
265 |         self._debug(
266 |           'Content: ', $.trim(self.result[targetIndex - 2 + self.lineOffset]).substring(0, 10)
267 |         );
268 | 
269 |         self._debug('Inserted Right: Row ' + index + ' - ' + (index + length - 1) + '.');
270 | 
271 |         insert = insert.map(function(value) {
272 |           return $.trim(value).substring(0, 10) + '...';
273 |         });
274 |         self._debug('Content: (' + insert.join(', ') + ')');
275 |       }
276 | 
277 |       /* Set new Line Offset */
278 |       self._tmpLineOffset += length;
279 |     },
280 | 
281 |     _updateLineOffset: function() {
282 |       var self = this;
283 | 
284 |       self._debug('Change lineOffset from: ' + self.lineOffset + ' to ' +
285 |         (self.lineOffset + self._tmpLineOffset) + '.');
286 |       self.lineOffset += self._tmpLineOffset;
287 |       self._tmpLineOffset = 0;
288 |     }
289 |   };
290 | 
291 |   /* Conflict Constructor */
292 |   function Conflict(element, master) {
293 |     var self = this;
294 | 
295 |     self.$el = $(element);
296 |     self.master = master;
297 | 
298 |     self._resolved = false;
299 |     self.type = '';
300 |     self.useLeft = false;
301 |     self.leftLine = 0;
302 |     self.rightLine = 0;
303 |     self.rowsLeft = 0;
304 |     self.rowsRight = 0;
305 | 
306 |     self._init();
307 |   }
308 | 
309 |   Conflict.prototype = {
310 | 
311 |     /*** CONSTRUCTION ***/
312 |     _init: function() {
313 |       var self = this;
314 | 
315 |       self.type = self.$el.attr('class').match(/Change([\w]+)/)[1];
316 | 
317 |       self.$el.find('td')
318 |         .click($.proxy(self._clicked, self))
319 |         .hover($.proxy(self._hoverIn, self), $.proxy(self._hoverOut, self));
320 | 
321 |       self._setLine();
322 |       self._setRows();
323 | 
324 |       self.master._debug('Conflict initiated:', self);
325 |     },
326 | 
327 | 
328 |     /*** PUBLIC METHODS ***/
329 | 
330 |     merge: function() {
331 |       var self = this;
332 | 
333 |       if (self.useLeft) {
334 |         self.master._debug(
335 |           'Ignoring lines ' + self.leftLine + ' - ' + (self.leftLine + self.rowsLeft - 1) + '.'
336 |         );
337 |         self.$el.trigger('xiphe_phpdiffmerge_merged');
338 |         return;
339 |       }
340 | 
341 |       self.master._debug('Merging Conflict:', self);
342 | 
343 |       switch (self.type) {
344 |         case 'Replace':
345 |           self._delete();
346 |           self._insert();
347 |           break;
348 |         case 'Insert':
349 |           self._insert();
350 |           break;
351 |         case 'Delete':
352 |           self._delete();
353 |           break;
354 |         default:
355 |           logError('Undefined merge method "' + self.type + '".');
356 |           return;
357 |       }
358 | 
359 |       self.$el.trigger('xiphe_phpdiffmerge_merged');
360 |     },
361 | 
362 | 
363 |     /*** PRIVATE METHODS ***/
364 | 
365 |     _hoverIn: function(event) {
366 |       var $target = $(event.delegateTarget);
367 | 
368 |       var h = $target.hasClass('Left') ? 'Left' : 'Right';
369 |       this.$el.find('td.' + h).addClass('hover');
370 |     },
371 | 
372 |     _hoverOut: function() {
373 |       this.$el.find('td.hover').removeClass('hover');
374 |     },
375 | 
376 |     _clicked: function(event) {
377 |       var self = this;
378 |       var $target = $(event.delegateTarget), use, dont;
379 | 
380 |       if (!self.master.inline) {
381 |         self.useLeft = $target.hasClass('Left');
382 |       } else {
383 |         self.useLeft = $target.hasClass('use');
384 |         if ($target.hasClass('Left')) {
385 |           self.useLeft = !self.useLeft;
386 |         }
387 |       }
388 | 
389 |       use = self.useLeft ? 'Left' : 'Right';
390 |       dont = self.useLeft ? 'Right' : 'Left';
391 | 
392 |       /* Highlight the current clicked change. */
393 |       if (self.master.inline &&
394 |         (self.type === 'Delete' || self.type === 'Insert')
395 |       ) {
396 |         var $c = self.$el.find('td');
397 |         $c.toggleClass('use');
398 |         $c.toggleClass('dontUse', !$c.hasClass('use'));
399 |       } else {
400 |         self.$el.find('td.' + use).removeClass('dontUse').addClass('use');
401 |         self.$el.find('td.' + dont).removeClass('use').addClass('dontUse');
402 |       }
403 | 
404 |       /* Consider this conflict as resolved if it is clicked for the first time. */
405 |       if (!self._resolved) {
406 |         self._resolved = true;
407 |         self.$el.trigger('xiphe_phpdiffmerge_resolved');
408 |       }
409 |     },
410 | 
411 |     _setLine: function() {
412 |       var self = this;
413 | 
414 |       /*
415 |        * Get the first line of the conflict from the previous table
416 |        * because there was a bug with the line numbers in php-diff.
417 |        */
418 |       var previousRow = self.$el.prev('tbody').find('tr').last();
419 | 
420 |       self.leftLine = parseInt((previousRow.find('th').first().html() || 0), 10) + 1;
421 |       self.rightLine = parseInt((previousRow.find('th').last().html() || 0), 10) + 1;
422 |     },
423 | 
424 |     _setRows: function() {
425 |       var self = this;
426 | 
427 |       if (self.master.inline) {
428 |         self.rowsLeft = self.$el.find('.Left').length;
429 |         self.rowsRight = self.$el.find('.Right').length;
430 |       } else {
431 |         self.rowsLeft = 0;
432 |         self.$el.find('.Left').each(function() {
433 |           if ($(this).prev('th').html() !== '&nbsp;') {
434 |             self.rowsLeft++;
435 |           }
436 |         });
437 |         self.rowsRight = 0;
438 |         self.$el.find('.Right').each(function() {
439 |           if ($(this).prev('th').html() !== '&nbsp;') {
440 |             self.rowsRight++;
441 |           }
442 |         });
443 |       }
444 |     },
445 | 
446 |     _insert: function() {
447 |       var self = this;
448 | 
449 |       self.master._insertResult(self.rightLine, self.rowsRight, self.leftLine);
450 |     },
451 | 
452 |     _delete: function() {
453 |       var self = this;
454 | 
455 |       self.master._deleteResult(self.leftLine, self.rowsLeft);
456 |     }
457 |   };
458 | 
459 |   /**
460 |    * Generate a pup-up window with the given content.
461 |    *
462 |    * @param {string} title   the title for the new window
463 |    * @param {string} content the content for the new window
464 |    */
465 |   function popup(title, content) {
466 |     var newWin = window.open('popup.html');
467 |     // http://css-tricks.com/snippets/javascript/htmlentities-for-javascript/
468 |     content = content.replace(/&/g, '&amp;')
469 |       .replace(/</g, '&lt;')
470 |       .replace(/>/g, '&gt;')
471 |       .replace(/"/g, '&quot;');
472 | 
473 |     newWin.document.write('<html><head><title>' + title + '</title></head><body><pre>' +
474 |       content + '</pre></body></html>');
475 |   }
476 | 
477 |   // helper function for logging errors
478 |   // $.error breaks jQuery chaining
479 |   // From jquery.isotope.js
480 |   var logError = function(message) {
481 |     if (window.console) {
482 |       window.console.error(message);
483 |     }
484 |   };
485 | 
486 |   // =======================  Plugin bridge  ===============================
487 |   // From jquery.isotope.js
488 |   // https://github.com/desandro/isotope/blob/master/jquery.isotope.js#L1363
489 |   //
490 |   // A bit from jQuery UI
491 |   //   https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js
492 |   // A bit from jcarousel
493 |   //   https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js
494 |   $.fn[pluginName] = function(options) {
495 |     var self = this;
496 | 
497 |     if (typeof options === 'string') {
498 |       // call method
499 |       var args = Array.prototype.slice.call(arguments, 1);
500 | 
501 |       self.each(function() {
502 |         var instance = $.data(this, 'plugin_' + pluginName);
503 |         if (!instance) {
504 |           logError('cannot call methods on ' + pluginName + ' prior to initialization; ' +
505 |               'attempted to call method "' + options + '"');
506 |           return;
507 |         }
508 |         if (!$.isFunction(instance[options]) || options.charAt(0) === '_') {
509 |           logError('no such method "' + options + '" for ' + pluginName + ' instance');
510 |           return;
511 |         }
512 |         // apply method
513 |         instance[options].apply(instance, args);
514 |       });
515 |     } else {
516 |       self.each(function() {
517 |         var instance = $.data(this, 'plugin_' + pluginName);
518 |         if (instance) {
519 |           // apply options & init
520 |           instance.option(options);
521 |           instance._init();
522 |         } else {
523 |           // initialize new instance
524 |           $.data(this, 'plugin_' + pluginName, new PHPDiffMerge(this, options));
525 |         }
526 |       });
527 |     }
528 |     // return jQuery object
529 |     // so plugin methods do not have to
530 |     return self;
531 |   };
532 | 
533 | })(jQuery);
534 | 


--------------------------------------------------------------------------------
/dist/jquery.phpdiffmerge.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * jQuery-Merge-for-php-diff v0.3.2 - Copyright (c) 2014 Hannes Diercks <github@xiphe.net> - License: MIT
3 | */
4 | .Differences .ChangeDelete td,.Differences .ChangeInsert td,.Differences .ChangeReplace td{cursor:pointer}.Differences .ChangeDelete td.dontUse.hover,.Differences .ChangeDelete td.dontUse.hover del,.Differences .ChangeDelete td.dontUse.hover ins,.Differences .ChangeDelete td.hover,.Differences .ChangeDelete td.hover del,.Differences .ChangeDelete td.hover ins,.Differences .ChangeInsert td.dontUse.hover,.Differences .ChangeInsert td.dontUse.hover del,.Differences .ChangeInsert td.dontUse.hover ins,.Differences .ChangeInsert td.hover,.Differences .ChangeInsert td.hover del,.Differences .ChangeInsert td.hover ins,.Differences .ChangeReplace td.dontUse.hover,.Differences .ChangeReplace td.dontUse.hover del,.Differences .ChangeReplace td.dontUse.hover ins,.Differences .ChangeReplace td.hover,.Differences .ChangeReplace td.hover del,.Differences .ChangeReplace td.hover ins{background:#000;color:#fff}.Differences .ChangeDelete td.use.hover,.Differences .ChangeInsert td.use.hover,.Differences .ChangeReplace td.use.hover{cursor:default;color:#000}.Differences .ChangeDelete td.use.hover del,.Differences .ChangeDelete td.use.hover ins,.Differences .ChangeInsert td.use.hover del,.Differences .ChangeInsert td.use.hover ins,.Differences .ChangeReplace td.use.hover del,.Differences .ChangeReplace td.use.hover ins{background:#6EEF81;color:#000}.Differences .ChangeDelete td.use,.Differences .ChangeInsert td.use,.Differences .ChangeReplace td.use{background:#6EEF81}.Differences .ChangeDelete td.dontUse,.Differences .ChangeInsert td.dontUse,.Differences .ChangeReplace td.dontUse{background:#F7F7F7;color:#DDD}.Differences .ChangeReplace td.use del,.Differences .ChangeReplace td.use ins,.Differences .ChangeReplace td.use.hover del,.Differences .ChangeReplace td.use.hover ins{background:#0CD123}.Differences .ChangeReplace td.dontUse del,.Differences .ChangeReplace td.dontUse ins{background:#DDD;color:#BBB}.Differences.DifferencesInline .ChangeDelete td.use.hover,.Differences.DifferencesInline .ChangeInsert td.use.hover{cursor:pointer}.Differences.DifferencesInline .ChangeDelete td.dontUse.hover,.Differences.DifferencesInline .ChangeDelete td.dontUse.hover del,.Differences.DifferencesInline .ChangeDelete td.dontUse.hover ins,.Differences.DifferencesInline .ChangeDelete td.hover,.Differences.DifferencesInline .ChangeDelete td.hover del,.Differences.DifferencesInline .ChangeDelete td.hover ins,.Differences.DifferencesInline .ChangeInsert td.dontUse.hover,.Differences.DifferencesInline .ChangeInsert td.dontUse.hover del,.Differences.DifferencesInline .ChangeInsert td.dontUse.hover ins,.Differences.DifferencesInline .ChangeInsert td.hover,.Differences.DifferencesInline .ChangeInsert td.hover del,.Differences.DifferencesInline .ChangeInsert td.hover ins{background:#000;color:#fff}


--------------------------------------------------------------------------------
/dist/jquery.phpdiffmerge.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * jQuery-Merge-for-php-diff v0.3.2 - Copyright (c) 2014 Hannes Diercks <github@xiphe.net> - License: MIT
3 | */
4 | !function(a){"use strict";function b(b,c){var d=this;d._id=1+g++,d.$el=a(b),d.options=a.extend({},f,c),d._defaults=f,d._name=e,d.$conflicts=a(),d.conflicts=[],d.toResolve=0,d.toMerge=0,d.inline=!1,d.result=[],d.lineOffset=0,d._tmpLineOffset=0,d._init()}function c(b,c){var d=this;d.$el=a(b),d.master=c,d._resolved=!1,d.type="",d.useLeft=!1,d.leftLine=0,d.rightLine=0,d.rowsLeft=0,d.rowsRight=0,d._init()}function d(a,b){var c=window.open("popup.html");b=b.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),c.document.write("<html><head><title>"+a+"</title></head><body><pre>"+b+"</pre></body></html>")}var e="phpdiffmerge",f={left:"",right:"",debug:!1,pupupResult:!1,pupupSources:!1,merged:a.noop()},g=0;b.prototype={_init:function(){var b=this;return b._debug("PHPDiffMerge about to be initiated with options:",b.options),b.$conflicts=b.$el.find(".ChangeReplace, .ChangeDelete, .ChangeInsert"),b.toResolve=b.$conflicts.length,b.toResolve<=0||""===b.options.left&&""===b.options.right?(b._debug("Nothing to merge or merge sources not available - Please submit left and right on plug-in initiation!"),!1):(this.inline=b.$el.hasClass("DifferencesInline"),b._ensurePresenceOfMergeButton(),a.each(b.$conflicts,function(){b.conflicts.push(new c(this,b))}),b.$conflicts.on("xiphe_phpdiffmerge_resolved",a.proxy(b._conflictResolved,b)),b.$conflicts.on("xiphe_phpdiffmerge_merged",a.proxy(b._conflictMerged,b)),b.$conflicts.on("xiphe_phpdiffmerge_merged",a.proxy(b._updateLineOffset,b)),void b._debug("PHPDiffMerge initiated",b))},useRight:function(){var a=this;a.$conflicts.find("td.Right").click(),a.$el.hasClass("DifferencesInline")&&a.$el.find(".ChangeDelete td.Left").click().click()},useLeft:function(){var a=this;a.$conflicts.find("td.Left").click(),a.$el.hasClass("DifferencesInline")&&a.$el.find(".ChangeInsert td.Right").click().click()},merge:function(a){var b=this;if("undefined"!=typeof a&&null!==a&&a.preventDefault(),"disabled"===b.options.button.attr("disabled"))return void b._debug("Unable to merge: not all conflicts have been resolved.");b.result=b.options.left.slice(0),b.lineOffset=0,b.toMerge=b.$conflicts.length;for(var c=0;c<b.conflicts.length;c++)b.conflicts[c].merge()},option:function(b){var c=this;a.isPlainObject(b)&&(c.options=a.extend(!0,c.options,b))},_ensurePresenceOfMergeButton:function(){var b=this;"undefined"!=typeof b.options.button&&a(b.options.button).length?b.options.button=a(b.options.button).attr("disabled","disabled"):(b.options.button=a("<button />").html("Merge").attr("disabled","disabled").css({display:"block",height:"50px",width:"200px",margin:"50px auto"}),b.$el.after(b.options.button)),b.options.button.click(a.proxy(b.merge,b))},_debug:function(){this.options.debug&&window.console&&window.console.log&&window.console.log(Array.prototype.slice.call(arguments))},_conflictResolved:function(){var a=this;a.toResolve--,0===a.toResolve&&a.options.button.removeAttr("disabled")},_conflictMerged:function(){var a=this;a.toMerge--,0===a.toMerge&&(a.options.pupupResult&&d("end",a.result.join("\n")),a.options.pupupSources&&(d("left",a.options.left.join("\n")),d("right",a.options.right.join("\n"))),"function"==typeof a.options.merged&&a.options.merged.call(a,a.result,a.options.left,a.options.right))},_deleteResult:function(b,c){var d=this;d._debug("Deleting Left: "+b+" - "+(b+c-1)+".");var e=d.result.splice(b+d.lineOffset-1,c);d.options.debug&&(e=e.map(function(b){return a.trim(b).substring(0,10)+"..."}),d._debug("Content: ",e)),d._tmpLineOffset-=c},_insertResult:function(b,c,d){for(var e=this,f=[],g=0;c>g;g++){var h=e.options.right[b-1+g];f.push(h),e.result.splice(d-1+e.lineOffset+g,0,h)}e.options.debug&&(e._debug("Left line prior to insertion: "+(d-1)),e._debug("Content: ",a.trim(e.result[d-2+e.lineOffset]).substring(0,10)),e._debug("Inserted Right: Row "+b+" - "+(b+c-1)+"."),f=f.map(function(b){return a.trim(b).substring(0,10)+"..."}),e._debug("Content: ("+f.join(", ")+")")),e._tmpLineOffset+=c},_updateLineOffset:function(){var a=this;a._debug("Change lineOffset from: "+a.lineOffset+" to "+(a.lineOffset+a._tmpLineOffset)+"."),a.lineOffset+=a._tmpLineOffset,a._tmpLineOffset=0}},c.prototype={_init:function(){var b=this;b.type=b.$el.attr("class").match(/Change([\w]+)/)[1],b.$el.find("td").click(a.proxy(b._clicked,b)).hover(a.proxy(b._hoverIn,b),a.proxy(b._hoverOut,b)),b._setLine(),b._setRows(),b.master._debug("Conflict initiated:",b)},merge:function(){var a=this;if(a.useLeft)return a.master._debug("Ignoring lines "+a.leftLine+" - "+(a.leftLine+a.rowsLeft-1)+"."),void a.$el.trigger("xiphe_phpdiffmerge_merged");switch(a.master._debug("Merging Conflict:",a),a.type){case"Replace":a._delete(),a._insert();break;case"Insert":a._insert();break;case"Delete":a._delete();break;default:return void h('Undefined merge method "'+a.type+'".')}a.$el.trigger("xiphe_phpdiffmerge_merged")},_hoverIn:function(b){var c=a(b.delegateTarget),d=c.hasClass("Left")?"Left":"Right";this.$el.find("td."+d).addClass("hover")},_hoverOut:function(){this.$el.find("td.hover").removeClass("hover")},_clicked:function(b){var c,d,e=this,f=a(b.delegateTarget);if(e.master.inline?(e.useLeft=f.hasClass("use"),f.hasClass("Left")&&(e.useLeft=!e.useLeft)):e.useLeft=f.hasClass("Left"),c=e.useLeft?"Left":"Right",d=e.useLeft?"Right":"Left",!e.master.inline||"Delete"!==e.type&&"Insert"!==e.type)e.$el.find("td."+c).removeClass("dontUse").addClass("use"),e.$el.find("td."+d).removeClass("use").addClass("dontUse");else{var g=e.$el.find("td");g.toggleClass("use"),g.toggleClass("dontUse",!g.hasClass("use"))}e._resolved||(e._resolved=!0,e.$el.trigger("xiphe_phpdiffmerge_resolved"))},_setLine:function(){var a=this,b=a.$el.prev("tbody").find("tr").last();a.leftLine=parseInt(b.find("th").first().html()||0,10)+1,a.rightLine=parseInt(b.find("th").last().html()||0,10)+1},_setRows:function(){var b=this;b.master.inline?(b.rowsLeft=b.$el.find(".Left").length,b.rowsRight=b.$el.find(".Right").length):(b.rowsLeft=0,b.$el.find(".Left").each(function(){"&nbsp;"!==a(this).prev("th").html()&&b.rowsLeft++}),b.rowsRight=0,b.$el.find(".Right").each(function(){"&nbsp;"!==a(this).prev("th").html()&&b.rowsRight++}))},_insert:function(){var a=this;a.master._insertResult(a.rightLine,a.rowsRight,a.leftLine)},_delete:function(){var a=this;a.master._deleteResult(a.leftLine,a.rowsLeft)}};var h=function(a){window.console&&window.console.error(a)};a.fn[e]=function(c){var d=this;if("string"==typeof c){var f=Array.prototype.slice.call(arguments,1);d.each(function(){var b=a.data(this,"plugin_"+e);return b?a.isFunction(b[c])&&"_"!==c.charAt(0)?void b[c].apply(b,f):void h('no such method "'+c+'" for '+e+" instance"):void h("cannot call methods on "+e+' prior to initialization; attempted to call method "'+c+'"')})}else d.each(function(){var d=a.data(this,"plugin_"+e);d?(d.option(c),d._init()):a.data(this,"plugin_"+e,new b(this,c))});return d}}(jQuery);


--------------------------------------------------------------------------------
/example/a.txt:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 4 | 		<title>Hello World!</title>
 5 | 	</head>
 6 | 	<body>
 7 | 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 8 | 
 9 | 		<h2>A heading we'll be removing</h2>
10 | 
11 | 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
12 | 	</body>
13 | </html>


--------------------------------------------------------------------------------
/example/b.txt:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 4 | 		<title>Goodbye Cruel World!</title>
 5 | 	</head>
 6 | 	<body>
 7 | 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 8 | 
 9 | 
10 | 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
11 | 
12 | 		<p>Just a small amount of new text...</p>
13 | 	</body>
14 | </html>


--------------------------------------------------------------------------------
/example/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"require": {
3 | 		"php": ">=7.3",
4 | 		"jblond/php-diff": "2.*",
5 | 		"ext-json": "*"
6 | 	}
7 | }
8 | 


--------------------------------------------------------------------------------
/example/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | use jblond\Diff;
 3 | use jblond\Diff\Renderer\Html\SideBySide;
 4 | 
 5 |     include 'vendor/autoload.php';
 6 |     $left = explode("\n", preg_replace('/\r\n|\r/', "\n", file_get_contents('a.txt')));
 7 |     $right = explode("\n", preg_replace('/\r\n|\r/', "\n", file_get_contents('b.txt')));
 8 |     $options = array(
 9 |         //'ignoreWhitespace' => true,
10 |         //'ignoreCase' => true,
11 |     );
12 |     $Diff = new Diff($left, $right, $options);
13 | 	$rendererOptions = [
14 | 	    'inlineMarking' => $_GET['inlineMarking'] ?? Diff\Renderer\MainRenderer::CHANGE_LEVEL_LINE,
15 | 	];
16 |     /* Initiate the SideBySide or Inline Html renderer */
17 |     $Renderer = new SideBySide($rendererOptions);
18 |     // $Renderer = new \Diff_Renderer_Html_Inline;
19 | ?>
20 | <!DOCTYPE HTML>
21 | <html lang="en">
22 |     <head>
23 |         <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
24 |         <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
25 |         <title>Example - jQuery Merge for php-diff</title>
26 |         <link href="style.css" media="all" rel="stylesheet" type="text/css" />
27 |         <link href="../dist/jquery.phpdiffmerge.css" media="all" rel="stylesheet" type="text/css" />
28 |         <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
29 |         <script src="../dist/jquery.phpdiffmerge.js" type="text/javascript"></script>
30 |         <script type="text/javascript">
31 |             jQuery(document).ready(function($) {
32 |                 $('.Differences').phpdiffmerge({
33 |                     left: left,
34 |                     right: right,
35 |                     pupupResult: true,
36 |                     debug: true,
37 |                     merged: function(result /*, left, right */) {
38 |                         console.log('Merge completed with: ', result.join('\n'));
39 |                     }
40 |                 });
41 |             });
42 |         </script>
43 |     </head>
44 |     <body>
45 |         <div id="wrap">
46 |             <h2>Hi!</h2>
47 |             <p>This is an example of Xiphes / DigiLive <a href="https://github.com/DigiLive/jQuery-Merge-for-php-diff/">jQuery-Merge-for-php-diff</a>, a client side merge tool for JBlonds' <a href="https://github.com/JBlond/php-diff">PHP DIFF</a>.</p>
48 |             <p>You can choose which version of the conflicts you would like to use by clicking on them.<br /> Once the conflicts are resolved you can click "Merge" to see a pup-up of the result.</p>
49 |         </div>
50 |         <?php echo $Diff->render($Renderer); ?>
51 |         <script type="text/javascript">
52 |             var left=<?php echo json_encode($left); ?>;
53 |             var right=<?php echo json_encode($right); ?>;
54 |         </script>
55 |     </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/example/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	background: #fff;
 3 | 	font-family: Helvetica, Verdana, Arial, sans-serif;
 4 | 	font-size: 1rem;
 5 | }
 6 | #wrap {
 7 | 	max-width: 500px;
 8 | 	margin: 0 auto 2rem;
 9 | }
10 | .Differences {
11 | 	width: 100%;
12 | 	border-collapse: collapse;
13 | 	border-spacing: 0;
14 | 	empty-cells: show;
15 | }
16 | 
17 | .Differences thead th {
18 | 	text-align: left;
19 | 	border-bottom: 1px solid #000;
20 | 	background: #aaa;
21 | 	color: #000;
22 | 	padding: 4px;
23 | }
24 | .Differences tbody th {
25 | 	text-align: right;
26 | 	background: #ccc;
27 | 	width: 4em;
28 | 	padding: 1px 2px;
29 | 	border-right: 1px solid #000;
30 | 	vertical-align: top;
31 | 	font-size: 13px;
32 | }
33 | 
34 | .Differences td {
35 | 	padding: 1px 2px;
36 | 	font-family: Consolas, monospace;
37 | 	font-size: 13px;
38 | }
39 | 
40 | .DifferencesSideBySide .ChangeInsert td.Left {
41 | 	background: #dfd;
42 | }
43 | 
44 | .DifferencesSideBySide .ChangeInsert td.Right {
45 | 	background: #cfc;
46 | }
47 | 
48 | .DifferencesSideBySide .ChangeDelete td.Left {
49 | 	background: #f88;
50 | }
51 | 
52 | .DifferencesSideBySide .ChangeDelete td.Right {
53 | 	background: #faa;
54 | }
55 | 
56 | .DifferencesSideBySide .ChangeReplace .Left {
57 | 	background: #fe9;
58 | }
59 | 
60 | .DifferencesSideBySide .ChangeReplace .Right {
61 | 	background: #fd8;
62 | }
63 | 
64 | .Differences ins, .Differences del {
65 | 	text-decoration: none;
66 | }
67 | 
68 | .DifferencesSideBySide .ChangeReplace ins, .DifferencesSideBySide .ChangeReplace del {
69 | 	background: #fc0;
70 | }
71 | 
72 | .Differences .Skipped {
73 | 	background: #f7f7f7;
74 | }
75 | 
76 | .DifferencesInline .ChangeReplace .Left,
77 | .DifferencesInline .ChangeDelete .Left {
78 | 	background: #fdd;
79 | }
80 | 
81 | .DifferencesInline .ChangeReplace .Right,
82 | .DifferencesInline .ChangeInsert .Right {
83 | 	background: #dfd;
84 | }
85 | 
86 | .DifferencesInline .ChangeReplace ins {
87 | 	background: #9e9;
88 | }
89 | 
90 | .DifferencesInline .ChangeReplace del {
91 | 	background: #e99;
92 | }
93 | 
94 | pre {
95 | 	width: 100%;
96 | 	overflow: auto;
97 | }


--------------------------------------------------------------------------------
/karma.conf.coffee:
--------------------------------------------------------------------------------
 1 | # Karma configuration
 2 | # Generated on Mon Apr 14 2014 09:18:25 GMT+0200 (CEST)
 3 | 
 4 | module.exports = (config) ->
 5 |   config.set
 6 | 
 7 |     # base path that will be used to resolve all patterns (eg. files, exclude)
 8 |     basePath: ''
 9 | 
10 | 
11 |     # frameworks to use
12 |     # available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13 |     frameworks: ['jasmine']
14 | 
15 | 
16 |     # list of files / patterns to load in the browser
17 |     files: [
18 |       'node_modules/jQuery/tmp/jquery.js',
19 |       'src/*.js',
20 |       'tests/**/*Spec.coffee'
21 |     ]
22 | 
23 | 
24 |     # list of files to exclude
25 |     exclude: []
26 | 
27 | 
28 |     # preprocess matching files before serving them to the browser
29 |     # available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
30 |     preprocessors: {
31 |       '**/*.coffee': ['coffee']
32 |     }
33 | 
34 | 
35 |     # test results reporter to use
36 |     # possible values: 'dots', 'progress'
37 |     # available reporters: https://npmjs.org/browse/keyword/karma-reporter
38 |     reporters: ['progress']
39 | 
40 | 
41 |     # web server port
42 |     port: 9876
43 | 
44 | 
45 |     # enable / disable colors in the output (reporters and logs)
46 |     colors: true
47 | 
48 | 
49 |     # level of logging
50 |     # possible values:
51 |     # - config.LOG_DISABLE
52 |     # - config.LOG_ERROR
53 |     # - config.LOG_WARN
54 |     # - config.LOG_INFO
55 |     # - config.LOG_DEBUG
56 |     logLevel: config.LOG_INFO
57 | 
58 | 
59 |     # enable / disable watching file and executing tests whenever any file changes
60 |     autoWatch: false
61 | 
62 | 
63 |     # start these browsers
64 |     # available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
65 |     browsers: ['PhantomJS']
66 | 
67 | 
68 |     # Continuous Integration mode
69 |     # if true, Karma captures browsers, runs the tests and exits
70 |     singleRun: false
71 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jQuery-Merge-for-php-diff",
 3 |   "compactname": "jquery.phpdiffmerge",
 4 |   "version": "0.3.2",
 5 |   "description": "A jQuery plugin for handling the conflicts between two documents.",
 6 |   "main": "jquery.phpdiffmerge.js",
 7 |   "directories": {
 8 |     "example": "example",
 9 |     "test": "tests"
10 |   },
11 |   "scripts": {
12 |     "install": "cd example && composer install",
13 |     "test": "./node_modules/grunt-cli/bin/grunt test"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git://github.com/DigiLive/jQuery-Merge-for-php-diff"
18 |   },
19 |   "keywords": [
20 |     "merge",
21 |     "conflicts",
22 |     "phpdiff",
23 |     "jquery"
24 |   ],
25 |   "author": "Hannes Diercks <github@xiphe.net>",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/DigiLive/jQuery-Merge-for-php-diff/issues"
29 |   },
30 |   "devDependencies": {
31 |     "coffeescript": "^2.6.1",
32 |     "grunt": "~1.4.1",
33 |     "grunt-bump": "0.8.0",
34 |     "grunt-cli": "~1.4.3",
35 |     "grunt-contrib-concat": "~0.4.0",
36 |     "grunt-contrib-cssmin": "~0.9.0",
37 |     "grunt-contrib-less": "~0.11.0",
38 |     "grunt-contrib-uglify": "~0.4.0",
39 |     "grunt-karma": "~4.0.2",
40 |     "karma": "~6.3.16",
41 |     "karma-cli": "^2.0.0",
42 |     "karma-coffee-preprocessor": "^1.0.1",
43 |     "karma-jasmine": "~4.0.1",
44 |     "karma-phantomjs-launcher": "~1.0.4",
45 |     "load-grunt-tasks": "~0.4.0"
46 |   },
47 |   "dependencies": {
48 |     "jQuery": "^1.7.4"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | jQuery Merge for php-diff
  2 | =========================
  3 | 
  4 | A client side merge tool for JBlonds' [PHP DIFF](https://github.com/JBlond/php-diff).
  5 | [Example](http://DigiLive.github.com/jQuery-Merge-for-php-diff/)
  6 | 
  7 | 
  8 | Version
  9 | -------
 10 | 
 11 | THIS IS A BETA RELEASE!  
 12 | I had not the time to test this very much so if you rely on this script blindly
 13 | you may get some unexpected results.  
 14 | You may help me write some tests to be able to check things better.
 15 | 
 16 | 
 17 | Usage
 18 | -----
 19 | 
 20 | This tool requires a side-by-side or inline diff from [php-diff](https://github.com/JBlond/php-diff)
 21 | and the full content of the compared files as a line-by-line array.
 22 | 
 23 | I use something like this on the server side.
 24 | Also have a look at the [the php-diff examples](https://github.com/JBlond/php-diff/tree/master/example).
 25 | ```php
 26 | $left = explode("\n", preg_replace('/\r\n|\r/', "\n", $THECONTENTOFFILE_A));
 27 | $right = explode("\n", preg_replace('/\r\n|\r/', "\n", $THECONTENTOFFILE_B));
 28 | 
 29 | $options = array(
 30 |     //'ignoreWhitespace' => true,
 31 |     //'ignoreCase' => true,
 32 | );
 33 | 
 34 | /* Initialize the diff class */
 35 | $Diff = new \Diff($left, $right, $options);
 36 | 
 37 | /* Initiate the SideBySide or Inline Html renderer */
 38 | $Renderer = new \Diff_Renderer_Html_SideBySide;
 39 | // $Renderer = new \Diff_Renderer_Html_Inline;
 40 | 
 41 | /* Render the Diff-table. */
 42 | echo $Diff->render($Renderer);
 43 | 
 44 | /* Pass $a and $b to javascript */
 45 | echo '<script type="text/javascript">var left='.json_encode($left).', right='.json_encode($right).';'</script>
 46 | ```
 47 | 
 48 | And this as initiation on the client side.
 49 | Have a look at [this example](http://DigiLive.github.com/jQuery-Merge-for-php-diff/).
 50 | ```javascript
 51 | $('.Differences').phpdiffmerge({
 52 |     left: left,
 53 |     right: right,
 54 |     merged: function(merge, left, right) {
 55 |     	/* Do something with the merge */
 56 |         $.post(
 57 |         	'ajax.php',
 58 |         	{
 59 |         		action: 'merge_completed',
 60 |         		merge: merge
 61 |         	},
 62 |         	function() {
 63 |         		console.log('done');
 64 |         	}
 65 |         );
 66 |     }
 67 |     /* Use your own "Merge now" button */
 68 |     // ,button: '#myButtonId'
 69 |     /* uncomment to see the complete merge in a pop-up window */
 70 |     // ,pupupResult: true
 71 |     /* uncomment to pass additional infos to the console. */
 72 |     // ,debug: true
 73 | });
 74 | ```
 75 | 
 76 | Playground
 77 | ----------
 78 | 
 79 | In the project folder:
 80 |   * Run `npm install`
 81 |   * Open a php server `php -S localhost:8080`
 82 |   * And open the example page in a browser [localhost:8080/example](http://localhost:8080/example)
 83 | 
 84 | In the example folder you can find `a.txt` and `b.txt` where you can change the compared files.  
 85 | Inside the `index.php` you can change the DIFF Style from side-by-side to inline and play with the plugin-options.
 86 | 
 87 | 
 88 | Options
 89 | -------
 90 | 
 91 | Can be set by passing an object into the initiation `$('.Differences').phpdiffmerge({option: 'foo'});`.  
 92 | Or by passing an options object to an instance of PHPDiffMerge `$('.Differences').phpdiffmerge('option', {option: 'bar'});`.
 93 | 
 94 | **left** | _string_: ""  
 95 | The full content of the left file as an JavaScript line-by-line array.
 96 | 
 97 | **right** | _string_: ""  
 98 | The full content of the right file as an JavaScript line-by-line array.
 99 | 
100 | **merged** | _function_: function(result, left, right) {}  
101 | A callback function that is called after the merge has completed.  
102 | all parameters (same as the left and right inputs) are line-by-line arrays
103 | remember to `.join('/n')` them if you want to use them as strings.
104 | 
105 | **button** | _mixed_ {optional}  
106 | A Selector or element that will be used as trigger for the final merge.
107 | If not set or invalid a button will be generated.
108 | 
109 | **debug** | _boolean_: false  
110 | Set true to log the steps made while merging into the console.
111 | 
112 | **pupupResult** | _boolean_: false  
113 | If true a pop-up window with the new merged content will be presented after merge.
114 | 
115 | **pupupSources** | _boolean_: false  
116 | If true two pup-up windows with the full left and right content will be presented after merge.
117 | 
118 | 
119 | Methods
120 | -------
121 | 
122 | Called as string option on an instance: `$('.Differences').phpdiffmerge('method', <arguments>);`
123 | 
124 | **useRight**  
125 | Selects the right side of all conflicts.
126 | 
127 | **useLeft**  
128 | Selects the left side of all conflicts.
129 | 
130 | **option**
131 | Accepts an object, that will be extended into the current options.
132 | 
133 | **merge**
134 | The action called by the "Merge" Button 
135 | 
136 | 
137 | Special Thanks
138 | --------------
139 | 
140 | - To JBlond for the new PHP-DIFF version.
141 | - To Chris Boulton for PHP-DIFF and mentioning this project in its readme.  
142 | - To Robert and Martin from jimdo.com for reviewing this plugin and giving me some very useful hints.
143 | - To [Hannes Diercks](https://github.com/Xiphe/) for creating this library in the first place. 
144 | 
145 | 
146 | Changelog
147 | ---------
148 | 
149 | ### next
150 | 
151 | + Update: project dependencies
152 | + Fix: Links, since the project changed the owner (new github url)
153 | 
154 | ### 0.2.2
155 | + Add _id to PHPDiffMerge instances to make them comparable by QUnits deepEqual
156 | 
157 | ### 0.2.1
158 | + bugfixes for multiline and inline issues
159 | + new example/sandbox
160 | 
161 | ### 0.2
162 | + complete refactoring of the plugin structure.
163 | 
164 | ### 0.1
165 | + initial release
166 | 
167 | 
168 | Todo
169 | ----
170 | 
171 | + write tests.
172 | + spellcheck please, im not native english as you may have noticed ;)
173 | 
174 | 
175 | License
176 | -------
177 | 
178 | [MIT](https://raw.github.com/DigiLive/jQuery-Merge-for-php-diff/master/LICENSE)
179 | 


--------------------------------------------------------------------------------
/src/phpdiffmerge.js:
--------------------------------------------------------------------------------
  1 | /*global jQuery */
  2 | (function($) {
  3 |   'use strict';
  4 | 
  5 |   var pluginName = 'phpdiffmerge',
  6 |     defaults = {
  7 |       left: '',
  8 |       right: '',
  9 |       debug: false,
 10 |       pupupResult: false,
 11 |       pupupSources: false,
 12 |       merged: $.noop()
 13 |     },
 14 |     count = 0;
 15 | 
 16 |   /* PHPDiffMerge constructor */
 17 |   function PHPDiffMerge(element, options) {
 18 |     var self = this;
 19 | 
 20 |     self._id = 1 + count++;
 21 |     self.$el = $(element);
 22 | 
 23 |     self.options = $.extend({}, defaults, options);
 24 | 
 25 |     self._defaults = defaults;
 26 |     self._name = pluginName;
 27 | 
 28 |     /*** PUBLIC VARIABLES ***/
 29 | 
 30 |     /* The conflict elements */
 31 |     self.$conflicts = $();
 32 | 
 33 |     /* Collection of conflict classes */
 34 |     self.conflicts = [];
 35 | 
 36 |     /* Counters of conflicts left */
 37 |     self.toResolve = 0;
 38 |     self.toMerge = 0;
 39 | 
 40 |     /* Indicator if the diff is inline or side-by-side */
 41 |     self.inline = false;
 42 | 
 43 |     /* The resulting merge */
 44 |     self.result = [];
 45 | 
 46 |     self.lineOffset = 0;
 47 |     self._tmpLineOffset = 0;
 48 | 
 49 | 
 50 |     self._init();
 51 |   }
 52 | 
 53 |   PHPDiffMerge.prototype = {
 54 | 
 55 |     /*** CONSTRUCTION ***/
 56 |     _init: function() {
 57 |       var self = this;
 58 | 
 59 |       /* Say Hello */
 60 |       self._debug('PHPDiffMerge about to be initiated with options:', self.options);
 61 | 
 62 |       /* Find conflict containers */
 63 |       self.$conflicts = self.$el.find('.ChangeReplace, .ChangeDelete, .ChangeInsert');
 64 |       /* Set the counters */
 65 |       self.toResolve = self.$conflicts.length;
 66 | 
 67 |       /* Check if we have enough data to work */
 68 |       if (self.toResolve <= 0 || (self.options.left === '' && self.options.right === '')) {
 69 |         self._debug('Nothing to merge or merge sources not available - ' +
 70 |           'Please submit left and right on plug-in initiation!');
 71 |         return false;
 72 |       }
 73 | 
 74 |       /* Check if table style is inline */
 75 |       this.inline = self.$el.hasClass('DifferencesInline');
 76 | 
 77 |       self._ensurePresenceOfMergeButton();
 78 | 
 79 |       /* Initiate Conflicts */
 80 |       $.each(self.$conflicts, function() {
 81 |         self.conflicts.push(new Conflict(this, self));
 82 |       });
 83 | 
 84 |       /* Register event listeners for completion actions */
 85 |       self.$conflicts.on('xiphe_phpdiffmerge_resolved', $.proxy(self._conflictResolved, self));
 86 |       self.$conflicts.on('xiphe_phpdiffmerge_merged', $.proxy(self._conflictMerged, self));
 87 |       self.$conflicts.on('xiphe_phpdiffmerge_merged', $.proxy(self._updateLineOffset, self));
 88 | 
 89 |       self._debug('PHPDiffMerge initiated', self);
 90 |     },
 91 | 
 92 | 
 93 |     /*** PUBLIC METHODS ***/
 94 | 
 95 |     /**
 96 |      * Select all changes on the right side.
 97 |      */
 98 |     useRight: function() {
 99 |       var self = this;
100 | 
101 |       self.$conflicts.find('td.Right').click();
102 |       if (self.$el.hasClass('DifferencesInline')) {
103 |         self.$el.find('.ChangeDelete td.Left').click().click();
104 |       }
105 |     },
106 | 
107 |     /**
108 |      * Selects all changes on the right.
109 |      */
110 |     useLeft: function() {
111 |       var self = this;
112 | 
113 |       self.$conflicts.find('td.Left').click();
114 |       if (self.$el.hasClass('DifferencesInline')) {
115 |         self.$el.find('.ChangeInsert td.Right').click().click();
116 |       }
117 |     },
118 | 
119 |     /**
120 |      * Start the merge process
121 |      */
122 |     merge: function(event) {
123 |       var self = this;
124 | 
125 |       if (typeof event !== 'undefined' && event !== null) {
126 |         event.preventDefault();
127 |       }
128 | 
129 |       /* Don't work, if any conflicts are unresolved */
130 |       if (self.options.button.attr('disabled') === 'disabled') {
131 |         self._debug('Unable to merge: not all conflicts have been resolved.');
132 |         return;
133 |       }
134 | 
135 |       /* Initiate the end by cloning the left side. */
136 |       self.result = self.options.left.slice(0);
137 | 
138 |       /* Reset line offset */
139 |       self.lineOffset = 0;
140 | 
141 |       /* Reset the todo counter */
142 |       self.toMerge = self.$conflicts.length;
143 | 
144 |       for (var i = 0; i < self.conflicts.length; i++) {
145 |         self.conflicts[i].merge();
146 |       }
147 |     },
148 | 
149 |     /**
150 |      * change options AFTER initialization
151 |      *
152 |      * @param {object} options a plain options object
153 |      */
154 |     option: function(options) {
155 |       var self = this;
156 | 
157 |       if ($.isPlainObject(options)) {
158 |         self.options = $.extend(true, self.options, options);
159 |       }
160 |     },
161 | 
162 | 
163 |     /*** PROTECTED METHODS ***/
164 | 
165 |     /*
166 |      * Check if a merge button is available or generate one.
167 |      */
168 |     _ensurePresenceOfMergeButton: function() {
169 |       var self = this;
170 | 
171 |       if (typeof self.options.button === 'undefined' || !$(self.options.button).length) {
172 |         self.options.button = $('<button />')
173 |           .html('Merge')
174 |           .attr('disabled', 'disabled')
175 |           .css({
176 |             display: 'block',
177 |             height: '50px',
178 |             width: '200px',
179 |             margin: '50px auto'
180 |           });
181 |         self.$el.after(self.options.button);
182 |       } else {
183 |         self.options.button = $(self.options.button).attr('disabled', 'disabled');
184 |       }
185 | 
186 |       /* Merge on click */
187 |       self.options.button.click($.proxy(self.merge, self));
188 |     },
189 | 
190 |     _debug: function() {
191 |       if (this.options.debug && window.console && window.console.log) {
192 |         window.console.log(Array.prototype.slice.call(arguments));
193 |       }
194 |     },
195 | 
196 |     /* callback for whenever a conflict is resolved */
197 |     _conflictResolved: function() {
198 |       var self = this;
199 | 
200 |       self.toResolve--;
201 |       if (self.toResolve === 0) {
202 |         self.options.button.removeAttr('disabled');
203 |       }
204 |     },
205 | 
206 |     /* callback for whenever a conflict is merged */
207 |     _conflictMerged: function() {
208 |       var self = this;
209 | 
210 |       self.toMerge--;
211 |       if (self.toMerge === 0) {
212 |         if (self.options.pupupResult) {
213 |           popup('end', self.result.join('\n'));
214 |         }
215 |         /* Pup-up the sources if set in configuration */
216 |         if (self.options.pupupSources) {
217 |           popup('left', self.options.left.join('\n'));
218 |           popup('right', self.options.right.join('\n'));
219 |         }
220 |         /* Call the merged-callback if callable */
221 |         if (typeof self.options.merged === 'function') {
222 |           self.options.merged.call(self, self.result, self.options.left, self.options.right);
223 |         }
224 |       }
225 |     },
226 | 
227 |     /* Delete a given amount of rows at a specific index from the result. */
228 |     _deleteResult: function(index, length) {
229 |       var self = this;
230 | 
231 |       /* Delete the left rows */
232 |       self._debug('Deleting Left: ' + index + ' - ' + (index + length - 1) + '.');
233 |       var out = self.result.splice((index + self.lineOffset - 1), length);
234 | 
235 |       if (self.options.debug) {
236 |         out = out.map(function(value) { return $.trim(value).substring(0, 10) + '...'; });
237 |         self._debug('Content: ', out);
238 |       }
239 | 
240 |       /* Set new Line Offset */
241 |       self._tmpLineOffset -= length;
242 |     },
243 | 
244 |     /* Insert a given amount of rows at a specific index from the right side to the result. */
245 |     _insertResult: function(index, length, targetIndex) {
246 |       var self = this;
247 |       var insert = [];
248 | 
249 |       /* Insert the right rows. */
250 |       for (var i = 0; i < length; i++) {
251 |         /* Get the content from the right site */
252 |         var line = self.options.right[index - 1 + i];
253 |         insert.push(line);
254 | 
255 |         /* inject it to the following line on the left side */
256 |         self.result.splice((targetIndex - 1 + self.lineOffset + i), 0, line);
257 |       }
258 | 
259 |       if (self.options.debug) {
260 |         self._debug('Left line prior to insertion: ' + (targetIndex - 1));
261 |         self._debug(
262 |           'Content: ', $.trim(self.result[targetIndex - 2 + self.lineOffset]).substring(0, 10)
263 |         );
264 | 
265 |         self._debug('Inserted Right: Row ' + index + ' - ' + (index + length - 1) + '.');
266 | 
267 |         insert = insert.map(function(value) {
268 |           return $.trim(value).substring(0, 10) + '...';
269 |         });
270 |         self._debug('Content: (' + insert.join(', ') + ')');
271 |       }
272 | 
273 |       /* Set new Line Offset */
274 |       self._tmpLineOffset += length;
275 |     },
276 | 
277 |     _updateLineOffset: function() {
278 |       var self = this;
279 | 
280 |       self._debug('Change lineOffset from: ' + self.lineOffset + ' to ' +
281 |         (self.lineOffset + self._tmpLineOffset) + '.');
282 |       self.lineOffset += self._tmpLineOffset;
283 |       self._tmpLineOffset = 0;
284 |     }
285 |   };
286 | 
287 |   /* Conflict Constructor */
288 |   function Conflict(element, master) {
289 |     var self = this;
290 | 
291 |     self.$el = $(element);
292 |     self.master = master;
293 | 
294 |     self._resolved = false;
295 |     self.type = '';
296 |     self.useLeft = false;
297 |     self.leftLine = 0;
298 |     self.rightLine = 0;
299 |     self.rowsLeft = 0;
300 |     self.rowsRight = 0;
301 | 
302 |     self._init();
303 |   }
304 | 
305 |   Conflict.prototype = {
306 | 
307 |     /*** CONSTRUCTION ***/
308 |     _init: function() {
309 |       var self = this;
310 | 
311 |       self.type = self.$el.attr('class').match(/Change([\w]+)/)[1];
312 | 
313 |       self.$el.find('td')
314 |         .click($.proxy(self._clicked, self))
315 |         .hover($.proxy(self._hoverIn, self), $.proxy(self._hoverOut, self));
316 | 
317 |       self._setLine();
318 |       self._setRows();
319 | 
320 |       self.master._debug('Conflict initiated:', self);
321 |     },
322 | 
323 | 
324 |     /*** PUBLIC METHODS ***/
325 | 
326 |     merge: function() {
327 |       var self = this;
328 | 
329 |       if (self.useLeft) {
330 |         self.master._debug(
331 |           'Ignoring lines ' + self.leftLine + ' - ' + (self.leftLine + self.rowsLeft - 1) + '.'
332 |         );
333 |         self.$el.trigger('xiphe_phpdiffmerge_merged');
334 |         return;
335 |       }
336 | 
337 |       self.master._debug('Merging Conflict:', self);
338 | 
339 |       switch (self.type) {
340 |         case 'Replace':
341 |           self._delete();
342 |           self._insert();
343 |           break;
344 |         case 'Insert':
345 |           self._insert();
346 |           break;
347 |         case 'Delete':
348 |           self._delete();
349 |           break;
350 |         default:
351 |           logError('Undefined merge method "' + self.type + '".');
352 |           return;
353 |       }
354 | 
355 |       self.$el.trigger('xiphe_phpdiffmerge_merged');
356 |     },
357 | 
358 | 
359 |     /*** PRIVATE METHODS ***/
360 | 
361 |     _hoverIn: function(event) {
362 |       var $target = $(event.delegateTarget);
363 | 
364 |       var h = $target.hasClass('Left') ? 'Left' : 'Right';
365 |       this.$el.find('td.' + h).addClass('hover');
366 |     },
367 | 
368 |     _hoverOut: function() {
369 |       this.$el.find('td.hover').removeClass('hover');
370 |     },
371 | 
372 |     _clicked: function(event) {
373 |       var self = this;
374 |       var $target = $(event.delegateTarget), use, dont;
375 | 
376 |       if (!self.master.inline) {
377 |         self.useLeft = $target.hasClass('Left');
378 |       } else {
379 |         self.useLeft = $target.hasClass('use');
380 |         if ($target.hasClass('Left')) {
381 |           self.useLeft = !self.useLeft;
382 |         }
383 |       }
384 | 
385 |       use = self.useLeft ? 'Left' : 'Right';
386 |       dont = self.useLeft ? 'Right' : 'Left';
387 | 
388 |       /* Highlight the current clicked change. */
389 |       if (self.master.inline &&
390 |         (self.type === 'Delete' || self.type === 'Insert')
391 |       ) {
392 |         var $c = self.$el.find('td');
393 |         $c.toggleClass('use');
394 |         $c.toggleClass('dontUse', !$c.hasClass('use'));
395 |       } else {
396 |         self.$el.find('td.' + use).removeClass('dontUse').addClass('use');
397 |         self.$el.find('td.' + dont).removeClass('use').addClass('dontUse');
398 |       }
399 | 
400 |       /* Consider this conflict as resolved if it is clicked for the first time. */
401 |       if (!self._resolved) {
402 |         self._resolved = true;
403 |         self.$el.trigger('xiphe_phpdiffmerge_resolved');
404 |       }
405 |     },
406 | 
407 |     _setLine: function() {
408 |       var self = this;
409 | 
410 |       /*
411 |        * Get the first line of the conflict from the previous table
412 |        * because there was a bug with the line numbers in php-diff.
413 |        */
414 |       var previousRow = self.$el.prev('tbody').find('tr').last();
415 | 
416 |       self.leftLine = parseInt((previousRow.find('th').first().html() || 0), 10) + 1;
417 |       self.rightLine = parseInt((previousRow.find('th').last().html() || 0), 10) + 1;
418 |     },
419 | 
420 |     _setRows: function() {
421 |       var self = this;
422 | 
423 |       if (self.master.inline) {
424 |         self.rowsLeft = self.$el.find('.Left').length;
425 |         self.rowsRight = self.$el.find('.Right').length;
426 |       } else {
427 |         self.rowsLeft = 0;
428 |         self.$el.find('.Left').each(function() {
429 |           if ($(this).prev('th').html() !== '&nbsp;') {
430 |             self.rowsLeft++;
431 |           }
432 |         });
433 |         self.rowsRight = 0;
434 |         self.$el.find('.Right').each(function() {
435 |           if ($(this).prev('th').html() !== '&nbsp;') {
436 |             self.rowsRight++;
437 |           }
438 |         });
439 |       }
440 |     },
441 | 
442 |     _insert: function() {
443 |       var self = this;
444 | 
445 |       self.master._insertResult(self.rightLine, self.rowsRight, self.leftLine);
446 |     },
447 | 
448 |     _delete: function() {
449 |       var self = this;
450 | 
451 |       self.master._deleteResult(self.leftLine, self.rowsLeft);
452 |     }
453 |   };
454 | 
455 |   /**
456 |    * Generate a pup-up window with the given content.
457 |    *
458 |    * @param {string} title   the title for the new window
459 |    * @param {string} content the content for the new window
460 |    */
461 |   function popup(title, content) {
462 |     var newWin = window.open('popup.html');
463 |     // http://css-tricks.com/snippets/javascript/htmlentities-for-javascript/
464 |     content = content.replace(/&/g, '&amp;')
465 |       .replace(/</g, '&lt;')
466 |       .replace(/>/g, '&gt;')
467 |       .replace(/"/g, '&quot;');
468 | 
469 |     newWin.document.write('<html><head><title>' + title + '</title></head><body><pre>' +
470 |       content + '</pre></body></html>');
471 |   }
472 | 
473 |   // helper function for logging errors
474 |   // $.error breaks jQuery chaining
475 |   // From jquery.isotope.js
476 |   var logError = function(message) {
477 |     if (window.console) {
478 |       window.console.error(message);
479 |     }
480 |   };
481 | 
482 |   // =======================  Plugin bridge  ===============================
483 |   // From jquery.isotope.js
484 |   // https://github.com/desandro/isotope/blob/master/jquery.isotope.js#L1363
485 |   //
486 |   // A bit from jQuery UI
487 |   //   https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js
488 |   // A bit from jcarousel
489 |   //   https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js
490 |   $.fn[pluginName] = function(options) {
491 |     var self = this;
492 | 
493 |     if (typeof options === 'string') {
494 |       // call method
495 |       var args = Array.prototype.slice.call(arguments, 1);
496 | 
497 |       self.each(function() {
498 |         var instance = $.data(this, 'plugin_' + pluginName);
499 |         if (!instance) {
500 |           logError('cannot call methods on ' + pluginName + ' prior to initialization; ' +
501 |               'attempted to call method "' + options + '"');
502 |           return;
503 |         }
504 |         if (!$.isFunction(instance[options]) || options.charAt(0) === '_') {
505 |           logError('no such method "' + options + '" for ' + pluginName + ' instance');
506 |           return;
507 |         }
508 |         // apply method
509 |         instance[options].apply(instance, args);
510 |       });
511 |     } else {
512 |       self.each(function() {
513 |         var instance = $.data(this, 'plugin_' + pluginName);
514 |         if (instance) {
515 |           // apply options & init
516 |           instance.option(options);
517 |           instance._init();
518 |         } else {
519 |           // initialize new instance
520 |           $.data(this, 'plugin_' + pluginName, new PHPDiffMerge(this, options));
521 |         }
522 |       });
523 |     }
524 |     // return jQuery object
525 |     // so plugin methods do not have to
526 |     return self;
527 |   };
528 | 
529 | })(jQuery);
530 | 


--------------------------------------------------------------------------------
/src/phpdiffmerge.less:
--------------------------------------------------------------------------------
 1 | .Differences {
 2 | 	.ChangeReplace, .ChangeInsert, .ChangeDelete {
 3 | 		td {
 4 | 			cursor: pointer;
 5 | 
 6 | 			&.hover, &.dontUse.hover {
 7 | 				background: #000;
 8 | 				color: #fff;
 9 | 				del, ins {
10 | 					background: #000;
11 | 					color: #fff;
12 | 				}
13 | 			}
14 | 			&.use.hover {
15 | 				cursor: default;
16 | 				color: #000;
17 | 				del, ins {
18 | 					background: #6EEF81;
19 | 					color: #000;
20 | 				}
21 | 			}
22 | 
23 | 			&.use {
24 | 				background: #6EEF81;
25 | 			}
26 | 			&.dontUse {
27 | 				background: #F7F7F7;
28 | 				color: #DDDDDD;
29 | 			}
30 | 		}
31 | 	}
32 | 	.ChangeReplace {
33 | 		td {
34 | 			&.use, &.use.hover {
35 | 				del, ins {
36 | 					background: #0CD123;
37 | 				}
38 | 			}
39 | 			&.dontUse {
40 | 				del, ins {
41 | 					background: #DDDDDD;
42 | 					color: #BBBBBB;
43 | 				}
44 | 			}
45 | 		}
46 | 	}
47 | 	&.DifferencesInline {
48 | 		.ChangeDelete, .ChangeInsert {
49 | 			td {
50 | 				&.use.hover {
51 | 					cursor: pointer;
52 | 				}
53 | 				&.hover, &.dontUse.hover {
54 | 					background: #000;
55 | 					color: #fff;
56 | 					del, ins {
57 | 						background: #000;
58 | 						color: #fff;
59 | 					}
60 | 				}
61 | 			}
62 | 		}
63 | 	}
64 | }


--------------------------------------------------------------------------------
/tests/phpdiffmergeSpec.coffee:
--------------------------------------------------------------------------------
 1 | describe 'phpdiffmerge', ->
 2 | 
 3 |   plugin = null
 4 |   instance = null
 5 |   $fixture = null
 6 | 
 7 |   beforeEach ->
 8 |     plugin = $.fn.phpdiffmerge
 9 |     $fixture = $('<table class="Differences DifferencesSideBySide"><thead><tr><th colspan="2">Old Version</th><th colspan="2">New Version</th></tr></thead><tbody class="ChangeEqual"><tr><th>1</th><td class="Left"><span>&lt;html&gt;</span>&nbsp;</span></td><th>1</th><td class="Right"><span>&lt;html&gt;</span>&nbsp;</span></td></tr><tr><th>2</th><td class="Left"><span>&nbsp; &nbsp;&lt;head&gt;</span>&nbsp;</span></td><th>2</th><td class="Right"><span>&nbsp; &nbsp;&lt;head&gt;</span>&nbsp;</span></td></tr><tr><th>3</th><td class="Left"><span>&nbsp; &nbsp; &nbsp; &nbsp;&lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt;</span>&nbsp;</span></td><th>3</th><td class="Right"><span>&nbsp; &nbsp; &nbsp; &nbsp;&lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt;</span>&nbsp;</span></td></tr></tbody><tbody class="ChangeReplace"><tr><th>4</th><td class="Left"><span>&nbsp; &nbsp; &nbsp; &nbsp;&lt;title&gt;<del>Hello</del> World!&lt;/title&gt;</span>&nbsp;</td><th>4</th><td class="Right"><span>&nbsp; &nbsp; &nbsp; &nbsp;&lt;title&gt;<ins>Goodbye Cruel</ins> World!&lt;/title&gt;</span></td></tr></tbody><tbody class="ChangeEqual"><tr><th>5</th><td class="Left"><span>&nbsp; &nbsp;&lt;/head&gt;</span>&nbsp;</span></td><th>5</th><td class="Right"><span>&nbsp; &nbsp;&lt;/head&gt;</span>&nbsp;</span></td></tr><tr><th>6</th><td class="Left"><span>&nbsp; &nbsp;&lt;body&gt;</span>&nbsp;</span></td><th>6</th><td class="Right"><span>&nbsp; &nbsp;&lt;body&gt;</span>&nbsp;</span></td></tr><tr><th>7</th><td class="Left"><span>&nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;</span>&nbsp;</span></td><th>7</th><td class="Right"><span>&nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;</span>&nbsp;</span></td></tr><tr><th>8</th><td class="Left"><span></span>&nbsp;</span></td><th>8</th><td class="Right"><span></span>&nbsp;</span></td></tr></tbody><tbody class="ChangeDelete"><tr><th>9</th><td class="Left"><del>&nbsp; &nbsp; &nbsp; &nbsp;&lt;h2&gt;A heading we\'ll be removing&lt;/h2&gt;</del>&nbsp;</td><th>&nbsp;</th><td class="Right">&nbsp;</td></tr></tbody><tbody class="ChangeEqual"><tr><th>10</th><td class="Left"><span></span>&nbsp;</span></td><th>9</th><td class="Right"><span></span>&nbsp;</span></td></tr><tr><th>11</th><td class="Left"><span>&nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;</span>&nbsp;</span></td><th>10</th><td class="Right"><span>&nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;</span>&nbsp;</span></td></tr></tbody><tbody class="ChangeInsert"><tr><th>&nbsp;</th><td class="Left">&nbsp;</td><th>11</th><td class="Right"><ins></ins>&nbsp;</td></tr><tr><th>&nbsp;</th><td class="Left">&nbsp;</td><th>12</th><td class="Right"><ins>&nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;Just a small amount of new text...&lt;/p&gt;</ins>&nbsp;</td></tr></tbody><tbody class="ChangeEqual"><tr><th>12</th><td class="Left"><span>&nbsp; &nbsp;&lt;/body&gt;</span>&nbsp;</span></td><th>13</th><td class="Right"><span>&nbsp; &nbsp;&lt;/body&gt;</span>&nbsp;</span></td></tr><tr><th>13</th><td class="Left"><span>&lt;/html&gt;</span>&nbsp;</span></td><th>14</th><td class="Right"><span>&lt;/html&gt;</span>&nbsp;</span></td></tr></tbody></table>');
10 |     instance = $fixture.phpdiffmerge().data('plugin_phpdiffmerge')
11 | 
12 | 
13 |   it 'should exist', ->
14 |     expect(typeof plugin).toBe 'function'
15 |     expect(typeof instance).toBe 'object'
16 |     expect(instance._name).toBe 'phpdiffmerge'
17 | 
18 |   it 'should not overwrite itself', ->
19 |     expect($fixture.phpdiffmerge().data('plugin_phpdiffmerge')).toBe instance
20 | 
21 |   it 'should re-init when called with new options', ->
22 |     spyOn instance, '_init'
23 |     $fixture.phpdiffmerge debug: true
24 |     expect(instance._init).toHaveBeenCalled()
25 | 
26 |   describe 'methods', ->
27 |     beforeEach ->
28 |       $fixture.phpdiffmerge
29 | 
30 |     it 'should have callable methods', ->
31 |       method = 'useLeft'
32 |       spyOn instance, method
33 |       $fixture.phpdiffmerge method
34 |       expect(instance.useLeft).toHaveBeenCalled()


--------------------------------------------------------------------------------