1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import { comment } from './comment';
import { CLEAR, FORM, FORM_CONTAINER, WHITE } from './constants';
import { login } from './login';
import { clearNote } from './note';
import {
selectCollapseButton,
selectForm,
selectFormContainer,
selectNoteContainer,
} from './utils';
import { commentIcon, compressIcon } from './wrapper_icons';
const form = content => `
<form id="${FORM}">
${content}
</form>
`;
const buttonAndForm = ({ content, toggleButton }) => `
<div id="${FORM_CONTAINER}" class="gitlab-form-open">
${toggleButton}
${form(content)}
</div>
`;
const addCommentForm = () => {
const formWrapper = selectForm();
formWrapper.innerHTML = comment;
};
const addLoginForm = () => {
const formWrapper = selectForm();
formWrapper.innerHTML = login;
};
function logoutUser() {
const { localStorage } = window;
// All the browsers we support have localStorage, so let's silently fail
// and go on with the rest of the functionality.
try {
localStorage.removeItem('token');
} catch (err) {
return;
}
clearNote();
addLoginForm();
}
function toggleForm() {
const collapseButton = selectCollapseButton();
const currentForm = selectForm();
const formContainer = selectFormContainer();
const noteContainer = selectNoteContainer();
const OPEN = 'open';
const CLOSED = 'closed';
/*
You may wonder why we spread the arrays before we reverse them.
In the immortal words of MDN,
Careful: reverse is destructive. It also changes the original array
*/
const openButtonClasses = ['gitlab-collapse-closed', 'gitlab-collapse-open'];
const closedButtonClasses = [...openButtonClasses].reverse();
const openContainerClasses = ['gitlab-wrapper-closed', 'gitlab-wrapper-open'];
const closedContainerClasses = [...openContainerClasses].reverse();
const stateVals = {
[OPEN]: {
buttonClasses: openButtonClasses,
containerClasses: openContainerClasses,
icon: compressIcon,
display: 'flex',
backgroundColor: WHITE,
},
[CLOSED]: {
buttonClasses: closedButtonClasses,
containerClasses: closedContainerClasses,
icon: commentIcon,
display: 'none',
backgroundColor: CLEAR,
},
};
const nextState = collapseButton.classList.contains('gitlab-collapse-open') ? CLOSED : OPEN;
const currentVals = stateVals[nextState];
formContainer.classList.replace(...currentVals.containerClasses);
formContainer.style.backgroundColor = currentVals.backgroundColor;
formContainer.classList.toggle('gitlab-form-open');
currentForm.style.display = currentVals.display;
collapseButton.classList.replace(...currentVals.buttonClasses);
collapseButton.innerHTML = currentVals.icon;
if (noteContainer && noteContainer.innerText.length > 0) {
noteContainer.style.display = currentVals.display;
}
}
export { addCommentForm, addLoginForm, buttonAndForm, logoutUser, toggleForm };
|
