iran-vehicle-plate
Version:
This component provide ability to show iran license plate. for now it only support basic template. and it is provide new feature called shadow-root, and intended to be used on pages without use of any framework and be used with pure or any supporting appl
3 lines (2 loc) • 5.04 kB
JavaScript
var IranVehiclePlate=function(){"use strict";var t=".iran-vehicle-plate{background-color:#ddd;border:.08em solid #333;border-radius:.2em;box-shadow:inset .05em .05em .1em rgba(0,0,0,.3),inset -.05em -.05em .1em #fff,.05em .05em .1em rgba(0,0,0,.3);color:#282f25;display:inline-block;font-family:Markazi Text;height:1.2em;line-height:1.1em;margin:0 auto;min-width:7.8em;text-align:center}.iran-vehicle-plate>.blue-column{background-color:#042591;float:left;height:inherit;position:relative;width:.7em}.iran-vehicle-plate>.blue-column>.flag{margin:.1em}.iran-vehicle-plate>.blue-column>.flag :first-child{background-color:green;height:.1em}.iran-vehicle-plate>.blue-column>.flag :nth-child(2){background-color:#fff;height:.1em}.iran-vehicle-plate>.blue-column>.flag :nth-child(3){background-color:red;height:.1em}.iran-vehicle-plate>.blue-column>.text{bottom:.5em;color:#fff;font-family:sans-serif;font-size:.2em;left:.5em;line-height:1em;position:absolute;text-align:left}.iran-vehicle-plate>span{display:inline-block;float:left;font-size:1.3em;margin:0 .1em;padding:.05em;text-shadow:.02em .02em .03em rgba(0,0,0,.3),-.03em -.03em .02em #fff}.iran-vehicle-plate>.alphabet-column{line-height:.5em;margin:0}.iran-vehicle-plate>.iran-column{border-left:.08em solid #333;float:right;height:inherit;text-align:center;width:1.2em}.iran-vehicle-plate>.iran-column>span{display:block;font-size:.3em;line-height:1em}.iran-vehicle-plate>.iran-column>strong{font-size:1.1em;font-weight:400;line-height:.9em;text-shadow:.03em .03em .03em rgba(0,0,0,.3),-.04em -.04em .02em #fff}";!function(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}(t);class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._originalWidth=null,this._originalHeight=null}connectedCallback(){this.render(),setTimeout((()=>{const t=this.shadowRoot.querySelector(".plate");if(!this._originalWidth||!this._originalHeight){const e=t.getBoundingClientRect();this._originalWidth=e.width,this._originalHeight=e.height,console.log("Original dimensions:",this._originalWidth,this._originalHeight)}const e=this.getAttribute("width"),i=this.getAttribute("height"),n=e?parseFloat(e):null,a=i?parseFloat(i):null;(n||a)&&this.scaleToFit(n,a),this.setContent()}),0)}static get observedAttributes(){return["width","height","left-part","alphabet-part","right-part","code-part"]}attributeChangedCallback(t,e,i){if(this._originalWidth&&this._originalHeight){const t=this.getAttribute("width")?parseFloat(this.getAttribute("width")):null,e=this.getAttribute("height")?parseFloat(this.getAttribute("height")):null;this.scaleToFit(t,e)}this.setContent()}render(){this.shadowRoot.innerHTML=`\n <style>\n ${t}\n </style>\n <div class="plate">\n <div class="iran-vehicle-plate">\r\n <div class="blue-column">\r\n <div class="flag">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n <div class="text">\r\n <div>I.R.</div>\r\n <div>IRAN</div>\r\n </div>\r\n </div>\r\n\r\n <span class="left-data">\r\n ۲۶\r\n </span>\r\n <span class="alphabet-column alphabet-data">\r\n ی\r\n </span>\r\n <span class="right-data">\r\n ۸۳۷\r\n </span>\r\n <div class="iran-column">\r\n <span>ایــران</span>\r\n <strong class="code-data">۲۰</strong>\r\n </div>\r\n</div>\n </div>\n `}calculateScaleFactor(t,e){const i=this._originalWidth,n=this._originalHeight;let a;if(t&&e){const l=t/i,r=e/n;a=Math.min(l,r)}else a=t?t/i:e?e/n:1;return a}applyScaling(t){const e=this.shadowRoot.querySelector(".plate");e.style.transform=`scale(${t})`,e.style.transformOrigin="top left";const i=this._originalWidth*t,n=this._originalHeight*t;this.style.display="inline-block",this.style.width=`${i}px`,this.style.height=`${n}px`}scaleToFit(t,e){const i=this.calculateScaleFactor(t,e);this.applyScaling(i)}setContent(){const t=this.shadowRoot.querySelector(".plate");if(null==t)return;const e=t.querySelector(".left-data"),i=t.querySelector(".alphabet-data"),n=t.querySelector(".right-data"),a=t.querySelector(".code-data"),l=this.getAttribute("left-part"),r=this.getAttribute("alphabet-part"),o=this.getAttribute("right-part"),s=this.getAttribute("code-part");e.textContent=this.convertNumberToPersian(l),i.textContent=this.convertNumberToPersian(r),n.textContent=this.convertNumberToPersian(o),a.textContent=this.convertNumberToPersian(s)}convertNumberToPersian(t){if(null==t||null==t)return"";const e=["۰","۱","۲","۳","۴","۵","۶","۷","۸","۹"];return t.toString().replace(/\d/g,(t=>e[t]))}}return customElements.define("iran-vehicle-plate",e),e}();
//# sourceMappingURL=iran-vehicle-plate.js.map