Zum Inhalt springen

Änderungen von Dokument Sandbox

Zuletzt geändert von Holger Engels am 2024/01/26 15:58
Von Version 9.1
bearbeitet von Holger Engels
am 2023/11/08 06:52
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 20.1
bearbeitet von Holger Engels
am 2023/11/13 21:38
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -99,45 +99,8 @@
99 99  
100 100  [[image:XWikiLogo.png]]
101 101  
102 -= Makros =
102 +== Orphaned Pages ==
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 -
106 -{{html clean="false"}}
107 -<script>
108 - customElements.define("star-rating", class extends HTMLElement {
109 - set rating(rate) {
110 - if (!String(rate).includes("%")) rate = Number(rate) / this.stars * 100 + "%";
111 - this.querySelector(":nth-child(2)").setAttribute("width", rate); //2nd rect
112 - }
113 - set value(v) {
114 - this.setAttribute("rating", v);
115 - }
116 - connectedCallback() {
117 - let {bgcolor,stars,nocolor,color,rating} = this.attributes;
118 - let repeat = (count, func) => Array(count).fill().map(func);
119 - this.stars = ~~stars.value || 5;
120 - this.innerHTML = `<svg viewBox="0 0 ${this.stars*100} 100" style=cursor:pointer>` +
121 - `<rect height=100 fill=${nocolor.value} width=100% />` +
122 - `<rect height=100 fill=${color.value} />` +
123 - 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"/>`) +
124 - repeat(this.stars * 2, (i, n) => `<rect x=${ n*50 } n=${n} opacity=0 width=50 height=100 ` +
125 - ` onclick="this.closest('star-rating').value=${(n+1)/2}; this.closest('star-rating').dispatchEvent(new Event('click'))" ` +
126 - ` onmouseover="this.closest('star-rating').rating=${(n+1)/2}"/>`) +
127 - "</svg>";
128 - this.rating = rating.value;
129 - this.addEventListener('mouseleave', (e) => {
130 - if (e.target.tagName === 'STAR-RATING') {
131 - e.target.rating = e.target.getAttribute("rating")
132 - }
133 - })
134 - }
135 - });
136 -</script>
137 -{{/html}}
138 -
139 -
140 -
141 141  {{velocity filter="none"}}
142 142  {{html clean="false" wiki="true"}}
143 143  #set ($query = "where (doc.parent is null or doc.parent='') and doc.fullName != 'Main.WebHome' order by doc.name asc")
... ... @@ -154,35 +154,38 @@
154 154  {{/velocity}}
155 155  
156 156  
120 +== Rating Tests ==
121 +
122 +{{velocity}}
123 +#set($average = $services.ratings.aufgaben.getAverageRating($doc.space + "^" + "test"))
124 +
125 +{{html clean="false" wiki="true"}}
126 +<style>
127 +star-rating { display: inline-block; width: 120px }
128 +</style>
129 +<star-rating stars=5 rating="$average.get().averageVote" bgcolor="white" nocolor="lightgrey" color="gold" onclick="rated.call(this)"></star-rating>
130 +{{/html}}
131 +{{/velocity}}
132 +
157 157  {{html clean="false"}}
158 158  <script>
159 - customElements.define("star-rating", class extends HTMLElement {
160 - set rating(rate) {
161 - if (!String(rate).includes("%")) rate = Number(rate) / this.stars * 100 + "%";
162 - this.querySelector(":nth-child(2)").setAttribute("width", rate); //2nd rect
163 - }
164 - set value(v) {
165 - this.setAttribute("rating", v);
166 - }
167 - connectedCallback() {
168 - let {bgcolor,stars,nocolor,color,rating} = this.attributes;
169 - let repeat = (count, func) => Array(count).fill().map(func);
170 - this.stars = ~~stars.value || 5;
171 - this.innerHTML = `<svg viewBox="0 0 ${this.stars*100} 100" style=cursor:pointer>` +
172 - `<rect height=100 fill=${nocolor.value} width=100% />` +
173 - `<rect height=100 fill=${color.value} />` +
174 - 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"/>`) +
175 - repeat(this.stars * 2, (i, n) => `<rect x=${ n*50 } n=${n} opacity=0 width=50 height=100 ` +
176 - ` onclick="this.closest('star-rating').value=${(n+1)/2}; this.closest('star-rating').dispatchEvent(new Event('click'))" ` +
177 - ` onmouseover="this.closest('star-rating').rating=${(n+1)/2}"/>`) +
178 - "</svg>";
179 - this.rating = rating.value;
180 - this.addEventListener('mouseleave', (e) => {
181 - if (e.target.tagName === 'STAR-RATING') {
182 - e.target.rating = e.target.getAttribute("rating")
183 - }
184 - })
185 - }
135 + function rated() {
136 + console.log(this.getAttribute("rating"));
137 + sendRate(parseInt(this.getAttribute("rating")));
138 + }
139 + var sendRate = function (vote) {
140 + fetch(new XWiki.Document('WebHome', 'Macros.Aufgabenbewertung').getURL('get') + "?outputSyntax=plain", {
141 + method: "POST",
142 + headers: { "Content-Type": "application/json"},
143 + body: JSON.stringify({
144 + vote: vote,
145 + doc: XWiki.currentDocument.space,
146 + id: "test",
147 + form_token: document.documentElement.getAttribute("data-xwiki-form-token")
148 + })
149 + }).then(data => {
150 + console.log(data.json())
186 186   });
152 + }
187 187  </script>
188 188  {{/html}}