1<#-- @ftlvariable name="glossaryUtil" type="de.xdot.um.blauesgut.web.resources.GlossaryUtil" -->
2<#assign
3 namespace = randomNamespace
4 sortedEntries = glossaryUtil.getSortedAssetEntries(entries, themeDisplay.locale)
5/>
6
7<div class="journal-content-article">
8 <div class="glossary-list">
9 <div class="teaser-content container">
10 <div class="row justify-content-center">
11 <div class="col-sm-12 col-md-8">
12 <div class="docsearch-box">
13 <div class="glossary-search-label"><label class="sr-only" for="${namespace}search">Begriffssuche</label></div>
14 <div class="glossary-search">
15 <div class="glossary-search-input">
16 <input class="form-control" id="${namespace}search" name="${namespace}search"
17 placeholder="Suchbegriff eingeben (mindestens drei Buchstaben)" type="text" data-list=".glossary-list-entries"
18 autocomplete="off">
19 </div>
20 <div class="glossary-searchbar-icon">
21 <span class="icon icon-um icon-um--search"></span>
22 </div>
23 </div>
24 </div>
25
26 <div class="letters">
27 <div class="row">
28 <div class="col-md-12">
29 <div class="first-letters">
30 <#assign letter = '?' />
31 <#list sortedEntries as entry>
32 <#assign
33 assetRenderer = entry.getAssetRenderer()
34 entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale))
35 entryFirstLetter = entryTitle?substring(0,1)?upper_case
36 />
37
38 <#if letter != entryFirstLetter>
39 <#assign letter = entryFirstLetter />
40 <a class="btn btn-default first-letter" href="#${letter}"
41 aria-label="Zu den Begriffen mit dem Anfangsbuchstaben ${letter}">${letter}</a>
42 </#if>
43 </#list>
44 </div>
45 </div>
46 </div>
47 </div>
48
49 <div class="row">
50 <div class="col-md-12">
51 <dl class="glossary-list-entries panel-group panel-group-flush" id="accordion">
52 <#assign
53 letter = '?'
54 accordionCount = 0
55 />
56
57 <#list sortedEntries as entry>
58 <#assign
59 assetRenderer = entry.getAssetRenderer()
60 entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale))
61 entryFirstLetter = entryTitle?substring(0,1)?upper_case
62 accordionCount++
63 />
64
65 <div class="panel panel-default">
66
67 <#if letter != entryFirstLetter>
68 <#assign letter = entryFirstLetter />
69 <div class="panel-heading" role="tab">
70 <div class="category-header panel-title">
71 <h2 class="glossary-letter" id="${letter}">${entryFirstLetter}</h2>
72 </div>
73 </div>
74 </#if>
75
76 <div class="glossary-list-entry">
77 <div class="panel-header">
78 <dt class="asset-title">
79 <a
80 class="collapse-icon collapse-icon-middle collapsed"
81 role="button"
82 data-toggle="collapse"
83 data-parent="#accordion"
84 href="#collapse${accordionCount}"
85 aria-expanded="false"
86 aria-controls="collapse"
87 >
88 <h3>${entryTitle}</h3>
89 <span class="collapse-icon-closed icon-bg icon-bg--arrow2-right"></span>
90 </a>
91
92 </dt>
93 </div>
94
95 <div id="collapse${accordionCount}" class="panel-collapse collapse" role="tabpanel">
96 <div class="panel-body">
97 <div class="pull-right">
98 <@getEditIcon />
99 </div>
100 <dd class="asset-summary">
101 <@liferay_asset["asset-display"]
102 className=entry.className
103 classPK=getterUtil.getLong(entry.classPK, 0)
104 template="full_content"
105 />
106 </dd>
107 </div>
108 </div>
109 </div>
110 </div>
111 </#list>
112 </dl>
113 </div>
114 </div>
115 </div>
116 </div>
117 </div>
118 </div>
119</div>
120
121<script type="text/javascript">
122 var initializeHideSeek = function () {
123 $('#${namespace}search').hideseek(
124 {
125 highlight: true,
126 headers: '.category-header',
127 min_chars: 3,
128 nodata: '${htmlUtil.escapeJS(languageUtil.get(locale, "there-are-no-results"))}'
129 }
130 );
131
132 $('#${namespace}search').on(
133 'keyup',
134 function(e) {
135 var value = e.target.value;
136
137 if (value.length >= 3) {
138 $('.glossary-list .letters').addClass('hidden');
139 } else {
140 $('.glossary-list .letters').removeClass('hidden');
141
142 $('.glossary-list-entries > .panel').removeAttr('style');
143
144 $('.glossary-list-entries .asset-title h3').each(
145 function(index) {
146 $(this).html($(this).text());
147 }
148 )
149
150 $('.glossary-list-entries .asset-summary p').each(
151 function(index) {
152 $(this).html($(this).text());
153 }
154 )
155 }
156 }
157 );
158
159
160 const allGlossaryListEntries = document.querySelectorAll('.glossary-list-entry');
161
162 $('#${namespace}search').on("_after_each", function(e) {
163 allGlossaryListEntries?.forEach((entry) => {
164 const entryParagraph = entry?.children[1]?.children[0]?.children[1]?.children[0]?.children[0]?.innerText;
165 const entryCollapsible = entry?.children[0]?.children[0]?.children[0];
166 const entryAccordion = entry?.children[1];
167
168 if (entryParagraph?.toLowerCase()?.includes(e?.currentTarget?.value?.toLowerCase()) && e?.currentTarget?.value !== '') {
169 entryCollapsible?.classList?.remove('collapsed');
170 entryCollapsible?.setAttribute('aria-expanded', 'true');
171 entryAccordion?.classList?.add('in');
172 entryAccordion?.setAttribute('aria-expanded', 'true');
173 } else {
174 entryCollapsible?.classList?.add('collapsed');
175 entryCollapsible?.setAttribute('aria-expanded', 'false');
176 entryAccordion?.classList?.remove('in');
177 entryAccordion?.setAttribute('aria-expanded', 'false');
178 }
179 });
180 });
181 };
182
183 $(document).ready(initializeHideSeek);
184
185 if (Liferay && Liferay.on) {
186 Liferay.on('endNavigate', initializeHideSeek);
187 }
188</script>
189
190<#macro getEditIcon>
191 <#if assetRenderer.hasEditPermission(themeDisplay.getPermissionChecker())>
192 <#assign redirectURL = renderResponse.createRenderURL() />
193
194 ${redirectURL.setParameter("mvcPath", "/add_asset_redirect.jsp")}
195 ${redirectURL.setWindowState("pop_up")}
196
197 <#assign editPortletURL = assetRenderer.getURLEdit(renderRequest, renderResponse, windowStateFactory.getWindowState("pop_up"), redirectURL)!"" />
198
199 <#if validator.isNotNull(editPortletURL)>
200 <#assign title = languageUtil.format(locale, "edit-x", entryTitle, false) />
201
202 <@liferay_ui["icon"]
203 cssClass="icon-monospaced visible-interaction"
204 icon="pencil"
205 markupView="lexicon"
206 message=title
207 url="javascript:Liferay.Util.openWindow({id:'" + renderResponse.getNamespace() + "editAsset', title: '" + title + "', uri:'" + htmlUtil.escapeURL(editPortletURL.toString()) + "'});"
208 />
209 </#if>
210 </#if>
211</#macro>