starscore
Version:
A star-score library for web app.
178 lines (177 loc) • 9.61 kB
JavaScript
var l = Object.defineProperty;
var d = (s, e, t) => e in s ? l(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
var a = (s, e, t) => (d(s, typeof e != "symbol" ? e + "" : e, t), t);
import { css as g, addClass as p } from "fourdom";
var n = /* @__PURE__ */ ((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>', u = '<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>', h = {
star: {
icon: v,
voidIcon: u
},
heart: {
icon: m,
voidIcon: w
}
};
class f {
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 : h[this.options.type].icon;
}
getVoidIcon() {
return this.options.voidIcon ? this.options.voidIcon : h[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 - 0.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() {
g(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()}`;
p(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 H = (s) => new f(s);
export {
f as Starscore,
H as createStarscore
};