Änderungen von Dokument Sandbox

Zuletzt geändert von Holger Engels am 2024/01/26 15:58

Von Version 8.1
bearbeitet von Holger Engels
am 2023/11/08 06:51
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 7.1
bearbeitet von Holger Engels
am 2023/10/29 08:51
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -143,39 +143,3 @@
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 -