Änderungen von Dokument Sandbox
Zuletzt geändert von Holger Engels am 2024/01/26 15:58
Von Version 7.1
bearbeitet von Holger Engels
am 2023/10/29 08:51
am 2023/10/29 08:51
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Auf Version 8.1
bearbeitet von Holger Engels
am 2023/11/08 06:51
am 2023/11/08 06:51
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -143,3 +143,39 @@ 143 143 144 144 {{/html}} 145 145 {{/velocity}} 146 + 147 + 148 +{{html clean="false"}} 149 +<script> 150 + customElements.define("star-rating", class extends HTMLElement { 151 + set rating(rate) { 152 + if (!String(rate).includes("%")) rate = Number(rate) / this.stars * 100 + "%"; 153 + this.querySelector(":nth-child(2)").setAttribute("width", rate); //2nd rect 154 + } 155 + set value(v) { 156 + this.setAttribute("rating", v); 157 + } 158 + connectedCallback() { 159 + let {bgcolor,stars,nocolor,color,rating} = this.attributes; 160 + let repeat = (count, func) => Array(count).fill().map(func); 161 + this.stars = ~~stars.value || 5; 162 + this.innerHTML = `<svg viewBox="0 0 ${this.stars*100} 100" style=cursor:pointer>` + 163 + `<rect height=100 fill=${nocolor.value} width=100% />` + 164 + `<rect height=100 fill=${color.value} />` + 165 + repeat(this.stars , (i, n) => `<path fill=${bgcolor.value} d="m${ n*100 } 0h102v100h-102v-100m91 42a6 6 90 00-4-10l-22-1a1 1 90 01-1 0l-8-21a6 6 90 00-11 0l-8 21a1 1 90 01-1 1l-22 1a6 6 90 00-4 10l18 14a1 1 90 010 1l-6 22a6 6 90 008 6l19-13a1 1 90 011 0l19 13a6 6 90 006 0a6 6 90 002-6l-6-22a1 1 90 010-1z"/>`) + 166 + repeat(this.stars * 2, (i, n) => `<rect x=${ n*50 } n=${n} opacity=0 width=50 height=100 ` + 167 + ` onclick="this.closest('star-rating').value=${(n+1)/2}; this.closest('star-rating').dispatchEvent(new Event('click'))" ` + 168 + ` onmouseover="this.closest('star-rating').rating=${(n+1)/2}"/>`) + 169 + "</svg>"; 170 + this.rating = rating.value; 171 + this.addEventListener('mouseleave', (e) => { 172 + if (e.target.tagName === 'STAR-RATING') { 173 + e.target.rating = e.target.getAttribute("rating") 174 + } 175 + }) 176 + } 177 + }); 178 +</script> 179 +{{/html}} 180 + 181 +