UNPKG

5.12 kBJavaScriptView Raw
1/**
2 * Copyright IBM Corp. 2016, 2018
3 *
4 * This source code is licensed under the Apache-2.0 license found in the
5 * LICENSE file in the root directory of this source tree.
6 */
7
8import settings from '../../globals/js/settings';
9import mixin from '../../globals/js/misc/mixin';
10import createComponent from '../../globals/js/mixins/create-component';
11import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
12import handles from '../../globals/js/mixins/handles';
13import toggleAttribute from '../../globals/js/misc/toggle-attribute';
14
15class InlineLoading extends mixin(
16 createComponent,
17 initComponentBySearch,
18 handles
19) {
20 /**
21 * Spinner indicating loading state.
22 * @extends CreateComponent
23 * @extends InitComponentBySearch
24 * @extends Handles
25 * @param {HTMLElement} element The element working as a spinner.
26 * @param {object} [options] The component options.
27 * @param {string} [options.initialState] The initial state, should be `inactive`, `active` or `finished`.
28 */
29 constructor(element, options) {
30 super(element, options);
31 // Sets the initial state
32 const { initialState } = this.options;
33 if (initialState) {
34 this.setState(initialState);
35 }
36 }
37
38 /**
39 * Sets active/inactive state.
40 * @param {string} state The new state, should be `inactive`, `active` or `finished`.
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 * The list of states.
106 * @type {object<string, string>}
107 */
108 static states /* #__PURE_CLASS_PROPERTY__ */ = {
109 INACTIVE: 'inactive',
110 ACTIVE: 'active',
111 FINISHED: 'finished',
112 ERROR: 'error',
113 };
114
115 /**
116 * The map associating DOM element and spinner instance.
117 * @member InlineLoading.components
118 * @type {WeakMap}
119 */
120 static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
121
122 /**
123 * The component options.
124 * If `options` is specified in the constructor, {@linkcode InlineLoading.create .create()},
125 * or {@linkcode InlineLoading.init .init()},
126 * properties in this object are overriden for the instance being create and how {@linkcode InlineLoading.init .init()} works.
127 * @member InlineLoading.options
128 * @type {object}
129 * @property {string} selectorInit The CSS selector to find inline loading components.
130 * @property {string} selectorSpinner The CSS selector to find the spinner.
131 * @property {string} selectorFinished The CSS selector to find the "finished" icon.
132 * @property {string} selectorError The CSS selector to find the "error" icon.
133 * @property {string} selectorTextActive The CSS selector to find the text describing the active state.
134 * @property {string} selectorTextFinished The CSS selector to find the text describing the finished state.
135 * @property {string} selectorTextError The CSS selector to find the text describing the error state.
136 * @property {string} classLoadingStop The CSS class for spinner's stopped state.
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
153export default InlineLoading;