Änderungen von Dokument Sandbox
Zuletzt geändert von Holger Engels am 2024/01/26 15:58
Von Version 38.1
bearbeitet von Holger Engels
am 2024/01/26 15:58
am 2024/01/26 15:58
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Auf Version 14.2
bearbeitet von Holger Engels
am 2023/11/11 15:56
am 2023/11/11 15:56
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -1,9 +7,3 @@ 1 -{{groovy}} 2 - xcontext.get("hallo") 3 -{{/groovy}} 4 - 5 -{{qrcode}}[[lala>>Eingangsklasse.BPE_4_6]]{{/qrcode}} 6 - 7 7 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! 8 8 9 9 {{info}} ... ... @@ -125,38 +125,47 @@ 125 125 126 126 == Rating Tests == 127 127 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 + 128 128 {{velocity}} 129 -$services.ratings.aufgaben. setRating("xwiki:Sandbox.WebHome.WebHome^test", 0)130 -$services.ratings.aufgaben. getCurrentUserRatings(0,100,true)156 +#set($average = $services.ratings.aufgaben.getAverageRating($doc.space + "^" + "test")) 157 +#set($average = $services.ratings.aufgaben.setRating($doc.space + "^" + "test", 1)) 131 131 132 132 {{html clean="false" wiki="true"}} 133 133 <style> 134 134 star-rating { display: inline-block; width: 120px } 135 135 </style> 136 -<star-rating stars=5 rating="$average .get().averageVote"rid="test"bgcolor="white" nocolor="lightgrey" color="gold" onclick="rated.call(this)"></star-rating>163 +<star-rating stars=5 rating="$average" bgcolor="white" nocolor="lightgrey" color="gold" onclick="event"></star-rating> 137 137 {{/html}} 138 138 {{/velocity}} 139 - 140 -{{html clean="false"}} 141 -<script> 142 - function rated() { 143 - console.log(XWiki.currentDocument.space + ".WebHome") 144 - console.log(this.getAttribute("rating")); 145 - sendRate(this.getAttribute("rid"), parseInt(this.getAttribute("rating"))); 146 - } 147 - var sendRate = function (rid, vote) { 148 - fetch(new XWiki.Document('WebHome', 'Macros.Aufgabenbewertung').getURL('get') + "?outputSyntax=plain", { 149 - method: "POST", 150 - headers: { "Content-Type": "application/json"}, 151 - body: JSON.stringify({ 152 - vote: vote, 153 - doc: XWiki.currentDocument.space + ".WebHome", 154 - id: rid, 155 - form_token: document.documentElement.getAttribute("data-xwiki-form-token") 156 - }) 157 - }).then(data => { 158 - console.log(data.json()) 159 - }); 160 - } 161 -</script> 162 -{{/html}}