raty-js
Version:
Raty - A Star Rating Plugin
1 lines • 10.1 kB
JavaScript
"use strict";System.register([],function(t,e){var s;return{setters:[],execute:function(){t("default",s=class{constructor(t,e={}){this.element=t,this.opt={...this.defaultOptions(),...e,...this._parseOptions(t.dataset)}}defaultOptions(){return{cancelButton:!1,cancelClass:"raty-cancel",cancelHint:"Cancel this rating!",cancelOff:"cancel-off.png",cancelOn:"cancel-on.png",cancelPlace:"left",click:void 0,half:!1,halfShow:!0,hints:["bad","poor","regular","good","gorgeous"],iconRange:void 0,iconRangeSame:!1,mouseout:void 0,mouseover:void 0,noRatedMsg:"Not rated yet!",number:5,numberMax:20,path:void 0,precision:!1,readOnly:!1,round:{down:.25,full:.6,up:.76},score:void 0,scoreName:"score",single:!1,space:!0,starHalf:"star-half.png",starOff:"star-off.png",starOn:"star-on.png",starType:"img",target:void 0,targetFormat:"{score}",targetKeep:!1,targetScore:void 0,targetText:"",targetType:"hint"}}cancel(t){this._isReadOnly()||(this[t?"click":"score"](null),this.scoreField.removeAttribute("value"))}click(t){this._isReadOnly()||(t=this._adjustedScore(t),this._apply(t),this.opt.click&&this.opt.click.call(this,t,this.element),this._target(t))}move(t){var e=parseInt(t,10),t=this._getDecimal(t,1),s=(e>=this.opt.number&&(e=this.opt.number-1,t=10),this._getWidth()),e=this.stars[e],s=e.offsetLeft+s/10*t,t=new Event("mousemove");t.pageX=s,this.isMove=!0,e.dispatchEvent(t),this.isMove=!1}readOnly(t){this._isReadOnly()!==t&&(t?this._lock():(this._binds(),this._unlock()),this.element.dataset.readOnly=t)}score(){return arguments.length?this.setScore(arguments[0]):this.getScore()}setScore(t){this._isReadOnly()||(t=this._adjustedScore(t),this._apply(t),this._target(t))}getScore(){var t=[],e=this.scoreField.value;return t.push(e?+e:void 0),1<t.length?t:t[0]}init(){return this._executeCallbacks(),this._adjustNumber(),this._adjustHints(),this.opt.score=this._adjustedScore(this.opt.score),"img"!==this.opt.starType&&this._adjustStarName(),this._setPath(),this._createStars(),this.opt.cancelButton&&this._createCancel(),this.opt.precision&&this._adjustPrecision(),this._createScore(),this._apply(this.opt.score),this._setTitle(this.opt.score),this._target(this.opt.score),this.opt.readOnly?this._lock():(this.element.style.cursor="pointer",this._binds()),this}_adjustedScore(t){if(t||0===t)return this._between(t,0,this.opt.number)}_adjustHints(){if(this.opt.hints||(this.opt.hints=[]),this.opt.halfShow||this.opt.half){var s=this.opt.precision?10:2;for(let e=0;e<this.opt.number;e++){var i=this.opt.hints[e];"[object Array]"!==Object.prototype.toString.call(i)&&(i=[i]),this.opt.hints[e]=[];for(let t=0;t<s;t++){var a=i[t],o=i[i.length-1];void 0===o&&(o=null),this.opt.hints[e][t]=void 0===a?o:a}}}}_adjustNumber(){this.opt.number=this._between(this.opt.number,1,this.opt.numberMax)}_adjustPrecision(){this.opt.half=!0}_adjustStarName(){var e=["cancelOff","cancelOn","starHalf","starOff","starOn"];this.opt.path="";for(let t=0;t<e.length;t++)this.opt[e[t]]=this.opt[e[t]].replace(".","-")}_apply(t){this._fill(t),t&&(0<t&&(this.scoreField.value=t),this._roundStars(t))}_attributesForIndex(t){var e=this._nameForIndex(t),s={alt:t,src:this.opt.path+this.opt[e]};return(s="img"!==this.opt.starType?{"data-alt":t,class:this.opt[e]}:s).title=this._getHint(t),s}_between(t,e,s){return Math.min(Math.max(parseFloat(t),e),s)}_binds(){this.cancelButton&&(this._bindOverCancel(),this._bindClickCancel(),this._bindOutCancel()),this._bindOver(),this._bindClick(),this._bindOut()}_bindClick(){this.stars.forEach(i=>{i.addEventListener("click",s=>{if(!this._isReadOnly()){let t,e=this.opt.half||this.opt.precision?this.element.dataset.score:i.alt||i.dataset.alt;this.opt.half&&!this.opt.precision&&(e=this._roundHalfScore(e)),!(t=this.opt.click?this.opt.click.call(this,+e,this.element,s):t)&&void 0!==t||this._apply(+e)}})})}_bindClickCancel(){this.cancelButton.addEventListener("click",t=>{this.scoreField.removeAttribute("value"),this.opt.click&&this.opt.click.call(this,null,this.element,t)})}_bindOut(){this.element.addEventListener("mouseleave",t=>{var e=+this.scoreField.value||void 0;this._apply(e),this._target(e,t),this._resetTitle(),this.opt.mouseout&&this.opt.mouseout.call(this,e,this.element,t)})}_bindOutCancel(){this.cancelButton.addEventListener("mouseleave",t=>{let e=this.opt.cancelOff;var s;"img"!==this.opt.starType&&(e=this.opt.cancelClass+" "+e),this._setIcon(this.cancelButton,e),this.opt.mouseout&&(s=+this.scoreField.value||void 0,this.opt.mouseout.call(this,s,this.element,t))})}_bindOver(){const t=this.opt.half?"mousemove":"mouseover";this.stars.forEach(s=>{s.addEventListener(t,t=>{var e=this._getScoreByPosition(t,s);this._fill(e),this.opt.half&&(this._roundStars(e,t),this._setTitle(e,t),this.element.dataset.score=e),this._target(e,t),this.opt.mouseover&&this.opt.mouseover.call(this,e,this.element,t)})})}_bindOverCancel(){this.cancelButton.addEventListener("mouseover",e=>{if(!this._isReadOnly()){const s=this.opt.path+this.opt.starOff;let t=this.opt.cancelOn;"img"===this.opt.starType?this.stars.forEach(t=>{t.src=s}):(t=this.opt.cancelClass+" "+t,this.stars.forEach(t=>{t.className=s})),this._setIcon(this.cancelButton,t),this._target(null,e),this.opt.mouseover&&this.opt.mouseover.call(this,null,this.element,e)}})}_buildScoreField(){var t=document.createElement("input");return t.name=this.opt.scoreName,t.type="hidden",this.element.appendChild(t),t}_createCancel(){var t=document.createElement(this.opt.starType),e=this.opt.path+this.opt.cancelOff;t.setAttribute("class",this.opt.cancelClass),t.setAttribute("title",this.opt.cancelHint),"img"===this.opt.starType?(t.setAttribute("alt","x"),t.setAttribute("src",e)):(t.classList.add(e),t.setAttribute("data-alt","x")),"left"===this.opt.cancelPlace?(this.element.prepend(" "),this.element.prepend(t)):(this.element.append(" "),this.element.appendChild(t)),this.cancelButton=t}_createScore(){this.scoreField=document.querySelector(this.opt.targetScore)||this._buildScoreField()}_createStars(){for(let t=1;t<=this.opt.number;t++){var e=this._attributesForIndex(t),s=document.createElement(this.opt.starType);for(const i in e)s.setAttribute(i,e[i]);this.element.appendChild(s),this.opt.space&&t<this.opt.number&&this.element.append(" ")}this.stars=this.element.querySelectorAll(this.opt.starType)}_error(t){throw new Error(t)}_executeCallbacks(){var e,s=["number","readOnly","score","scoreName","target","path"];for(let t=0;t<s.length;t++)"function"==typeof this.opt[s[t]]&&((e=this.opt[s[t]].call(this,this.element))?this.opt[s[t]]=e:delete this.opt[s[t]])}_fill(s){let i=0;if(this.opt.iconRangeSame&&this.opt.iconRange)for(;i<this.opt.iconRange.length&&this.opt.iconRange[i].range<s;)i++;for(let e=1;e<=this.stars.length;e++){var a,o=this.stars[e-1],r=this._turnOn(e,s);let t;this.opt.iconRange&&this.opt.iconRange.length>i?(a=this.opt.iconRange[i],t=this._getRangeIcon(a,r),e<=a.range&&this._setIcon(o,t),e===a.range&&i++):(t=this.opt[r?"starOn":"starOff"],this._setIcon(o,t))}}_getDecimal(t,e){t=t.toString().split(".")[1];let s=0;return t&&(s=parseInt(t.slice(0,e),10),"9999"===t.slice(1,5))&&s++,s}_getRangeIcon(t,e){return e?t.on||this.opt.starOn:t.off||this.opt.starOff}_getScoreByPosition(t,e){let s=parseInt(e.alt||e.getAttribute("data-alt"),10);var i;return this.opt.half&&(i=this._getWidth(),t=parseFloat((t.pageX-e.getBoundingClientRect().x)/i),s=s-1+t),s}_getHint(t,e){if(0!==t&&!t)return this.opt.noRatedMsg;var s=Math.ceil(t),s=this.opt.hints[(s||1)-1],e=!e||this.isMove;let i=this._getDecimal(t,1),a=s;return this.opt.precision?(e&&(i=0===i?9:i-1),a=s[i]):(this.opt.halfShow||this.opt.half)&&(i=e&&0===i||5<i?1:0,a=s[i]),""===a?"":a||t}_getWidth(){var t=parseFloat(this.stars[0].offsetWidth)||16;return t||this._error("Could not get the icon width!"),t}_isReadOnly(){return{true:!0}[this.element.dataset.readOnly]||!1}_lock(){const e=this._getHint(this.scoreField.value);this.element.style.pointerEvents="none",this.element.title=e,this.scoreField.readOnly=!0,this.stars.forEach(t=>{t.title=e}),this.cancelButton&&(this.cancelButton.style.display="none"),this.element.dataset.readOnly=!0}_nameForIndex(t){return this.opt.score&&this.opt.score>=t?"starOn":"starOff"}_resetTitle(){for(let t=0;t<this.opt.number;t++)this.stars[t].title=this._getHint(t+1)}_parseOptions(i){return Object.keys(i).reduce((t,e)=>{let s={true:!0,false:!1}[i[e]];return s=null!==s&&void 0!==s?s:i[e],!isNaN(s)&&Number.isInteger(parseFloat(s))&&(s=Number(s)),t[e]=s,t},{})}_roundHalfScore(t){var e=parseInt(t,10);let s=this._getDecimal(t,1);return e+(s=0!==s?5<s?1:.5:s)}_roundStars(t,e){var e=this._starName(t,e);e&&(e=this.opt[e],t=this.stars[Math.ceil(t)-1])&&this._setIcon(t,e)}_setIcon(t,e){t["img"===this.opt.starType?"src":"className"]=this.opt.path+e}_setPath(){this.opt.path=this.opt.path||"",this.opt.path&&"/"!==this.opt.path.slice(-1)&&(this.opt.path+="/")}_setTarget(t,e){e=e&&this.opt.targetFormat.toString().replace("{score}",e),t instanceof HTMLInputElement||t instanceof HTMLSelectElement?t.value=e:t.textContent=e}_setTitle(t,e){var s;t&&(s=parseInt(Math.ceil(t),10),this.stars.item(s-1).title=this._getHint(t,e))}_starName(t,e){t=+(t%1).toFixed(2);return e||this.isMove?.5<t?"starOn":"starHalf":t<=this.opt.round.down?void 0:this.opt.halfShow&&t<this.opt.round.up?"starHalf":t<this.opt.round.full?"starOff":"starOn"}_target(t,e){var s,i;this.opt.target&&((s=document.querySelector(this.opt.target))||this._error("Target selector invalid or missing!"),i=e&&"mouseover"===e.type,void 0===t?t=this.opt.targetText:null===t?t=i?this.opt.cancelHint:this.opt.targetText:("hint"===this.opt.targetType?t=this._getHint(t,e):this.opt.precision&&(t=parseFloat(t).toFixed(1)),e=e&&"mousemove"===e.type,i||e||this.opt.targetKeep||(t=this.opt.targetText)),this._setTarget(s,t))}_turnOn(t,e){return this.opt.single?t===e:t<=e}_unlock(){this.element.style.cursor="pointer",this.element.style.pointerEvents="auto",this.element.removeAttribute("title"),this.element.dataset.readOnly=!1,this.scoreField.readOnly=!1,this._resetTitle(),this.cancelButton&&(this.cancelButton.style.display="")}})}}});