digital-clock-vue
Version:
️A digital clock simulation build on Vue.
656 lines (574 loc) • 17.1 kB
JavaScript
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
name: 'digital-number',
props: {
num: {
type: [Number, String],
default: 8,
validator: function (val) {
return parseInt(val) >= 0 && parseInt(val) <= 9;
}
},
color: {
type: String,
default: 'red'
}
},
computed: {
showTop() {
return parseInt(this.num) !== 1 && parseInt(this.num) !== 4;
},
showMiddle() {
return [2, 3, 4, 5, 6, 8, 9].indexOf(parseInt(this.num)) > -1;
},
showBottom() {
return [2, 3, 5, 6, 8, 9, 0].indexOf(parseInt(this.num)) > -1;
},
showLt() {
return [4, 5, 6, 8, 9, 0].indexOf(parseInt(this.num)) > -1;
},
showLb() {
return [2, 6, 8, 0].indexOf(parseInt(this.num)) > -1;
},
showRt() {
return parseInt(this.num) !== 5 && parseInt(this.num) !== 6;
},
showRb() {
return parseInt(this.num) !== 2;
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
const isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return (id, style) => addStyle(id, style);
}
let HEAD;
const styles = {};
function addStyle(id, css) {
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
let code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
style.element.setAttribute('media', css.media);
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
const index = style.ids.size - 1;
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index])
style.element.removeChild(nodes[index]);
if (nodes.length)
style.element.insertBefore(textNode, nodes[index]);
else
style.element.appendChild(textNode);
}
}
}
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "digital-number"
}, [_c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showTop,
expression: "showTop"
}],
staticClass: "top",
style: {
background: _vm.color
}
}), _vm._v(" "), _c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showRt,
expression: "showRt"
}],
staticClass: "rt",
style: {
background: _vm.color
}
}), _vm._v(" "), _c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showMiddle,
expression: "showMiddle"
}],
staticClass: "middle",
style: {
background: _vm.color
}
}), _vm._v(" "), _c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showRb,
expression: "showRb"
}],
staticClass: "rb",
style: {
background: _vm.color
}
}), _vm._v(" "), _c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showBottom,
expression: "showBottom"
}],
staticClass: "bottom",
style: {
background: _vm.color
}
}), _vm._v(" "), _c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showLt,
expression: "showLt"
}],
staticClass: "lt",
style: {
background: _vm.color
}
}), _vm._v(" "), _c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showLb,
expression: "showLb"
}],
staticClass: "lb",
style: {
background: _vm.color
}
})]);
};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = function (inject) {
if (!inject) return;
inject("data-v-513d4d3c_0", {
source: ".digital-number[data-v-513d4d3c]{float:left;position:relative}.digital-number .top[data-v-513d4d3c]{position:absolute;top:0;left:0;width:100%;height:8%;clip-path:polygon(10% 0,90% 0,95% 28%,87% 100%,13% 100%,5% 28%)}.digital-number .middle[data-v-513d4d3c]{position:absolute;width:100%;height:8%;top:50%;transform:translateY(-50%);clip-path:polygon(12.5% 0,87.5% 0,94% 50%,87.5% 100%,12.5% 100%,6% 50%)}.digital-number .bottom[data-v-513d4d3c]{position:absolute;width:100%;bottom:0;height:8%;clip-path:polygon(13% 0,87% 0,95% 72%,90% 100%,10% 100%,5% 72%)}.digital-number .lt[data-v-513d4d3c]{position:absolute;width:12%;height:50%;top:0;left:0;clip-path:polygon(38% 5%,100% 16%,100% 91.5%,45% 99.5%,0 93.4%,0 9%)}.digital-number .lb[data-v-513d4d3c]{position:absolute;width:12%;height:50%;bottom:0;left:0;clip-path:polygon(45.2% .6%,100% 8.5%,100% 84%,38% 95%,0 91%,0 7.5%)}.digital-number .rt[data-v-513d4d3c]{position:absolute;width:12%;height:50%;top:0;right:0;clip-path:polygon(62% 5%,100% 9%,100% 93.4%,55% 99.5%,0 91.5%,0 16%)}.digital-number .rb[data-v-513d4d3c]{position:absolute;width:12%;height:50%;bottom:0;right:0;clip-path:polygon(54.8% .6%,100% 7.5%,100% 91%,62% 95%,0 84%,0 8.5%)}",
map: undefined,
media: undefined
});
};
/* scoped */
const __vue_scope_id__ = "data-v-513d4d3c";
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = normalizeComponent({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
//
//
//
//
//
//
//
//
//
var script$1 = {
name: 'time-twink',
data() {
return {};
},
props: {
color: {
type: String
},
twink: {
type: Boolean,
default: true
}
}
};
/* script */
const __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "time-twink"
}, [_c('svg', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.twink,
expression: "twink"
}],
staticClass: "dot",
attrs: {
"version": "1.1",
"xmlns": "http://www.w3.org/2000/svg"
}
}, [_c('circle', {
attrs: {
"fill": _vm.color,
"cx": "50%",
"cy": "30%",
"r": "5%"
}
}), _vm._v(" "), _c('circle', {
attrs: {
"fill": _vm.color,
"cx": "50%",
"cy": "70%",
"r": "5%"
}
})])]);
};
var __vue_staticRenderFns__$1 = [];
/* style */
const __vue_inject_styles__$1 = function (inject) {
if (!inject) return;
inject("data-v-48a344e1_0", {
source: ".time-twink[data-v-48a344e1]{width:100%}.time-twink .dot[data-v-48a344e1]{width:100%;height:100%}",
map: undefined,
media: undefined
});
};
/* scoped */
const __vue_scope_id__$1 = "data-v-48a344e1";
/* module identifier */
const __vue_module_identifier__$1 = undefined;
/* functional template */
const __vue_is_functional_template__$1 = false;
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__$1 = normalizeComponent({
render: __vue_render__$1,
staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, createInjector, undefined, undefined);
//
let requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
setTimeout(callback, 1000 / 60);
};
var script$2 = {
components: {
digitalNumber: __vue_component__,
timeTwink: __vue_component__$1
},
data() {
return {
time: new Date()
};
},
mounted() {
requestAnimationFrame(this.addTime);
},
computed: {
hours() {
return this.time.getHours();
},
minutes() {
return this.time.getMinutes();
},
seconds() {
return this.time.getSeconds();
},
h1() {
return this.hours < 10 ? 0 : parseInt(this.hours % 100 / 10);
},
h2() {
return this.hours < 10 ? this.hours : parseInt(this.hours % 10);
},
m1() {
return this.minutes < 10 ? 0 : parseInt(this.minutes % 100 / 10);
},
m2() {
return this.minutes < 10 ? this.minutes : parseInt(this.minutes % 10);
},
s1() {
return this.seconds < 10 ? 0 : parseInt(this.seconds % 100 / 10);
},
s2() {
return this.seconds < 10 ? this.seconds : parseInt(this.seconds % 10);
},
twink() {
return this.s2 % 2 === 0;
},
numWidth() {
return this.showSeconds ? '14%' : '22%';
},
twinkWidth() {
return this.showSeconds ? '3%' : '6%';
}
},
props: {
color: {
type: String,
default: 'red'
},
showSeconds: {
type: Boolean,
default: false
}
},
methods: {
addTime() {
this.time = new Date();
requestAnimationFrame(this.addTime);
}
}
};
/* script */
const __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "digital-clock-vue"
}, [_c('digital-number', {
style: {
width: _vm.numWidth,
height: '100%'
},
attrs: {
"color": _vm.color,
"num": _vm.h1
}
}), _vm._v(" "), _c('digital-number', {
style: {
width: _vm.numWidth,
height: '100%'
},
attrs: {
"color": _vm.color,
"num": _vm.h2
}
}), _vm._v(" "), _c('time-twink', {
staticClass: "twink",
style: {
width: _vm.twinkWidth
},
attrs: {
"color": _vm.color,
"twink": _vm.twink
}
}), _vm._v(" "), _c('digital-number', {
style: {
width: _vm.numWidth,
height: '100%'
},
attrs: {
"color": _vm.color,
"num": _vm.m1
}
}), _vm._v(" "), _c('digital-number', {
style: {
width: _vm.numWidth,
height: '100%'
},
attrs: {
"color": _vm.color,
"num": _vm.m2
}
}), _vm._v(" "), _vm.showSeconds ? _c('time-twink', {
staticClass: "twink",
style: {
width: _vm.twinkWidth
},
attrs: {
"color": _vm.color,
"twink": _vm.twink
}
}) : _vm._e(), _vm._v(" "), _vm.showSeconds ? _c('digital-number', {
style: {
width: _vm.numWidth,
height: '100%'
},
attrs: {
"color": _vm.color,
"num": _vm.s1
}
}) : _vm._e(), _vm._v(" "), _vm.showSeconds ? _c('digital-number', {
style: {
width: _vm.numWidth,
height: '100%'
},
attrs: {
"color": _vm.color,
"num": _vm.s2
}
}) : _vm._e()], 1);
};
var __vue_staticRenderFns__$2 = [];
/* style */
const __vue_inject_styles__$2 = function (inject) {
if (!inject) return;
inject("data-v-371fcd32_0", {
source: ".digital-clock-vue[data-v-371fcd32]{box-sizing:border-box}.digital-clock-vue .twink[data-v-371fcd32]{height:100%;float:left}.digital-clock-vue .digital-number[data-v-371fcd32]{margin:0 1%}.digital-clock-vue .digital-number[data-v-371fcd32]:first-child{margin-left:0}.digital-clock-vue .digital-number[data-v-371fcd32]:last-child{margin-right:0}",
map: undefined,
media: undefined
});
};
/* scoped */
const __vue_scope_id__$2 = "data-v-371fcd32";
/* module identifier */
const __vue_module_identifier__$2 = undefined;
/* functional template */
const __vue_is_functional_template__$2 = false;
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__$2 = normalizeComponent({
render: __vue_render__$2,
staticRenderFns: __vue_staticRenderFns__$2
}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, createInjector, undefined, undefined);
// Import vue component
const install = function installDigitalClockVue(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component('DigitalClockVue', __vue_component__$2);
}; // Create module definition for Vue.use()
const plugin = {
install
}; // To auto-install when vue is found
// eslint-disable-next-line no-redeclare
/* global window, global */
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
} // Inject install function into component - allows component
// to be registered via Vue.use() as well as Vue.component()
__vue_component__$2.install = install; // Export component by default
export default __vue_component__$2;
export { __vue_component__ as DigitalNumber };