tiny-essentials
Version:
Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.
1 lines • 9.91 kB
JavaScript
(()=>{"use strict";const e={d:(t,n)=>{if(Array.isArray(n))for(var o=0;o<n.length;){var i=n[o++],r=n[o++];e.o(t,i)?0===r&&o++:0===r?Object.defineProperty(t,i,{enumerable:!0,value:n[o++]}):Object.defineProperty(t,i,{enumerable:!0,get:r})}else for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};let t={};e.d(t,{TinyAnalogClock:()=>n});const n=class{#e;#t;#n;#o;#i=null;_getDate(){const e=new Date,t=e.getSeconds(),n=e.getMinutes(),o=e.getHours();return{now:e,s:t,m:n,h:o}}constructor(e={}){this.#o={bgColor:"#f0f0f0",borderColor:"#333",borderWidth:8,markColor:"#333",hourHandColor:"#000",minuteHandColor:"#444",secondHandColor:"#d81c1c",textColor:"#000",skinUrl:null,showNumbers:!0,showSeconds:!0,size:800,sizeAdjust:.04,padding:45,angleDistance:.95,pwH:.008,phH:.08,pwM:.005,phM:.03,...e},this.#e=document.createElement("div"),this.#e.className="analog-clock-container",this.#e.style.position="relative",this.#e.style.borderRadius="50%",this.#e.style.overflow="hidden",this.#e.style.boxSizing="border-box",this.#n=document.createElement("div"),this.#n.style.position="absolute",this.#n.style.inset="0",this.#n.style.backgroundSize="cover",this.#n.style.backgroundPosition="center",this.#n.style.zIndex="0",this.#t=document.createElement("div"),this.#t.style.position="absolute",this.#t.style.inset="0",this.#t.style.zIndex="1",this.#t.style.pointerEvents="none";const t=document.createElement("div");t.style.position="absolute",t.style.inset="0",t.style.zIndex="2",t.style.pointerEvents="none",t.innerHTML='\n <div class="hand hour-hand"></div>\n <div class="hand minute-hand"></div>\n <div class="hand second-hand"></div>\n <div class="center-pin"></div>\n ',this.#e.appendChild(this.#n),this.#e.appendChild(this.#t),this.#e.appendChild(t);const n=document.createElement("style");n.textContent="\n .analog-clock-container .hand {\n position: absolute;\n bottom: 50%;\n left: 50%;\n transform-origin: bottom center;\n border-radius: 4px;\n transform: translateX(-50%) rotate(0deg);\n z-index: 5;\n }\n .analog-clock-container .center-pin {\n position: absolute;\n top: 50%; left: 50%;\n width: 12px; height: 12px;\n background: #333;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n }\n .analog-clock-container .clock-mark {\n position: absolute;\n top: 50%; left: 50%;\n background: currentColor;\n transform-origin: center center;\n }\n .analog-clock-container .clock-number {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n font-family: sans-serif;\n font-weight: bold;\n text-align: center;\n line-height: 1;\n }\n ",this.#e.appendChild(n),this._applyConfig(),this._renderFace(),this._startTicker()}_applyConfig(){const e=this.#e.style,t=this.#o;e.width=`${t.size}px`,e.height=`${t.size}px`,e.border=`${t.borderWidth}px solid ${t.borderColor}`,e.backgroundColor=t.bgColor,t.skinUrl?(this.#n.style.backgroundImage=`url(${t.skinUrl})`,this.#n.style.display="block"):this.#n.style.display="none";const n=e=>{const t=this.#e.querySelector(e);if(!(t instanceof HTMLDivElement))throw new Error(`TinyAnalogClock: Element ${e} not found.`);return t},o=n(".hour-hand");o.style.backgroundColor=t.hourHandColor,o.style.width=.025*t.size+"px",o.style.height=.25*t.size+"px",o.style.marginLeft=.025*t.size/-2+"px",o.style.bottom="50%",o.style.left="50%",o.style.transformOrigin="bottom center";const i=n(".minute-hand");i.style.backgroundColor=t.minuteHandColor,i.style.width=.015*t.size+"px",i.style.height=.35*t.size+"px",i.style.marginLeft=.015*t.size/-2+"px";const r=n(".second-hand");t.showSeconds?(r.style.display="block",r.style.backgroundColor=t.secondHandColor,r.style.width=.005*t.size+"px",r.style.height=.4*t.size+"px",r.style.marginLeft=.005*t.size/-2+"px"):r.style.display="none",n(".center-pin").style.background=t.borderColor}_renderFace(){this.#t.innerHTML="";const e=this.#o.size/2-this.#o.borderWidth;for(let t=0;t<60;t++){const n=t%5==0,o=document.createElement("div");o.className="clock-mark";const i=n?this.#o.size*this.#o.pwH:this.#o.size*this.#o.pwM,r=n?this.#o.size*this.#o.phH:this.#o.size*this.#o.phM,s=this.#o.markColor;o.style.width=`${i}px`,o.style.height=`${r}px`,o.style.color=s;const a=e-this.#o.padding-r/2;o.style.transform=`translate(-50%, -50%) rotate(${6*t}deg) translate(0, -${a}px)`,this.#t.appendChild(o)}if(this.#o.showNumbers)for(let t=1;t<=12;t++){const n=30*t*(Math.PI/180),o=e*this.#o.angleDistance,i=e+Math.sin(n)*o,r=e-Math.cos(n)*o,s=document.createElement("div");s.className="clock-number",s.innerText=t.toString(),s.style.left=`${i}px`,s.style.top=`${r}px`,s.style.color=this.#o.textColor,s.style.fontSize=this.#o.size*this.#o.sizeAdjust+"px",this.#t.appendChild(s)}}_startTicker(){if(this.#i)return;const e=()=>{const{s:t,m:n,h:o}=this._getDate(),i=6*t,r=6*n+.1*t,s=o%12*30+.5*n,a=e=>{const t=this.#e.querySelector(e);if(!(t instanceof HTMLDivElement))throw new Error(`${e} not found.`);return t};this.#e.querySelector(".second-hand")&&(a(".second-hand").style.transform=`rotate(${i}deg)`),a(".minute-hand").style.transform=`rotate(${r}deg)`,a(".hour-hand").style.transform=`rotate(${s}deg)`,this.#i=requestAnimationFrame(e)};e()}get element(){return this.#e}set size(e){if("number"!=typeof e||e<=0||isNaN(e))throw new Error(`TinyAnalogClock: 'size' must be a positive number. Received: ${e}`);this.#o.size=e,this._applyConfig(),this._renderFace()}get size(){return this.#o.size}set skinUrl(e){if(null!==e&&"string"!=typeof e)throw new Error("TinyAnalogClock: 'skin' must be a URL string or null. Received type: "+typeof e);this.#o.skinUrl=e,this._applyConfig()}get skinUrl(){return this.#o.skinUrl}set borderColor(e){if("string"!=typeof e||""===e.trim())throw new Error(`TinyAnalogClock: 'borderColor' must be a non-empty string. Received: ${e}`);this.#o.borderColor=e,this._applyConfig(),this._renderFace()}get borderColor(){return this.#o.borderColor}set markColor(e){if("string"!=typeof e||""===e.trim())throw new Error(`TinyAnalogClock: 'markColor' must be a non-empty string. Received: ${e}`);this.#o.markColor=e,this._applyConfig(),this._renderFace()}get markColor(){return this.#o.markColor}set textColor(e){if("string"!=typeof e||""===e.trim())throw new Error(`TinyAnalogClock: 'textColor' must be a non-empty string. Received: ${e}`);this.#o.textColor=e,this._applyConfig(),this._renderFace()}get textColor(){return this.#o.textColor}set showNumbers(e){if("boolean"!=typeof e)throw new Error("TinyAnalogClock: 'showNumbers' must be a boolean. Received type: "+typeof e);this.#o.showNumbers=e,this._renderFace()}get showNumbers(){return this.#o.showNumbers}set bgColor(e){if("string"!=typeof e||!e)throw new Error("TinyAnalogClock: 'bgColor' must be a non-empty string.");this.#o.bgColor=e,this._applyConfig()}get bgColor(){return this.#o.bgColor}set borderWidth(e){if("number"!=typeof e||e<0)throw new Error("TinyAnalogClock: 'borderWidth' must be a non-negative number.");this.#o.borderWidth=e,this._applyConfig(),this._renderFace()}get borderWidth(){return this.#o.borderWidth}set hourHandColor(e){if("string"!=typeof e||!e)throw new Error("TinyAnalogClock: 'hourHandColor' must be a non-empty string.");this.#o.hourHandColor=e,this._applyConfig()}get hourHandColor(){return this.#o.hourHandColor}set minuteHandColor(e){if("string"!=typeof e||!e)throw new Error("TinyAnalogClock: 'minuteHandColor' must be a non-empty string.");this.#o.minuteHandColor=e,this._applyConfig()}get minuteHandColor(){return this.#o.minuteHandColor}set secondHandColor(e){if("string"!=typeof e||!e)throw new Error("TinyAnalogClock: 'secondHandColor' must be a non-empty string.");this.#o.secondHandColor=e,this._applyConfig()}get secondHandColor(){return this.#o.secondHandColor}set showSeconds(e){if("boolean"!=typeof e)throw new Error("TinyAnalogClock: 'showSeconds' must be a boolean.");this.#o.showSeconds=e,this._applyConfig()}get showSeconds(){return this.#o.showSeconds}set sizeAdjust(e){if("number"!=typeof e||e<=0)throw new Error("TinyAnalogClock: 'sizeAdjust' must be a positive number.");this.#o.sizeAdjust=e,this._renderFace()}get sizeAdjust(){return this.#o.sizeAdjust}set padding(e){if("number"!=typeof e||e<0)throw new Error("TinyAnalogClock: 'padding' must be a non-negative number.");this.#o.padding=e,this._renderFace()}get padding(){return this.#o.padding}set angleDistance(e){if("number"!=typeof e||e<=0)throw new Error("TinyAnalogClock: 'angleDistance' must be a positive number.");this.#o.angleDistance=e,this._renderFace()}get angleDistance(){return this.#o.angleDistance}set pwH(e){if("number"!=typeof e||e<=0)throw new Error("TinyAnalogClock: 'pwH' must be a positive number.");this.#o.pwH=e,this._renderFace()}get pwH(){return this.#o.pwH}set phH(e){if("number"!=typeof e||e<=0)throw new Error("TinyAnalogClock: 'phH' must be a positive number.");this.#o.phH=e,this._renderFace()}get phH(){return this.#o.phH}set pwM(e){if("number"!=typeof e||e<=0)throw new Error("TinyAnalogClock: 'pwM' must be a positive number.");this.#o.pwM=e,this._renderFace()}get pwM(){return this.#o.pwM}set phM(e){if("number"!=typeof e||e<=0)throw new Error("TinyAnalogClock: 'phM' must be a positive number.");this.#o.phM=e,this._renderFace()}get phM(){return this.#o.phM}destroy(){this.#i&&(cancelAnimationFrame(this.#i),this.#i=null),this.#e.remove()}};window.TinyAnalogClock=t.TinyAnalogClock})();