1<#assign liferay_ui = PortletJspTagLibs["/META-INF/liferay-ui.tld"] />
2
3<div class="card mb-3" >
4 <div class="card-header bg-transparent">What's new</div>
5 <div class="card-body">
6
7 <div class="opp2017carousel">
8 <div id="opp2017carousel" class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="5000">
9
10 <div class="carousel-inner">
11
12 <div id="<@portlet.namespace />carousel" class="eu-pub-carousel">
13 <#if entries?has_content>
14 <#list entries as curEntry>
15 <#assign curEntry = curEntry />
16 <#assign assetRenderer = curEntry.getAssetRenderer() />
17 <#assign className = assetRenderer.getClassName() />
18 <#assign docXml = saxReaderUtil.read(curEntry.getAssetRenderer().getArticle().getContent()) />
19
20 <#assign rootElement = docXml.getRootElement() />
21 <#assign availableLocales = rootElement.attribute("available-locales").getText() />
22 <#assign defaultLocale = rootElement.attribute("default-locale").getText() />
23
24 <#if (availableLocales?contains(locale)) >
25 <#assign bannerImg = docXml.valueOf("//dynamic-element[@name='Banner']/dynamic-content[@language-id='"+locale+"']/text()") />
26 <#else>
27 <#assign bannerImg = docXml.valueOf("//dynamic-element[@name='Banner']/dynamic-content[@language-id='"+defaultLocale+"']/text()") />
28 </#if>
29
30 <#assign jsonBannerImg = jsonFactoryUtil.createJSONObject(bannerImg)>
31 <#assign urlJsonBannerImg = "/documents/"+ jsonBannerImg.groupId +"/" +jsonBannerImg.fileEntryId +"/"+ jsonBannerImg.name +"/"+jsonBannerImg.uuid >
32
33 <#if (availableLocales?contains(locale)) >
34 <#assign linkURL = docXml.valueOf("//dynamic-element[@name='Link']/dynamic-content[@language-id='"+locale+"']/text()") />
35 <#assign title = docXml.valueOf("//dynamic-element[@name='Title']/dynamic-content[@language-id='"+locale+"']/text()") />
36 <#assign description = docXml.valueOf("//dynamic-element[@name='Description']/dynamic-content[@language-id='"+locale+"']/text()") />
37 <#else>
38 <#assign linkURL = docXml.valueOf("//dynamic-element[@name='Link']/dynamic-content[@language-id='"+defaultLocale+"']/text()") />
39 <#assign title = docXml.valueOf("//dynamic-element[@name='Title']/dynamic-content[@language-id='"+defaultLocale+"']/text()") />
40 <#assign description = docXml.valueOf("//dynamic-element[@name='Description']/dynamic-content[@language-id='"+defaultLocale+"']/text()") />
41 </#if>
42
43 <div class="carousel-item ${(curEntry_index==0)?string('active', '')}">
44 <div data-caption="#caption${curEntry_index}">
45 <img alt="" src="${urlJsonBannerImg}" style="width: 200px; height: 198px;">
46
47 <div class="carousel-caption">
48 <h3 class="title-underline">
49 <a href="${linkURL}">${title}</a>
50 </h3>
51 ${description}
52 </div>
53 </div>
54 </div>
55
56 </#list>
57 </#if>
58 </div>
59 </div>
60
61 <a class="left carousel-control" href="#opp2017carousel" tabindex="0" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"> </span> <span class="sr-only">Previous</span> </a>
62 <a class="right carousel-control" href="#opp2017carousel" tabindex="0" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"> </span> <span class="sr-only">Next</span> </a>
63
64 <div class="card-footer bg-transparent">
65 <ol class="carousel-indicators-play">
66 <li role="button" tabindex="0" class="carousel-play" onclick="$('.carousel').carousel('cycle'); document.querySelector('.carousel-indicators-play .carousel-play').style.display = 'none'; document.querySelector('.carousel-indicators-play .carousel-stop').style.display = 'block';"><span class="sr-only">Carousel</span><span></span>Play</li>
67 <li role="button" tabindex="0" class="carousel-stop" onclick="$('.carousel').carousel('pause'); document.querySelector('.carousel-indicators-play .carousel-play').style.display = 'block'; document.querySelector('.carousel-indicators-play .carousel-stop').style.display = 'none';"><span class="sr-only">Carousel</span><span></span>Stop</li>
68 </ol>
69 <ol class="carousel-indicators">
70 <#list entries as entry>
71 <li data-slide-to="${entry_index}" data-target="#opp2017carousel" class="${(entry_index==0)?string('active', '')}"> <button data-slide-to="${entry_index}" data-target="#opp2017carousel" tabindex="0"></li>
72 </#list>
73 </ol>
74 </div>
75 <div aria-live="polite" aria-atomic="true" class="liveregion visuallyhidden">Item <span class="active">0</span> of <span class="total">0</span></div>
76 </div>
77</div>
78</div>
79</div>
80<script>
81
82var inputPlayBtnCarusel = document.querySelector('.carousel-indicators-play .carousel-play');
83inputPlayBtnCarusel.addEventListener("keyup", function(event) {
84 if (event.keyCode === 13) {
85 $('.carousel').carousel('cycle');
86 document.querySelector('.carousel-indicators-play .carousel-play').style.display = 'none';
87 document.querySelector('.carousel-indicators-play .carousel-stop').style.display = 'block';
88 }
89});
90
91var inputStopBtnCarusel = document.querySelector('.carousel-indicators-play .carousel-stop');
92inputStopBtnCarusel.addEventListener("keyup", function(event) {
93 if (event.keyCode === 13) {
94 $('.carousel').carousel('pause');
95 document.querySelector('.carousel-indicators-play .carousel-play').style.display = 'block';
96 document.querySelector('.carousel-indicators-play .carousel-stop').style.display = 'none';
97 }
98});
99
100//set accessibility values
101var activeSlide = document.querySelector('.carousel-indicators li.active').getAttribute('data-slide-to');
102var numberOfSlides = document.querySelectorAll('.carousel-indicators li').length;
103document.querySelector('.liveregion.visuallyhidden span.active').innerHTML = parseInt(activeSlide) + 1;
104document.querySelector('.liveregion.visuallyhidden span.total').innerHTML = numberOfSlides;
105
106// identify an element to observe
107const elementToObserve = document.querySelector(".carousel-inner");
108
109// create a new instance of `MutationObserver` named `observer`,
110// passing it a callback function
111const observer = new MutationObserver(function() {
112 var activeSlide = document.querySelector('.carousel-indicators li.active').getAttribute('data-slide-to');
113 var numberOfSlides = document.querySelectorAll('.carousel-indicators li').length;
114 document.querySelector('.liveregion.visuallyhidden span.active').innerHTML = parseInt(activeSlide) + 1;
115 document.querySelector('.liveregion.visuallyhidden span.total').innerHTML = numberOfSlides;
116});
117observer.observe(elementToObserve,
118 {subtree: true,
119 childList: true,
120 attributes: true,
121 attributeOldValue: true
122 });
123
124
125</script>
126<style>
127.carousel-indicators-play li{
128 font-size: 13px;
129 color: #697188;
130 cursor: pointer;
131 position: relative;
132 margin-left: 20px;
133 height: 20px;
134 line-height: 20px;
135}
136.carousel-indicators-play{
137 bottom: -4px;
138 left: 0;
139 top: inherit;
140 position: absolute;
141 left: 0;
142 z-index: 20;
143 display: flex;
144 justify-content: center;
145 padding-left: 0;
146 margin-left: 1.25rem;
147 list-style: none;
148}
149
150.carousel-indicators-play .carousel-play{
151 display: none;
152}
153.carousel-indicators-play .carousel-play span{
154 left: -20px;
155 top: 4px;
156 position: absolute;
157 display: block;
158 border: 0;
159 background: transparent;
160 box-sizing: border-box;
161 width: 0;
162 height: 11px;
163 border-color: transparent transparent transparent #697188;
164 transition: 100ms all ease;
165 cursor: pointer;
166 border-style: solid;
167 border-width: 5px 0 5px 10px;
168}
169.carousel-indicators-play .carousel-stop span{
170 left: -20px;
171 top: 4px;
172 position: absolute;
173 display: block;
174 border: 0;
175 background: transparent;
176 box-sizing: border-box;
177 width: 0;
178 height: 11px;
179 border-color: #697188;
180 border-radius: 2px;
181 cursor: pointer;
182 border-style: solid;
183 border-width: 5px 6px 5px 5px;
184}
185#opp2017carousel .carousel-indicators {
186 right: 0px;
187 justify-content: flex-end;
188 margin-right: unset;
189 margin-left: unset;
190 padding-right: 20px;
191}
192
193/*----euVoc home 1640 - carousel---*/
194/*----to be added in the asset publisher template---*/
195.custom-left-first-page-carousel.portlet-asset-publisher {
196 height: auto;
197 border-top: 3px solid #112250;
198}
199
200.custom-left-first-page-carousel .card{
201 min-height: unset !important;
202 box-shadow: none;
203 margin: unset;
204 border: unset !important;
205}
206
207.custom-left-first-page-carousel .card-header{
208 background: url("data:image/svg+xml,%3Csvg width='37' height='38' viewBox='0 0 37 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_970:16894)'%3E%3Cpath d='M25.6568 10.3342C25.8435 10.3843 26.0509 10.3261 26.2335 10.1725C26.4161 10.0189 26.5589 9.78252 26.6305 9.51531L27.1704 7.50033C27.242 7.23313 27.2365 6.957 27.1552 6.7327C27.0738 6.50839 26.9233 6.35429 26.7367 6.30428C26.55 6.25427 26.3426 6.31246 26.16 6.46604C25.9774 6.61962 25.8346 6.85601 25.763 7.12321L25.2231 9.1382C25.1515 9.4054 25.157 9.68153 25.2383 9.90583C25.3197 10.1301 25.4702 10.2842 25.6568 10.3342Z' fill='%23444444'/%3E%3Cpath d='M27.6402 13.7778C27.7373 13.9448 27.9255 14.0497 28.1633 14.0694C28.4011 14.0891 28.669 14.022 28.9081 13.8829L30.7111 12.8337C30.9502 12.6946 31.1409 12.4949 31.2413 12.2784C31.3417 12.0619 31.3435 11.8465 31.2463 11.6795C31.1491 11.5125 30.9609 11.4076 30.7231 11.3879C30.4854 11.3682 30.2175 11.4352 29.9784 11.5744L28.1753 12.6235C27.9362 12.7626 27.7455 12.9624 27.6451 13.1789C27.5448 13.3953 27.543 13.6108 27.6402 13.7778Z' fill='%23444444'/%3E%3Cpath d='M30.1269 18.2201L32.1409 18.7597C32.4079 18.8313 32.684 18.8256 32.9082 18.744C33.1325 18.6624 33.2867 18.5115 33.3368 18.3244C33.3869 18.1374 33.3289 17.9297 33.1754 17.7468C33.022 17.564 32.7858 17.4211 32.5187 17.3495L30.5048 16.8099C30.2377 16.7383 29.9617 16.744 29.7374 16.8256C29.5131 16.9072 29.359 17.0582 29.3089 17.2452C29.2588 17.4322 29.3168 17.64 29.4702 17.8228C29.6236 18.0056 29.8598 18.1485 30.1269 18.2201Z' fill='%23444444'/%3E%3Cpath d='M26.4967 15.3077C25.1626 12.7998 23.4719 10.5153 21.4796 8.52817C19.5961 6.72939 18.015 6.1375 16.9348 6.8057C16.6903 6.96005 16.4779 7.16326 16.3104 7.40306C16.1429 7.64286 16.0238 7.91429 15.9601 8.20099L13.854 16.0612C13.6292 16.8447 13.1227 17.5148 12.4386 17.9337L7.83579 20.725C7.27404 21.0561 6.78002 21.4979 6.3825 22.0245C5.98497 22.5512 5.69187 23.1523 5.52026 23.7927C5.34865 24.4332 5.30196 25.1003 5.38289 25.7551C5.46383 26.41 5.67078 27.0396 5.99171 27.6072C6.30407 28.18 6.72504 28.6812 7.23012 29.0817C7.7352 29.4821 8.3143 29.7738 8.93372 29.9398C9.55315 30.1058 10.2005 30.1427 10.8382 30.0484C11.4758 29.9542 12.091 29.7306 12.6479 29.3907L12.8087 29.3044L13.2593 30.0981C13.4614 30.4702 13.9911 31.3882 14.1937 31.7446C14.4248 32.1525 14.6145 32.4862 14.8085 32.828C15.4322 32.474 16.8479 31.6944 17.5798 31.2554C18.3117 30.8164 20.4028 29.6534 20.4028 29.6534C20.4028 29.6534 19.8023 28.5952 19.417 27.8866C19.1739 27.4878 18.986 27.1564 18.7771 26.7884L18.4764 26.229C18.8351 26.1918 19.1963 26.2186 19.5441 26.3081L27.4381 28.4232C27.5237 28.4431 27.6126 28.4449 27.6995 28.4286C28.0786 28.4674 28.462 28.3796 28.7929 28.178C29.8932 27.5282 30.1794 25.8061 29.6316 23.2264C28.9749 20.4354 27.9185 17.7669 26.4967 15.3077ZM17.5141 7.86678C17.7486 7.76681 18.0092 7.75835 18.2463 7.843C19.1506 8.18465 19.9663 8.73033 20.6344 9.4405C22.5299 11.343 24.1468 13.5194 25.4359 15.9035C26.7772 18.2563 27.7814 20.8001 28.4181 23.4577C28.8886 25.719 28.5676 26.8236 28.1617 27.0772C28.0465 27.1311 27.9224 27.1609 27.7966 27.165C27.6709 27.1691 27.546 27.1473 27.4294 27.1009C25.9004 26.4141 24.5743 25.3326 23.5777 23.9595C23.2096 23.5115 22.8681 23.0576 22.5383 22.6069C22.7603 22.247 22.9322 21.8573 23.0487 21.4496C23.2553 20.7013 23.2906 19.9167 23.1518 19.1579C23.0129 18.3991 22.7038 17.687 22.2489 17.0779C21.794 16.4688 21.2057 15.9795 20.5307 15.6487C19.8558 15.318 19.1126 15.1548 18.3601 15.1722C18.1613 14.653 17.954 14.1187 17.7649 13.5633C17.1358 11.9711 16.9165 10.2326 17.1279 8.51388C17.1476 8.38572 17.1919 8.26247 17.2582 8.15135C17.3246 8.04023 17.4115 7.94349 17.5141 7.86678ZM21.7923 21.5141C21.2534 20.7227 20.7379 19.9375 20.2632 19.0468C19.7884 18.156 19.3624 17.3172 18.9726 16.4363C19.4847 16.5053 19.9746 16.6863 20.4098 16.9672C20.845 17.2482 21.2153 17.6225 21.4959 18.0653C21.7766 18.508 21.9612 19.0089 22.0373 19.5345C22.1134 20.0601 22.0794 20.5983 21.9374 21.113C21.8953 21.2699 21.8396 21.3844 21.7923 21.5141ZM7.0356 26.9811C6.79058 26.5536 6.6321 26.0786 6.5695 25.5839C6.5069 25.0893 6.54147 24.5851 6.67115 24.1011C6.80083 23.6171 7.023 23.1632 7.32453 22.7661C7.62607 22.369 8.00085 22.0369 8.42675 21.7892L12.1592 19.663C11.9752 21.0239 12.2311 22.4019 12.8873 23.5836C13.5436 24.7653 14.5635 25.685 15.7893 26.2003L12.0569 28.3265C11.2019 28.8141 10.2025 28.9463 9.2671 28.6956C8.33168 28.445 7.53233 27.8308 7.0356 26.9811ZM17.7332 27.4507C17.9646 27.8945 18.5198 28.8368 18.6632 29.0896C18.1032 29.4074 18.0343 29.4465 16.914 30.0822C16.429 30.3574 15.8026 30.7129 15.216 31.0458C14.9709 30.6485 14.5744 29.9202 14.3032 29.4719L13.8652 28.7L17.3273 26.7354L17.7332 27.4507ZM19.8676 25.1007C19.3353 24.9503 18.7773 24.9113 18.2265 24.9859C17.6757 25.0605 17.5099 25.1747 17.0266 25.4626L17.2028 25.3626L16.8408 25.2656C15.602 24.9337 14.4847 24.177 13.8514 23.0366C13.2181 21.8961 13.1207 20.4653 13.4639 19.1844C13.4911 19.058 13.5246 18.9331 13.5642 18.8101L13.8527 18.3943C14.1053 17.9786 14.3061 17.8576 14.3061 17.8576C14.6436 17.3995 14.8912 16.879 15.0347 16.3258L16.1573 12.1361C16.3089 12.7849 16.4903 13.4159 16.6794 13.9713C16.9472 14.7936 17.2428 15.5587 17.5598 16.2907C18.0543 17.4483 18.6082 18.5773 19.2193 19.6729C19.8356 20.7827 20.4998 21.8536 21.1952 22.8552C21.6581 23.5099 22.1041 24.1341 22.6987 24.811C23.0668 25.2591 23.5017 25.7379 23.9664 26.1989L19.8676 25.1007Z' fill='%23444444'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_970:16894'%3E%3Crect width='29.0146' height='30' fill='white' transform='translate(8.73096 0.623047) rotate(15)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat 10px center !important;
209 padding-left: 51px !important;
210 color: #444 !important;
211 text-transform: uppercase;
212 font-size: 14px !important;
213 border-bottom: unset !important;
214}
215.custom-left-first-page-carousel .card-body {
216 height: auto !important;
217}
218.custom-left-first-page-carousel .carousel-item{
219 min-height: 317px;
220}
221.custom-left-first-page-carousel .carousel-item img{
222 margin: auto !important;
223}
224.custom-left-first-page-carousel .card-body .carousel-inner {
225 height: auto !important;
226}
227.custom-left-first-page-carousel .carousel-caption {
228 position: relative;
229 padding: 0 !important;
230}
231.custom-left-first-page-carousel .title-underline{
232
233}
234.custom-left-first-page-carousel .title-underline,
235.custom-left-first-page-carousel .title-underline a{
236 border-bottom: unset !important;
237 font-size: 15px !important;
238 line-height: 22px !important;
239 color: #444444 !important;
240 margin-bottom: 0;
241}
242.custom-left-first-page-carousel .carousel-item p {
243
244}
245.custom-left-first-page-carousel .carousel.slide{
246 border: 1px solid #DDDDDD;
247 box-shadow: 1px 1px 4px rgb(0 0 0 / 10%);
248 margin-bottom: 50px;
249}
250.custom-left-first-page-carousel #opp2017carousel:hover a.carousel-control .glyphicon {
251 background-color: #fff !important;
252}
253.custom-left-first-page-carousel #opp2017carousel:hover a.carousel-control .glyphicon {
254 background-color: #fff !important;
255}
256.custom-left-first-page-carousel .glyphicon:before {
257 color: #444444;
258}
259.custom-left-first-page-carousel #opp2017carousel .carousel-control .glyphicon {
260 top: 75px !important;
261}
262@media only screen and (max-width: 767px) {
263 .custom-left-first-page-carousel #opp2017carousel .carousel-item img {
264 max-width: 100% !important;
265 width: 100% !important;
266 max-height: unset !important;
267 }
268 .custom-left-first-page-carousel #opp2017carousel .carousel-control .glyphicon {
269 top: 110px !important;
270 }
271}
272@media only screen and (min-width: 768px) {
273 .custom-left-first-page-carousel{
274 margin-top: 36px;
275 margin-bottom: 2px;
276 }
277 .custom-left-first-page-carousel .carousel-item .carousel-caption{
278 height: 137px;
279 overflow: hidden;
280 }
281}
282.opp2017carousel .title-underline a:focus {
283 box-shadow: none;
284 border: 2px solid #4d94ff !important;
285 }
286
287.carousel-indicators-play li:focus {
288 outline: 1px solid #4D94FF !important;
289 outline-offset: 2px;
290 border:unset !important;
291}
292
293.carousel-indicators li button {
294 background-color: #8890a1;
295 width: 10px;
296 height: 10px;
297 border-radius: 50%;
298 box-sizing: content-box;
299 flex: 0 1 auto;
300 display: block;
301 margin: -18px 0px 0px -1px;
302 position: absolute;
303 padding: unset !important;
304 text-indent: -999px;
305 opacity: .5;
306 transition: opacity .6s ease;
307}
308
309#opp2017carousel .carousel-indicators li {
310 background-color: unset;
311 opacity: unset;
312}
313
314.carousel-indicators li button:focus {
315 outline: 1px solid #4D94FF !important;
316 outline-offset: 2px;
317 opacity:unset !important;
318}
319
320a.left.carousel-control:focus-within {
321 box-shadow: none;
322 border: 2px solid #4d94ff !important;
323 display: inline-block !important;
324}
325
326a.right.carousel-control:focus-within {
327 box-shadow: none;
328 border: 2px solid #4d94ff !important;
329 display: inline-block !important;
330}
331
332.carousel-indicators li {
333 margin-bottom: 10px !important;
334 margin-top: 10px !important;
335 border-top:unset !important;
336 border-bottom:unset !important;
337}
338
339#opp2017carousel .carousel-indicators li.active button {
340 background-color: #697188 !important;
341 opacity: 1;
342}
343</style>
