Änderungen von Dokument Sandbox

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

Von Version 6.1
bearbeitet von Holger Engels
am 2023/10/26 15:27
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 9.1
bearbeitet von Holger Engels
am 2023/11/08 06:52
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -103,40 +103,41 @@
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 ==
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}}
107 107  
108 -Dieses Makro bietet die Möglichkeit, die Aufmerksamkeit der Leser auf einen bestimmten Text zu lenken:
109 109  
110 -{{warning}}
111 -Dies ist ein wichtiger Hinweis!
112 -{{/warning}}
113 113  
114 -== Inhaltsverzeichnis ==
115 -
116 -Dieses Makro erzeugt ein Inhaltsverzeichnis basierend auf den Überschriften in der Seite:
117 -
118 -{{toc/}}
119 -
120 -=== Ausrichten am ===
121 -
122 - ~===
123 -
124 -{{formula}}
125 -\begin{align*}
126 -4x - 10y &= 16 \\
127 -3x + 9y &= -12
128 -\end{align*}
129 -{{/formula}}
130 -
131 -{{formula}}
132 -\begin{aligned}
133 -a_{ijk} &= \frac {Pr(M_{I} =2 \& M_J=1 \& M_K =1 | I=i , J=j , K=k)}{Pr (M_I =1 \& M_J =1 \& M_K=1 | I=i , J=j)}\\
134 - &= \frac {\mu_{ijk211}}{\mu_{ijk111}}\\
135 -\Rightarrow lala = 5
136 -\end{aligned}
137 -{{/formula}}
138 -
139 -
140 140  {{velocity filter="none"}}
141 141  {{html clean="false" wiki="true"}}
142 142  #set ($query = "where (doc.parent is null or doc.parent='') and doc.fullName != 'Main.WebHome' order by doc.name asc")
... ... @@ -152,3 +152,36 @@
152 152  {{/html}}
153 153  {{/velocity}}
154 154  
156 +
157 +{{html clean="false"}}
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 + }
186 + });
187 +</script>
188 +{{/html}}