Änderungen von Dokument Sandbox

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

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

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -103,32 +103,6 @@
103 103  
104 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 105  
106 -== Makro: Warnmeldung ==
107 -
108 -Dieses Makro bietet die Möglichkeit, die Aufmerksamkeit der Leser auf einen bestimmten Text zu lenken:
109 -
110 -{{warning}}
111 -Dies ist ein wichtiger Hinweis!
112 -{{/warning}}
113 -
114 -=== Ausrichten am ===
115 -
116 - ~===
117 -
118 -{{formula}}
119 -\begin{align*}
120 -f(x) &= x^2\! +3x\! +2 \\
121 -f(x) &= x^2+3x+2 \\
122 -f(x) &= x^2\, +3x\, +2 \\
123 -f(x) &= x^2\: +3x\: +2 \\
124 -f(x) &= x^2\; +3x\; +2 \\
125 -f(x) &= x^2\ +3x\ +2 \\
126 -f(x) &= x^2\quad +3x\quad +2 \\
127 -f(x) &= x^2\qquad +3x\qquad +2
128 -\end{align*}
129 -{{/formula}}
130 -
131 -
132 132  {{velocity filter="none"}}
133 133  {{html clean="false" wiki="true"}}
134 134  #set ($query = "where (doc.parent is null or doc.parent='') and doc.fullName != 'Main.WebHome' order by doc.name asc")
... ... @@ -143,3 +143,50 @@
143 143  
144 144  {{/html}}
145 145  {{/velocity}}
120 +
121 +
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 +
155 +{{velocity}}
156 +$doc.space
157 +#set ($lala = $services.ratings.exercise.setRating($doc.space + 'lala', 1))
158 +
159 +{{html clean="false" wiki="true"}}
160 +<style>
161 +star-rating { display: inline-block; width: 120px }
162 +</style>
163 +<star-rating stars=5 rating="$services.ratings.pagereflection.getAverageRating($doc.space + 'lala').get().averageVote" bgcolor="white" nocolor="lightgrey" color="gold"></star-rating>
164 +{{/html}}
165 +{{/velocity}}
166 +