Änderungen von Dokument Sandbox
Zuletzt geändert von Holger Engels am 2024/01/26 15:58
Von Version 37.1
bearbeitet von Holger Engels
am 2023/12/29 20:45
am 2023/12/29 20:45
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Auf Version 14.1
bearbeitet von Holger Engels
am 2023/11/11 15:54
am 2023/11/11 15:54
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -1,5 +3,3 @@ 1 -{{qrcode}}[[lala>>Eingangsklasse.BPE_4_6]]{{/qrcode}} 2 - 3 3 Der Sandkasten ist ein Teil dieses Wikis, der frei editierbar ist. Er ist dafür gedacht, das Arbeiten mit dem Wiki zu üben. Sie können herausfinden, wie das Bearbeiten von Seiten funktioniert und wie man neue Seiten erstellt. Klicken Sie einfach auf **Bearbeiten** um zu beginnen! 4 4 5 5 {{info}} ... ... @@ -121,38 +121,48 @@ 121 121 122 122 == Rating Tests == 123 123 122 +{{html clean="false"}} 123 +<script> 124 + customElements.define("star-rating", class extends HTMLElement { 125 + set rating(rate) { 126 + if (!String(rate).includes("%")) rate = Number(rate) / this.stars * 100 + "%"; 127 + this.querySelector(":nth-child(2)").setAttribute("width", rate); //2nd rect 128 + } 129 + set value(v) { 130 + this.setAttribute("rating", v); 131 + } 132 + connectedCallback() { 133 + let {bgcolor,stars,nocolor,color,rating} = this.attributes; 134 + let repeat = (count, func) => Array(count).fill().map(func); 135 + this.stars = ~~stars.value || 5; 136 + this.innerHTML = `<svg viewBox="0 0 ${this.stars*100} 100" style=cursor:pointer>` + 137 + `<rect height=100 fill=${nocolor.value} width=100% />` + 138 + `<rect height=100 fill=${color.value} />` + 139 + 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"/>`) + 140 + repeat(this.stars * 2, (i, n) => `<rect x=${ n*50 } n=${n} opacity=0 width=50 height=100 ` + 141 + ` onclick="this.closest('star-rating').value=${(n+1)/2}; this.closest('star-rating').dispatchEvent(new Event('click'))" ` + 142 + ` onmouseover="this.closest('star-rating').rating=${(n+1)/2}"/>`) + 143 + "</svg>"; 144 + this.rating = rating.value; 145 + this.addEventListener('mouseleave', (e) => { 146 + if (e.target.tagName === 'STAR-RATING') { 147 + e.target.rating = e.target.getAttribute("rating") 148 + } 149 + }) 150 + } 151 + }); 152 +</script> 153 +{{/html}} 154 + 124 124 {{velocity}} 125 -$services.ratings.aufgaben.setRating("xwiki:Sandbox.WebHome.WebHome^test", 0) 126 -$services.ratings.aufgaben.getCurrentUserRatings(0, 100, true) 156 +#set($average = $services.ratings.aufgaben.getAverageRating($doc.space + "^" + "test")) 127 127 128 128 {{html clean="false" wiki="true"}} 129 129 <style> 130 130 star-rating { display: inline-block; width: 120px } 131 131 </style> 132 -<star-rating stars=5 rating="$average .get().averageVote"rid="test"bgcolor="white" nocolor="lightgrey" color="gold" onclick="rated.call(this)"></star-rating>162 +<star-rating stars=5 rating="$average" bgcolor="white" nocolor="lightgrey" color="gold" onclick="event"></star-rating> 133 133 {{/html}} 134 134 {{/velocity}} 135 135 136 -{{html clean="false"}} 137 -<script> 138 - function rated() { 139 - console.log(XWiki.currentDocument.space + ".WebHome") 140 - console.log(this.getAttribute("rating")); 141 - sendRate(this.getAttribute("rid"), parseInt(this.getAttribute("rating"))); 142 - } 143 - var sendRate = function (rid, vote) { 144 - fetch(new XWiki.Document('WebHome', 'Macros.Aufgabenbewertung').getURL('get') + "?outputSyntax=plain", { 145 - method: "POST", 146 - headers: { "Content-Type": "application/json"}, 147 - body: JSON.stringify({ 148 - vote: vote, 149 - doc: XWiki.currentDocument.space + ".WebHome", 150 - id: rid, 151 - form_token: document.documentElement.getAttribute("data-xwiki-form-token") 152 - }) 153 - }).then(data => { 154 - console.log(data.json()) 155 - }); 156 - } 157 -</script> 158 -{{/html}} 166 +