blob: c017cf0afa2cc22d87be0c77fa2ef1e7470e730d (
plain)
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
|
import createFlash from '~/flash';
import axios from '../../../lib/utils/axios_utils';
import { __ } from '../../../locale';
export default class PayloadPreviewer {
constructor(trigger) {
this.trigger = trigger;
this.isVisible = false;
this.isInserted = false;
}
init() {
this.spinner = this.trigger.querySelector('.js-spinner');
this.text = this.trigger.querySelector('.js-text');
this.trigger.addEventListener('click', (event) => {
event.preventDefault();
if (this.isVisible) return this.hidePayload();
return this.requestPayload();
});
}
getContainer() {
return document.querySelector(this.trigger.dataset.payloadSelector);
}
requestPayload() {
if (this.isInserted) return this.showPayload();
this.spinner.classList.add('gl-display-inline-flex');
const container = this.getContainer();
return axios
.get(container.dataset.endpoint, {
responseType: 'text',
})
.then(({ data }) => {
this.spinner.classList.remove('gl-display-inline-flex');
this.insertPayload(data);
})
.catch(() => {
this.spinner.classList.remove('gl-display-inline-flex');
createFlash({
message: __('Error fetching payload data.'),
});
});
}
hidePayload() {
this.isVisible = false;
this.getContainer().classList.add('gl-display-none');
this.text.textContent = __('Preview payload');
}
showPayload() {
this.isVisible = true;
this.getContainer().classList.remove('gl-display-none');
this.text.textContent = __('Hide payload');
}
insertPayload(data) {
this.isInserted = true;
this.getContainer().innerHTML = data;
this.showPayload();
}
}
|
