89 lines
3.1 KiB
JavaScript
89 lines
3.1 KiB
JavaScript
class CreateBranchDropdown {
|
|
constructor(el, targetBranchDropdown) {
|
|
this.targetBranchDropdown = targetBranchDropdown;
|
|
this.el = el;
|
|
this.dropdownBack = this.el.closest('.dropdown').querySelector('.dropdown-menu-back');
|
|
this.cancelButton = this.el.querySelector('.js-cancel-branch-btn');
|
|
this.newBranchField = this.el.querySelector('#new_branch_name');
|
|
this.newBranchCreateButton = this.el.querySelector('.js-new-branch-btn');
|
|
|
|
this.newBranchCreateButton.setAttribute('disabled', '');
|
|
|
|
this.addBindings();
|
|
this.cleanupWrapper = this.cleanup.bind(this);
|
|
document.addEventListener('beforeunload', this.cleanupWrapper);
|
|
}
|
|
|
|
cleanup() {
|
|
this.cleanBindings();
|
|
document.removeEventListener('beforeunload', this.cleanupWrapper);
|
|
}
|
|
|
|
cleanBindings() {
|
|
this.newBranchField.removeEventListener('keyup', this.enableBranchCreateButtonWrapper);
|
|
this.newBranchField.removeEventListener('change', this.enableBranchCreateButtonWrapper);
|
|
this.newBranchField.removeEventListener('keydown', this.handleNewBranchKeydownWrapper);
|
|
this.dropdownBack.removeEventListener('click', this.resetFormWrapper);
|
|
this.cancelButton.removeEventListener('click', this.handleCancelClickWrapper);
|
|
this.newBranchCreateButton.removeEventListener('click', this.createBranchWrapper);
|
|
}
|
|
|
|
addBindings() {
|
|
this.enableBranchCreateButtonWrapper = this.enableBranchCreateButton.bind(this);
|
|
this.handleNewBranchKeydownWrapper = this.handleNewBranchKeydown.bind(this);
|
|
this.resetFormWrapper = this.resetForm.bind(this);
|
|
this.handleCancelClickWrapper = this.handleCancelClick.bind(this);
|
|
this.createBranchWrapper = this.createBranch.bind(this);
|
|
|
|
this.newBranchField.addEventListener('keyup', this.enableBranchCreateButtonWrapper);
|
|
this.newBranchField.addEventListener('change', this.enableBranchCreateButtonWrapper);
|
|
this.newBranchField.addEventListener('keydown', this.handleNewBranchKeydownWrapper);
|
|
this.dropdownBack.addEventListener('click', this.resetFormWrapper);
|
|
this.cancelButton.addEventListener('click', this.handleCancelClickWrapper);
|
|
this.newBranchCreateButton.addEventListener('click', this.createBranchWrapper);
|
|
}
|
|
|
|
handleCancelClick(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
this.resetForm();
|
|
this.dropdownBack.click();
|
|
}
|
|
|
|
handleNewBranchKeydown(e) {
|
|
const keyCode = e.which;
|
|
const ENTER_KEYCODE = 13;
|
|
if (keyCode === ENTER_KEYCODE) {
|
|
this.createBranch(e);
|
|
}
|
|
}
|
|
|
|
enableBranchCreateButton() {
|
|
if (this.newBranchField.value !== '') {
|
|
this.newBranchCreateButton.removeAttribute('disabled');
|
|
} else {
|
|
this.newBranchCreateButton.setAttribute('disabled', '');
|
|
}
|
|
}
|
|
|
|
resetForm() {
|
|
this.newBranchField.value = '';
|
|
this.enableBranchCreateButtonWrapper();
|
|
}
|
|
|
|
createBranch(e) {
|
|
e.preventDefault();
|
|
|
|
if (this.newBranchCreateButton.getAttribute('disabled') === '') {
|
|
return;
|
|
}
|
|
const newBranchName = this.newBranchField.value;
|
|
this.targetBranchDropdown.setNewBranch(newBranchName);
|
|
this.resetForm();
|
|
}
|
|
}
|
|
|
|
window.gl = window.gl || {};
|
|
gl.CreateBranchDropdown = CreateBranchDropdown;
|