vue-html-analog-clock
Version:
Analog Clock Component for VueJS
2 lines • 15 kB
JavaScript
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vueHtmlAnalogClock"]=t(require("vue")):e["vueHtmlAnalogClock"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"24fb":function(e,t,n){"use strict";function r(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"===typeof btoa){var i=o(r),a=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[n].concat(a).concat([i]).join("\n")}return[n].join("\n")}function o(e){var t=btoa(unescape(encodeURIComponent(JSON.stringify(e)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(t);return"/*# ".concat(n," */")}e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=r(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"===typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&o[s[0]]||(n&&(s[2]?s[2]="".concat(n," and ").concat(s[2]):s[2]=n),t.push(s))}},t}},"499e":function(e,t,n){"use strict";function r(e,t){for(var n=[],r={},o=0;o<t.length;o++){var i=t[o],a=i[0],c=i[1],s=i[2],l=i[3],d={id:e+":"+o,css:c,media:s,sourceMap:l};r[a]?r[a].parts.push(d):n.push(r[a]={id:a,parts:[d]})}return n}n.r(t),n.d(t,"default",(function(){return p}));var o="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},a=o&&(document.head||document.getElementsByTagName("head")[0]),c=null,s=0,l=!1,d=function(){},u=null,f="data-vue-ssr-id",v="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(e,t,n,o){l=n,u=o||{};var a=r(e,t);return m(a),function(t){for(var n=[],o=0;o<a.length;o++){var c=a[o],s=i[c.id];s.refs--,n.push(s)}t?(a=r(e,t),m(a)):a=[];for(o=0;o<n.length;o++){s=n[o];if(0===s.refs){for(var l=0;l<s.parts.length;l++)s.parts[l]();delete i[s.id]}}}}function m(e){for(var t=0;t<e.length;t++){var n=e[t],r=i[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(g(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var a=[];for(o=0;o<n.parts.length;o++)a.push(g(n.parts[o]));i[n.id]={id:n.id,refs:1,parts:a}}}}function h(){var e=document.createElement("style");return e.type="text/css",a.appendChild(e),e}function g(e){var t,n,r=document.querySelector("style["+f+'~="'+e.id+'"]');if(r){if(l)return d;r.parentNode.removeChild(r)}if(v){var o=s++;r=c||(c=h()),t=k.bind(null,r,o,!1),n=k.bind(null,r,o,!0)}else r=h(),t=y.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}var b=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}();function k(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=b(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function y(e,t){var n=t.css,r=t.media,o=t.sourceMap;if(r&&e.setAttribute("media",r),u.ssrId&&e.setAttribute(f,t.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{while(e.firstChild)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}},8875:function(e,t,n){var r,o,i;(function(n,a){o=[],r=a,i="function"===typeof r?r.apply(t,o):r,void 0===i||(e.exports=i)})("undefined"!==typeof self&&self,(function(){function e(){var t=Object.getOwnPropertyDescriptor(document,"currentScript");if(!t&&"currentScript"in document&&document.currentScript)return document.currentScript;if(t&&t.get!==e&&document.currentScript)return document.currentScript;try{throw new Error}catch(v){var n,r,o,i=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,a=/@([^@]*):(\d+):(\d+)\s*$/gi,c=i.exec(v.stack)||a.exec(v.stack),s=c&&c[1]||!1,l=c&&c[2]||!1,d=document.location.href.replace(document.location.hash,""),u=document.getElementsByTagName("script");s===d&&(n=document.documentElement.outerHTML,r=new RegExp("(?:[^\\n]+?\\n){0,"+(l-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),o=n.replace(r,"$1").trim());for(var f=0;f<u.length;f++){if("interactive"===u[f].readyState)return u[f];if(u[f].src===s)return u[f];if(s===d&&u[f].innerHTML&&u[f].innerHTML.trim()===o)return u[f]}return null}}return e}))},"8bbf":function(t,n){t.exports=e},b3fa:function(e,t,n){var r=n("24fb");t=r(!1),t.push([e.i,"div.vue-analog-clock{font-size:1.25rem;display:inline-block}div.vue-analog-clock div.clock-outer-ring{position:relative;width:100%;height:100%;border:1px solid #000;border-radius:50%;box-shadow:0 0 3px 3px rgba(0,0,0,.33);background-color:#117b49}div.vue-analog-clock div.clock-container{width:90%;height:90%;border:2px solid #1a1a1a;border-radius:50%;background-color:#fdfdf8;box-shadow:inset 0 0 8px 10px rgba(0,0,0,.15)}div.vue-analog-clock div.clock-container,div.vue-analog-clock div.clock-container div.pos-clock-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}div.vue-analog-clock div.clock-container div.center-dot{width:7%;height:7%;background-color:#333;border-radius:50%;z-index:11}div.vue-analog-clock div.clock-container div.pointer{position:absolute;left:50%;background-color:#333;border-top-right-radius:20px;border-bottom-right-radius:20px;border-top-left-radius:10px;border-bottom-left-radius:10px;transform-origin:left}div.vue-analog-clock div.clock-container div.hour-pointer{top:47.5%;width:32%;height:5%;z-index:10}div.vue-analog-clock div.clock-container div.minute-pointer{top:48.5%;width:40%;height:3%;z-index:9}div.vue-analog-clock div.clock-container div.second-pointer{top:49%;width:45%;height:2%;z-index:8;border-top-right-radius:500%;border-bottom-right-radius:500%}div.vue-analog-clock div.clock-container div.number{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:700;position:absolute;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vue-analog-clock div.clock-container div.number.number-0{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(90deg)}div.vue-analog-clock div.clock-container div.number.number-0 span{display:inline-block;transform:rotate(-90deg)}div.vue-analog-clock div.clock-container div.number.number-1{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(120deg)}div.vue-analog-clock div.clock-container div.number.number-1 span{display:inline-block;transform:rotate(-120deg)}div.vue-analog-clock div.clock-container div.number.number-2{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(150deg)}div.vue-analog-clock div.clock-container div.number.number-2 span{display:inline-block;transform:rotate(-150deg)}div.vue-analog-clock div.clock-container div.number.number-3{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(180deg)}div.vue-analog-clock div.clock-container div.number.number-3 span{display:inline-block;transform:rotate(-180deg)}div.vue-analog-clock div.clock-container div.number.number-4{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(210deg)}div.vue-analog-clock div.clock-container div.number.number-4 span{display:inline-block;transform:rotate(-210deg)}div.vue-analog-clock div.clock-container div.number.number-5{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(240deg)}div.vue-analog-clock div.clock-container div.number.number-5 span{display:inline-block;transform:rotate(-240deg)}div.vue-analog-clock div.clock-container div.number.number-6{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(270deg)}div.vue-analog-clock div.clock-container div.number.number-6 span{display:inline-block;transform:rotate(-270deg)}div.vue-analog-clock div.clock-container div.number.number-7{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(300deg)}div.vue-analog-clock div.clock-container div.number.number-7 span{display:inline-block;transform:rotate(-300deg)}div.vue-analog-clock div.clock-container div.number.number-8{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(330deg)}div.vue-analog-clock div.clock-container div.number.number-8 span{display:inline-block;transform:rotate(-330deg)}div.vue-analog-clock div.clock-container div.number.number-9{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(1turn)}div.vue-analog-clock div.clock-container div.number.number-9 span{display:inline-block;transform:rotate(-1turn)}div.vue-analog-clock div.clock-container div.number.number-10{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(390deg)}div.vue-analog-clock div.clock-container div.number.number-10 span{display:inline-block;transform:rotate(-390deg)}div.vue-analog-clock div.clock-container div.number.number-11{width:100%;top:49%;left:50%;transform:translate(-50%,-50%) rotate(420deg)}div.vue-analog-clock div.clock-container div.number.number-11 span{display:inline-block;transform:rotate(-420deg)}",""]),e.exports=t},bf47:function(e,t,n){"use strict";n("c84e")},c84e:function(e,t,n){var r=n("b3fa");r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);var o=n("499e").default;o("b7e75d50",r,!0,{sourceMap:!1,shadowMode:!1})},fb15:function(e,t,n){"use strict";if(n.r(t),"undefined"!==typeof window){var r=window.document.currentScript,o=n("8875");r=o(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:o});var i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vue-analog-clock",class:e.themeClass,style:{width:e.mySize+"px",height:e.mySize+"px"}},[n("div",{staticClass:"clock-outer-ring"},[n("div",{staticClass:"clock-container"},[n("div",{staticClass:"center-dot pos-clock-center"}),n("div",{staticClass:"pointer hour-pointer",style:e.hourPointerStyle}),n("div",{staticClass:"pointer minute-pointer",style:e.minutePointerStyle}),n("div",{staticClass:"pointer second-pointer",style:e.secondPointerStyle}),n("div",{staticClass:"numbers"},e._l(e.clockFaces,(function(t,r){return n("div",{key:t,staticClass:"number",class:"number-"+r},[n("span",{style:e.numberSpanStyle},[e._v(e._s(t))])])})),0)])])])},c=[],s=n("8bbf"),l=n.n(s);const d=()=>320;var u=l.a.extend({name:"vue-analog-clock",props:{theme:{type:String,default:"default"},size:{type:Number,default:d},autoSize:{type:Boolean,default:!1},value:{type:Date,default:()=>new Date},enableTimeFlow:{type:Boolean,default:!0},intValTime:{type:Number,default:100},transitionSpeed:{type:Number,default:80}},watch:{size(){this.mySize=this.size},value(){this.date=new Date(this.value)},enableTimeFlow(){this.enableTimeFlow?this.startInterval():null!=this.intVal&&window.clearInterval(this.intVal)}},data(){return{date:new Date,dateTemp:new Date,sDate:new Date,eDate:new Date,refreshFirstLoop:!0,intVal:null,mySize:this.size}},beforeMount(){this.dateTemp=new Date(this.value);let e=new Date(this.value);e.setMilliseconds(0),this.date=new Date(e),this.enableTimeFlow&&this.startInterval()},computed:{themeClass(){return"vue-analog-clock-"+this.theme},hourAngle(){const e=this.date.getHours(),t=e>11?e-12:e,n=this.date.getMinutes(),r=n/60,o=t+r,i=o/12,a=359*i-90;return a},minuteAngle(){const e=this.date.getMinutes(),t=this.date.getSeconds(),n=(e+t/60)/60,r=359*n-90;return r},secondAngle(){const e=this.date.getSeconds();return e/60*359-90},hourPointerStyle(){return this.calculatePointerStyle(this.hourAngle)},minutePointerStyle(){return this.calculatePointerStyle(this.minuteAngle)},secondPointerStyle(){return this.calculatePointerStyle(this.secondAngle)},clockFaces(){let e=[12];for(let t=1;t<12;t++)e.push(t);return e},numberSpanStyle(){let e=d(),t=this.mySize/e,n=100*t,r=Math.round(8*t);return{"font-size":n+"%",padding:r+"px"}}},methods:{startInterval(){null!=this.intVal&&window.clearInterval(this.intVal),this.refreshFirstLoop=!0,this.refresh(),this.intVal=window.setInterval(()=>{this.refresh()},this.intValTime)},refresh(){this.sDate=new Date,this.refreshFirstLoop&&(this.eDate=new Date(this.sDate),this.eDate.setMilliseconds(this.eDate.getMilliseconds()-this.intValTime),this.refreshFirstLoop=!1);var e=this.sDate.valueOf()-this.eDate.valueOf();this.eDate=new Date;var t=new Date(this.date);if(t.setMilliseconds(t.getMilliseconds()+e),this.date=new Date(t),this.$emit("input",this.date),this.autoSize&&this.$el){const e=this.$el,t=e.parentElement;if(!t)throw"Clock must have a parent element when using auto-size";const n=t.offsetWidth;this.mySize=n}},calculatePointerStyle(e){let t={};return t["transform"]="rotate("+e.toFixed(2)+"deg)",e<265&&e>-89&&(t["transition"]=`transform ${this.transitionSpeed}ms ease-in-out`),t}}}),f=u;n("bf47");function v(e,t,n,r,o,i,a,c){var s,l="function"===typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=n,l._compiled=!0),r&&(l.functional=!0),i&&(l._scopeId="data-v-"+i),a?(s=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},l._ssrRegister=s):o&&(s=c?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),s)if(l.functional){l._injectStyles=s;var d=l.render;l.render=function(e,t){return s.call(t),d(e,t)}}else{var u=l.beforeCreate;l.beforeCreate=u?[].concat(u,s):[s]}return{exports:e,options:l}}var p=v(f,a,c,!1,null,null,null),m=p.exports;t["default"]=m}})["default"]}));
//# sourceMappingURL=vueHtmlAnalogClock.umd.min.js.map