opendev/gerrit
Code Issues Proposed changes

ES6ify /gr-diff-selection/*

Browse Source 
Bug: Issue 6179
Change-Id: I2c929b863c22dc28df7b571002d6ea927b8e631e
This commit is contained in:
Kasper Nilsson
2017-05-16 14:31:51 -07:00
parent 858f5bee35
commit 2f07624fd4
2 changed files with 93 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.js
View File

@@ -18,13 +18,13 @@
* Possible CSS classes indicating the state of selection. Dynamically added/
* removed based on where the user clicks within the diff.
*/
var SelectionClass = {
const SelectionClass = {
COMMENT: 'selected-comment',
LEFT: 'selected-left',
RIGHT: 'selected-right',
};
var getNewCache = function() { return {left: null, right: null}; };
const getNewCache = () => { return {left: null, right: null}; };
Polymer({
is: 'gr-diff-selection',
@@ -43,11 +43,11 @@
],
listeners: {
'copy': '_handleCopy',
'down': '_handleDown',
copy: '_handleCopy',
down: '_handleDown',
},
attached: function() {
attached() {
this.classList.add(SelectionClass.RIGHT);
},
@@ -59,19 +59,19 @@
return this._cachedDiffBuilder;
},
_diffChanged: function() {
_diffChanged() {
this._linesCache = getNewCache();
},
_handleDown: function(e) {
var lineEl = this.diffBuilder.getLineElByChild(e.target);
_handleDown(e) {
const lineEl = this.diffBuilder.getLineElByChild(e.target);
if (!lineEl) {
return;
}
var commentSelected =
const commentSelected =
this._elementDescendedFromClass(e.target, 'gr-diff-comment');
var side = this.diffBuilder.getSideByLineEl(lineEl);
var targetClasses = [];
const side = this.diffBuilder.getSideByLineEl(lineEl);
const targetClasses = [];
targetClasses.push(side === 'left' ?
SelectionClass.LEFT :
SelectionClass.RIGHT);
@@ -80,23 +80,23 @@
targetClasses.push(SelectionClass.COMMENT);
}
// Remove any selection classes that do not belong.
for (var key in SelectionClass) {
for (const key in SelectionClass) {
if (SelectionClass.hasOwnProperty(key)) {
var className = SelectionClass[key];
if (targetClasses.indexOf(className) === -1) {
const className = SelectionClass[key];
if (!targetClasses.includes(className)) {
this.classList.remove(SelectionClass[key]);
}
}
}
// Add new selection classes iff they are not already present.
for (var i = 0; i < targetClasses.length; i++) {
if (!this.classList.contains(targetClasses[i])) {
this.classList.add(targetClasses[i]);
for (const _class of targetClasses) {
if (!this.classList.contains(_class)) {
this.classList.add(_class);
}
}
},
_getCopyEventTarget: function(e) {
_getCopyEventTarget(e) {
return Polymer.dom(e).rootTarget;
},
@@ -108,7 +108,7 @@
* @param {!string} className
* @return {boolean}
*/
_elementDescendedFromClass: function(element, className) {
_elementDescendedFromClass(element, className) {
while (!element.classList.contains(className)) {
if (!element.parentElement ||
element === this.diffBuilder.diffElement) {
@@ -119,20 +119,20 @@
return true;
},
_handleCopy: function(e) {
var commentSelected = false;
var target = this._getCopyEventTarget(e);
_handleCopy(e) {
let commentSelected = false;
const target = this._getCopyEventTarget(e);
if (target.type === 'textarea') { return; }
if (!this._elementDescendedFromClass(target, 'diff-row')) { return; }
if (this.classList.contains(SelectionClass.COMMENT)) {
commentSelected = true;
}
var lineEl = this.diffBuilder.getLineElByChild(target);
const lineEl = this.diffBuilder.getLineElByChild(target);
if (!lineEl) {
return;
}
var side = this.diffBuilder.getSideByLineEl(lineEl);
var text = this._getSelectedText(side, commentSelected);
const side = this.diffBuilder.getSideByLineEl(lineEl);
const text = this._getSelectedText(side, commentSelected);
if (text) {
e.clipboardData.setData('Text', text);
e.preventDefault();
@@ -148,19 +148,20 @@
* @param {boolean} Whether or not a comment is selected.
* @return {string} The selected text.
*/
_getSelectedText: function(side, commentSelected) {
var sel = window.getSelection();
_getSelectedText(side, commentSelected) {
const sel = window.getSelection();
if (sel.rangeCount != 1) {
return; // No multi-select support yet.
}
if (commentSelected) {
return this._getCommentLines(sel, side);
}
var range = GrRangeNormalizer.normalize(sel.getRangeAt(0));
var startLineEl = this.diffBuilder.getLineElByChild(range.startContainer);
var endLineEl = this.diffBuilder.getLineElByChild(range.endContainer);
var startLineNum = parseInt(startLineEl.getAttribute('data-value'), 10);
var endLineNum = parseInt(endLineEl.getAttribute('data-value'), 10);
const range = GrRangeNormalizer.normalize(sel.getRangeAt(0));
const startLineEl =
this.diffBuilder.getLineElByChild(range.startContainer);
const endLineEl = this.diffBuilder.getLineElByChild(range.endContainer);
const startLineNum = parseInt(startLineEl.getAttribute('data-value'), 10);
const endLineNum = parseInt(endLineEl.getAttribute('data-value'), 10);
return this._getRangeFromDiff(startLineNum, range.startOffset, endLineNum,
range.endOffset, side);
@@ -176,9 +177,9 @@
* @param {!string} side The side that is currently selected.
* @return {string} The selected diff text.
*/
_getRangeFromDiff: function(startLineNum, startOffset, endLineNum,
endOffset, side) {
var lines = this._getDiffLines(side).slice(startLineNum - 1, endLineNum);
_getRangeFromDiff(startLineNum, startOffset, endLineNum, endOffset, side) {
const lines =
this._getDiffLines(side).slice(startLineNum - 1, endLineNum);
if (lines.length) {
lines[lines.length - 1] = lines[lines.length - 1]
.substring(0, endOffset);
@@ -193,17 +194,13 @@
* @param {!string} side The side that is currently selected.
* @return {Array.string} An array of strings indexed by line number.
*/
_getDiffLines: function(side) {
_getDiffLines(side) {
if (this._linesCache[side]) {
return this._linesCache[side];
}
var lines = [];
var chunk;
var key = side === 'left' ? 'a' : 'b';
for (var chunkIndex = 0;
chunkIndex < this.diff.content.length;
chunkIndex++) {
chunk = this.diff.content[chunkIndex];
let lines = [];
const key = side === 'left' ? 'a' : 'b';
for (const chunk of this.diff.content) {
if (chunk.ab) {
lines = lines.concat(chunk.ab);
} else if (chunk[key]) {
@@ -222,16 +219,16 @@
* @param {!string} side The side that is currently selected.
* @return {string} The selected comment text.
*/
_getCommentLines: function(sel, side) {
var range = GrRangeNormalizer.normalize(sel.getRangeAt(0));
var content = [];
_getCommentLines(sel, side) {
const range = GrRangeNormalizer.normalize(sel.getRangeAt(0));
const content = [];
// Query the diffElement for comments.
var messages = this.diffBuilder.diffElement.querySelectorAll(
'.side-by-side [data-side="' + side +
'"] .message *, .unified .message *');
const messages = this.diffBuilder.diffElement.querySelectorAll(
`.side-by-side [data-side="${side
}"] .message *, .unified .message *`);
for (var i = 0; i < messages.length; i++) {
var el = messages[i];
for (let i = 0; i < messages.length; i++) {
const el = messages[i];
// Check if the comment element exists inside the selection.
if (sel.containsNode(el, true)) {
// Padded elements require newlines for accurate spacing.
@@ -262,10 +259,10 @@
* @param {Range} range The normalized selection range.
* @return {string} The text within the selection.
*/
_getTextContentForRange: function(domNode, sel, range) {
_getTextContentForRange(domNode, sel, range) {
if (!sel.containsNode(domNode, true)) { return ''; }
var text = '';
let text = '';
if (domNode instanceof Text) {
text = domNode.textContent;
if (domNode === range.endContainer) {
@@ -275,9 +272,8 @@
text = text.substring(range.startOffset);
}
} else {
for (var i = 0; i < domNode.childNodes.length; i++) {
text += this._getTextContentForRange(domNode.childNodes[i],
sel, range);
for (const childNode of domNode.childNodes) {
text += this._getTextContentForRange(childNode, sel, range);
}
}
return text;

82
polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection_test.html
View File

@@ -101,13 +101,13 @@ limitations under the License.
</test-fixture>
<script>
suite('gr-diff-selection', function() {
var element;
var sandbox;
suite('gr-diff-selection', () => {
let element;
let sandbox;
var emulateCopyOn = function(target) {
var fakeEvent = {
target: target,
const emulateCopyOn = function(target) {
const fakeEvent = {
target,
preventDefault: sandbox.stub(),
clipboardData: {
setData: sandbox.stub(),
@@ -118,7 +118,7 @@ limitations under the License.
return fakeEvent;
};
setup(function() {
setup(() => {
element = fixture('basic');
sandbox = sinon.sandbox.create();
sandbox.stub(element, '_getCopyEventTarget');
@@ -145,11 +145,11 @@ limitations under the License.
};
});
teardown(function() {
teardown(() => {
sandbox.restore();
});
test('applies selected-left on left side click', function() {
test('applies selected-left on left side click', () => {
element.classList.add('selected-right');
element._cachedDiffBuilder.getSideByLineEl.returns('left');
MockInteractions.down(element);
@@ -160,7 +160,7 @@ limitations under the License.
'removes selected-right');
});
test('applies selected-right on right side click', function() {
test('applies selected-right on right side click', () => {
element.classList.add('selected-left');
element._cachedDiffBuilder.getSideByLineEl.returns('right');
MockInteractions.down(element);
@@ -170,41 +170,41 @@ limitations under the License.
element.classList.contains('selected-left'), 'removes selected-left');
});
test('ignores copy for non-content Element', function() {
test('ignores copy for non-content Element', () => {
sandbox.stub(element, '_getSelectedText');
emulateCopyOn(element.querySelector('.not-diff-row'));
assert.isFalse(element._getSelectedText.called);
});
test('asks for text for left side Elements', function() {
test('asks for text for left side Elements', () => {
element._cachedDiffBuilder.getSideByLineEl.returns('left');
sandbox.stub(element, '_getSelectedText');
emulateCopyOn(element.querySelector('div.contentText'));
assert.deepEqual(['left', false], element._getSelectedText.lastCall.args);
});
test('reacts to copy for content Elements', function() {
test('reacts to copy for content Elements', () => {
sandbox.stub(element, '_getSelectedText');
emulateCopyOn(element.querySelector('div.contentText'));
assert.isTrue(element._getSelectedText.called);
});
test('copy event is prevented for content Elements', function() {
test('copy event is prevented for content Elements', () => {
sandbox.stub(element, '_getSelectedText');
element._cachedDiffBuilder.getSideByLineEl.returns('left');
element._getSelectedText.returns('test');
var event = emulateCopyOn(element.querySelector('div.contentText'));
const event = emulateCopyOn(element.querySelector('div.contentText'));
assert.isTrue(event.preventDefault.called);
});
test('inserts text into clipboard on copy', function() {
test('inserts text into clipboard on copy', () => {
sandbox.stub(element, '_getSelectedText').returns('the text');
var event = emulateCopyOn(element.querySelector('div.contentText'));
const event = emulateCopyOn(element.querySelector('div.contentText'));
assert.deepEqual(
['Text', 'the text'], event.clipboardData.setData.lastCall.args);
});
test('copies content correctly', function() {
test('copies content correctly', () => {
// Fetch the line number.
element._cachedDiffBuilder.getLineElByChild = function(child) {
while (!child.classList.contains('content') && child.parentElement) {
@@ -216,9 +216,9 @@ limitations under the License.
element.classList.add('selected-left');
element.classList.remove('selected-right');
var selection = window.getSelection();
const selection = window.getSelection();
selection.removeAllRanges();
var range = document.createRange();
const range = document.createRange();
range.setStart(element.querySelector('div.contentText').firstChild, 3);
range.setEnd(
element.querySelectorAll('div.contentText')[4].firstChild, 2);
@@ -226,13 +226,13 @@ limitations under the License.
assert.equal(element._getSelectedText('left'), 'ba\nzin\nga');
});
test('copies comments', function() {
test('copies comments', () => {
element.classList.add('selected-left');
element.classList.add('selected-comment');
element.classList.remove('selected-right');
var selection = window.getSelection();
const selection = window.getSelection();
selection.removeAllRanges();
var range = document.createRange();
const range = document.createRange();
range.setStart(
element.querySelector('.gr-formatted-text *').firstChild, 3);
range.setEnd(
@@ -242,14 +242,14 @@ limitations under the License.
element._getSelectedText('left', true));
});
test('respects astral chars in comments', function() {
test('respects astral chars in comments', () => {
element.classList.add('selected-left');
element.classList.add('selected-comment');
element.classList.remove('selected-right');
var selection = window.getSelection();
const selection = window.getSelection();
selection.removeAllRanges();
var range = document.createRange();
var nodes = element.querySelectorAll('.gr-formatted-text *');
const range = document.createRange();
const nodes = element.querySelectorAll('.gr-formatted-text *');
range.setStart(nodes[2].childNodes[2], 13);
range.setEnd(nodes[2].childNodes[2], 23);
selection.addRange(range);
@@ -257,15 +257,15 @@ limitations under the License.
element._getSelectedText('left', true));
});
test('defers to default behavior for textarea', function() {
test('defers to default behavior for textarea', () => {
element.classList.add('selected-left');
element.classList.remove('selected-right');
var selectedTextSpy = sandbox.spy(element, '_getSelectedText');
const selectedTextSpy = sandbox.spy(element, '_getSelectedText');
emulateCopyOn(element.querySelector('textarea'));
assert.isFalse(selectedTextSpy.called);
});
test('regression test for 4794', function() {
test('regression test for 4794', () => {
element._cachedDiffBuilder.getLineElByChild = function(child) {
while (!child.classList.contains('content') && child.parentElement) {
child = child.parentElement;
@@ -276,9 +276,9 @@ limitations under the License.
element.classList.add('selected-right');
element.classList.remove('selected-left');
var selection = window.getSelection();
const selection = window.getSelection();
selection.removeAllRanges();
var range = document.createRange();
const range = document.createRange();
range.setStart(
element.querySelectorAll('div.contentText')[1].firstChild, 4);
range.setEnd(
@@ -287,12 +287,12 @@ limitations under the License.
assert.equal(element._getSelectedText('right'), ' other');
});
suite('_getTextContentForRange', function() {
var selection;
var range;
var nodes;
suite('_getTextContentForRange', () => {
let selection;
let range;
let nodes;
setup(function() {
setup(() => {
element.classList.add('selected-left');
element.classList.add('selected-comment');
element.classList.remove('selected-right');
@@ -302,7 +302,7 @@ limitations under the License.
nodes = element.querySelectorAll('.gr-formatted-text *');
});
test('multi level element contained in range', function() {
test('multi level element contained in range', () => {
range.setStart(nodes[2].childNodes[0], 1);
range.setEnd(nodes[2].childNodes[2], 7);
selection.addRange(range);
@@ -311,7 +311,7 @@ limitations under the License.
});
test('multi level element as startContainer of range', function() {
test('multi level element as startContainer of range', () => {
range.setStart(nodes[2].childNodes[1], 0);
range.setEnd(nodes[2].childNodes[2], 7);
selection.addRange(range);
@@ -319,7 +319,7 @@ limitations under the License.
'a differ');
});
test('startContainer === endContainer', function() {
test('startContainer === endContainer', () => {
range.setStart(nodes[0].firstChild, 2);
range.setEnd(nodes[0].firstChild, 12);
selection.addRange(range);
@@ -328,7 +328,7 @@ limitations under the License.
});
});
test('cache is reset when diff changes', function() {
test('cache is reset when diff changes', () => {
element._linesCache = {left: 'test', right: 'test'};
element.diff = {};
flushAsynchronousOperations();