spino-elements/dist/spino-elements.umd.js

A Vue.js 2 component library for dynamically adjusting text sizes within elements using TextFit.

(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode(".break_line[data-v-2fc3c2c4]{white-space:normal!important}.normal_line[data-v-2fc3c2c4]{white-space:nowrap!important}.sprite-container[data-v-19d3ffef]{display:flex;justify-content:center;align-items:center;z-index:9999}.win-amount-container[data-v-19d3ffef]{display:flex;flex-direction:column;justify-content:center;align-items:center;flex-direction:row}.win-amount[data-v-19d3ffef]{white-space:nowrap;display:flex;justify-content:center;align-items:center}.currency-code[data-v-19d3ffef]{display:flex;justify-content:center;align-items:center;transform:scale(.8)}.currency-code img[data-v-19d3ffef]{height:90%;width:70%;object-fit:contain}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
(function(o,c){typeof exports=="object"&&typeof module!="undefined"?c(exports,require("textfit")):typeof define=="function"&&define.amd?define(["exports","textfit"],c):(o=typeof globalThis!="undefined"?globalThis:o||self,c(o["spino-elements"]={},o.textFit))})(this,function(o,c){"use strict";function M(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var z=M(c),T=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}]})},L=[];function S(e,t,i,r,s,u,h,_){var n=typeof e=="function"?e.options:e;t&&(n.render=t,n.staticRenderFns=i,n._compiled=!0),r&&(n.functional=!0),u&&(n._scopeId="data-v-"+u);var l;if(h?(l=function(a){a=a||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!a&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(a=__VUE_SSR_CONTEXT__),s&&s.call(this,a),a&&a._registeredComponents&&a._registeredComponents.add(h)},n._ssrRegister=l):s&&(l=_?function(){s.call(this,(n.functional?this.parent:this).$root.$options.shadowRoot)}:s),l)if(n.functional){n._injectStyles=l;var p=n.render;n.render=function(m,f){return l.call(f),p(m,f)}}else{var d=n.beforeCreate;n.beforeCreate=d?[].concat(d,l):[l]}return{exports:e,options:n}}const W={name:"TextfitManager",props:{i_ElementToTextfit:Array,i_SameSizeElements:Array,i_PrioritizeElement:String,i_ResizeStopOn:Boolean,i_Component:String,isMobile:Boolean},methods:{TextfitLogic(e){if(!this.i_ResizeStopOn)return;const t=`${this.i_Component} Textfit`;if(window.ServiceWrapper)switch(e){case"resize":ServiceWrapper.LogMessage("Textfit Resize Triggered",t);break;case"debounce":ServiceWrapper.LogMessage("Textfit Debounced Triggered",t);break;default:ServiceWrapper.LogMessage("Textfit Triggered",t);break}this.i_ElementToTextfit.forEach(i=>{this.isElementHidden(i,t)||z.default($(`.${i}`))}),this.InitSameElements()},isElementHidden(e,t){const i=document.querySelectorAll(`.${e}`);for(const r of i)if(r.offsetWidth===0||r.offsetHeight===0)return window.ServiceWrapper&&ServiceWrapper.LogMessage(`[${t}] Skipping ${e} because it's still hidden.`),!0;return!1},getMinFontSize(e){let t=$(`.${e} span`).map(function(i,r){return $(r).css("font-size").replace("px","")}).get();return Math.min(...t)},TextFitSameSize(e,t,i=!1){!t||($(`.${e} span`).css("font-size",t+"px"),i&&$("[name-format='default']").css("transform","scale(1.2)"))},InitSameElements(){if(!this.i_SameSizeElements)return;let e=[],t=[],i=0;this.i_SameSizeElements.forEach((r,s)=>{let u=!1,h=this.getMinFontSize(r);this.i_PrioritizeElement==r&&(u=!0,i=s),t.push(h),e.push({className:r,MinSize:h,isMainElement:u})}),e.forEach(r=>{if(Math.min(...t)>=e[i].MinSize)return this.TextFitSameSize(r.className,e[i].MinSize,!0);this.TextFitSameSize(r.className,r.MinSize,!0)})},debounced(e,t){let i;return function(...r){i&&clearTimeout(i),i=setTimeout(()=>{t(...r),i=null},e)}},handleTextfit(e){this.TextfitLogic(e)},handleDebounce(){return this.debounced(300,()=>this.handleTextfit("debounce"))},handleResize(){this.handleTextfit("resize")}},mounted(){this.$nextTick(()=>{this.handleTextfit(),window.addEventListener("textfit",this.handleTextfit),this.isMobile?window.addEventListener("resize",this.handleResize):window.addEventListener("resize",this.handleDebounce())})}},v={};var w=S(W,T,L,!1,E,null,null,null);function E(e){for(let t in v)this[t]=v[t]}var b=function(){return w.exports}();function A(e){if(!e)return!1;const t=e.split(/\s+/);let i="";for(const r of t)r.length>i.length&&(i=r);return i}var k=function(){var e,t=this,i=t.$createElement,r=t._self._c||i;return r("div",[r("div",{class:[`textfit-${t.i_Class}`,{break_line:t.i_isBreakLine,normal_line:!t.i_isBreakLine}],style:{width:(e=t.getCharWidth(this.i_Text))!==null&&e!==void 0?e:"90%"}},[t._v(" "+t._s(t.i_Text)+" ")])])},R=[],q="";const F={name:"TextfitLimiter",data(){return{}},props:{i_Class:String,i_Text:String,config:{type:Object,default:()=>({minCharWidth:1,maxCharWidth:50,minPercentage:65,maxPercentage:85}),required:!0},i_isReactiveFix:{type:Boolean,default:!1},i_isBreakLine:{type:Boolean,default:!1}},methods:{getCharWidth(e){var l,p,d,a,m,f,x,y;let t=e;this.i_isBreakLine&&(t=A(e));const i=document.createElement("span");i.textContent=t,i.style.fontSize="10px",i.style.visibility="hidden",document.body.appendChild(i);const r=i.getBoundingClientRect().width;document.body.removeChild(i);const s=(p=(l=this.config)==null?void 0:l.minCharWidth)!=null?p:1,u=(a=(d=this.config)==null?void 0:d.maxCharWidth)!=null?a:50,h=(f=(m=this.config)==null?void 0:m.minPercentage)!=null?f:65,_=(y=(x=this.config)==null?void 0:x.maxPercentage)!=null?y:85,n=h+(_-h)*(r-s)/(u-s);return this.OverrideWidth(Math.min(_,Math.max(h,n))+"%")},OverrideWidth(e){return e}},watch:{i_Text(e){this.i_isReactiveFix&&($(`.textfit-${this.i_Class} span`).text(e),setTimeout(()=>{$(`.textfit-${this.i_Class} span`).text(e)},0),window.dispatchEvent(new Event("textfit")))}}},C={};var P=S(F,k,R,!1,I,"2fc3c2c4",null,null);function I(e){for(let t in C)this[t]=C[t]}var B=function(){return P.exports}(),O=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"sprite-container"},[i("div",{staticClass:"win-amount-container"},[i("div",{staticClass:"win-amount"},e._l(e.CharsArray,function(r,s){return i("div",{key:`char-${s}`,style:{width:e.CharWidth(r)+"px",height:e.height+"px",display:"inline-block",background:"url("+e.i_SpritePath+"chars_sprite.png)-"+e.moveX(r)+"px 0px / "+e.CharSpriteWidth+"px "+e.height+"px"}})}),0),e.IsCurrencyCode?i("div",{staticClass:"currency-code"},e._l(e.LettersArray,function(r,s){return i("div",{key:`letter-${s}`,style:{width:e.LetterWidth(r)+"px",height:e.height+"px",display:"inline-block",background:"url("+e.i_SpritePath+"letters_sprite.png)-"+e.moveX(r)+"px 0px / "+e.LetterSpriteWidth+"px "+e.height+"px"}})}),0):e._e()])])},H=[],N="";const X={name:"SpriteFont",props:{i_Chars:String,i_SpritePath:String,i_SizeMultiplater:Number,i_CurrencyCode:String},data(){return{Chars:"",CharsArray:[],LettersArray:[],IsCurrencyCode:!1,SpriteChars:["1","2","3","4","5","6","7","8","9","0",",",".","$","\xA5","\u20AC","\u20BD","\xA3"],SpriteLetters:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]}},computed:{CharWidth(){return e=>{switch(e){case 0:return this.i_SizeMultiplater*110;case 10:case 11:return this.i_SizeMultiplater*55;case 15:case 16:return this.i_SizeMultiplater*145;default:return this.i_SizeMultiplater*130}}},LetterWidth(){return e=>{switch(e){case 0:case 12:return this.i_SizeMultiplater*135;case 1:return this.i_SizeMultiplater*118;case 2:case 16:return this.i_SizeMultiplater*122;case 3:case 7:case 14:case 17:case 18:case 20:return this.i_SizeMultiplater*120;case 4:case 5:case 11:return this.i_SizeMultiplater*105;case 6:case 21:return this.i_SizeMultiplater*125;case 8:return this.i_SizeMultiplater*50;case 9:case 10:case 13:case 15:case 25:return this.i_SizeMultiplater*115;case 19:return this.i_SizeMultiplater*118;case 22:return this.i_SizeMultiplater*148;case 23:return this.i_SizeMultiplater*130;case 24:return this.i_SizeMultiplater*128;default:console.log("[Sprite]Invalid Input")}}},height(){return this.i_SizeMultiplater*181},CharSpriteWidth(){return this.i_SizeMultiplater*3400},LetterSpriteWidth(){return this.i_SizeMultiplater*5200},moveX(){return e=>e*this.i_SizeMultiplater*200}},methods:{HandleCurrencyCode(){this.i_Chars.includes(this.i_CurrencyCode)&&(this.IsCurrencyCode=!0)},CharsArraySplit(e){this.Chars=e.toString(),this.CharsArray=this.Chars.split(/(\s|\d)/).filter(t=>t!=" "&&t!=""),this.LettersArray=this.i_CurrencyCode.split("")},CharsMap(e){this.CharsArraySplit(e),this.CharsArray=this.CharsArray.map(t=>{let i=this.SpriteChars.findIndex(r=>r==t);if(i!=-1)return i}),this.LettersArray=this.LettersArray.map(t=>{let i=this.SpriteLetters.findIndex(r=>r.toUpperCase()==t.toUpperCase());if(i!=-1)return i}),this.CharsArray=this.CharsArray.filter(t=>t!=null||t!=null),this.LettersArray=this.LettersArray.filter(t=>t!=null||t!=null),this.HandleCurrencyCode()}},watch:{i_Chars(e){this.CharsMap(e)}},mounted(){this.CharsMap(this.i_Chars)}},g={};var D=S(X,O,H,!1,U,"19d3ffef",null,null);function U(e){for(let t in g)this[t]=g[t]}var j=function(){return D.exports}();o.Sprite=j,o.TextfitLimiter=B,o.TextfitManager=b,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});