Änderungen von Dokument Sandbox
Zuletzt geändert von Holger Engels am 2024/01/26 15:58
Von Version 18.2
bearbeitet von Holger Engels
am 2023/11/11 18:56
am 2023/11/11 18:56
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Auf Version 9.2
bearbeitet von Holger Engels
am 2023/11/08 08:38
am 2023/11/08 08:38
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -99,8 +99,10 @@ 99 99 100 100 [[image:XWikiLogo.png]] 101 101 102 -= =Orphaned Pages ==102 += Makros = 103 103 104 +Makros bieten die Möglichkeit, das Aussehen von Wiki-Seiten zu verbessern und stellen zusätzliche Funktionalitäten in der Seite zur Verfügung. Hier sind zwei Beispiele, wie Makros die Inhalte verbessern können: 105 + 104 104 {{velocity filter="none"}} 105 105 {{html clean="false" wiki="true"}} 106 106 #set ($query = "where (doc.parent is null or doc.parent='') and doc.fullName != 'Main.WebHome' order by doc.name asc") ... ... @@ -117,37 +117,48 @@ 117 117 {{/velocity}} 118 118 119 119 120 -== Rating Tests == 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}} 121 121 122 122 {{velocity}} 123 - #set($average = $services.ratings.aufgaben.setRating($doc.space+ "^" + "test", 2))124 -#set($a verage= $services.ratings.aufgaben.getAverageRating($doc.space +"^"+ "test"))156 +$doc.space 157 +#set ($lala = $services.ratings.exercise.setRating($doc.space + 'lala', 1)) 125 125 126 - 127 127 {{html clean="false" wiki="true"}} 128 128 <style> 129 129 star-rating { display: inline-block; width: 120px } 130 130 </style> 131 -<star-rating stars=5 rating="$average.get().averageVote" bgcolor="white" nocolor="lightgrey" color="gold" onclick="event"></star-rating>163 +<star-rating stars=5 rating="$services.ratings.pagereflection.getAverageRating($doc.space + 'lala').get().averageVote" bgcolor="white" nocolor="lightgrey" color="gold"></star-rating> 132 132 {{/html}} 133 133 {{/velocity}} 134 134 135 -{{html clean="false"}} 136 -<script> 137 - var setVote = function (vote) { 138 - fetch(new XWiki.Document('WebHome', 'Macros.Aufgabenbewertung').getURL('get') + "?outputSyntax=plain", { 139 - method: "POST", 140 - headers: { "Content-Type": "application/json"}, 141 - body: JSON.stringify({ 142 - vote: vote, 143 - doc: XWiki.currentDocument.space, 144 - id: "test", 145 - form_token: document.documentElement.getAttribute("data-xwiki-form-token") 146 - }) 147 - }).then(data => { 148 - console.log(data.json()) 149 - }); 150 - } 151 - setVote(4) 152 -</script> 153 -{{/html}}