summaryrefslogtreecommitdiff
path: root/app/assets/javascripts
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r--app/assets/javascripts/image_diff/helpers/utils_helper.js19
-rw-r--r--app/assets/javascripts/image_diff/image_diff.js41
-rw-r--r--app/assets/javascripts/image_diff/replaced_image_diff.js34
-rw-r--r--app/assets/javascripts/image_diff/view_types.js2
-rw-r--r--app/assets/javascripts/lib/utils/image_utility.js4
-rw-r--r--app/assets/javascripts/notes.js2
6 files changed, 55 insertions, 47 deletions
diff --git a/app/assets/javascripts/image_diff/helpers/utils_helper.js b/app/assets/javascripts/image_diff/helpers/utils_helper.js
index d0cd42df073..4015f2db187 100644
--- a/app/assets/javascripts/image_diff/helpers/utils_helper.js
+++ b/app/assets/javascripts/image_diff/helpers/utils_helper.js
@@ -1,6 +1,7 @@
import ImageBadge from '../image_badge';
import ImageDiff from '../image_diff';
import ReplacedImageDiff from '../replaced_image_diff';
+import '../../commit/image_file';
export function resizeCoordinatesToImageElement(imageEl, meta) {
const { x, y, width, height } = meta;
@@ -76,7 +77,7 @@ export function getTargetSelection(event) {
};
}
-export function initImageDiff(file, canCreateNote, renderCommentBadge) {
+export function initImageDiff(fileEl, canCreateNote, renderCommentBadge) {
const options = {
canCreateNote,
renderCommentBadge,
@@ -84,13 +85,19 @@ export function initImageDiff(file, canCreateNote, renderCommentBadge) {
// ImageFile needs to be invoked before initImageDiff so that badges
// can mount to the correct location
- new gl.ImageFile(file); // eslint-disable-line no-new
+ new gl.ImageFile(fileEl); // eslint-disable-line no-new
- if (file.querySelector('.diff-file .js-single-image')) {
- const imageDiff = new ImageDiff(file, options);
+ if (fileEl.querySelector('.diff-file .js-single-image')) {
+ const imageDiff = new ImageDiff(fileEl, options);
imageDiff.init();
- } else if (file.querySelector('.diff-file .js-replaced-image')) {
- const replacedImageDiff = new ReplacedImageDiff(file, options);
+
+ return imageDiff;
+ } else if (fileEl.querySelector('.diff-file .js-replaced-image')) {
+ const replacedImageDiff = new ReplacedImageDiff(fileEl, options);
replacedImageDiff.init();
+
+ return replacedImageDiff;
}
+
+ return null;
}
diff --git a/app/assets/javascripts/image_diff/image_diff.js b/app/assets/javascripts/image_diff/image_diff.js
index 64af534eeb4..e171319cb1a 100644
--- a/app/assets/javascripts/image_diff/image_diff.js
+++ b/app/assets/javascripts/image_diff/image_diff.js
@@ -23,7 +23,7 @@ export default class ImageDiff {
bindEvents() {
this.imageClickedWrapper = this.imageClicked.bind(this);
- this.imageBlurredWrapper = this.imageBlurred.bind(this);
+ this.imageBlurredWrapper = imageDiffHelper.removeCommentIndicator.bind(null, this.imageFrameEl);
this.addBadgeWrapper = this.addBadge.bind(this);
this.removeBadgeWrapper = this.removeBadge.bind(this);
this.renderBadgesWrapper = this.renderBadges.bind(this);
@@ -56,34 +56,31 @@ export default class ImageDiff {
imageDiffHelper.showCommentIndicator(this.imageFrameEl, selection.browser);
}
- imageBlurred() {
- return imageDiffHelper.removeCommentIndicator(this.imageFrameEl);
- }
-
renderBadges() {
const discussionsEls = this.el.querySelectorAll('.note-container .discussion-notes .notes');
+ [...discussionsEls].forEach(this.renderBadge);
+ }
- [...discussionsEls].forEach((discussionEl, index) => {
- const imageBadge = imageDiffHelper
- .generateBadgeFromDiscussionDOM(this.imageFrameEl, discussionEl);
+ renderBadge(discussionEl, index) {
+ const imageBadge = imageDiffHelper
+ .generateBadgeFromDiscussionDOM(this.imageFrameEl, discussionEl);
- this.imageBadges.push(imageBadge);
+ this.imageBadges.push(imageBadge);
- const options = {
- coordinate: imageBadge.browser,
- noteId: imageBadge.noteId,
- };
+ const options = {
+ coordinate: imageBadge.browser,
+ noteId: imageBadge.noteId,
+ };
- if (this.renderCommentBadge) {
- imageDiffHelper.addImageCommentBadge(this.imageFrameEl, options);
- } else {
- const numberBadgeOptions = Object.assign(options, {
- badgeText: index + 1,
- });
+ if (this.renderCommentBadge) {
+ imageDiffHelper.addImageCommentBadge(this.imageFrameEl, options);
+ } else {
+ const numberBadgeOptions = Object.assign(options, {
+ badgeText: index + 1,
+ });
- imageDiffHelper.addImageBadge(this.imageFrameEl, numberBadgeOptions);
- }
- });
+ imageDiffHelper.addImageBadge(this.imageFrameEl, numberBadgeOptions);
+ }
}
addBadge(event) {
diff --git a/app/assets/javascripts/image_diff/replaced_image_diff.js b/app/assets/javascripts/image_diff/replaced_image_diff.js
index 5c7e4d5e5a6..4abd13fb472 100644
--- a/app/assets/javascripts/image_diff/replaced_image_diff.js
+++ b/app/assets/javascripts/image_diff/replaced_image_diff.js
@@ -70,21 +70,23 @@ export default class ReplacedImageDiff extends ImageDiff {
// Image_file.js has a fade animation of 200ms for loading the view
// Need to wait an additional 250ms for the images to be displayed
// on window in order to re-normalize their dimensions
- setTimeout(() => {
- // Generate badge coordinates on new view
- this.renderBadges();
-
- // Re-render indicator in new view
- if (indicator.removed) {
- const normalizedIndicator = imageDiffHelper
- .resizeCoordinatesToImageElement(this.imageEl, {
- x: indicator.x,
- y: indicator.y,
- width: indicator.image.width,
- height: indicator.image.height,
- });
- imageDiffHelper.showCommentIndicator(this.imageFrameEl, normalizedIndicator);
- }
- }, 250);
+ setTimeout(this.renderNewView.bind(this, indicator), 250);
+ }
+
+ renderNewView(indicator) {
+ // Generate badge coordinates on new view
+ this.renderBadges();
+
+ // Re-render indicator in new view
+ if (indicator.removed) {
+ const normalizedIndicator = imageDiffHelper
+ .resizeCoordinatesToImageElement(this.imageEl, {
+ x: indicator.x,
+ y: indicator.y,
+ width: indicator.image.width,
+ height: indicator.image.height,
+ });
+ imageDiffHelper.showCommentIndicator(this.imageFrameEl, normalizedIndicator);
+ }
}
}
diff --git a/app/assets/javascripts/image_diff/view_types.js b/app/assets/javascripts/image_diff/view_types.js
index 2bcfe05420a..ab0a595571f 100644
--- a/app/assets/javascripts/image_diff/view_types.js
+++ b/app/assets/javascripts/image_diff/view_types.js
@@ -5,5 +5,5 @@ export const viewTypes = {
};
export function isValidViewType(validate) {
- return Object.getOwnPropertyNames(viewTypes).find(viewType => viewType === validate);
+ return !!Object.getOwnPropertyNames(viewTypes).find(viewType => viewType === validate);
}
diff --git a/app/assets/javascripts/lib/utils/image_utility.js b/app/assets/javascripts/lib/utils/image_utility.js
index f906e595cc7..2977ec821cb 100644
--- a/app/assets/javascripts/lib/utils/image_utility.js
+++ b/app/assets/javascripts/lib/utils/image_utility.js
@@ -1,3 +1,5 @@
/* eslint-disable import/prefer-default-export */
-export const isImageLoaded = element => element.complete && element.naturalHeight !== 0;
+export function isImageLoaded(element) {
+ return element.complete && element.naturalHeight !== 0;
+}
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 3935407f661..5898ce65c5b 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1482,7 +1482,7 @@ export default class Notes {
// Submission successful! remove placeholder
$notesContainer.find(`#${noteUniqueId}`).remove();
- let $diffFile = $form.closest('.diff-file');
+ const $diffFile = $form.closest('.diff-file');
if ($diffFile.length > 0) {
const blurEvent = new CustomEvent('blur.imageDiff', {
detail: e,
View Lorry Controller Status