1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | 'use strict';
|
7 |
|
8 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
9 |
|
10 | var Util = _interopDefault(require('../util.js'));
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | var extendStatics = function(d, b) {
|
29 | extendStatics = Object.setPrototypeOf ||
|
30 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
31 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
32 | return extendStatics(d, b);
|
33 | };
|
34 |
|
35 | function __extends(d, b) {
|
36 | extendStatics(d, b);
|
37 | function __() { this.constructor = d; }
|
38 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
39 | }
|
40 |
|
41 | var Component = (function () {
|
42 | function Component(name, defaultProps, props) {
|
43 | var _this = this;
|
44 | this.template = '';
|
45 | this.id = null;
|
46 | this.eventHandlers = [];
|
47 | this.registeredElements = [];
|
48 | this.name = name;
|
49 | var element = typeof props.element === 'string'
|
50 | ? document.querySelector(props.element) : props.element;
|
51 | var config = {};
|
52 | if (element) {
|
53 | var dataConfig = Util.Selector.attrConfig(element);
|
54 | if (dataConfig) {
|
55 | config = dataConfig;
|
56 | }
|
57 | }
|
58 | this.defaultProps = defaultProps;
|
59 | this.props = Object.assign(defaultProps, config, props, { element: element });
|
60 | this.id = this.uid();
|
61 | this.elementListener = function (event) { return _this.onBeforeElementEvent(event); };
|
62 | this.setEventsHandler();
|
63 | }
|
64 | Component.prototype.setTemplate = function (template) {
|
65 | this.template = template;
|
66 | };
|
67 | Component.prototype.getTemplate = function () {
|
68 | return this.template;
|
69 | };
|
70 | Component.prototype.getElement = function () {
|
71 | return this.getProp('element') || null;
|
72 | };
|
73 | Component.prototype.setElement = function (element) {
|
74 | this.props.element = element;
|
75 | };
|
76 | Component.prototype.getId = function () {
|
77 | return this.id;
|
78 | };
|
79 | Component.prototype.uid = function () {
|
80 | return Math.random().toString(36).substr(2, 10);
|
81 | };
|
82 | Component.prototype.getName = function () {
|
83 | return this.name;
|
84 | };
|
85 | Component.prototype.getProps = function () {
|
86 | return this.props;
|
87 | };
|
88 | Component.prototype.getProp = function (name) {
|
89 | var defaultValue = this.defaultProps[name];
|
90 | return typeof this.props[name] !== 'undefined' ? this.props[name] : defaultValue;
|
91 | };
|
92 | Component.prototype.setProps = function (props) {
|
93 | var componentProps = Object.assign({}, props);
|
94 | this.props = Object.assign(this.props, componentProps);
|
95 | };
|
96 | Component.prototype.setProp = function (name, value) {
|
97 | if (typeof this.props[name] === 'undefined') {
|
98 | throw new Error('Cannot set an invalid prop');
|
99 | }
|
100 | this.props[name] = value;
|
101 | };
|
102 | Component.prototype.registerElements = function (elements) {
|
103 | var _this = this;
|
104 | elements.forEach(function (element) { return _this.registerElement(element); });
|
105 | };
|
106 | Component.prototype.registerElement = function (element) {
|
107 | element.target.addEventListener(element.event, this.elementListener);
|
108 | this.registeredElements.push(element);
|
109 | };
|
110 | Component.prototype.unregisterElements = function () {
|
111 | var _this = this;
|
112 | this.registeredElements.forEach(function (element) {
|
113 | _this.unregisterElement(element);
|
114 | });
|
115 | };
|
116 | Component.prototype.unregisterElement = function (element) {
|
117 | var registeredElementIndex = this.registeredElements
|
118 | .findIndex(function (el) { return el.target === element.target && el.event === element.event; });
|
119 | if (registeredElementIndex > -1) {
|
120 | element.target.removeEventListener(element.event, this.elementListener);
|
121 | this.registeredElements.splice(registeredElementIndex, 1);
|
122 | }
|
123 | else {
|
124 | console.error('Warning! Could not remove element:'
|
125 | + ' ' + (element.target + " with event: " + element.event + "."));
|
126 | }
|
127 | };
|
128 | Component.prototype.triggerEvent = function (eventName, detail, objectEventOnly) {
|
129 | var _this = this;
|
130 | if (detail === void 0) { detail = {}; }
|
131 | if (objectEventOnly === void 0) { objectEventOnly = false; }
|
132 | var eventNameObject = eventName.split('.').reduce(function (acc, current, index) {
|
133 | if (index === 0) {
|
134 | return current;
|
135 | }
|
136 | return acc + current.charAt(0).toUpperCase() + current.slice(1);
|
137 | });
|
138 | var eventNameAlias = "on" + eventNameObject
|
139 | .charAt(0).toUpperCase() + eventNameObject.slice(1);
|
140 | var props = this.getProps();
|
141 | this.eventHandlers.forEach(function (scope) {
|
142 | if (typeof scope[eventNameObject] === 'function') {
|
143 | scope[eventNameObject].apply(_this, [detail]);
|
144 | }
|
145 | if (typeof scope[eventNameAlias] === 'function') {
|
146 | props[eventNameAlias].apply(_this, [detail]);
|
147 | }
|
148 | });
|
149 | if (objectEventOnly) {
|
150 | return;
|
151 | }
|
152 | var element = this.getElement();
|
153 | if (element) {
|
154 | Util.Dispatch.elementEvent(element, eventName, this.name, detail);
|
155 | }
|
156 | else {
|
157 | Util.Dispatch.winDocEvent(eventName, this.name, detail);
|
158 | }
|
159 | };
|
160 | Component.prototype.preventClosable = function () {
|
161 | return false;
|
162 | };
|
163 | Component.prototype.destroy = function () {
|
164 | this.unregisterElements();
|
165 | };
|
166 | Component.prototype.onElementEvent = function (event) {
|
167 | };
|
168 | Component.prototype.setEventsHandler = function () {
|
169 | var props = this.getProps();
|
170 | var scope = Object.keys(props).reduce(function (cur, key) {
|
171 | if (typeof props[key] === 'function') {
|
172 | cur[key] = props[key];
|
173 | }
|
174 | return cur;
|
175 | }, {});
|
176 | if (Object.keys(scope).length > 0) {
|
177 | this.eventHandlers.push(scope);
|
178 | }
|
179 | };
|
180 | Component.prototype.onBeforeElementEvent = function (event) {
|
181 | if (this.preventClosable()) {
|
182 | return;
|
183 | }
|
184 | this.onElementEvent(event);
|
185 | };
|
186 | return Component;
|
187 | }());
|
188 |
|
189 | var Progress = (function (_super) {
|
190 | __extends(Progress, _super);
|
191 | function Progress(props) {
|
192 | var _this = _super.call(this, 'progress', {
|
193 | height: 8,
|
194 | min: 0,
|
195 | max: 100,
|
196 | now: 0,
|
197 | label: false,
|
198 | striped: false,
|
199 | animate: true,
|
200 | background: null,
|
201 | }, props) || this;
|
202 | _this.onTransition = false;
|
203 | _this.setHeight();
|
204 | _this.setAccessibility();
|
205 | if (_this.getProp('striped')) {
|
206 | _this.setStriped();
|
207 | }
|
208 | if (_this.getProp('background')) {
|
209 | _this.setBackground();
|
210 | }
|
211 | _this.set(_this.getProp('now'));
|
212 | return _this;
|
213 | }
|
214 | Progress.attachDOM = function () {
|
215 | Util.Observer.subscribe({
|
216 | componentClass: 'progress',
|
217 | onAdded: function (element, create) {
|
218 | create(new Progress({ element: element }));
|
219 | },
|
220 | onRemoved: function (element, remove) {
|
221 | remove('Progress', element);
|
222 | },
|
223 | });
|
224 | };
|
225 | Progress.prototype.set = function (value) {
|
226 | if (value === void 0) { value = 0; }
|
227 | var progressBar = this.getProgressBar();
|
228 | var min = this.getProp('min');
|
229 | var max = this.getProp('max');
|
230 | var progress = Math.round((value / (min + max)) * 100);
|
231 | if (value < min) {
|
232 | console.error("Progress: Warning, " + value + " is under min value.");
|
233 | return false;
|
234 | }
|
235 | if (value > max) {
|
236 | console.error("Progress: Warning, " + value + " is above max value.");
|
237 | return false;
|
238 | }
|
239 | progressBar.setAttribute('aria-valuenow', "" + value);
|
240 | if (this.getProp('label')) {
|
241 | progressBar.innerHTML = progress + "%";
|
242 | }
|
243 | progressBar.style.width = progress + "%";
|
244 | return true;
|
245 | };
|
246 | Progress.prototype.animateProgressBar = function (startAnimation) {
|
247 | if (startAnimation === void 0) { startAnimation = true; }
|
248 | if (!this.getProp('striped')) {
|
249 | throw new Error('Progress: Animation works only with striped progress.');
|
250 | return false;
|
251 | }
|
252 | var progressBar = this.getProgressBar();
|
253 | if (startAnimation && !progressBar.classList.contains('progress-bar-animated')) {
|
254 | progressBar.classList.add('progress-bar-animated');
|
255 | }
|
256 | if (!startAnimation && progressBar.classList.contains('progress-bar-animated')) {
|
257 | progressBar.classList.remove('progress-bar-animated');
|
258 | }
|
259 | return true;
|
260 | };
|
261 | Progress.prototype.show = function () {
|
262 | var progress = this.getElement();
|
263 | progress.style.height = this.getProp('height') + "px";
|
264 | this.triggerEvent(Util.Event.SHOW);
|
265 | this.triggerEvent(Util.Event.SHOWN);
|
266 | return true;
|
267 | };
|
268 | Progress.prototype.hide = function () {
|
269 | var progress = this.getElement();
|
270 | progress.style.height = '0px';
|
271 | this.triggerEvent(Util.Event.HIDE);
|
272 | this.triggerEvent(Util.Event.HIDDEN);
|
273 | return true;
|
274 | };
|
275 | Progress.prototype.destroy = function () {
|
276 | this.unregisterElements();
|
277 | this.hide();
|
278 | };
|
279 | Progress.prototype.setHeight = function () {
|
280 | this.getElement().style.height = this.getProp('height') + "px";
|
281 | };
|
282 | Progress.prototype.setAccessibility = function () {
|
283 | var progress = this.getElement();
|
284 | progress.setAttribute('aria-valuemin', "" + this.getProp('min'));
|
285 | progress.setAttribute('aria-valuemax', "" + this.getProp('max'));
|
286 | };
|
287 | Progress.prototype.setStriped = function () {
|
288 | this.getProgressBar().classList.add('progress-bar-striped');
|
289 | if (this.getProp('animate')) {
|
290 | this.animateProgressBar();
|
291 | }
|
292 | };
|
293 | Progress.prototype.setBackground = function () {
|
294 | var progressBar = this.getProgressBar();
|
295 | var background = this.getProp('background');
|
296 | if (progressBar.classList.contains("bg-" + background)) {
|
297 | progressBar.classList.add("bg-" + background);
|
298 | }
|
299 | };
|
300 | Progress.prototype.getProgressBar = function () {
|
301 | return this.getElement().querySelector('.progress-bar');
|
302 | };
|
303 | return Progress;
|
304 | }(Component));
|
305 | Progress.attachDOM();
|
306 |
|
307 | module.exports = Progress;
|
308 |
|