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:
parent
9c35162f83
commit
5f7b4cb5d8
3 changed files with 43 additions and 44 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue