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