5NTeA

by rocketegg0

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.min.js"></script>
<div ng-controller="myController">
    <form class="form-horizontal">
        <table class="table table-condensed">
            <tr><td>Line 1</td><td>
                <textarea class="form-control" ng-model="object.line1"></textarea>
                </td><td>
                <textarea class="form-control" ng-model="diffobject.line1"></textarea>
                </td></tr>
            <tr><td>Tolerance <input class="form-control" type="number" ng-model="tolerance"></input></td></tr>
            
        </table>
    </form>
    
    <m-diff object="object" diff="diffobject" tolerance="tolerance"></m-diff>
</div>

    <!-- diff.html -->
    <script type="text/ng-template" id="diff.html">
    <table class="table table-bordered table-condensed">
        <tbody><tr><td>Diff</td><td colspan=3>{{diffArray}}</td></tr>   
            <tr><th>Key</th><th>Original</th><th>Diff</th><th>Merged</th></tr>
            <tr ng-repeat="(key, value) in object">
                <td>{{key}}</td><td ng-bind-html="getDeleted(key, object, diff)"></td><td ng-bind-html="getAdded(key, object, diff)"></td><td ng-bind-html="getMerged(key, object, diff)"></td>
            </tr>
            <!-- <tr ng-repeat="(key, value) in object">
                <td>Raw</td><td>{{getDeleted(key, object, diff)}}</td><td>{{getAdded(key, object, diff)}}</td><td>{{getMerged(key, object, diff)}}</td>
            </tr> -->
            <tr>
                <td>Remainder
                </td>
                <td colspan=3 ng-bind-html="remainder">
                    {{remainder}}
                </td>
            </tr>
        </tbody>
        </table>
    </script>

CSS

.diff-add {
    color:blue;
    text-decoration:underline;
}

.diff-delete {
    color:red;
    text-decoration:line-through;
}

.diff-same {
    font-weight:bold;
}

.table > tbody > tr > th, .table > tbody > tr > td:first-child {
    font-weight:bold;
}

JavaScript

var mymodule = angular.module('mymodule', ['ngSanitize']);

mymodule.controller("myController", function ($scope) {
    $scope.tolerance = 6;
    
    $scope.object = {
        line1: '3. You may copy and distribute the Program (or a portion or derivative of it, under Paragraph 2) in object code or executable form under the terms of Paragraphs 1 and 2 above provided that you also do one of the following: a) accompany it with the complete corresponding machine-readable source code, which must be distributed under the terms of Paragraphs 1 and 2 above; or, b) accompany it with a written offer, valid for at least three  years, to give any third party free (except for a nominal charge for the cost of distribution) a complete machine-readable copy of the corresponding source code, to be distributed under the terms of Paragraphs 1 and 2 above; or, c) accompany it with the information you received as to where the corresponding source code may be obtained.  (This alternative is allowed only for noncommercial distribution and only if you received the program in object code or executable form alone.) Source code for a work means the preferred form of the work for making modifications to it.  For an executable file, complete source code means all the source code for all modules it contains; but, as a special exception, it need not include source code for modules which are standard libraries that accompany the operating system on which the executable file runs, or for standard header files or definitions files that accompany that operating system.'
        //line1:'new asdf this is a new article blah asfd asdf'
                //line1:'new edited asdf this isasda a article blah1234'
    };

    $scope.diffobject = {
        line1: '3. You may copy and distribute the Program (or a work based on it, under Section 2) in object code or executable form under the terms of Sections 1 and 2 above provided that you also do one of the following: a) Accompany it with the complete...