Unified diff for use in discussion comments (#1507)

* Been needing this for a while... may add to it when time is available
* This is DOM side *(client side)*... but at last resort can be server side.
* Use it to check your changes before your submission
* Useful for Admin plus duties as well.
* Extra non-standard top line removed... not mentioned in Unidiff
* Update FAQ

Auto-merge

README.md

@@ -32,6 +32,7 @@ Repository | Reference | Recent Version
 [clipboard][clipboardGHUrl] | [Documentation][clipboardDOCUrl] | [![NPM version][clipboardNPMVersionImage]][clipboardNPMUrl]
 [compression][compressionGHUrl] | [Documentation][compressionDOCUrl] | [![NPM version][compressionNPMVersionImage]][compressionNPMUrl]
 [connect-mongo][connect-mongoGHUrl] | [Documentation][connect-mongoDOCUrl] | [![NPM version][connect-mongoNPMVersionImage]][connect-mongoNPMUrl]
+[diff][diffGHUrl] | [Documentation][diffDOCUrl] | [![NPM version][diffNPMVersionImage]][diffNPMUrl]
 [express][expressGHUrl] | [Documentation][expressDOCUrl] | [![NPM version][expressNPMVersionImage]][expressNPMUrl]
 [express-brute][express-bruteGHUrl] | [Documentation][express-bruteDOCUrl] | [![NPM version][express-bruteNPMVersionImage]][express-bruteNPMUrl]
 [express-brute-mongo][express-brute-mongoGHUrl]  <br />&#x22D4; [`MongoDBv3.x`][express-brute-mongoGHMongoDBv3.xUrl] | [Documentation][express-brute-mongoDOCUrl] | [![NPM version][express-brute-mongoNPMVersionImage]][express-brute-mongoNPMUrl]
@@ -186,6 +187,11 @@ Outdated dependencies list can also be achieved with `$ npm --depth 0 outdated`
 [connect-mongoNPMUrl]: https://www.npmjs.com/package/connect-mongo
 [connect-mongoNPMVersionImage]: https://img.shields.io/npm/v/connect-mongo.svg?style=flat
 
+[diffGHUrl]: https://github.com/kpdecker/jsdiff
+[diffDOCUrl]: https://github.com/kpdecker/jsdiff/blob/master/README.md
+[diffNPMUrl]: https://www.npmjs.com/package/diff
+[diffNPMVersionImage]: https://img.shields.io/npm/v/diff.svg?style=flat
+
 [expressGHUrl]: https://github.com/expressjs/express
 [expressDOCUrl]: http://expressjs.com/
 [expressNPMUrl]: https://www.npmjs.com/package/express

package.json

@@ -15,6 +15,7 @@
     "clipboard": "2.0.1",
     "compression": "1.7.2",
     "connect-mongo": "2.0.1",
+    "diff": "3.5.0",
     "express": "4.16.3",
     "express-brute": "1.0.1",
     "express-brute-mongo": "git://github.com/OpenUserJs/express-brute-mongo#MongoDBv3.x",

routesStatic.js

@@ -79,6 +79,10 @@ module.exports = function (aApp) {
     'js/lib/beautify.js': { maxage: day * 7 }
   });
 
+  serveModule('/redist/npm/', 'diff/', {
+    'dist/diff.js': { maxage: day * 7 }
+  });
+
   serveModule('/redist/npm/', 'marked/', {
     'lib/marked.js': { maxage: day * 1 }
   });

views/includes/documents/Frequently-Asked-Questions.md

@@ -121,13 +121,15 @@ The smaller the code snippet, or having a flawed Code snippet, the more likely i
 
 ### Q: What is a good way to present a Code change to an Author?
 
-1. Fork the persons script on their scripts Source Code page. This is the easiest way and you can refer to it in a discussion to help show what change you are proposing from the presentational view. Please do not post full script source in a discussion.
+1. Edit the Authors script on the Source Code page and present a diff by clicking the button of the same name. This is usually the quickest way to present a change if using OUJS only. Please do **not** post full script source in a discussion. Don't forget to add a code fence around it preferably a named fence of type `diff`.
 
-2. Use GitHub, or other [SCM][wikipediaSCM] that shows the change. Use a markdown hyperlink in the discussion to point to the commit.
+2. Optionally fork the persons script on their scripts Source Code page. You can refer to it in a discussion to help show what change you are proposing from the full presentational view on OUJS. Please do **not** post full script source in a discussion. Refer a link to it to have the Author look it over.
 
-3. If you have Linux or macOS you can utilize the `diff -u a.user.js b.user.js > change.diff` command line interface *(CLI)* directly. `a.user.js` being the original source code and `b.user.js` being the change. This will output a diff file that you can paste into a discussion.
+3. Use GitHub, or other [SCM][wikipediaSCM] that shows the change. Use a markdown hyperlink in the discussion to point to the commit.
 
-4. Use [git-scm][gitSCM]. You could utilize `git diff file.original file.changed > change.diff`. Git Bash, usually included, should also give you the direct `diff` command under Windows *(similar to the `cmd` prompt terminology for Windows users)*. More detailed usage can be found at [git documentation][gitSCMdoc].
+4. If you have Linux or macOS you can utilize the `diff -u a.user.js b.user.js > change.diff` command line interface *(CLI)* directly. `a.user.js` being the original source code and `b.user.js` being the change. This will output a diff file that you can paste into a discussion.
+
+5. Use [git-scm][gitSCM]. You could utilize `git diff file.original file.changed > change.diff`. Git Bash *(similar to the `cmd` prompt terminology for Windows users)* is usually included and should also give you the direct `diff` command under Windows. More detailed usage can be found at [git documentation][gitSCMdoc].
 
 Take for example a simple `RFC 2606§3 - Hello, World!` script. Fixing any changes to the `file.changed` you could present the difference with a snippet in a code fence of type `diff` which renders like this:
 

views/includes/scripts/scriptEditor.html

@@ -1,5 +1,6 @@
 <script type="text/javascript" charset="UTF-8" src="/redist/npm/ace-builds/src/ace.js"></script>
 <script type="text/javascript" charset="UTF-8" src="/redist/npm/js-beautify/js/lib/beautify.js"></script>
+<script type="text/javascript" charset="UTF-8" src="/redist/npm/diff/dist/diff.js"></script>
 <script type="text/javascript">
   (function () {
     'use strict';
@@ -8,7 +9,9 @@
       var editor = null;
       var wrap = $('#wrap');
       var beautify = $('#beautify');
+      var diff = $('#diff');
       var rawSource = null;
+      var modSource = null;
       var isBlocking = null;
       var hasChanged = false;
       var placeholder = null;
@@ -84,6 +87,7 @@
 
           $('button#submit_code').removeClass('btn-success').addClass('btn-warning');
           $('.ace_gutter-layer').addClass('btn-warning');
+          $('#diff').removeAttr('disabled');
         }
 
         $('#beautify').removeClass('active');
@@ -110,12 +114,16 @@
           $('button#submit_code').addClass('btn-success').removeClass('btn-warning');
           $('.ace_gutter-layer').removeClass('btn-warning');
 
+          $('#diff').attr('disabled', 'disabled');
+
         } else {
           isBlocking = true;
           if (!hasChanged) {
             aEv.target.classList.add('active');
           }
 
+          $('#diff').removeAttr('disabled');
+
           editor.getSession().setValue(
             beautifyThis(hasChanged ? editor.getSession().getValue() : rawSource));
           isBlocking = false;
@@ -160,6 +168,50 @@
         window.location.hash = '';
       }
 
+      function ondiff(aEv) {
+        isBlocking = true;
+        if (aEv.target.classList.contains('active')) {
+          aEv.target.classList.remove('active');
+
+          $('#beautify').removeAttr('disabled');
+          $('#submit_code').removeAttr('disabled');
+
+          editor.setReadOnly(false);
+          editor.getSession().setMode("ace/mode/javascript");
+          editor.renderer.setShowGutter(true);
+          editor.getSession().setValue(modSource);
+
+          modSource = null; // Free up mem
+
+        } else {
+          aEv.target.classList.add('active');
+          $('#beautify').attr('disabled', 'disabled');
+          $('#submit_code').attr('disabled', 'disabled');
+
+          modSource = editor.getSession().getValue();
+          editor.setReadOnly(true);
+          editor.getSession().setMode("ace/mode/diff");
+          editor.renderer.setShowGutter(false);
+
+          editor.getSession().setValue(
+            JsDiff.createTwoFilesPatch(
+            '{{script.scriptViewSourcePageUrl}}'
+              + '@{{script.meta.UserScript.version.0.value}}+{{script.hashShort}}',
+            '{{script.scriptViewSourcePageUrl}}',
+            rawSource,
+            modSource,
+            undefined, // NOTE: Required
+            undefined, // NOTE: Required
+            {
+              context: 3 // Show n lines before and after a diff
+            }
+          ).split('\n').slice(1).join('\n'));
+        }
+        isBlocking = false;
+
+        aEv.target.blur();
+      }
+
       //
       if (typeof ace !== 'undefined') {
         placeholder = (
@@ -252,6 +304,7 @@
         editor.on('input', oninput);
         editor.on('change', onchange);
         wrap.on('click', onwrap);
+        diff.on('click', ondiff);
         beautify.on('click', onbeautify);
         setTimeout(oninput, 250);
 

views/pages/scriptViewSourcePage.html

@@ -39,6 +39,7 @@
           <div class="btn-toolbar">
             <button class="btn btn-success" type="button" id="wrap" disabled="disabled">Wrap</button>
             <button class="btn btn-success" type="button" id="beautify" disabled="disabled">Beautify</button>
+            <button class="btn btn-success" type="button" id="diff" disabled="disabled">Diff</button>
             <button class="btn btn-success pull-right" type="submit" id="submit_code" disabled="disabled">{{#owner}}<i class="fa fa-fw fa-save"></i>{{/owner}}{{^owner}}<i class="fa fa-fw fa-code-fork"></i>{{/owner}} Submit Code{{^owner}} as Fork{{/owner}}</button>
           </div>
         </form>