Anzeigen eines abgeschnittenen Diff in einer Webseite

Question

Ich versuche, ein Diff von zwei Dateien in einer Webseite anzuzeigen, die jsdiff (https://github.com/kpdecker/jsdiff) verwendet.

Insgesamt funktioniert es gut, aber wenn es nur eine kleine Änderung in einer großen Datei ist, möchte ich nicht den gesamten Dateiinhalt angezeigt werden, stattdessen möchte ich die unmodifizierten Teile abschneiden. Ähnlich wie Diffs werden auf GitHub angezeigt.

Was ich habe: AngularJS Code die diff mit jsdiff zu berechnen:

var serverValue = selectedServiceConfig.getServerConfigDataString(); 
$scope.diff = JsDiff.diffLines(serverValue, newValue); 

Und dann HTML:

<pre id="diff"> 
    <span ng-repeat="change in diff" ng-class="{'diff-added': change.added, 'diff-removed': change.removed, 'diff-no-change': !change.added && !change.removed}">{{change.value}}</span> 
</pre> 

und einige CSS:

#diff { 
    .diff-no-change { 
     opacity: 0.54; 
    } 
    .diff-added{ 
     color: green; 
    } 
    .diff-removed{ 
     color: red; 
     text-decoration: line-through; 
    } 
} 

Das gibt mir zum Beispiel:

Stellen Sie sich nun vor, die grauen Teile wären 1000 Zeilen. Ich möchte nicht alles zeigen. Aber nur ein Teil davon ist in der Nähe eines tatsächlichen Diff. Obwohl ich den Kontext nicht komplett entfernen möchte, wäre das einfach.

Hope meine Frage ist jetzt klarer.

Answer 1

Auf dieser Seite von jsdiff, die ein Beispiel beschreibt, können Sie herausfinden, wie nur geänderte Zeilen angezeigt werden.

https://github.com/kpdecker/jsdiff/blob/master/examples/web_example.html

im Beispiel folgende dort

var color = part.added ? 'green' : 
    part.removed ? 'red' : 'grey'; 

und ein Kommentar ist, dass 'grauen' für gemeinsame Teile.

so könnte man vielleicht das Beispiel umschreiben, gemeinsame Teile

if (!part.added && !part.removed) 
    return 

Haftungsausschluss auszuschließen: i nichts von diesem Test haben, und ich bin nicht sicher, ob dies überhaupt funktioniert. Es ist nur der erste Weg, den ich gehen würde.

Answer 2

Nun, ich löste es durch Entfernen des unerwünschten Textes und Erstellen eines neuen Wertes im Diff-Objekt.

var processDiff = (diff) => { 
    diff.forEach(function(part){ 
     if(!part.added && !part.removed){ 
      var lines = part.value.split('\n'); 
      var addedDots = false; 
      part.newValue = ""; 
      for(var i = 0;i < lines.length;i++){ 
       if(i < 3 || i > lines.length-5){ 
        part.newValue += lines[i] + "\n"; 
       } 
       else if(!addedDots) { 
        part.newValue += "...\n" 
        addedDots = true; 
       } 
      } 
      part.newValue = part.newValue.slice(0, -1) 
     } 
     else { 
      part.newValue = part.value; 
     } 
    }); 
    return diff; 
} 

Weit davon entfernt, perfekt, da ich nicht auf dem ... Klicken zum Vergrößern und die gesamte Lösung fühlt sich ungeschickt.

Obwohl es mir dieses Aussehen verleiht: