Änderungen von Dokument Sandbox

Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)

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}}