UNPKG

vue-line-fit

Version:

analytically fit single line text to box

1 lines 3.66 kB
!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return e[n].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){null==window.vueComps&&(window.vueComps={}),window.vueComps.vueLineFit=i(1)},function(e,t,i){e.exports={mixins:[i(2)],props:{refit:{type:Boolean,"default":!1},letterSpacing:{type:Boolean,"default":!1},valign:{type:Boolean,"default":!1}},data:function(){return{mainStyle:{position:null,"white-space":"nowrap"},style:{fontSize:null,letterSpacing:null},calcLetterSpacing:!1,working:!0,dispose:null}},methods:{calc:function(){return this.working=!0,this.$nextTick(function(e){return function(){var t,i,n,s,o,l;if(e.$el)return l=window.getComputedStyle(e.$el,null),o=l.getPropertyValue("position"),("relative"!==o||"absolute"!==o)&&(e.mainStyle.position="relative"),t=e.$el.clientHeight-parseInt(l.getPropertyValue("padding-top"))-parseInt(l.getPropertyValue("padding-bottom")),i=e.$el.clientWidth-parseInt(l.getPropertyValue("padding-left"))-parseInt(l.getPropertyValue("padding-right")),e.working=!1,n=10*t/e.$els.size.clientHeight,s=10*i/e.$els.size.clientWidth,e.style.fontSize=Math.min(n,s)+"px",e.valign&&(e.style.lineHeight=e.style.fontSize),e.letterSpacing&&s>n?(e.calcLetterSpacing=!0,e.$nextTick(function(){var t;if(e.$el)return t=2*e.$els.spacing1.clientWidth-e.$els.spacing2.clientWidth,e.style.letterSpacing=(i-t)/(e.$els.spacing1.clientWidth-t)+"em",e.calcLetterSpacing=!1})):void 0}}(this))}},attached:function(){return this.calc(),this.refit?this.dispose=this.onElementResize(this.$el,this.calc):void 0},detached:function(){return"function"==typeof this.dispose?this.dispose():void 0}},e.exports.__esModule&&(e.exports=e.exports["default"]),("function"==typeof e.exports?e.exports.options:e.exports).template="<div v-bind:style=mainStyle class=line-fit><div v-el:size=v-el:size v-if=working style=font-size:10px;visibility:hidden;padding:0;position:absolute><slot></slot></div><div v-el:spacing1=v-el:spacing1 v-if=calcLetterSpacing style=letter-spacing:1em;visibility:hidden;padding:0;position:absolute v-bind:style=\"{'font-size':style.fontSize}\"><slot></slot></div><div v-el:spacing2=v-el:spacing2 v-if=calcLetterSpacing style=letter-spacing:2em;visibility:hidden;padding:0;position:absolute v-bind:style=\"{'font-size':style.fontSize}\"><slot></slot></div><div v-if=valign style=position:relative;top:50%;transform:translateY(-50%) v-bind:style=style class=line-fit-valign><slot></slot></div><div v-else=v-else v-bind:style=style class=line-fit-result><slot></slot></div></div>"},function(e,t){(function(){var t,i,n,s,o;o=!1,t=[],s=function(){return o?void 0:(o=!0,window.requestAnimationFrame?window.requestAnimationFrame(i):setTimeout(i,66))},i=function(e){var i,n,s;for(n=0,s=t.length;s>n;n++)(i=t[n])(e);return o=!1},window.addEventListener("resize",s),n=new MutationObserver(s),n.observe(document.body,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),e.exports={data:function(){return{resizeCbDisposables:[]}},methods:{onElementResize:function(e,i){var n,s,o,l;if(null!=e)return o=e.offsetHeight,l=e.offsetWidth,n=function(t){return o!==e.offsetHeight||l!==e.offsetWidth?(o=e.offsetHeight,l=e.offsetWidth,i(t)):void 0},t.push(n),s=function(){var e;return e=t.indexOf(n),e>-1?t.splice(e,1):void 0},this.resizeCbDisposables.push(s),function(e){return function(){var t;return s(),t=e.resizeCbDisposables.indexOf(s),t>-1?e.resizeCbDisposables.splice(t,1):void 0}}(this)}},beforeDestroy:function(){var e,t,i,n,s;for(i=this.resizeCbDisposables,s=[],e=0,t=i.length;t>e;e++)n=i[e],s.push(n());return s}}}).call(this)}]);