framework7/components/gauge/gauge.lazy.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var a=e.$,o=e.utils,r=(e.getDevice,e.getSupport,e.Class),s=(e.Modal,e.ConstructorMethods),l=(e.ModalMethods,e.$jsx),n=o.extend,i=o.deleteProps;class d extends r{constructor(e,t){void 0===t&&(t={}),super(t,[e]);const o=this,r=n({},e.params.gauge);o.useModulesParams(r),o.params=n(r,t);const{el:s}=o.params;if(!s)return o;const l=a(s);return 0===l.length?o:l[0].f7Gauge?l[0].f7Gauge:(n(o,{app:e,$el:l,el:l&&l[0]}),l[0].f7Gauge=o,o.useModules(),o.init(),o)}calcRadius(){const{size:e,borderWidth:t}=this.params;return e/2-t/2}calcBorderLength(){const e=this.calcRadius();return 2*Math.PI*e}render(){const e=this;if(e.params.render)return e.params.render.call(e,e);const{type:t,value:a,size:o,bgColor:r,borderBgColor:s,borderColor:n,borderWidth:i,valueText:d,valueTextColor:g,valueFontSize:c,valueFontWeight:u,labelText:f,labelTextColor:h,labelFontSize:m,labelFontWeight:x}=e.params,b="semicircle"===t,p=e.calcRadius(),v=e.calcBorderLength(),y=Math.max(Math.min(a,1),0);return l("svg",{class:"gauge-svg",width:`${o}px`,height:`${b?o/2:o}px`,viewBox:`0 0 ${o} ${b?o/2:o}`},b&&l("path",{class:"gauge-back-semi",d:`M${o-i/2},${o/2} a1,1 0 0,0 -${o-i},0`,stroke:s,"stroke-width":i,fill:r||"none"}),b&&l("path",{class:"gauge-front-semi",d:`M${o-i/2},${o/2} a1,1 0 0,0 -${o-i},0`,stroke:n,"stroke-width":i,"stroke-dasharray":v/2,"stroke-dashoffset":v/2*(1+y),fill:s?"none":r||"none"}),!b&&s&&l("circle",{class:"gauge-back-circle",stroke:s,"stroke-width":i,fill:r||"none",cx:o/2,cy:o/2,r:p}),!b&&l("circle",{class:"gauge-front-circle",transform:`rotate(-90 ${o/2} ${o/2})`,stroke:n,"stroke-width":i,"stroke-dasharray":v,"stroke-dashoffset":v*(1-y),fill:s?"none":r||"none",cx:o/2,cy:o/2,r:p}),d&&l("text",{class:"gauge-value-text",x:"50%",y:b?"100%":"50%","font-weight":u,"font-size":c,fill:g,dy:b?f?-m-15:-5:0,"text-anchor":"middle","dominant-baseline":!b&&"middle"},d),f&&l("text",{class:"gauge-label-text",x:"50%",y:b?"100%":"50%","font-weight":x,"font-size":m,fill:h,dy:b?-5:d?c/2+10:0,"text-anchor":"middle","dominant-baseline":!b&&"middle"},f))}update(e){void 0===e&&(e={});const t=this,{params:a,$svgEl:o}=t;if(Object.keys(e).forEach((t=>{void 0!==e[t]&&(a[t]=e[t])})),0===o.length)return t;const{value:r,size:s,bgColor:l,borderBgColor:n,borderColor:i,borderWidth:d,valueText:g,valueTextColor:c,valueFontSize:u,valueFontWeight:f,labelText:h,labelTextColor:m,labelFontSize:x,labelFontWeight:b}=a,p=t.calcBorderLength(),v=Math.max(Math.min(r,1),0),y=t.calcRadius(),k="semicircle"===a.type,$={width:`${s}px`,height:`${k?s/2:s}px`,viewBox:`0 0 ${s} ${k?s/2:s}`};if(Object.keys($).forEach((e=>{o.attr(e,$[e])})),k){const e={d:`M${s-d/2},${s/2} a1,1 0 0,0 -${s-d},0`,stroke:n,"stroke-width":d,fill:l||"none"},t={d:`M${s-d/2},${s/2} a1,1 0 0,0 -${s-d},0`,stroke:i,"stroke-width":d,"stroke-dasharray":p/2,"stroke-dashoffset":p/2*(1+v),fill:n?"none":l||"none"};Object.keys(e).forEach((t=>{o.find(".gauge-back-semi").attr(t,e[t])})),Object.keys(t).forEach((e=>{o.find(".gauge-front-semi").attr(e,t[e])}))}else{const e={stroke:n,"stroke-width":d,fill:l||"none",cx:s/2,cy:s/2,r:y},t={transform:`rotate(-90 ${s/2} ${s/2})`,stroke:i,"stroke-width":d,"stroke-dasharray":p,"stroke-dashoffset":p*(1-v),fill:n?"none":l||"none",cx:s/2,cy:s/2,r:y};Object.keys(e).forEach((t=>{o.find(".gauge-back-circle").attr(t,e[t])})),Object.keys(t).forEach((e=>{o.find(".gauge-front-circle").attr(e,t[e])}))}if(g){if(!o.find(".gauge-value-text").length){const e=document.createElementNS("http://www.w3.org/2000/svg","text");e.classList.add("gauge-value-text"),o.append(e)}const e={x:"50%",y:k?"100%":"50%","font-weight":f,"font-size":u,fill:c,dy:k?h?-x-15:-5:0,"text-anchor":"middle","dominant-baseline":!k&&"middle"};Object.keys(e).forEach((t=>{o.find(".gauge-value-text").attr(t,e[t])})),o.find(".gauge-value-text").text(g)}else o.find(".gauge-value-text").remove();if(h){if(!o.find(".gauge-label-text").length){const e=document.createElementNS("http://www.w3.org/2000/svg","text");e.classList.add("gauge-label-text"),o.append(e)}const e={x:"50%",y:k?"100%":"50%","font-weight":b,"font-size":x,fill:m,dy:k?-5:g?u/2+10:0,"text-anchor":"middle","dominant-baseline":!k&&"middle"};Object.keys(e).forEach((t=>{o.find(".gauge-label-text").attr(t,e[t])})),o.find(".gauge-label-text").text(h)}else o.find(".gauge-label-text").remove();return t}init(){const e=this,t=a(e.render()).eq(0);return t.f7Gauge=e,n(e,{$svgEl:t,svgEl:t&&t[0]}),e.$el.append(t),e}destroy(){const e=this;e.$el&&!e.destroyed&&(e.$el.trigger("gauge:beforedestroy"),e.emit("local::beforeDestroy gaugeBeforeDestroy",e),e.$svgEl.remove(),delete e.$el[0].f7Gauge,i(e),e.destroyed=!0)}}var g={name:"gauge",static:{Gauge:d},create(){const e=this;e.gauge=s({defaultSelector:".gauge",constructor:d,app:e,domProp:"f7Gauge"}),e.gauge.update=function(t,o){if(0===a(t).length)return;const r=e.gauge.get(t);return r?(r.update(o),r):void 0}},params:{gauge:{el:null,type:"circle",value:0,size:200,bgColor:"transparent",borderBgColor:"#eeeeee",borderColor:"#000000",borderWidth:10,valueText:null,valueTextColor:"#000000",valueFontSize:31,valueFontWeight:500,labelText:null,labelTextColor:"#888888",labelFontSize:14,labelFontWeight:400}},on:{tabMounted(e){const t=this;a(e).find(".gauge-init").each((e=>{t.gauge.create(n({el:e},a(e).dataset()||{}))}))},tabBeforeRemove(e){a(e).find(".gauge-init").each((e=>{e.f7Gauge&&e.f7Gauge.destroy()}))},pageInit(e){const t=this;e.$el.find(".gauge-init").each((e=>{t.gauge.create(n({el:e},a(e).dataset()||{}))}))},pageBeforeRemove(e){e.$el.find(".gauge-init").each((e=>{e.f7Gauge&&e.f7Gauge.destroy()}))}},vnode:{"gauge-init":{insert(e){const t=e.elm;this.gauge.create(n({el:t},a(t).dataset()||{}))},destroy(e){const t=e.elm;t.f7Gauge&&t.f7Gauge.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[g.name])return;e.use(g),e.instance&&(e.instance.useModuleParams(g,e.instance.params),e.instance.useModule(g))}return g}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))