Implemented separated column selection through javascript clipboard hook.

Author: lantian

src/ui/css/diff2html.css

@@ -274,3 +274,33 @@ ins.d2h-change, del.d2h-change {
     font-size: 10px;
     cursor: pointer;
 }
+
+/*
+ * Selection util.
+ */
+
+.selecting-left .d2h-code-line,
+.selecting-left .d2h-code-line *,
+.selecting-right td.d2h-code-linenumber,
+.selecting-right td.d2h-code-linenumber *,
+.selecting-left .d2h-code-side-line,
+.selecting-left .d2h-code-side-line *,
+.selecting-right td.d2h-code-side-linenumber,
+.selecting-right td.d2h-code-side-linenumber *{
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.selecting-left .d2h-code-line::selection,
+.selecting-left .d2h-code-line *::selection
+.selecting-right td.d2h-code-linenumber::selection,
+.selecting-left .d2h-code-side-line::selection,
+.selecting-left .d2h-code-side-line *::selection,
+.selecting-right td.d2h-code-side-linenumber::selection,
+.selecting-right td.d2h-code-side-linenumber *::selection {
+  background: transparent;
+}

src/ui/js/diff2html-ui.js

@@ -14,6 +14,7 @@
 
   var diffJson = null;
   var defaultTarget = "body";
+  var currentSelectionColumnId = -1;
 
   function Diff2HtmlUI(config) {
     var cfg = config || {};
@@ -23,6 +24,8 @@
     } else if (cfg.json) {
       diffJson = cfg.json;
     }
+
+    this._initSelection();
   }
 
   Diff2HtmlUI.prototype.draw = function(targetId, config) {
@@ -130,6 +133,56 @@
     });
   };
 
+  Diff2HtmlUI.prototype._initSelection = function () {
+    var body = $('body'),
+      that = this;
+
+    body.on('mousedown', '.d2h-diff-table', function (event) {
+      var target = $(event.target),
+        table = target.closest('.d2h-diff-table');
+
+      if (target.closest('.d2h-code-line,.d2h-code-side-line').length) {
+        table.removeClass('selecting-left');
+        table.addClass('selecting-right');
+        currentSelectionColumnId = 1;
+      } else if (target.closest('.d2h-code-linenumber,.d2h-code-side-linenumber').length) {
+        table.removeClass('selecting-right');
+        table.addClass('selecting-left');
+        currentSelectionColumnId = 0;
+      }
+    });
+
+    body.on('copy', '.d2h-diff-table', function (event) {
+      var clipboardData = event.originalEvent.clipboardData;
+      var text = that._getSelectedText();
+      clipboardData.setData('text', text);
+      event.preventDefault();
+    });
+  };
+
+
+  Diff2HtmlUI.prototype._getSelectedText = function () {
+    var table = $('.d2h-diff-table'),
+      sel = window.getSelection(),
+      range = sel.getRangeAt(0),
+      doc = range.cloneContents(),
+      nodes = doc.querySelectorAll('tr'),
+      text = '';
+
+    var idx = currentSelectionColumnId;
+
+    if (nodes.length === 0) {
+      text = doc.textContent;
+    } else {
+      [].forEach.call(nodes, function (tr, i) {
+        var td = tr.cells[tr.cells.length == 1 ? 0 : idx];
+        text += (i ? '\n' : '') + td.textContent.replace(/(?:\r\n|\r|\n)/g, '');
+      });
+    }
+
+    return text;
+  };
+
   module.exports.Diff2HtmlUI = Diff2HtmlUI;
 
   // Expose diff2html in the browser