d0dd392794
Apply diff annotations (intraline differences and comment ranges) by executing the annotation layers in order to each line. The diff builder maintains an ordered array of annotation layers which are communicated to GrDiffBuilder subclass instances. The builder also listens to each layer for notifications that annotations have changed for some line range and re-renders (i.e. re-applies the pipeline on DIV.contentText elements) accordingly. Change-Id: Iea0599d4869cafaadc0974158153a91d927913e8
353 lines
9.2 KiB
JavaScript
353 lines
9.2 KiB
JavaScript
// Copyright (C) 2016 The Android Open Source Project
|
||
//
|
||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||
// you may not use this file except in compliance with the License.
|
||
// You may obtain a copy of the License at
|
||
//
|
||
// http://www.apache.org/licenses/LICENSE-2.0
|
||
//
|
||
// Unless required by applicable law or agreed to in writing, software
|
||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
// See the License for the specific language governing permissions and
|
||
// limitations under the License.
|
||
(function() {
|
||
'use strict';
|
||
|
||
var STORAGE_DEBOUNCE_INTERVAL = 400;
|
||
|
||
Polymer({
|
||
is: 'gr-diff-comment',
|
||
|
||
/**
|
||
* Fired when the Reply action is triggered.
|
||
*
|
||
* @event reply
|
||
*/
|
||
|
||
/**
|
||
* Fired when the Done action is triggered.
|
||
*
|
||
* @event done
|
||
*/
|
||
|
||
/**
|
||
* Fired when this comment is discarded.
|
||
*
|
||
* @event comment-discard
|
||
*/
|
||
|
||
/**
|
||
* Fired when this comment is saved.
|
||
*
|
||
* @event comment-save
|
||
*/
|
||
|
||
/**
|
||
* Fired when this comment is updated.
|
||
*
|
||
* @event comment-update
|
||
*/
|
||
|
||
/**
|
||
* @event comment-mouse-over
|
||
*/
|
||
|
||
/**
|
||
* @event comment-mouse-out
|
||
*/
|
||
|
||
properties: {
|
||
changeNum: String,
|
||
comment: {
|
||
type: Object,
|
||
notify: true,
|
||
observer: '_commentChanged',
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
value: false,
|
||
reflectToAttribute: true,
|
||
},
|
||
draft: {
|
||
type: Boolean,
|
||
value: false,
|
||
observer: '_draftChanged',
|
||
},
|
||
editing: {
|
||
type: Boolean,
|
||
value: false,
|
||
observer: '_editingChanged',
|
||
},
|
||
patchNum: String,
|
||
showActions: Boolean,
|
||
projectConfig: Object,
|
||
|
||
_xhrPromise: Object, // Used for testing.
|
||
_messageText: {
|
||
type: String,
|
||
value: '',
|
||
observer: '_messageTextChanged',
|
||
},
|
||
},
|
||
|
||
observers: [
|
||
'_commentMessageChanged(comment.message)',
|
||
'_loadLocalDraft(changeNum, patchNum, comment)',
|
||
],
|
||
|
||
detached: function() {
|
||
this.cancelDebouncer('fire-update');
|
||
},
|
||
|
||
save: function() {
|
||
this.comment.message = this._messageText;
|
||
this.disabled = true;
|
||
|
||
this.$.storage.eraseDraftComment({
|
||
changeNum: this.changeNum,
|
||
patchNum: this.patchNum,
|
||
path: this.comment.path,
|
||
line: this.comment.line,
|
||
});
|
||
|
||
this._xhrPromise = this._saveDraft(this.comment).then(function(response) {
|
||
this.disabled = false;
|
||
if (!response.ok) { return response; }
|
||
|
||
return this.$.restAPI.getResponseObject(response).then(function(obj) {
|
||
var comment = obj;
|
||
comment.__draft = true;
|
||
// Maintain the ephemeral draft ID for identification by other
|
||
// elements.
|
||
if (this.comment.__draftID) {
|
||
comment.__draftID = this.comment.__draftID;
|
||
}
|
||
this.comment = comment;
|
||
this.editing = false;
|
||
this._fireSave();
|
||
return obj;
|
||
}.bind(this));
|
||
}.bind(this)).catch(function(err) {
|
||
this.disabled = false;
|
||
throw err;
|
||
}.bind(this));
|
||
},
|
||
|
||
_commentChanged: function(comment) {
|
||
this.editing = !!comment.__editing;
|
||
if (this.editing) { // It's a new draft/reply, notify.
|
||
this._fireUpdate();
|
||
}
|
||
},
|
||
|
||
_getEventPayload: function(opt_mixin) {
|
||
var payload = {
|
||
comment: this.comment,
|
||
patchNum: this.patchNum,
|
||
};
|
||
for (var k in opt_mixin) {
|
||
payload[k] = opt_mixin[k];
|
||
}
|
||
return payload;
|
||
},
|
||
|
||
_fireSave: function() {
|
||
this.fire('comment-save', this._getEventPayload());
|
||
},
|
||
|
||
_fireUpdate: function() {
|
||
this.debounce('fire-update', function() {
|
||
this.fire('comment-update', this._getEventPayload());
|
||
});
|
||
},
|
||
|
||
_draftChanged: function(draft) {
|
||
this.$.container.classList.toggle('draft', draft);
|
||
},
|
||
|
||
_editingChanged: function(editing, previousValue) {
|
||
this.$.container.classList.toggle('editing', editing);
|
||
if (editing) {
|
||
var textarea = this.$.editTextarea.textarea;
|
||
// Put the cursor at the end always.
|
||
textarea.selectionStart = textarea.value.length;
|
||
textarea.selectionEnd = textarea.selectionStart;
|
||
this.async(function() {
|
||
textarea.focus();
|
||
}.bind(this));
|
||
}
|
||
if (this.comment && this.comment.id) {
|
||
this.$$('.cancel').hidden = !editing;
|
||
}
|
||
if (this.comment) {
|
||
this.comment.__editing = this.editing;
|
||
}
|
||
if (editing != !!previousValue) {
|
||
// To prevent event firing on comment creation.
|
||
this._fireUpdate();
|
||
}
|
||
},
|
||
|
||
_computeLinkToComment: function(comment) {
|
||
return '#' + comment.line;
|
||
},
|
||
|
||
_computeSaveDisabled: function(draft) {
|
||
return draft == null || draft.trim() == '';
|
||
},
|
||
|
||
_handleTextareaKeydown: function(e) {
|
||
if (e.keyCode == 27) { // 'esc'
|
||
this._handleCancel(e);
|
||
}
|
||
},
|
||
|
||
_commentMessageChanged: function(message) {
|
||
this._messageText = message || '';
|
||
},
|
||
|
||
_messageTextChanged: function(newValue, oldValue) {
|
||
if (!this.comment || (this.comment && this.comment.id)) { return; }
|
||
|
||
this.debounce('store', function() {
|
||
var message = this._messageText;
|
||
|
||
var commentLocation = {
|
||
changeNum: this.changeNum,
|
||
patchNum: this.patchNum,
|
||
path: this.comment.path,
|
||
line: this.comment.line,
|
||
};
|
||
|
||
if ((!this._messageText || !this._messageText.length) && oldValue) {
|
||
// If the draft has been modified to be empty, then erase the storage
|
||
// entry.
|
||
this.$.storage.eraseDraftComment(commentLocation);
|
||
} else {
|
||
this.$.storage.setDraftComment(commentLocation, message);
|
||
}
|
||
this._fireUpdate();
|
||
}, STORAGE_DEBOUNCE_INTERVAL);
|
||
},
|
||
|
||
_handleLinkTap: function(e) {
|
||
e.preventDefault();
|
||
var hash = this._computeLinkToComment(this.comment);
|
||
// Don't add the hash to the window history if it's already there.
|
||
// Otherwise you mess up expected back button behavior.
|
||
if (window.location.hash == hash) { return; }
|
||
// Change the URL but don’t trigger a nav event. Otherwise it will
|
||
// reload the page.
|
||
page.show(window.location.pathname + hash, null, false);
|
||
},
|
||
|
||
_handleReply: function(e) {
|
||
this._preventDefaultAndBlur(e);
|
||
this.fire('reply', this._getEventPayload(), {bubbles: false});
|
||
},
|
||
|
||
_handleQuote: function(e) {
|
||
this._preventDefaultAndBlur(e);
|
||
this.fire(
|
||
'reply', this._getEventPayload({quote: true}), {bubbles: false});
|
||
},
|
||
|
||
_handleDone: function(e) {
|
||
this._preventDefaultAndBlur(e);
|
||
this.fire('done', this._getEventPayload(), {bubbles: false});
|
||
},
|
||
|
||
_handleEdit: function(e) {
|
||
this._preventDefaultAndBlur(e);
|
||
this._messageText = this.comment.message;
|
||
this.editing = true;
|
||
},
|
||
|
||
_handleSave: function(e) {
|
||
this._preventDefaultAndBlur(e);
|
||
this.save();
|
||
},
|
||
|
||
_handleCancel: function(e) {
|
||
this._preventDefaultAndBlur(e);
|
||
if (this.comment.message == null || this.comment.message.length == 0) {
|
||
this._fireDiscard();
|
||
return;
|
||
}
|
||
this._messageText = this.comment.message;
|
||
this.editing = false;
|
||
},
|
||
|
||
_fireDiscard: function() {
|
||
this.fire('comment-discard', this._getEventPayload());
|
||
},
|
||
|
||
_handleDiscard: function(e) {
|
||
this._preventDefaultAndBlur(e);
|
||
if (!this.comment.__draft) {
|
||
throw Error('Cannot discard a non-draft comment.');
|
||
}
|
||
this.editing = false;
|
||
this.disabled = true;
|
||
if (!this.comment.id) {
|
||
this.disabled = false;
|
||
this._fireDiscard();
|
||
return;
|
||
}
|
||
|
||
this._xhrPromise = this._deleteDraft(this.comment).then(
|
||
function(response) {
|
||
this.disabled = false;
|
||
if (!response.ok) { return response; }
|
||
|
||
this._fireDiscard();
|
||
}.bind(this)).catch(function(err) {
|
||
this.disabled = false;
|
||
throw err;
|
||
}.bind(this));
|
||
},
|
||
|
||
_preventDefaultAndBlur: function(e) {
|
||
e.preventDefault();
|
||
Polymer.dom(e).rootTarget.blur();
|
||
},
|
||
|
||
_saveDraft: function(draft) {
|
||
return this.$.restAPI.saveDiffDraft(this.changeNum, this.patchNum, draft);
|
||
},
|
||
|
||
_deleteDraft: function(draft) {
|
||
return this.$.restAPI.deleteDiffDraft(this.changeNum, this.patchNum,
|
||
draft);
|
||
},
|
||
|
||
_loadLocalDraft: function(changeNum, patchNum, comment) {
|
||
// Only apply local drafts to comments that haven't been saved
|
||
// remotely, and haven't been given a default message already.
|
||
if (!comment || comment.id || comment.message) {
|
||
return;
|
||
}
|
||
|
||
var draft = this.$.storage.getDraftComment({
|
||
changeNum: changeNum,
|
||
patchNum: patchNum,
|
||
path: comment.path,
|
||
line: comment.line,
|
||
});
|
||
|
||
if (draft) {
|
||
this.set('comment.message', draft.message);
|
||
}
|
||
},
|
||
|
||
_handleMouseEnter: function(e) {
|
||
this.fire('comment-mouse-over', this._getEventPayload());
|
||
},
|
||
|
||
_handleMouseLeave: function(e) {
|
||
this.fire('comment-mouse-out', this._getEventPayload());
|
||
},
|
||
});
|
||
})();
|