starscore/lib/starscore.cjs

A star-score library for web app.

"use strict";var g=Object.defineProperty;var u=(s,e,t)=>e in s?g(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var a=(s,e,t)=>(u(s,typeof e!="symbol"?e+"":e,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("fourdom");var n=(s=>(s.containerClassName="starscore-container",s.scoreWrapperClassName="starscore-radio-group",s.scoreItemClassName="starscore-radio",s.scoreIconClassName="starscore-radio__icon",s.scoreVoidIconClassName="starscore-radio__void-icon",s.scoreDescWrapperClassName="starscore-description",s))(n||{});const c=s=>typeof s=="number"?`${s}px`:s,v='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" fill="#FFA900" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M270.336 978.944c-57.344 29.696-95.232 3.072-83.968-61.44l46.08-268.288-194.56-190.464c-46.08-45.056-31.744-89.088 31.744-99.328l269.312-38.912L459.776 76.8c28.672-58.368 74.752-58.368 104.448 0l120.832 244.736 269.312 38.912c64.512 9.216 78.848 53.248 31.744 99.328l-194.56 189.44 46.08 268.288c11.264 63.488-26.624 91.136-83.968 61.44L512 851.968z"/></svg>',p='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="m512 111.616 130.048 263.623 290.93 42.211-210.489 205.255 49.721 289.678L512 775.622 251.79 912.383l49.721-289.678L91.022 417.45l290.93-42.211zm0-72.818a72.72 72.72 0 0 0-65.309 40.619L333.596 308.679l-253.042 36.75c-27.421 3.982-50.176 23.211-58.823 49.607a72.96 72.96 0 0 0 18.432 74.638l183.069 178.403-43.235 252.018c-4.665 27.307 6.599 54.955 29.013 71.225 12.629 9.216 27.762 13.881 42.781 13.881 11.605 0 23.211-2.731 33.906-8.419l226.304-118.898 226.304 119.011c10.695 5.575 22.301 8.419 33.906 8.419 15.133 0 30.151-4.665 42.781-13.881 22.414-16.27 33.678-43.918 29.013-71.225L800.77 648.19l183.069-178.403c19.797-19.342 26.965-48.242 18.432-74.638s-31.403-45.625-58.823-49.607l-253.042-36.75L577.311 79.53c-12.288-25.031-37.547-40.733-65.309-40.733z"/></svg>',m='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M1024 352c0 337-512 592-512 592S0 690 0 352C0 201.8 121.8 80 272 80c101.3 0 189.7 55.4 236.5 137.6 1.5 2.7 5.4 2.7 6.9 0C562.3 135.4 650.7 80 752 80c150.2 0 272 121.8 272 272"/></svg>',w='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M752 144c55.6 0 107.8 21.6 147.1 60.9S960 296.4 960 352c0 32.7-6.1 66.4-18.1 100.2-11.4 32-28.3 64.9-50.3 97.8-38.7 57.8-93.4 116.2-162.5 173.6C643 795.1 555.6 847.2 512 871.5c-43.2-24-129.4-75.1-215.2-146-69.6-57.5-124.6-116-163.7-174-22.2-33.1-39.3-66.1-50.8-98.4C70.2 418.9 64 385 64 352c0-55.6 21.6-107.8 60.9-147.1S216.4 144 272 144c76.9 0 147.2 42.2 183.6 110.1l28.2 52.7c12.1 22.5 44.4 22.5 56.4 0l28.2-52.7C604.8 186.2 675.1 144 752 144m0-64c-101.3 0-189.7 55.4-236.5 137.6-1.5 2.7-5.4 2.7-6.9 0C461.7 135.4 373.3 80 272 80 121.8 80 0 201.8 0 352c0 338 512 592 512 592s512-255 512-592c0-150.2-121.8-272-272-272"/></svg>',l={star:{icon:v,voidIcon:p},heart:{icon:m,voidIcon:w}};class d{constructor(e){a(this,"options",{container:"",count:5,initialValue:0,size:"20px",gutter:"4px",color:"#ee0a24",voidColor:"#c8c9cc",disabledColor:"#c8c9cc",icon:"",type:"star",voidIcon:"",clearable:!1,readonly:!1,disabled:!1,allowHalf:!1,scoreDetails:()=>"",showDescription:!1,descriptionColor:"#909399",descriptionFontSize:"13px",onChange:()=>{}});a(this,"container",null);a(this,"value",0);a(this,"hoverValue",null);this.options=Object.assign(this.options,e),this.value=this.options.initialValue,this.clickListener=this.clickListener.bind(this),this.onScoreHoverHandler=this.onScoreHoverHandler.bind(this),this.onScoreLeaveHandler=this.onScoreLeaveHandler.bind(this),this.initCSSVars(),this.render()}setValue(e){return this.value===e?this:(e<0?this.value=0:e>this.options.count?this.value=this.options.count:this.value=e,this.render(),this)}getValue(){return this.value}setOptions(e,t){return this.options=Object.assign(this.options,e),t&&(this.initCSSVars(),this.render()),this}getIcon(){return this.options.icon?this.options.icon:l[this.options.type].icon}getVoidIcon(){return this.options.voidIcon?this.options.voidIcon:l[this.options.type].voidIcon}get renderValue(){return this.hoverValue!==null?this.hoverValue:this.value}get scoreItems(){const e=[],t=this.renderValue;for(let i=1;i<=this.options.count;i++){const r=i-t,o=t>=i?1:r>=1?0:Number.parseFloat((1-r).toFixed(1));e.push({score:i,active:t>=i,proportion:o,width:`${o*100}%`})}return e}getScoreItemFromChild(e){return e.dataset.score?e:e.parentElement?this.getScoreItemFromChild(e.parentElement):null}emitChange(e){this.value!==e&&(this.options.onChange&&this.options.onChange(e),this.setValue(e))}scoreValueFormat(e){if(this.options.disabled||this.options.readonly)return null;const t=e.target,i=e.offsetX,r=this.getScoreItemFromChild(t);if(r){let o=Number(r.dataset.score);return this.options.allowHalf&&i<=o/2&&(o=o-.5),this.options.clearable&&this.value===o?0:o}return null}clickListener(e){const t=this.scoreValueFormat(e);t!==null&&this.emitChange(t)}onScoreHoverHandler(e){const t=this.scoreValueFormat(e);t!==null&&this.hoverValue!==t&&(this.hoverValue=t,this.render())}onScoreLeaveHandler(){this.hoverValue=null,this.render()}registerListeners(){this.removeListeners(),this.getScoreItemEl().forEach(e=>{e.addEventListener("click",this.clickListener),e.addEventListener("mouseenter",this.onScoreHoverHandler),e.addEventListener("mouseleave",this.onScoreLeaveHandler)})}removeListeners(){this.getScoreItemEl().forEach(e=>{e.removeEventListener("click",this.clickListener),e.removeEventListener("mouseenter",this.onScoreHoverHandler),e.removeEventListener("mouseleave",this.onScoreLeaveHandler)})}getScoreItemEl(){return this.getContainer().querySelectorAll(`.${n.scoreItemClassName}`)}initCSSVars(){h.css(this.getContainer(),{"--starscore-size":c(this.options.size),"--starscore-color":this.options.color,"--starscore-void-color":this.options.voidColor,"--starscore-disabled-color":this.options.disabledColor,"--starscore-gutter":c(this.options.gutter),"--starscore-description-color":this.options.descriptionColor,"--starscore-description-font-size":c(this.options.descriptionFontSize)})}generateRadioHTML(e){return`
      <div class="${n.scoreItemClassName}" data-score="${e.score}">
        <span class="${n.scoreVoidIconClassName}">${this.getVoidIcon()}</span>
        <span class="${n.scoreIconClassName}" style="width:${e.width}">${this.getIcon()}</span>
      </div>
    `}generateRadioGroupHTML(){const e=this.scoreItems.reduce((r,o)=>(r+=`${this.generateRadioHTML(o)}`,r),""),t=this.options.disabled?"disabled":"",i=this.options.readonly?"readonly":"";return`
      <div class="${n.scoreWrapperClassName} ${t} ${i}">${e}</div>
    `}generateScoreDescHTML(){if(!this.options.showDescription)return"";let e="";if(Array.isArray(this.options.scoreDetails)){const t=this.options.scoreDetails.find(i=>i.score===this.renderValue);t?e=t.description:e=""}else e=this.options.scoreDetails(this.renderValue);return`<div class="${n.scoreDescWrapperClassName}">${e}</div>`}render(){const e=this.getContainer(),t=`${this.generateRadioGroupHTML()}${this.generateScoreDescHTML()}`;h.addClass(e,n.containerClassName),e.innerHTML=t,this.registerListeners()}destory(){this.removeListeners()}getContainer(){if(this.container)return this.container;const e=typeof this.options.container=="string"?document.querySelector(`${this.options.container}`):this.options.container;return e&&(this.container=e),e}}const f=s=>new d(s);exports.Starscore=d;exports.createStarscore=f;