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