Skip to content

Commit

Permalink
feat: support show score when mouse hover
Browse files Browse the repository at this point in the history
  • Loading branch information
wenqing committed Aug 16, 2023
1 parent eee8820 commit 1ecb58d
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 42 deletions.
4 changes: 4 additions & 0 deletions lib/index.d.ts
View file
Expand Up @@ -37,6 +37,10 @@ interface ScoreItemsRecord {
interface StarscoreInstance {
container: HTMLElement | null

value: number

get renderValue(): number

get scoreItems(): ScoreItemsRecord[]

setOptions(opts: StarscoreOptions, reRender?: boolean): StarscoreInstance
Expand Down
14 changes: 7 additions & 7 deletions lib/starscore.cjs
View file
@@ -1,8 +1,8 @@
"use strict";var p=Object.defineProperty;var v=(s,t,i)=>t in s?p(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var c=(s,t,i)=>(v(s,typeof t!="symbol"?t+"":t,i),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("fourdom");var r=(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))(r||{});const h=s=>typeof s=="number"?`${s}px`:s,u='<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.968 270.336 978.944z"/></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="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.211L512 111.616m0-72.818a72.721 72.721 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.957 72.957 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>',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="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 272z"/></svg>',f='<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 144zm0-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-272z"/></svg>',l={star:{icon:u,voidIcon:m},heart:{icon:w,voidIcon:f}};class g{constructor(t){c(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:[{score:1,description:""},{score:2,description:""},{score:3,description:""},{score:4,description:""},{score:5,description:""}],onChange:()=>{}});c(this,"container",null);c(this,"value",0);this.options=Object.assign(this.options,t),this.value=this.options.initialValue,this.clickListener=this.clickListener.bind(this),this.initCSSVars(),this.render()}setValue(t){return t<0?this.value=0:t>this.options.count?this.value=this.options.count:this.value=t,this.render(),this}getValue(){return this.value}setOptions(t,i){return this.options=Object.assign(this.options,t),i&&(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 scoreItems(){const t=[];for(let i=1;i<=this.options.count;i++){const n=i-this.value,e=this.value>=i?1:n>=1?0:Number.parseFloat((1-n).toFixed(1));t.push({score:i,active:this.value>=i,proportion:e,width:`${e*100}%`})}return t}getScoreItemFromChild(t){return t.dataset.score?t:t.parentElement?this.getScoreItemFromChild(t.parentElement):null}emitChange(t){this.value!==t&&(this.options.onChange&&this.options.onChange(t),this.setValue(t))}clickListener(t){if(this.options.disabled||this.options.readonly)return;const i=t.target,n=t.offsetX,e=this.getScoreItemFromChild(i);if(e){let o=Number(e.dataset.score);this.options.allowHalf&&n<=o/2&&(o=o-.5);const d=this.options.clearable&&this.value===o?0:o;this.emitChange(d)}}registerListeners(){this.removeListeners(),this.getScoreItemEl().forEach(t=>{t.addEventListener("click",this.clickListener)})}removeListeners(){this.getScoreItemEl().forEach(t=>{t.removeEventListener("click",this.clickListener)})}getScoreItemEl(){return this.getContainer().querySelectorAll(`.${r.scoreItemClassName}`)}initCSSVars(){a.css(this.getContainer(),{"--starscore-size":h(this.options.size),"--starscore-color":this.options.color,"--starscore-void-color":this.options.voidColor,"--starscore-disabled-color":this.options.disabledColor,"--starscore-gutter":h(this.options.gutter)})}generateRadioHTML(t){return`
<div class="${r.scoreItemClassName}" data-score="${t.score}">
<span class="${r.scoreVoidIconClassName}">${this.getVoidIcon()}</span>
<span class="${r.scoreIconClassName}" style="width:${t.width}">${this.getIcon()}</span>
"use strict";var d=Object.defineProperty;var p=(s,t,i)=>t in s?d(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var c=(s,t,i)=>(p(s,typeof t!="symbol"?t+"":t,i),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=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))(n||{});const h=s=>typeof s=="number"?`${s}px`:s,u='<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.968 270.336 978.944z"/></svg>',v='<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.211L512 111.616m0-72.818a72.721 72.721 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.957 72.957 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 272z"/></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 144zm0-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-272z"/></svg>',l={star:{icon:u,voidIcon:v},heart:{icon:m,voidIcon:w}};class g{constructor(t){c(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:[{score:1,description:""},{score:2,description:""},{score:3,description:""},{score:4,description:""},{score:5,description:""}],onChange:()=>{}});c(this,"container",null);c(this,"value",0);this.options=Object.assign(this.options,t),this.value=this.options.initialValue,this.clickListener=this.clickListener.bind(this),this.initCSSVars(),this.render()}setValue(t){return t<0?this.value=0:t>this.options.count?this.value=this.options.count:this.value=t,this.render(),this}getValue(){return this.value}setOptions(t,i){return this.options=Object.assign(this.options,t),i&&(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.value}get scoreItems(){const t=[],i=this.renderValue;for(let e=1;e<=this.options.count;e++){const r=e-i,o=i>=e?1:r>=1?0:Number.parseFloat((1-r).toFixed(1));t.push({score:e,active:i>=e,proportion:o,width:`${o*100}%`})}return t}getScoreItemFromChild(t){return t.dataset.score?t:t.parentElement?this.getScoreItemFromChild(t.parentElement):null}emitChange(t){this.value!==t&&(this.options.onChange&&this.options.onChange(t),this.setValue(t))}scoreValueFormat(t){if(this.options.disabled||this.options.readonly)return null;const i=t.target,e=t.offsetX,r=this.getScoreItemFromChild(i);if(r){let o=Number(r.dataset.score);return this.options.allowHalf&&e<=o/2&&(o=o-.5),this.options.clearable&&this.value===o?0:o}return null}clickListener(t){const i=this.scoreValueFormat(t);i!==null&&this.emitChange(i)}registerListeners(){this.removeListeners(),this.getScoreItemEl().forEach(t=>{t.addEventListener("click",this.clickListener)})}removeListeners(){this.getScoreItemEl().forEach(t=>{t.removeEventListener("click",this.clickListener)})}getScoreItemEl(){return this.getContainer().querySelectorAll(`.${n.scoreItemClassName}`)}initCSSVars(){a.css(this.getContainer(),{"--starscore-size":h(this.options.size),"--starscore-color":this.options.color,"--starscore-void-color":this.options.voidColor,"--starscore-disabled-color":this.options.disabledColor,"--starscore-gutter":h(this.options.gutter)})}generateRadioHTML(t){return`
<div class="${n.scoreItemClassName}" data-score="${t.score}">
<span class="${n.scoreVoidIconClassName}">${this.getVoidIcon()}</span>
<span class="${n.scoreIconClassName}" style="width:${t.width}">${this.getIcon()}</span>
</div>
`}generateRadioGroupHTML(){const t=this.scoreItems.reduce((e,o)=>(e+=`${this.generateRadioHTML(o)}`,e),""),i=this.options.disabled?"disabled":"",n=this.options.readonly?"readonly":"";return`
<div class="${r.scoreWrapperClassName} ${i} ${n}">${t}</div>
`}render(){const t=this.getContainer(),i=`${this.generateRadioGroupHTML()}`;a.addClass(t,r.containerClassName),t.innerHTML=i,this.registerListeners()}destory(){this.removeListeners()}getContainer(){if(this.container)return this.container;const t=typeof this.options.container=="string"?document.querySelector(`${this.options.container}`):this.options.container;return t&&(this.container=t),t}}const C=s=>new g(s);exports.Starscore=g;exports.createStarscore=C;
`}generateRadioGroupHTML(){const t=this.scoreItems.reduce((r,o)=>(r+=`${this.generateRadioHTML(o)}`,r),""),i=this.options.disabled?"disabled":"",e=this.options.readonly?"readonly":"";return`
<div class="${n.scoreWrapperClassName} ${i} ${e}">${t}</div>
`}render(){const t=this.getContainer(),i=`${this.generateRadioGroupHTML()}`;a.addClass(t,n.containerClassName),t.innerHTML=i,this.registerListeners()}destory(){this.removeListeners()}getContainer(){if(this.container)return this.container;const t=typeof this.options.container=="string"?document.querySelector(`${this.options.container}`):this.options.container;return t&&(this.container=t),t}}const f=s=>new g(s);exports.Starscore=g;exports.createStarscore=f;

0 comments on commit 1ecb58d

Please sign in to comment.