Use jQuery niceness on blob_fork_suggestion

Fix
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10602#note_27871752
This commit is contained in:
Eric Eastwood 2017-04-21 13:56:27 -05:00
parent 9c35162f83
commit 5f7b4cb5d8
3 changed files with 43 additions and 44 deletions

View file

@ -16,47 +16,44 @@ const defaults = {
class BlobForkSuggestion { class BlobForkSuggestion {
constructor(options) { constructor(options) {
this.elementMap = Object.assign({}, defaults, options); this.elementMap = Object.assign({}, defaults, options);
this.onClickWrapper = this.onClick.bind(this); this.onOpenButtonClick = this.onOpenButtonClick.bind(this);
this.onCancelButtonClick = this.onCancelButtonClick.bind(this);
}
document.addEventListener('click', this.onClickWrapper); init() {
this.bindEvents();
return this;
}
bindEvents() {
$(this.elementMap.openButtons).on('click', this.onOpenButtonClick);
$(this.elementMap.cancelButtons).on('click', this.onCancelButtonClick);
} }
showSuggestionSection(forkPath, action = 'edit') { showSuggestionSection(forkPath, action = 'edit') {
[].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => { $(this.elementMap.suggestionSections).removeClass('hidden');
suggestionSection.classList.remove('hidden'); $(this.elementMap.forkButtons).attr('href', forkPath);
}); $(this.elementMap.actionTextPieces).text(action);
[].forEach.call(this.elementMap.forkButtons, (forkButton) => {
forkButton.setAttribute('href', forkPath);
});
[].forEach.call(this.elementMap.actionTextPieces, (actionTextPiece) => {
// eslint-disable-next-line no-param-reassign
actionTextPiece.textContent = action;
});
} }
hideSuggestionSection() { hideSuggestionSection() {
[].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => { $(this.elementMap.suggestionSections).addClass('hidden');
suggestionSection.classList.add('hidden');
});
} }
onClick(e) { onOpenButtonClick(e) {
const el = e.target; const forkPath = $(e.currentTarget).attr('data-fork-path');
const action = $(e.currentTarget).attr('data-action');
if ([].includes.call(this.elementMap.openButtons, el)) {
const { forkPath, action } = el.dataset;
this.showSuggestionSection(forkPath, action); this.showSuggestionSection(forkPath, action);
} }
if ([].includes.call(this.elementMap.cancelButtons, el)) { onCancelButtonClick() {
this.hideSuggestionSection(); this.hideSuggestionSection();
} }
}
destroy() { destroy() {
document.removeEventListener('click', this.onClickWrapper); $(this.elementMap.openButtons).off('click', this.onOpenButtonClick);
$(this.elementMap.cancelButtons).off('click', this.onCancelButtonClick);
} }
} }

View file

@ -97,7 +97,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
cancelButtons: document.querySelectorAll('.js-cancel-fork-suggestion-button'), cancelButtons: document.querySelectorAll('.js-cancel-fork-suggestion-button'),
suggestionSections: document.querySelectorAll('.js-file-fork-suggestion-section'), suggestionSections: document.querySelectorAll('.js-file-fork-suggestion-section'),
actionTextPieces: document.querySelectorAll('.js-file-fork-suggestion-section-action'), actionTextPieces: document.querySelectorAll('.js-file-fork-suggestion-section-action'),
}); })
.init();
} }
switch (page) { switch (page) {

View file

@ -3,20 +3,21 @@ import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
describe('BlobForkSuggestion', () => { describe('BlobForkSuggestion', () => {
let blobForkSuggestion; let blobForkSuggestion;
const openButtons = [document.createElement('div')]; const openButton = document.createElement('div');
const forkButtons = [document.createElement('a')]; const forkButton = document.createElement('a');
const cancelButtons = [document.createElement('div')]; const cancelButton = document.createElement('div');
const suggestionSections = [document.createElement('div')]; const suggestionSection = document.createElement('div');
const actionTextPieces = [document.createElement('div')]; const actionTextPiece = document.createElement('div');
beforeEach(() => { beforeEach(() => {
blobForkSuggestion = new BlobForkSuggestion({ blobForkSuggestion = new BlobForkSuggestion({
openButtons, openButtons: openButton,
forkButtons, forkButtons: forkButton,
cancelButtons, cancelButtons: cancelButton,
suggestionSections, suggestionSections: suggestionSection,
actionTextPieces, actionTextPieces: actionTextPiece,
}); })
.init();
}); });
afterEach(() => { afterEach(() => {
@ -25,13 +26,13 @@ describe('BlobForkSuggestion', () => {
it('showSuggestionSection', () => { it('showSuggestionSection', () => {
blobForkSuggestion.showSuggestionSection('/foo', 'foo'); blobForkSuggestion.showSuggestionSection('/foo', 'foo');
expect(suggestionSections[0].classList.contains('hidden')).toEqual(false); expect(suggestionSection.classList.contains('hidden')).toEqual(false);
expect(forkButtons[0].getAttribute('href')).toEqual('/foo'); expect(forkButton.getAttribute('href')).toEqual('/foo');
expect(actionTextPieces[0].textContent).toEqual('foo'); expect(actionTextPiece.textContent).toEqual('foo');
}); });
it('hideSuggestionSection', () => { it('hideSuggestionSection', () => {
blobForkSuggestion.hideSuggestionSection(); blobForkSuggestion.hideSuggestionSection();
expect(suggestionSections[0].classList.contains('hidden')).toEqual(true); expect(suggestionSection.classList.contains('hidden')).toEqual(true);
}); });
}); });