1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import settings from '../../globals/js/settings';
|
9 | import mixin from '../../globals/js/misc/mixin';
|
10 | import createComponent from '../../globals/js/mixins/create-component';
|
11 | import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
|
12 | import handles from '../../globals/js/mixins/handles';
|
13 | import toggleAttribute from '../../globals/js/misc/toggle-attribute';
|
14 |
|
15 | class InlineLoading extends mixin(
|
16 | createComponent,
|
17 | initComponentBySearch,
|
18 | handles
|
19 | ) {
|
20 | |
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | constructor(element, options) {
|
30 | super(element, options);
|
31 |
|
32 | const { initialState } = this.options;
|
33 | if (initialState) {
|
34 | this.setState(initialState);
|
35 | }
|
36 | }
|
37 |
|
38 | |
39 |
|
40 |
|
41 |
|
42 | setState(state) {
|
43 | const { states } = this.constructor;
|
44 | const values = Object.keys(states).map((key) => states[key]);
|
45 | if (values.indexOf(state) < 0) {
|
46 | throw new Error(
|
47 | `One of the following value should be given as the state: ${values.join(
|
48 | ', '
|
49 | )}`
|
50 | );
|
51 | }
|
52 |
|
53 | const elem = this.element;
|
54 | const {
|
55 | selectorSpinner,
|
56 | selectorFinished,
|
57 | selectorError,
|
58 | selectorTextActive,
|
59 | selectorTextFinished,
|
60 | selectorTextError,
|
61 | } = this.options;
|
62 | const spinner = elem.querySelector(selectorSpinner);
|
63 | const finished = elem.querySelector(selectorFinished);
|
64 | const error = elem.querySelector(selectorError);
|
65 | const textActive = elem.querySelector(selectorTextActive);
|
66 | const textFinished = elem.querySelector(selectorTextFinished);
|
67 | const textError = elem.querySelector(selectorTextError);
|
68 |
|
69 | if (spinner) {
|
70 | spinner.classList.toggle(
|
71 | this.options.classLoadingStop,
|
72 | state !== states.ACTIVE
|
73 | );
|
74 | toggleAttribute(
|
75 | spinner,
|
76 | 'hidden',
|
77 | state !== states.INACTIVE && state !== states.ACTIVE
|
78 | );
|
79 | }
|
80 |
|
81 | if (finished) {
|
82 | toggleAttribute(finished, 'hidden', state !== states.FINISHED);
|
83 | }
|
84 |
|
85 | if (error) {
|
86 | toggleAttribute(error, 'hidden', state !== states.ERROR);
|
87 | }
|
88 |
|
89 | if (textActive) {
|
90 | toggleAttribute(textActive, 'hidden', state !== states.ACTIVE);
|
91 | }
|
92 |
|
93 | if (textFinished) {
|
94 | toggleAttribute(textFinished, 'hidden', state !== states.FINISHED);
|
95 | }
|
96 |
|
97 | if (textError) {
|
98 | toggleAttribute(textError, 'hidden', state !== states.ERROR);
|
99 | }
|
100 |
|
101 | return this;
|
102 | }
|
103 |
|
104 | |
105 |
|
106 |
|
107 |
|
108 | static states = {
|
109 | INACTIVE: 'inactive',
|
110 | ACTIVE: 'active',
|
111 | FINISHED: 'finished',
|
112 | ERROR: 'error',
|
113 | };
|
114 |
|
115 | |
116 |
|
117 |
|
118 |
|
119 |
|
120 | static components = new WeakMap();
|
121 |
|
122 | |
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 | static get options() {
|
139 | const { prefix } = settings;
|
140 | return {
|
141 | selectorInit: '[data-inline-loading]',
|
142 | selectorSpinner: '[data-inline-loading-spinner]',
|
143 | selectorFinished: '[data-inline-loading-finished]',
|
144 | selectorError: '[data-inline-loading-error]',
|
145 | selectorTextActive: '[data-inline-loading-text-active]',
|
146 | selectorTextFinished: '[data-inline-loading-text-finished]',
|
147 | selectorTextError: '[data-inline-loading-text-error]',
|
148 | classLoadingStop: `${prefix}--loading--stop`,
|
149 | };
|
150 | }
|
151 | }
|
152 |
|
153 | export default InlineLoading;
|