1<style>
2.breadcrumbsComponent.breadcrumbsComponent-desktop{
3 height: auto;
4}
5.breadcrumbsComponent.breadcrumbsComponent-desktop .breadcrumb-item + .breadcrumb-item::before{
6 display: none !important;
7}
8.breadcrumbsComponent.breadcrumbsComponent-desktop li{
9 padding: 0 !important;
10}
11
12.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item,
13.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item a{
14 height: var(--gs-base-line-height-xs) !important;
15 line-height: var(--gs-base-line-height-xs) !important;
16 display: flex;
17}
18.breadcrumbsComponent.breadcrumbsComponent-desktop i.gs-icon-chevron-right {
19 align-items: center;
20 display: inline-flex;
21 font-size: 8px;
22 padding: 0 6px;
23}
24.portlet-boundary_com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet_{
25 display: flex;
26}
27#breadcrumbs .portlet-breadcrumb > section.portlet {
28 float: unset;
29 width: 100%;
30}
31
32.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item > span{
33 line-height: normal !important;
34 height: var(--gs-base-line-height-xs) !important;
35 color: var(--gs-base-color-eu-gray-80);
36 margin-bottom: unset !important;
37 min-height: 18px;
38}
39button {
40 padding: 1px 3px;
41 border: 1px solid rgb(175, 175, 175);
42 border-radius: 3px;
43}
44section#portlet_com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet_INSTANCE_breadcrumbISG {
45 float: left;
46 width: 100%;
47 padding-left: 24px;
48}
49.breadcrumbsComponent .icon-home-grey {
50 height: 15px !important;
51 overflow: hidden;
52}
53.breadcrumbsComponent .icon-home-grey::before {
54 height: 15px !important;
55 margin-top: 0;
56 margin-right: 0;
57}
58.breadcrumbsComponent.breadcrumbsComponent-desktop {
59 padding: 7px 16px 7px 0;
60}
61.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item,
62.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item i{
63 margin: 5px 0;
64}
65
66.breadcrumbsComponent.breadcrumbsComponent-desktop #breadcrumbs-button a:focus-visible {
67 outline: 2px solid var(--gs-base-color-link-100) !important;
68 outline-offset: 2px !important;
69}
70.breadcrumbsComponent.breadcrumbsComponent-desktop #breadcrumbs-button a svg{
71 margin: auto;
72}
73
74.breadcrumbsComponent.breadcrumbsComponent-desktop #breadcrumbs-button.no-arrow i{
75 display: none !important;
76}
77
78@media (max-width:991.5px){
79
80 .site-class-8541614.page-class-bibliographic-details #globalnav .global-nav-middle,
81 .site-class-10184.page-class-publication-detail #globalnav .global-nav-middle {
82 display: block !important;
83 }
84 .site-class-8541614.page-class-bibliographic-details .maincontentarea,
85 .site-class-10184.page-class-publication-detail .maincontentarea{
86 padding-top: 0 !important;
87 }
88 .site-class-10184.page-class-publication-detail .maincontentarea .page-title-publication-detail h2 + a{
89 display: none !important;
90 }
91 .site-class-8541614.page-class-bibliographic-details .portlet-breadcrumb,
92 .site-class-11197864 .portlet-breadcrumb,
93 .site-class-11197864 .portlet-breadcrumb,
94 .layout-class-portal2012-layout-isg .portlet-breadcrumb {
95 height: auto;
96 }
97 .site-class-10184.page-class-publication-detail .global-nav-middle div#tabnav,
98 .site-class-8541614.page-class-bibliographic-details .global-nav-middle div#tabnav,
99 .site-class-13664221.page-class-procurement-details .global-nav-middle div#tabnav {
100 min-width: 100%;
101 max-width: 100%;
102 }
103}
104@media (max-width:767.5px){
105 section#portlet_com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet_INSTANCE_breadcrumbISG {
106 padding-left: 0;
107 }
108}
109</style>
110<#if entries?has_content>
111 <#assign count = 0>
112 <#assign last_url = "">
113 <#assign previous_url = "">
114 <#assign previous_name = "">
115
116 <#assign item1 = "">
117 <#assign item2 = "">
118 <#assign item3 = "">
119 <#assign hasIdenticalURL = false>
120
121
122 <#assign languageId = localeUtil.toLanguageId(locale) />
123 <#assign languageIdBrowse = localeUtil.fromLanguageId(languageId).getLanguage() />
124 <#assign slash = "/" />
125 <#assign siteRoot = "/content/" />
126 <#assign siteRootWithLang = "/" + languageIdBrowse + "/content/" />
127
128 <#list entries as entry>
129
130 <#assign count = count+1>
131
132 <#if entry?has_next>
133 <#assign previous_url = entry.getURL()!"">
134 </#if>
135
136 <#if count == 1>
137 <#assign item1 = entry.getURL()!"">
138 <#elseif count == 2>
139 <#assign item2 = entry.getURL()!"">
140 <#elseif count == 3>
141 <#assign item3 = entry.getURL()!"">
142 </#if>
143
144 <#if entry.getURL()?? && entry.getURL() != "" >
145 <#assign last_url = entry.getURL()?replace(siteRoot, siteRootWithLang)>
146 </#if>
147 </#list>
148
149 <#assign isFirst = true>
150 <#if (count == 2 && item2?contains(item1) && item2?contains("/home")) || (count == 3 && item3?contains(item2) && item3?contains("/home"))>
151 <#assign hasIdenticalURL = true>
152
153 </#if>
154
155 <ol class="breadcrumb breadcrumbsComponent breadcrumbsComponent-desktop" style="display: flex !important;">
156 <#assign countd = 0>
157 <#list entries as entry>
158
159 <#assign labelCodePart = "">
160 <#list entry.getURL()?split("/web/") as x>
161 <#if !x?contains("/")>
162 <#assign labelCodePart = x>
163 </#if>
164 </#list>
165
166 <#assign countd = countd+1>
167 <li class="breadcrumb-item">
168 <#if entry?has_next>
169 <#if isFirst>
170 <#if ((entry.getURL()!"")?contains("/web/eu-law-and-publications") && !(entry.getURL()!"")?replace("/web/eu-law-and-publications", "/home")?contains("/web"))
171 || (entry.getURL()!"") == ("https://beta.op.europa.eu/" + languageIdBrowse + "/")
172 || (entry.getURL()!"") == ("https://op.europa.eu/" + languageIdBrowse + "/") >
173 <a class="breadcrumb-link" href="${(entry.getURL()!"")?replace("/web/eu-law-and-publications", "/home")}" title="${entry.getTitle()?replace('<([^>]+)>', '', 'r')}">
174 <span class="breadcrumb-text-truncate"><@liferay_ui["message"] key="eu.europa.publications.Common.guestSiteShort" /></span>
175 </a>
176 <#elseif (entry.getURL()!"")?contains("dorie.ec.europa.eu") || (entry.getURL()!"")?contains("style-guide.europa.eu") || (entry.getURL()!"")?contains("style-guide.beta.op.europa.eu")>
177 <a class="breadcrumb-link" href="${(entry.getURL()!"")}" title='<@liferay_ui["message"] key="eu.europa.publications.MyPortal.Home" />'>
178 <span class="breadcrumb-text-truncate"><@liferay_ui["message"] key="eu.europa.publications.MyPortal.Home" /></span>
179 </a>
180 <#else>
181 <a class="breadcrumb-link" href="${(entry.getURL()!"")?replace("/web/eu-law-and-publications", "/home")}" title="${entry.getTitle()?replace('<([^>]+)>', '', 'r')}">
182 <span
183 class="breadcrumb-text-truncate"
184 withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />'
185 >${entry.getTitle()?replace('<([^>]+)>', '', 'r')}</span>
186 </a>
187 </#if>
188 <i class="gs-icon-chevron-right" aria-hidden="true"></i>
189 <#elseif countd == 2 && hasIdenticalURL>
190 <span class="active breadcrumb-text-truncate"
191 withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />'
192 ><#if entry.getTitle()?has_content>${entry.getTitle()?replace('<([^>]+)>', '', 'r')}</#if></span>
193 <#else>
194 <a class="breadcrumb-link" href="${entry.getURL()!""}" title="${entry.getTitle()?replace('<([^>]+)>', '', 'r')}">
195 <span class="breadcrumb-text-truncate"
196 withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />'
197 >${entry.getTitle()?replace('<([^>]+)>', '', 'r')}</span>
198 </a>
199 <i class="gs-icon-chevron-right" aria-hidden="true"></i>
200 </#if>
201
202 <#elseif !hasIdenticalURL>
203 <#if isFirst>
204 <span class="active breadcrumb-text-truncate"
205 withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />'
206 ><@liferay_ui["message"] key="eu.europa.publications.MyPortal.Home" /></span>
207 <#else>
208 <span class="active breadcrumb-text-truncate"
209 withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />'
210 ><#if entry.getTitle()?has_content>${entry.getTitle()?replace('<([^>]+)>', '', 'r')}</#if></span>
211 </#if>
212 </#if>
213 </li>
214 <#if (isFirst && (count > 1))>
215 <li class="breadcrumb-item d-none" id="breadcrumbs-button" client-width="50">
216 <a href="#" id="show-breadcrumbs" title="Show more breadcrumbs"><svg width="23" height="14" viewBox="0 0 23 14" fill="none" xmlns="http://www.w3.org/2000/svg">
217 <rect x="0.5" width="22" height="14" rx="2" fill="#E7EDFA"/>
218 <path d="M5.64844 8V5.80469H7.84375V8H5.64844ZM10.1016 8V5.80469H12.2969V8H10.1016ZM14.5547 8V5.80469H16.75V8H14.5547Z" fill="#0E47CB"/>
219 </svg></a><i class="gs-icon-chevron-right" aria-hidden="true"></i>
220 </li>
221 </#if>
222 <#assign isFirst = false>
223 </#list>
224 </ol>
225 <script>
226 $(".breadcrumbsComponent-desktop li span").each(function( index ) {
227 var attrVal = $( this )[0].getAttribute("withliferaylabel");
228 if(attrVal != null && attrVal != "" && !attrVal.includes("eu.europa.publications.breadcrumbs.site.name.")){
229 $( this )[0].textContent = attrVal;
230 }
231 });
232 </script>
233</#if>
234
235<script>
236var prevLast = $(".breadcrumbsComponent-desktop li:last").prev("li");
237var listSize = $(".breadcrumbsComponent-desktop li").length;
238var listHeight = $("ol.breadcrumbsComponent-desktop").height();
239var breadcrumbDesktopOL = document.querySelector('ol.breadcrumbsComponent-desktop');
240var breadcrumbDesktopOLWidth = breadcrumbDesktopOL.clientWidth;
241
242$(".breadcrumbsComponent-desktop li:not(#breadcrumbs-button.breadcrumb-item)").each(function( index ) {
243 $( this )[0].setAttribute("client-width", ($( this )[0].clientWidth + 6));
244});
245
246//function to adapt the breadcrumb size
247function adaptBreadcrumbDesktopOL() {
248 var breadcrumbDesktopOL = document.querySelector('ol.breadcrumbsComponent-desktop');
249 var bcElemWidth = breadcrumbDesktopOL.clientWidth;
250 //debugger;
251 var listSize = $(".breadcrumbsComponent-desktop li").length;
252
253 //only for tablet or bigger and when there are more items in breadcrubs
254 if(listSize > 2){
255 var bcItems = $(".breadcrumbsComponent-desktop li:not(#breadcrumbs-button.breadcrumb-item)");
256 var lengthThatFits = parseInt(bcItems[0].getAttribute("client-width")) + ($('#breadcrumbs-button') && $('#breadcrumbs-button').hasClass("d-none") ? 0 : 50);
257 //console.log("lengthThatFits: ", lengthThatFits);
258 var maxWidthLastItem = bcItems[bcItems.length - 1].querySelector('span').textContent.length * 7; //6.75
259
260 //console.log("maxWidthLastItem + lengthThatFits: ", (maxWidthLastItem + lengthThatFits));
261 //console.log("bcElemWidth: ", bcElemWidth);
262 var maxWidthLastItemSpan = maxWidthLastItem;
263 if((maxWidthLastItem + lengthThatFits) > bcElemWidth){
264 maxWidthLastItem = bcElemWidth - lengthThatFits - 17;
265 maxWidthLastItemSpan = maxWidthLastItem;
266 }
267 if(maxWidthLastItem <= 70){
268 maxWidthLastItem = 70;
269 maxWidthLastItemSpan = 63;
270 }
271 bcItems[bcItems.length - 1].setAttribute("client-width", maxWidthLastItem);
272 bcItems[bcItems.length - 1].querySelector('span').style.maxWidth = maxWidthLastItemSpan + 'px';
273
274 //if there is enough space, add it to the last item
275 if(bcElemWidth - (maxWidthLastItem + lengthThatFits) > 70){
276 bcItems[bcItems.length - 1].setAttribute("client-width", (maxWidthLastItem + 70));
277 bcItems[bcItems.length - 1].querySelector('span').style.maxWidth = (maxWidthLastItemSpan + 70) + 'px';
278 }
279
280 for( var i = (bcItems.length - 1) ; i > 0 ; i--){
281 lengthThatFits += (bcItems[i].getAttribute("client-width") != null ? parseInt(bcItems[i].getAttribute("client-width")) : 288);
282
283 if(lengthThatFits < bcElemWidth){
284 bcItems[i].classList.remove("d-none");
285 $('#breadcrumbs-button').addClass("d-none");
286 }else{
287 bcItems[i].classList.add("d-none");
288 $('#breadcrumbs-button').removeClass("d-none");
289 }
290 }
291
292 if($(".breadcrumbsComponent-desktop li").last().hasClass("d-none") && !($('#breadcrumbs-button').hasClass("d-none"))){
293 $('#breadcrumbs-button').addClass("no-arrow");
294 }else{
295 $('#breadcrumbs-button').removeClass("no-arrow");
296 }
297 }
298}
299
300//call the adapt function after the breadcrumbs are generated.
301adaptBreadcrumbDesktopOL();
302
303//create a resize observer for the breadcrumbs
304var resizeObserverBCD = new ResizeObserver(adaptBreadcrumbDesktopOL);
305if (!resizeObserverBCD){
306 resizeObserverBCD = new WebKitResizeObserver(adaptBreadcrumbDesktopOL);
307}
308
309resizeObserverBCD.observe(breadcrumbDesktopOL);
310
311//show all the breadcrumbs when the button is clicked
312$("#show-breadcrumbs").click(function() {
313 $(".breadcrumbsComponent-desktop li")
314 .not("#breadcrumbs-button")
315 .removeClass("d-none");
316
317 //keep the button hidden now
318 $('#breadcrumbs-button').addClass("d-none");
319
320 //disconect the resize observer
321 resizeObserverBCD.disconnect();
322
323 //reset max-width of last element
324 $(".breadcrumbsComponent-desktop li").last()[0].querySelector('span').style.maxWidth = "";
325
326 //then, focus te first breadcrumb element
327 $(".breadcrumbsComponent-desktop li:first a").focus();
328});
329
330</script>
