Zum Inhalt springen

Änderungen von Dokument Home

Zuletzt geändert von Steffen Rehfuß am 14.08.2026 18:59
Von Version 1.1
bearbeitet von Steffen Rehfuß
am 14.08.2026 16:40
Änderungskommentar: Install extension [org.xwiki.platform:xwiki-platform-distribution-flavor-common/17.10.9]
Auf Version 8.1
bearbeitet von Steffen Rehfuß
am 14.08.2026 18:33
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,42 +1,400 @@
1 -== Willkommen in Ihrem Wiki ==
1 +{{velocity}}
2 +## =====================================================================
3 +## Intranet-Startseite — Hero (TOP-Blogpost) + 12 App-Buttons + 4 Kacheln
4 +## Einfach in den Seiten-Editor (Quelltext/Wiki) einfuegen.
5 +## =====================================================================
6 +##
7 +## ---- KONFIG 1: Blog-Space + Hero-Kategorie ----
8 +#set ($blogSpace = 'Blog') ## technischer Space-Name des Blogs
9 +#set ($heroCategory = 'TOP') ## Kategorie, die gross dargestellt wird
10 +##
11 +## ---- KONFIG 2: Die 12 App-Buttons (Text / Icon / Link / Farbe) ----
12 +## icon = Font-Awesome-Name (ohne "fa-"). Farbe = beliebiger Hex-Wert.
13 +#set ($apps = [
14 + { {'label':'Abteilung I', 'icon':'search', 'ref':'abteilung01:Main.WebHome', 'color':'#16a085'},
15 + {'label':'MyPage', 'icon':'key', 'ref':'MyPage.WebHome', 'color':'#2980b9'},
16 + {'label':'Blog', 'icon':'star', 'ref':'Blog.WebHome', 'color':'#8e44ad'},
17 + {'label':'Chatbot', 'icon':'pencil-square-o', 'url':"javascript:document.getElementById('toggle-chat-button').click();void(0);", 'color':'#16a085'},
18 + {'label':'Forum', 'icon':'group', 'ref':'Forums.WebHome', 'color':'#2980b9'},
19 + {'label':'Umfragen', 'icon':'question', 'ref':'XPoll.WebHome', 'color':'#8e44ad'},
20 + {'label':'Gruppenräume', 'icon':'life-ring', 'ref':'Rooms.WebHome', 'color':'#16a085'},
21 + {'label':'Meine Favoriten', 'icon':'star', 'ref':'Internes.Favoriten.WebHome', 'color':'#2980b9'},
22 + {'label':'Kalender', 'icon':'clock-o', 'ref':'MoccaCalendar.WebHome', 'color':'#8e44ad'},
23 + {'label':'Org-Chart', 'icon':'sitemap', 'ref':'Internes.Organigramm.WebHome', 'color':'#2c3e50'},
24 + {'label':'Tag Filter', 'icon':'filter', 'ref':'KBC Anwendungen.Tag Filter.WebHome', 'color':'#2c3e50'},
25 + {'label':'Kantine', 'icon':'coffee', 'ref':'Internes.Kantine.Speiseplan vom 13\.07\.2026 - 17\.07\.2026.WebHome', 'color':'#2c3e50'}
26 +])
27 +##
28 +## ---- Posts laden (neueste zuerst) ----
29 +#set ($xwql = "from doc.object(Blog.BlogPostClass) as post where post.published = 1 and doc.hidden = false")
30 +#if ($blogSpace != '')
31 + #set ($xwql = "$xwql and doc.space like :space")
32 +#end
33 +#set ($xwql = "$xwql order by post.publishDate desc")
34 +#set ($q = $services.query.xwql($xwql).setLimit(30))
35 +#if ($blogSpace != '')
36 + #set ($q = $q.bindValue('space', "$blogSpace%"))
37 +#end
38 +#set ($postNames = $q.execute())
39 +##
40 +## ---- Hero (erster TOP-Post) + bis zu 4 Kachel-Posts bestimmen ----
41 +#set ($heroDoc = $NULL)
42 +#set ($heroObj = $NULL)
43 +#set ($tilePosts = [])
44 +#foreach ($pn in $postNames)
45 + #set ($pd = $xwiki.getDocument($pn))
46 + #set ($po = $pd.getObject('Blog.BlogPostClass'))
47 + #set ($isTop = false)
48 + #set ($cats = $po.getValue('category'))
49 + #if ($cats)
50 + #foreach ($c in $cats)
51 + #set ($cn = "$c")
52 + #set ($cn = $cn.substring($mathtool.add($cn.lastIndexOf('.'), 1)))
53 + #if ($cn == $heroCategory)
54 + #set ($isTop = true)
55 + #end
56 + #end
57 + #end
58 + #if ($isTop && !$heroDoc)
59 + #set ($heroDoc = $pd)
60 + #set ($heroObj = $po)
61 + #elseif ($tilePosts.size() < 4)
62 + #set ($discard = $tilePosts.add($pn))
63 + #end
64 +#end
65 +## Fallback: kein TOP-Post -> neuesten Post als Hero nehmen
66 +#if (!$heroDoc && $postNames.size() > 0)
67 + #set ($heroDoc = $xwiki.getDocument($postNames.get(0)))
68 + #set ($heroObj = $heroDoc.getObject('Blog.BlogPostClass'))
69 + #set ($tilePosts = [])
70 + #foreach ($pn in $postNames)
71 + #if ("$pn" != "$postNames.get(0)" && $tilePosts.size() < 4)
72 + #set ($discard = $tilePosts.add($pn))
73 + #end
74 + #end
75 +#end
76 +##
77 +## ---- Hero-Daten aufbereiten ----
78 +#set ($heroImg = '')
79 +#if ($heroDoc)
80 + #foreach ($att in $heroDoc.getAttachmentList())
81 + #if ($heroImg == '' && $att.getMimeType().startsWith('image/'))
82 + #set ($heroImg = $heroDoc.getAttachmentURL($att.getFilename()))
83 + #end
84 + #end
85 + #set ($heroTitle = $heroDoc.getPlainTitle())
86 + #set ($heroText = "$!heroObj.getValue('extract')")
87 + #set ($heroDate = $heroObj.getValue('publishDate'))
88 +#end
89 +##
90 +{{html clean="false" wiki="false"}}
91 +<style>
92 +## Seitenkopf (Titel + "Zuletzt geaendert" + Aktionsmenue) auf DIESER Seite ausblenden
93 +.document-header { display: none !important; }
94 +## Breadcrumb (Pfad-Navigation) inkl. Wrapper ausblenden
95 +#hierarchy_breadcrumb, #hierarchy, .breadcrumb { display: none !important; }
96 +## Horizontale Trennlinie + Rechte-Warnung entfernen, Inhalt nach oben ziehen
97 +#mainContentArea > hr { display: none !important; }
98 +#missing-required-rights-warning { display: none !important; }
99 +## vom Editor erzeugten Leerabsatz um den Style-Block wegnehmen
100 +#xwikicontent > p:first-child { display: none !important; }
101 +#xwikicontent > p:empty { display: none !important; }
102 +## Fusszeile: Tags + "Gefaellt mir" + "Erstellt von / uebersetzt von" ausblenden
103 +#xdocTags, .doc-tags, .like-container, .xdocCreation { display: none !important; }
104 +.intra-wrap { width: 90%; max-width: 90%; margin: 0 auto; }
105 +.intra-cols { display: flex; gap: 20px; align-items: stretch; }
106 +.intra-main { flex: 2 1 0; min-width: 0; }
107 +.intra-side { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
108 +.intra-hero {
109 + position: relative; width: 100%; min-height: 360px; border-radius: 14px;
110 + overflow: hidden; background: #223; background-size: cover; background-position: center;
111 + box-shadow: 0 6px 18px rgba(0,0,0,.15); text-decoration: none; display: block;
112 +}
113 +.intra-hero::after {
114 + content: ""; position: absolute; inset: 0;
115 + background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%);
116 +}
117 +.intra-hero-body { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 28px; color: #fff; }
118 +.intra-chip {
119 + display: inline-block; background: #e74c3c; color: #fff; font-weight: 700;
120 + font-size: 12px; letter-spacing: .08em; padding: 4px 12px; border-radius: 20px; text-transform: uppercase;
121 +}
122 +.intra-hero-date { opacity: .85; font-size: 13px; margin: 14px 0 4px; }
123 +.intra-hero h2 { color: #fff; margin: 4px 0 16px; font-size: 30px; line-height: 1.15; max-width: 90%; }
124 +.intra-btn {
125 + display: inline-block; background: #27ae60; color: #fff !important; text-decoration: none;
126 + padding: 9px 20px; border-radius: 24px; font-weight: 600; font-size: 14px;
127 +}
128 +.intra-btn:hover { filter: brightness(1.08); }
129 +.intra-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
2 2  
3 -XWiki ist das beste Werkzeug, um Ihr Wissen zu organisieren und zu verwalten. Ein //Wiki// ist aufgeteilt in eine Hierarchie von //Seiten//. Sie können mehrere Wikis erstellen, jedes mit einem eigenen Satz von Seiten.
131 +.intra-app {
132 + display: flex;
133 + flex-direction: column;
134 + justify-content: space-between;
135 + border-radius: 10px;
136 + padding: 12px 12px 10px;
137 + min-height: 84px;
138 + color: #fff !important;
139 + text-decoration: none;
140 + transition: transform .15s ease,
141 + box-shadow .15s ease,
142 + filter .15s ease;
143 +}
4 4  
5 -XWiki kann als Wissensdatenbank (Support, Dokumentation, Vertrieb, etc.), für kollaborative Arbeitsbereiche oder sogar als komplettes Intranet genutzt werden.
145 +.intra-app:hover {
146 + transform: translateY(-2px);
147 + filter: brightness(.90); /* ca. 8 % dunkler */
148 + box-shadow: 0 6px 14px rgba(0,0,0,.18);
149 +}
6 6  
7 -== Die Grundlagen ==
151 +.intra-app:active {
152 + filter: brightness(.86);
153 +}
8 8  
9 -Um das Meiste aus Ihrem Wiki herauszuholen, melden Sie sich an und:
10 10  
11 -Verwenden Sie die {{displayIcon name="pencil"/}} Schaltfläche oberhalb, um diese Seite zu //bearbeiten// und beginnen Sie damit, das Wiki Ihren Vorstellungen anzupassen.
156 +.intra-app-ic { font-size: 22px; line-height: 1; }
157 +.intra-app-ic .fa { color: #fff; }
158 +.intra-app-lbl { font-size: 13px; font-weight: 600; margin-top: 8px; }
159 +.intra-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
160 +.intra-side-fn {
161 + border: 2px dashed #cbd3dc; border-radius: 12px; padding: 20px; min-height: 120px;
162 + display: flex; flex-direction: column; align-items: center; justify-content: center;
163 + color: #8a97a6; text-align: center; font-size: 13px;
164 +}
165 +.intra-widget { background: #fff; border: 0.5px solid #e2e6ea; border-radius: 12px; padding: 16px 18px; box-shadow: 0 3px 12px rgba(0,0,0,.06); margin-top: 35px; }
166 +.intra-widget-h { font-size: 14px; font-weight: 700; color: #16324f; margin-bottom: 10px; }
167 +.intra-tagcloud { line-height: 2; }
168 +.intra-tag { display: inline-block; margin: 0 9px 4px 0; color: #2c6fbb; text-decoration: none; }
169 +.intra-tag:hover { text-decoration: underline; }
170 +.intra-cal-list { display: flex; flex-direction: column; }
171 +.intra-cal-item { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #eef1f4; text-decoration: none; }
172 +.intra-cal-item:last-child { border-bottom: 0; }
173 +.intra-cal-item:hover .intra-cal-title { text-decoration: underline; }
174 +.intra-cal-date { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #2c6fbb; min-width: 52px; letter-spacing: .02em; }
175 +.intra-cal-title { font-size: 13px; color: #16324f; }
176 +.intra-cal-empty { color: #8a97a6; font-size: 13px; }
177 +.intra-tile {
178 + display: flex; background: #fff; border-radius: 12px; overflow: hidden;
179 + box-shadow: 0 3px 12px rgba(0,0,0,.10); text-decoration: none; color: #1a1a1a; min-height: 128px;
180 + transition: transform .15s ease, box-shadow .15s ease;
181 +}
182 +.intra-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }
183 +.intra-tile-txt { flex: 1 1 auto; padding: 16px 18px; }
184 +.intra-tile-txt h3 { margin: 6px 0 6px; font-size: 17px; color: #16324f; }
185 +.intra-tile-ex { font-size: 13px; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
186 +.intra-tile-date { font-size: 12px; color: #8a8a8a; margin-top: 10px; }
187 +.intra-mini-chip { display:inline-block; font-size: 11px; font-weight: 700; color:#2c6fbb; letter-spacing:.05em; text-transform: uppercase; }
188 +.intra-tile-img { flex: 0 0 40%; background-size: cover; background-position: center; background-color: #dde3ea; }
189 +.intra-h { font-size: 15px; font-weight: 700; color: #16324f; margin: 26px 0 12px; }
190 +@media (max-width: 860px) {
191 + .intra-cols { flex-direction: column; }
192 + .intra-apps { grid-template-columns: repeat(4, 1fr); }
193 + .intra-tiles { grid-template-columns: 1fr; }
194 +}
195 +/* Aussenhuelle faengt den 3D-Ueberstand ab -> kein Scrollbalken-Flackern */
196 +.intra-flip-outer { overflow: hidden; padding: 8px 12px 18px; margin-top: 24px; }
197 +.intra-flip { perspective: 1600px; }
198 +.intra-flip-inner {
199 + position: relative;
200 + transform-style: preserve-3d;
201 + transition: transform .6s cubic-bezier(.2,.7,.2,1);
202 + transition-delay: 0s; /* Richtungserkennung im JS verhindert Fehl-Flips */
203 +}
204 +.intra-flip.is-back .intra-flip-inner { transform: rotateY(180deg); }
12 12  
13 -Verwenden Sie die {{displayIcon name="add"/}} Schaltfläche oberhalb, um neue Seiten zu //erstellen// und erzeugen Sie eine //Hierarchie//, die Ihre Informationen am besten organisiert.
206 +.intra-flip-face {
207 + -webkit-backface-visibility: hidden; backface-visibility: hidden;
208 + box-sizing: border-box;
209 + background: #fff; border: .5px solid #e2e6ea; border-radius: 12px;
210 + box-shadow: 0 3px 12px rgba(0,0,0,.06); padding: 16px 18px;
211 +}
212 +.intra-flip-front { position: relative; min-height: 250px; } /* gibt die Hoehe vor */
213 +.intra-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); overflow: auto; }
14 14  
15 -Verwenden Sie die {{displayIcon name="home"/}} Breadcrumbs über dem Titel, um innerhalb Ihrer Seiten zu navigieren. Ohne diese ist es leicht, sich in einem großen Wiki zu verirren.
215 +/* Rueckseite darf nicht durch die Vorderseite hindurch klickbar sein */
216 +.intra-flip-back { pointer-events: none; }
217 +.intra-flip.is-back .intra-flip-back { pointer-events: auto; }
218 +.intra-flip.is-back .intra-flip-front { pointer-events: none; }
16 16  
17 -Außerdem können Sie den [[Sandkasten>>Sandbox.WebHome]] verwenden, um weitere Demo-Inhalte anzusehen und die einzelnen Funktionen des Wikis auszuprobieren und besser kennenzulernen.
220 +.intra-flip-hint {
221 + position: absolute; top: 12px; right: 14px;
222 + font-size: 10px; color: #8a97a6; background: #f2f5f8;
223 + border: 1px solid #e2e6ea; padding: 2px 8px; border-radius: 20px;
224 + pointer-events: none;
225 +}
226 +</style>
18 18  
19 -{{box}}
20 -Mit dem [[Getting Started Guide>>https://www.xwiki.org/xwiki/bin/view/Documentation/UserGuide/GettingStarted/WebHome]] erfahren Sie mehr darüber, wie Sie XWiki verwenden.
21 -{{/box}}
228 +<div class="intra-wrap">
229 + <div class="intra-cols">
22 22  
23 -(%class="row"%)
24 -(((
25 -(%class="col-xs-12 col-sm-6"%)
26 -(((
27 -== Erweitern Sie Ihr Wiki ==
231 + ## ===== LINKE SPALTE: Hero + 4 Blog-Kacheln =====
232 + <div class="intra-main">
28 28  
29 -Um die Leistungsfähigkeit zu erhöhen und den Funktionsumfang Ihres Wikis zu erweitern, verwenden Sie den [[Extension Manager>>XWiki.XWikiPreferences||queryString="editor=globaladmin&section=XWiki.Extensions"]], um Erweiterungen zu suchen und zu installieren.
234 + ## ----- HERO (grosser TOP-Post) -----
235 + #if ($heroDoc)
236 + <a class="intra-hero" href="$heroDoc.getURL('view')" style="#if($heroImg != '')background-image: url('$heroImg');#end">
237 + <div class="intra-hero-body">
238 + <span class="intra-chip">$escapetool.xml($heroCategory)</span>
239 + #if ($heroDate)<div class="intra-hero-date">$datetool.format('dd. MMMM yyyy', $heroDate)</div>#end
240 + <h2>$escapetool.xml($heroTitle)</h2>
241 + <span class="intra-btn">Weiterlesen</span>
242 + </div>
243 + </a>
244 + #else
245 + <div class="intra-hero"><div class="intra-hero-body"><h2>Noch kein Blog-Beitrag</h2></div></div>
246 + #end
30 30  
31 -Benutzen Sie das [[Erweiterungsverzeichnis>>https://extensions.xwiki.org]], um durch die mehr als 900 für XWiki verfügbaren Community-Erweiterungen zu blättern.
32 -)))
248 + ## ----- 4 BLOG-KACHELN (2 x 2), direkt unter dem Hero -----
249 + <div class="intra-h">Aktuelles</div>
250 + <div class="intra-tiles">
251 + #foreach ($pn in $tilePosts)
252 + #set ($td = $xwiki.getDocument($pn))
253 + #set ($to = $td.getObject('Blog.BlogPostClass'))
254 + #set ($tImg = '')
255 + #foreach ($att in $td.getAttachmentList())
256 + #if ($tImg == '' && $att.getMimeType().startsWith('image/'))
257 + #set ($tImg = $td.getAttachmentURL($att.getFilename()))
258 + #end
259 + #end
260 + #set ($tEx = "$!to.getValue('extract')")
261 + #set ($tCat = '')
262 + #set ($tcats = $to.getValue('category'))
263 + #if ($tcats && $tcats.size() > 0)
264 + #set ($fc = "$tcats.get(0)")
265 + #set ($tCat = $fc.substring($mathtool.add($fc.lastIndexOf('.'), 1)))
266 + #end
267 + #set ($tDate = $to.getValue('publishDate'))
268 + <a class="intra-tile" href="$td.getURL('view')">
269 + <div class="intra-tile-txt">
270 + #if ($tCat != '')<span class="intra-mini-chip">$escapetool.xml($tCat)</span>#end
271 + <h3>$escapetool.xml($td.getPlainTitle())</h3>
272 + <div class="intra-tile-ex">$escapetool.xml($tEx)</div>
273 + #if ($tDate)<div class="intra-tile-date">$datetool.format('dd.MM.yyyy', $tDate)</div>#end
274 + </div>
275 + <div class="intra-tile-img" style="#if($tImg != '')background-image: url('$tImg');#end"></div>
276 + </a>
277 + #end
278 + </div>
279 + </div>
33 33  
34 -(%class="col-xs-12 col-sm-6"%)
35 -(((
36 -== Erstellen Sie Ihre Anwendung ==
281 + ## ===== RECHTE SPALTE: 12 App-Buttons + Platz fuer weitere Funktion =====
282 + <div class="intra-side">
37 37  
38 -Gehen Sie über die verfügbaren Erweiterungen hinaus und definieren Sie die //Struktur// Ihrer Daten basierend auf //Ihrem// Bedarf, indem Sie //Ihre// eigenen Anwendungen mit [[App Within Minutes>>AppWithinMinutes]] (AWM) erstellen.
284 + ## ----- 12 APP-BUTTONS -----
285 + <div class="intra-apps">
286 + #foreach ($app in $apps)
287 + <a class="intra-app" style="background: $app.color;" href="#if($app.url != '')$app.url#else#end">
288 + <span class="intra-app-ic"><span class="fa fa-$app.icon" aria-hidden="true"></span></span>
289 + <span class="intra-app-lbl">$escapetool.xml($app.label)</span>
290 + </a>
291 + #end
292 + </div>
39 39  
40 -AWM übernimmt für Sie und Ihre Benutzer die einfache Erstellung und Verwaltung der Daten.
41 -)))
42 -)))
294 +## ----- NAECHSTE TERMINE (Mocca Calendar) / RUECKSEITE: TAGCLOUD -----
295 +<div class="intra-flip-outer">
296 + <div class="intra-flip" id="intra-flip-side">
297 + <div class="intra-flip-inner">
298 +
299 + <!-- VORDERSEITE: Naechste Termine -->
300 + <div class="intra-flip-face intra-flip-front">
301 + <span class="intra-flip-hint">&#8942; Maus von unten</span>
302 + <div class="intra-widget-h">Nächste Termine</div>
303 + <div class="intra-cal-list">
304 + #set ($now = $datetool.date)
305 + #set ($evtXwql = "from doc.object(MoccaCalendar.MoccaCalendarEventClass) as event where event.startDate >= :now and doc.hidden = false order by event.startDate asc")
306 + #set ($evtNames = $services.query.xwql($evtXwql).bindValue('now', $now).setLimit(6).execute())
307 + #if ($evtNames && $evtNames.size() > 0)
308 + #foreach ($en in $evtNames)
309 + #set ($ed = $xwiki.getDocument($en))
310 + #set ($eo = $ed.getObject('MoccaCalendar.MoccaCalendarEventClass'))
311 + #set ($eStart = $eo.getValue('startDate'))
312 + #set ($eAllDay = $eo.getValue('allDay'))
313 + #set ($eTitle = $ed.getPlainTitle())
314 + #if ($eTitle == '')#set ($eTitle = "$!eo.getValue('title')")#end
315 + <a class="intra-cal-item" href="$ed.getURL('view')">
316 + <span class="intra-cal-date">#if($eStart)$datetool.format('dd.MM.', $eStart)#if("$!eAllDay" != '1') $datetool.format('HH:mm', $eStart)#end#end</span>
317 + <span class="intra-cal-title">$escapetool.xml($eTitle)</span>
318 + </a>
319 + #end
320 + #else
321 + <span class="intra-cal-empty">Keine anstehenden Termine.</span>
322 + #end
323 + </div>
324 + </div>
325 +
326 +<!-- RUECKSEITE: Tagcloud -->##
327 +<div class="intra-flip-face intra-flip-back">##
328 + <div class="intra-widget-h">Beliebte Themen</div>##
329 + #set ($tagMap = $xwiki.tag.getTagCount())##
330 + #if ($tagMap && $tagMap.size() > 0)##
331 + #set ($top = [])##
332 + #set ($maxCnt = 1)##
333 + #set ($minCnt = 999999)##
334 + #set ($tagCount = 0)##
335 +#foreach ($e in $collectiontool.sort($tagMap.entrySet(), ['value:desc']))##
336 + #if ($tagCount >= 40)#break#end##
337 + #if ($e.key.toLowerCase() != 'id')##
338 + #set ($discard = $top.add($e.key))##
339 + #set ($tagCount = $mathtool.add($tagCount, 1))##
340 + #if ($e.value > $maxCnt)#set ($maxCnt = $e.value)#end##
341 + #if ($e.value < $minCnt)#set ($minCnt = $e.value)#end##
342 + #end##
343 +#end##
344 + #set ($span = $mathtool.max(1, $mathtool.sub($maxCnt, $minCnt)))##
345 + #set ($alpha = $collectiontool.sort($top))##
346 + <div class="intra-tagcloud">##
347 + #foreach ($tagName in $top)##
348 + #set ($cnt = $tagMap.get($tagName))##
349 + #set ($lvl = $mathtool.round($mathtool.div($mathtool.mul($mathtool.sub($cnt, $minCnt), 4), $span)))##
350 + #set ($ord = $alpha.indexOf($tagName))##
351 + <a class="intra-tag intra-tag-l${lvl}" style="order: ${ord};"##
352 + href="$xwiki.getURL('Main.Tags', 'view', "do=viewTag&tag=$escapetool.url($tagName)")"##
353 + title="$escapetool.xml($tagName): $cnt Seiten">##
354 + <span class="intra-tag-name">$escapetool.xml($tagName)</span><span class="intra-tag-cnt">$cnt</span>##
355 + </a>##
356 + #end##
357 + </div>##
358 + #else##
359 + <div class="intra-tagcloud"><span class="intra-cal-empty">Noch keine Tags vergeben.</span></div>##
360 + #end##
361 +</div>##
362 +
363 + </div>
364 + </div>
365 + </div>
366 +
367 + </div>
368 +
369 + </div>
370 +</div>
371 +<script>
372 +(function(){
373 + var box = document.getElementById('intra-flip-side');
374 + if(!box){ return; }
375 + var hoverCapable = !!(window.matchMedia && window.matchMedia('(hover: hover)').matches);
376 +
377 + // Letzte bekannte Maus-Y-Position global mitverfolgen, um beim Betreten der Karte
378 + // die Bewegungsrichtung zu kennen (Y waechst nach unten -> "von unten" = Y wird kleiner).
379 + var lastY = null;
380 + document.addEventListener('mousemove', function(e){ lastY = e.clientY; }, {passive:true});
381 +
382 + box.addEventListener('mouseenter', function(e){
383 + if (!hoverCapable) { return; }
384 + var enteredFromBelow = (lastY !== null && (lastY - e.clientY) > 2);
385 + if (enteredFromBelow) {
386 + box.classList.toggle('is-back');
387 + }
388 + lastY = e.clientY;
389 + });
390 +
391 + box.addEventListener('click', function(e){
392 + if(e.target.closest('a')){ return; }
393 + if(hoverCapable){ return; }
394 + box.classList.toggle('is-back');
395 + });
396 +})();
397 +</script>
398 +
399 +{{/html}}
400 +{{/velocity}}