@rem/vue-content-loader
Version:
SVG component to create placeholder loading, like Facebook cards loading.
516 lines (502 loc) • 11.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.contentLoaders = {})));
}(this, (function (exports) { 'use strict';
var nestRE = /^(attrs|props|on|nativeOn|class|style|hook)$/;
var babelHelperVueJsxMergeProps = function mergeJSXProps (objs) {
return objs.reduce(function (a, b) {
var aa, bb, key, nestedKey, temp;
for (key in b) {
aa = a[key];
bb = b[key];
if (aa && nestRE.test(key)) {
// normalize class
if (key === 'class') {
if (typeof aa === 'string') {
temp = aa;
a[key] = aa = {};
aa[temp] = true;
}
if (typeof bb === 'string') {
temp = bb;
b[key] = bb = {};
bb[temp] = true;
}
}
if (key === 'on' || key === 'nativeOn' || key === 'hook') {
// merge functions
for (nestedKey in bb) {
aa[nestedKey] = mergeFn(aa[nestedKey], bb[nestedKey]);
}
} else if (Array.isArray(aa)) {
a[key] = aa.concat(bb);
} else if (Array.isArray(bb)) {
a[key] = [aa].concat(bb);
} else {
for (nestedKey in bb) {
aa[nestedKey] = bb[nestedKey];
}
}
} else {
a[key] = b[key];
}
}
return a
}, {})
};
function mergeFn (a, b) {
return function () {
a && a.apply(this, arguments);
b && b.apply(this, arguments);
}
}
var uid = (function () {
return Math.random().toString(36).substring(2);
});
var ContentLoader = {
name: 'ContentLoader',
functional: true,
props: {
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 130
},
speed: {
type: Number,
default: 2
},
preserveAspectRatio: {
type: String,
default: 'xMidYMid meet'
},
primaryColor: {
type: String,
default: '#f9f9f9'
},
secondaryColor: {
type: String,
default: '#ecebeb'
},
uniqueKey: {
type: String
},
animate: {
type: Boolean,
default: true
}
},
render: function render(h, _ref) {
var props = _ref.props,
data = _ref.data,
children = _ref.children;
var idClip = props.uniqueKey ? "".concat(props.uniqueKey, "-idClip") : uid();
var idGradient = props.uniqueKey ? "".concat(props.uniqueKey, "-idGradient") : uid();
return h("svg", babelHelperVueJsxMergeProps([data, {
attrs: {
viewBox: "0 0 ".concat(props.width, " ").concat(props.height),
version: "1.1",
preserveAspectRatio: props.preserveAspectRatio
}
}]), [h("rect", {
style: {
fill: "url(#".concat(idGradient, ")")
},
attrs: {
"clip-path": "url(#".concat(idClip, ")"),
x: "0",
y: "0",
width: props.width,
height: props.height
}
}), h("defs", [h("clipPath", {
attrs: {
id: idClip
}
}, [children || h("rect", {
attrs: {
x: "0",
y: "0",
rx: "5",
ry: "5",
width: props.width,
height: props.height
}
})]), h("linearGradient", {
attrs: {
id: idGradient
}
}, [h("stop", {
attrs: {
offset: "0%",
"stop-color": props.primaryColor
}
}, [props.animate ? h("animate", {
attrs: {
attributeName: "offset",
values: "-2; 1",
dur: "".concat(props.speed, "s"),
repeatCount: "indefinite"
}
}) : null]), h("stop", {
attrs: {
offset: "50%",
"stop-color": props.secondaryColor
}
}, [props.animate ? h("animate", {
attrs: {
attributeName: "offset",
values: "-1.5; 1.5",
dur: "".concat(props.speed, "s"),
repeatCount: "indefinite"
}
}) : null]), h("stop", {
attrs: {
offset: "100%",
"stop-color": props.primaryColor
}
}, [props.animate ? h("animate", {
attrs: {
attributeName: "offset",
values: "-1; 2",
dur: "".concat(props.speed, "s"),
repeatCount: "indefinite"
}
}) : null])])])]);
}
};
var BulletListLoader = {
name: 'BulletListLoader',
functional: true,
render: function render(h, _ref) {
var data = _ref.data;
return h(ContentLoader, data, [h("circle", {
attrs: {
cx: "10",
cy: "20",
r: "8"
}
}), h("rect", {
attrs: {
x: "25",
y: "15",
rx: "5",
ry: "5",
width: "220",
height: "10"
}
}), h("circle", {
attrs: {
cx: "10",
cy: "50",
r: "8"
}
}), h("rect", {
attrs: {
x: "25",
y: "45",
rx: "5",
ry: "5",
width: "220",
height: "10"
}
}), h("circle", {
attrs: {
cx: "10",
cy: "80",
r: "8"
}
}), h("rect", {
attrs: {
x: "25",
y: "75",
rx: "5",
ry: "5",
width: "220",
height: "10"
}
}), h("circle", {
attrs: {
cx: "10",
cy: "110",
r: "8"
}
}), h("rect", {
attrs: {
x: "25",
y: "105",
rx: "5",
ry: "5",
width: "220",
height: "10"
}
})]);
}
};
var CodeLoader = {
name: 'CodeLoader',
functional: true,
render: function render(h, _ref) {
var data = _ref.data;
return h(ContentLoader, data, [h("rect", {
attrs: {
x: "0",
y: "0",
rx: "3",
ry: "3",
width: "70",
height: "10"
}
}), h("rect", {
attrs: {
x: "80",
y: "0",
rx: "3",
ry: "3",
width: "100",
height: "10"
}
}), h("rect", {
attrs: {
x: "190",
y: "0",
rx: "3",
ry: "3",
width: "10",
height: "10"
}
}), h("rect", {
attrs: {
x: "15",
y: "20",
rx: "3",
ry: "3",
width: "130",
height: "10"
}
}), h("rect", {
attrs: {
x: "155",
y: "20",
rx: "3",
ry: "3",
width: "130",
height: "10"
}
}), h("rect", {
attrs: {
x: "15",
y: "40",
rx: "3",
ry: "3",
width: "90",
height: "10"
}
}), h("rect", {
attrs: {
x: "115",
y: "40",
rx: "3",
ry: "3",
width: "60",
height: "10"
}
}), h("rect", {
attrs: {
x: "185",
y: "40",
rx: "3",
ry: "3",
width: "60",
height: "10"
}
}), h("rect", {
attrs: {
x: "0",
y: "60",
rx: "3",
ry: "3",
width: "30",
height: "10"
}
})]);
}
};
var FacebookLoader = {
name: 'FacebookLoader',
functional: true,
render: function render(h, _ref) {
var data = _ref.data;
return h(ContentLoader, data, [h("rect", {
attrs: {
x: "70",
y: "15",
rx: "4",
ry: "4",
width: "117",
height: "6.4"
}
}), h("rect", {
attrs: {
x: "70",
y: "35",
rx: "3",
ry: "3",
width: "85",
height: "6.4"
}
}), h("rect", {
attrs: {
x: "0",
y: "80",
rx: "3",
ry: "3",
width: "350",
height: "6.4"
}
}), h("rect", {
attrs: {
x: "0",
y: "100",
rx: "3",
ry: "3",
width: "380",
height: "6.4"
}
}), h("rect", {
attrs: {
x: "0",
y: "120",
rx: "3",
ry: "3",
width: "201",
height: "6.4"
}
}), h("circle", {
attrs: {
cx: "30",
cy: "30",
r: "30"
}
})]);
}
};
var ListLoader = {
name: 'ListLoader',
functional: true,
render: function render(h, _ref) {
var data = _ref.data;
return h(ContentLoader, data, [h("rect", {
attrs: {
x: "0",
y: "0",
rx: "3",
ry: "3",
width: "250",
height: "10"
}
}), h("rect", {
attrs: {
x: "20",
y: "20",
rx: "3",
ry: "3",
width: "220",
height: "10"
}
}), h("rect", {
attrs: {
x: "20",
y: "40",
rx: "3",
ry: "3",
width: "170",
height: "10"
}
}), h("rect", {
attrs: {
x: "0",
y: "60",
rx: "3",
ry: "3",
width: "250",
height: "10"
}
}), h("rect", {
attrs: {
x: "20",
y: "80",
rx: "3",
ry: "3",
width: "200",
height: "10"
}
}), h("rect", {
attrs: {
x: "20",
y: "100",
rx: "3",
ry: "3",
width: "80",
height: "10"
}
})]);
}
};
var InstagramLoader = {
name: 'InstagramLoader',
functional: true,
render: function render(h, _ref) {
var data = _ref.data;
return h(ContentLoader, babelHelperVueJsxMergeProps([data, {
attrs: {
height: 480
}
}]), [h("circle", {
attrs: {
cx: "30",
cy: "30",
r: "30"
}
}), h("rect", {
attrs: {
x: "75",
y: "13",
rx: "4",
ry: "4",
width: "100",
height: "13"
}
}), h("rect", {
attrs: {
x: "75",
y: "37",
rx: "4",
ry: "4",
width: "50",
height: "8"
}
}), h("rect", {
attrs: {
x: "0",
y: "70",
rx: "5",
ry: "5",
width: "400",
height: "400"
}
})]);
}
};
exports.ContentLoader = ContentLoader;
exports.BulletListLoader = BulletListLoader;
exports.CodeLoader = CodeLoader;
exports.FacebookLoader = FacebookLoader;
exports.ListLoader = ListLoader;
exports.InstagramLoader = InstagramLoader;
Object.defineProperty(exports, '__esModule', { value: true });
})));