1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6 |
|
7 | var _mergeJSXProps = _interopDefault(require('babel-helper-vue-jsx-merge-props'));
|
8 |
|
9 | var uid = (function () {
|
10 | return Math.random().toString(36).substring(2);
|
11 | });
|
12 |
|
13 | var ContentLoader = {
|
14 | name: 'ContentLoader',
|
15 | functional: true,
|
16 | props: {
|
17 | width: {
|
18 | type: Number,
|
19 | default: 400
|
20 | },
|
21 | height: {
|
22 | type: Number,
|
23 | default: 130
|
24 | },
|
25 | speed: {
|
26 | type: Number,
|
27 | default: 2
|
28 | },
|
29 | preserveAspectRatio: {
|
30 | type: String,
|
31 | default: 'xMidYMid meet'
|
32 | },
|
33 | primaryColor: {
|
34 | type: String,
|
35 | default: '#f9f9f9'
|
36 | },
|
37 | secondaryColor: {
|
38 | type: String,
|
39 | default: '#ecebeb'
|
40 | },
|
41 | uniqueKey: {
|
42 | type: String
|
43 | },
|
44 | animate: {
|
45 | type: Boolean,
|
46 | default: true
|
47 | }
|
48 | },
|
49 | render: function render(h, _ref) {
|
50 | var props = _ref.props,
|
51 | data = _ref.data,
|
52 | children = _ref.children;
|
53 | var idClip = props.uniqueKey ? "".concat(props.uniqueKey, "-idClip") : uid();
|
54 | var idGradient = props.uniqueKey ? "".concat(props.uniqueKey, "-idGradient") : uid();
|
55 | return h("svg", _mergeJSXProps([data, {
|
56 | attrs: {
|
57 | viewBox: "0 0 ".concat(props.width, " ").concat(props.height),
|
58 | version: "1.1",
|
59 | preserveAspectRatio: props.preserveAspectRatio
|
60 | }
|
61 | }]), [h("rect", {
|
62 | style: {
|
63 | fill: "url(#".concat(idGradient, ")")
|
64 | },
|
65 | attrs: {
|
66 | "clip-path": "url(#".concat(idClip, ")"),
|
67 | x: "0",
|
68 | y: "0",
|
69 | width: props.width,
|
70 | height: props.height
|
71 | }
|
72 | }), h("defs", [h("clipPath", {
|
73 | attrs: {
|
74 | id: idClip
|
75 | }
|
76 | }, [children || h("rect", {
|
77 | attrs: {
|
78 | x: "0",
|
79 | y: "0",
|
80 | rx: "5",
|
81 | ry: "5",
|
82 | width: props.width,
|
83 | height: props.height
|
84 | }
|
85 | })]), h("linearGradient", {
|
86 | attrs: {
|
87 | id: idGradient
|
88 | }
|
89 | }, [h("stop", {
|
90 | attrs: {
|
91 | offset: "0%",
|
92 | "stop-color": props.primaryColor
|
93 | }
|
94 | }, [props.animate ? h("animate", {
|
95 | attrs: {
|
96 | attributeName: "offset",
|
97 | values: "-2; 1",
|
98 | dur: "".concat(props.speed, "s"),
|
99 | repeatCount: "indefinite"
|
100 | }
|
101 | }) : null]), h("stop", {
|
102 | attrs: {
|
103 | offset: "50%",
|
104 | "stop-color": props.secondaryColor
|
105 | }
|
106 | }, [props.animate ? h("animate", {
|
107 | attrs: {
|
108 | attributeName: "offset",
|
109 | values: "-1.5; 1.5",
|
110 | dur: "".concat(props.speed, "s"),
|
111 | repeatCount: "indefinite"
|
112 | }
|
113 | }) : null]), h("stop", {
|
114 | attrs: {
|
115 | offset: "100%",
|
116 | "stop-color": props.primaryColor
|
117 | }
|
118 | }, [props.animate ? h("animate", {
|
119 | attrs: {
|
120 | attributeName: "offset",
|
121 | values: "-1; 2",
|
122 | dur: "".concat(props.speed, "s"),
|
123 | repeatCount: "indefinite"
|
124 | }
|
125 | }) : null])])])]);
|
126 | }
|
127 | };
|
128 |
|
129 | var BulletListLoader = {
|
130 | name: 'BulletListLoader',
|
131 | functional: true,
|
132 | render: function render(h, _ref) {
|
133 | var data = _ref.data;
|
134 | return h(ContentLoader, data, [h("circle", {
|
135 | attrs: {
|
136 | cx: "10",
|
137 | cy: "20",
|
138 | r: "8"
|
139 | }
|
140 | }), h("rect", {
|
141 | attrs: {
|
142 | x: "25",
|
143 | y: "15",
|
144 | rx: "5",
|
145 | ry: "5",
|
146 | width: "220",
|
147 | height: "10"
|
148 | }
|
149 | }), h("circle", {
|
150 | attrs: {
|
151 | cx: "10",
|
152 | cy: "50",
|
153 | r: "8"
|
154 | }
|
155 | }), h("rect", {
|
156 | attrs: {
|
157 | x: "25",
|
158 | y: "45",
|
159 | rx: "5",
|
160 | ry: "5",
|
161 | width: "220",
|
162 | height: "10"
|
163 | }
|
164 | }), h("circle", {
|
165 | attrs: {
|
166 | cx: "10",
|
167 | cy: "80",
|
168 | r: "8"
|
169 | }
|
170 | }), h("rect", {
|
171 | attrs: {
|
172 | x: "25",
|
173 | y: "75",
|
174 | rx: "5",
|
175 | ry: "5",
|
176 | width: "220",
|
177 | height: "10"
|
178 | }
|
179 | }), h("circle", {
|
180 | attrs: {
|
181 | cx: "10",
|
182 | cy: "110",
|
183 | r: "8"
|
184 | }
|
185 | }), h("rect", {
|
186 | attrs: {
|
187 | x: "25",
|
188 | y: "105",
|
189 | rx: "5",
|
190 | ry: "5",
|
191 | width: "220",
|
192 | height: "10"
|
193 | }
|
194 | })]);
|
195 | }
|
196 | };
|
197 |
|
198 | var CodeLoader = {
|
199 | name: 'CodeLoader',
|
200 | functional: true,
|
201 | render: function render(h, _ref) {
|
202 | var data = _ref.data;
|
203 | return h(ContentLoader, data, [h("rect", {
|
204 | attrs: {
|
205 | x: "0",
|
206 | y: "0",
|
207 | rx: "3",
|
208 | ry: "3",
|
209 | width: "70",
|
210 | height: "10"
|
211 | }
|
212 | }), h("rect", {
|
213 | attrs: {
|
214 | x: "80",
|
215 | y: "0",
|
216 | rx: "3",
|
217 | ry: "3",
|
218 | width: "100",
|
219 | height: "10"
|
220 | }
|
221 | }), h("rect", {
|
222 | attrs: {
|
223 | x: "190",
|
224 | y: "0",
|
225 | rx: "3",
|
226 | ry: "3",
|
227 | width: "10",
|
228 | height: "10"
|
229 | }
|
230 | }), h("rect", {
|
231 | attrs: {
|
232 | x: "15",
|
233 | y: "20",
|
234 | rx: "3",
|
235 | ry: "3",
|
236 | width: "130",
|
237 | height: "10"
|
238 | }
|
239 | }), h("rect", {
|
240 | attrs: {
|
241 | x: "155",
|
242 | y: "20",
|
243 | rx: "3",
|
244 | ry: "3",
|
245 | width: "130",
|
246 | height: "10"
|
247 | }
|
248 | }), h("rect", {
|
249 | attrs: {
|
250 | x: "15",
|
251 | y: "40",
|
252 | rx: "3",
|
253 | ry: "3",
|
254 | width: "90",
|
255 | height: "10"
|
256 | }
|
257 | }), h("rect", {
|
258 | attrs: {
|
259 | x: "115",
|
260 | y: "40",
|
261 | rx: "3",
|
262 | ry: "3",
|
263 | width: "60",
|
264 | height: "10"
|
265 | }
|
266 | }), h("rect", {
|
267 | attrs: {
|
268 | x: "185",
|
269 | y: "40",
|
270 | rx: "3",
|
271 | ry: "3",
|
272 | width: "60",
|
273 | height: "10"
|
274 | }
|
275 | }), h("rect", {
|
276 | attrs: {
|
277 | x: "0",
|
278 | y: "60",
|
279 | rx: "3",
|
280 | ry: "3",
|
281 | width: "30",
|
282 | height: "10"
|
283 | }
|
284 | })]);
|
285 | }
|
286 | };
|
287 |
|
288 | var FacebookLoader = {
|
289 | name: 'FacebookLoader',
|
290 | functional: true,
|
291 | render: function render(h, _ref) {
|
292 | var data = _ref.data;
|
293 | return h(ContentLoader, data, [h("rect", {
|
294 | attrs: {
|
295 | x: "70",
|
296 | y: "15",
|
297 | rx: "4",
|
298 | ry: "4",
|
299 | width: "117",
|
300 | height: "6.4"
|
301 | }
|
302 | }), h("rect", {
|
303 | attrs: {
|
304 | x: "70",
|
305 | y: "35",
|
306 | rx: "3",
|
307 | ry: "3",
|
308 | width: "85",
|
309 | height: "6.4"
|
310 | }
|
311 | }), h("rect", {
|
312 | attrs: {
|
313 | x: "0",
|
314 | y: "80",
|
315 | rx: "3",
|
316 | ry: "3",
|
317 | width: "350",
|
318 | height: "6.4"
|
319 | }
|
320 | }), h("rect", {
|
321 | attrs: {
|
322 | x: "0",
|
323 | y: "100",
|
324 | rx: "3",
|
325 | ry: "3",
|
326 | width: "380",
|
327 | height: "6.4"
|
328 | }
|
329 | }), h("rect", {
|
330 | attrs: {
|
331 | x: "0",
|
332 | y: "120",
|
333 | rx: "3",
|
334 | ry: "3",
|
335 | width: "201",
|
336 | height: "6.4"
|
337 | }
|
338 | }), h("circle", {
|
339 | attrs: {
|
340 | cx: "30",
|
341 | cy: "30",
|
342 | r: "30"
|
343 | }
|
344 | })]);
|
345 | }
|
346 | };
|
347 |
|
348 | var ListLoader = {
|
349 | name: 'ListLoader',
|
350 | functional: true,
|
351 | render: function render(h, _ref) {
|
352 | var data = _ref.data;
|
353 | return h(ContentLoader, data, [h("rect", {
|
354 | attrs: {
|
355 | x: "0",
|
356 | y: "0",
|
357 | rx: "3",
|
358 | ry: "3",
|
359 | width: "250",
|
360 | height: "10"
|
361 | }
|
362 | }), h("rect", {
|
363 | attrs: {
|
364 | x: "20",
|
365 | y: "20",
|
366 | rx: "3",
|
367 | ry: "3",
|
368 | width: "220",
|
369 | height: "10"
|
370 | }
|
371 | }), h("rect", {
|
372 | attrs: {
|
373 | x: "20",
|
374 | y: "40",
|
375 | rx: "3",
|
376 | ry: "3",
|
377 | width: "170",
|
378 | height: "10"
|
379 | }
|
380 | }), h("rect", {
|
381 | attrs: {
|
382 | x: "0",
|
383 | y: "60",
|
384 | rx: "3",
|
385 | ry: "3",
|
386 | width: "250",
|
387 | height: "10"
|
388 | }
|
389 | }), h("rect", {
|
390 | attrs: {
|
391 | x: "20",
|
392 | y: "80",
|
393 | rx: "3",
|
394 | ry: "3",
|
395 | width: "200",
|
396 | height: "10"
|
397 | }
|
398 | }), h("rect", {
|
399 | attrs: {
|
400 | x: "20",
|
401 | y: "100",
|
402 | rx: "3",
|
403 | ry: "3",
|
404 | width: "80",
|
405 | height: "10"
|
406 | }
|
407 | })]);
|
408 | }
|
409 | };
|
410 |
|
411 | var InstagramLoader = {
|
412 | name: 'InstagramLoader',
|
413 | functional: true,
|
414 | render: function render(h, _ref) {
|
415 | var data = _ref.data;
|
416 | return h(ContentLoader, _mergeJSXProps([data, {
|
417 | attrs: {
|
418 | height: 480
|
419 | }
|
420 | }]), [h("circle", {
|
421 | attrs: {
|
422 | cx: "30",
|
423 | cy: "30",
|
424 | r: "30"
|
425 | }
|
426 | }), h("rect", {
|
427 | attrs: {
|
428 | x: "75",
|
429 | y: "13",
|
430 | rx: "4",
|
431 | ry: "4",
|
432 | width: "100",
|
433 | height: "13"
|
434 | }
|
435 | }), h("rect", {
|
436 | attrs: {
|
437 | x: "75",
|
438 | y: "37",
|
439 | rx: "4",
|
440 | ry: "4",
|
441 | width: "50",
|
442 | height: "8"
|
443 | }
|
444 | }), h("rect", {
|
445 | attrs: {
|
446 | x: "0",
|
447 | y: "70",
|
448 | rx: "5",
|
449 | ry: "5",
|
450 | width: "400",
|
451 | height: "400"
|
452 | }
|
453 | })]);
|
454 | }
|
455 | };
|
456 |
|
457 | exports.ContentLoader = ContentLoader;
|
458 | exports.BulletListLoader = BulletListLoader;
|
459 | exports.CodeLoader = CodeLoader;
|
460 | exports.FacebookLoader = FacebookLoader;
|
461 | exports.ListLoader = ListLoader;
|
462 | exports.InstagramLoader = InstagramLoader;
|