1<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")>
2<#assign request = themeDisplay.getRequest() />
3<#assign cintilloCerrado = "false" />
4<#list request.getCookies() as cookie>
5 <#if (cookie.getName() == "cintilloCerrado" + .vars["reserved-article-id"].data)>
6 <#assign cintilloCerrado = "true" />
7 </#if>
8</#list>
9
10<#if cintilloCerrado == "false">
11<#if getterUtil.getBoolean(targetBlanc.getData())>
12 <#assign targetType = "_blank" />
13<#else>
14 <#assign targetType = "_self" />
15</#if>
16
17<#assign ariaHiddenIcono = "false" />
18<#if getterUtil.getBoolean(desactivarAltIcono.getData())>
19 <#assign ariaHiddenIcono = "true" />
20</#if>
21
22<div id="cintilloAlternativo${.vars["reserved-article-id"].data}" class="lda-cintillo__alternativo bg-secundario d-flex pt-1 pb-1 pt-lg-4 pb-lg-4 position-relative">
23<div class="container container-p64 d-flex justify-content-between align-items-center gap-3 gap-lg-80">
24 <div class="lda-cintillo__left d-flex gap-3 align-items-center">
25 <#if (icono.getData())?? && icono.getData() != "">
26 <img width="24" height="24" alt="${icono.getAttribute("alt")}" data-fileentryid="${icono.getAttribute("fileEntryId")}" src="${icono.getData()}" aria-hidden="${ariaHiddenIcono}" />
27 </#if>
28 <div class="d-flex flex-column gap-025">
29 <#if (selectEtiquetadoTitulo.getData()?has_content)>
30 <#assign headingTitulo = selectEtiquetadoTitulo.getData()?keep_after("Titulo")/>
31 <${headingTitulo} class="low-3 m-0">${titulo.getData()}</${headingTitulo}>
32 <#else>
33 <div class="low-3 m-0">
34 ${titulo.getData()}
35 </div>
36 </#if>
37 <#if (descripcion.getData()?has_content)>
38 <div class="low-2 color-content-mid line-clamp-3">
39 ${descripcion.getData()}
40 </div>
41 </#if>
42 </div> <!-- title-descripcion -->
43 </div> <!-- left -->
44
45 <#if !getterUtil.getBoolean(checkCerrar.getData()) && (!enlace.getData()?has_content && !jsonFactoryUtil.createJSONObject(drawer.getData()).title?has_content)>
46 <div class="d-flex flex-column">
47 <button class="lda-close bg-transparent border-0 p-0 m-0 position-absolute" onclick="cerrarCintillo()">
48 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
49<path fill-rule="evenodd" clip-rule="evenodd" d="M5.64645 5.64645C5.84171 5.45118 6.15829 5.45118 6.35355 5.64645L12 11.2929L17.6464 5.64645C17.8417 5.45118 18.1583 5.45118 18.3536 5.64645C18.5488 5.84171 18.5488 6.15829 18.3536 6.35355L12.7071 12L18.3536 17.6464C18.5488 17.8417 18.5488 18.1583 18.3536 18.3536C18.1583 18.5488 17.8417 18.5488 17.6464 18.3536L12 12.7071L6.35355 18.3536C6.15829 18.5488 5.84171 18.5488 5.64645 18.3536C5.45118 18.1583 5.45118 17.8417 5.64645 17.6464L11.2929 12L5.64645 6.35355C5.45118 6.15829 5.45118 5.84171 5.64645 5.64645Z" fill="#1A1A1A"/>
50</svg>
51 </button>
52 <div>
53 </#if>
54
55 <#if (enlace.getData()?has_content)>
56 <div class="d-flex flex-column">
57 <a class="lda-link lda-btn p-0 align-items-center d-flex" href="${enlace.getData()}" target="${targetType}" onclick="sendEventDesdeFragmento('${campoInfoAnalitica.getData()}','${campoLabelAnalitica.getData()}','${campoActionAnalitica.getData()}');">
58 <span class="low-3 color-primary-red d-none d-lg-block">${labelEnlace.getData()}</span>
59 <span class="d-block d-lg-none">
60 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
61<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8607 11.6537C19.0464 11.8472 19.0464 12.1528 18.8607 12.3463L13.1007 18.3463C12.9095 18.5455 12.5929 18.5519 12.3937 18.3607C12.1945 18.1695 12.1881 17.8529 12.3793 17.6537L17.3269 12.5L6.5 12.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5L17.3269 11.5L12.3793 6.34627C12.1881 6.14706 12.1945 5.83054 12.3937 5.63931C12.5929 5.44807 12.9095 5.45453 13.1007 5.65373L18.8607 11.6537Z" fill="#1A1A1A"/>
62</svg>
63 </span>
64 </a>
65 <div>
66 <#else>
67 <#assign webContentData = jsonFactoryUtil.createJSONObject(drawer.getData()) />
68 <#if webContentData?? && webContentData.title??>
69 <#assign classPK = webContentData.classPK?number />
70 <#assign relatedJournalArticle = journalArticleLocalService.getLatestArticle(classPK) />
71 <div id="hiddenPortletContainer" style="display: none;">
72 <#assign instanceId = "ldaDrawer" + relatedJournalArticle.articleId>
73 <#assign preferences = {
74 "articleId": relatedJournalArticle.articleId,
75 "groupId": themeDisplay.getScopeGroupId(),
76 "portletSetupPortletDecoratorId": "barebone"
77 } />
78
79 <@liferay_portlet["runtime"]
80 defaultPreferences="${freeMarkerPortletPreferences.getPreferences(preferences)}"
81 instanceId="${instanceId}"
82 portletProviderAction=portletProviderAction.VIEW
83 portletName="com_liferay_journal_content_web_portlet_JournalContentPortlet" />
84
85 <#assign preferences = {} />
86 </div>
87
88 <a class="lda-link lda-btn p-0 align-items-center d-flex" data-toggle="modal" data-target="#ldaModalDrawer" role="link" tabindex="0" href="javascript:void(0);" onclick="openModalDrawer(); sendEventDesdeFragmento('${campoInfoAnalitica.getData()}','${campoLabelAnalitica.getData()}','${campoActionAnalitica.getData()}');">
89 <span class="low-3 color-primary-red d-none d-lg-block">${labelEnlace.getData()}</span>
90 <span class="d-block d-lg-none">
91 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
92<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8607 11.6537C19.0464 11.8472 19.0464 12.1528 18.8607 12.3463L13.1007 18.3463C12.9095 18.5455 12.5929 18.5519 12.3937 18.3607C12.1945 18.1695 12.1881 17.8529 12.3793 17.6537L17.3269 12.5L6.5 12.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5L17.3269 11.5L12.3793 6.34627C12.1881 6.14706 12.1945 5.83054 12.3937 5.63931C12.5929 5.44807 12.9095 5.45453 13.1007 5.65373L18.8607 11.6537Z" fill="#1A1A1A"/>
93</svg>
94 </span>
95 </a>
96 </#if>
97 </#if>
98 </div> <!-- container -->
99 </div>
100</#if>
101<script>
102 function cerrarCintillo() {
103 let cintillo = document.getElementById("cintilloAlternativo${.vars["reserved-article-id"].data}");
104 cintillo.style = "display: none!important;";
105 var cintilloCerrado = "true";
106 document.cookie = "cintilloCerrado${.vars["reserved-article-id"].data}=true; expires=0; path=/";
107 }
108
109 function openModalDrawer() {
110 createModalDrawer();
111 }
112
113 function createModalDrawer() {
114 // Create the modal elements
115 var modal = document.createElement('div');
116 modal.classList.add('lda-modal', 'modal', 'fade');
117 modal.id = 'ldaModalDrawer';
118 modal.tabIndex = '-1';
119 modal.setAttribute('role', 'dialog');
120 modal.setAttribute('aria-hidden', 'true');
121
122 var modalDialog = document.createElement('div');
123 modalDialog.classList.add('modal-dialog', 'modal-dialog-centered');
124 modalDialog.style = 'max-width: 100%; align-items: flex-start;'
125 modalDialog.role = 'document';
126
127 var modalContent = document.createElement('div');
128 modalContent.classList.add('modal-content', 'position-relative');
129 modalContent.id = 'ldaModalDrawerContent';
130
131 var closeLabel = Liferay.Language.get('lda.portal.modal.close');
132 if (window.location.pathname.startsWith(window.urlEnglish)){
133 closeLabel = Liferay.Language.get('lda.portal.modal.close.english');
134 } else if (window.location.pathname.startsWith(window.urlGerman)) {
135 closeLabel = Liferay.Language.get('lda.portal.modal.close.german');
136 } else if (window.location.pathname.startsWith(window.urlCatalan)){
137 closeLabel = Liferay.Language.get('lda.portal.modal.close.catalan');
138 }
139 var images_folder = Liferay.ThemeDisplay.getPathThemeImages();
140
141 // Set the modal HTML content
142 var modalHTML = `
143 <div class="lda-modal-header d-flex justify-content-end">
144 <button type="button" class="close m-0" data-dismiss="modal" aria-label="` + closeLabel + `">
145 <span aria-hidden="true">
146 <img src="` + images_folder + `/close.svg" alt="` + closeLabel + `"/>
147 </span>
148 </button>
149 </div>
150 <div class="lda-modal-body" id="ldaModalDrawerBody">
151
152
153 </div>
154 `;
155
156 modalContent.innerHTML = modalHTML;
157 modalDialog.appendChild(modalContent);
158 modal.appendChild(modalDialog);
159
160 var hiddenPortlet = document.getElementById('hiddenPortletContainer');
161 if (hiddenPortlet) {
162 var modalBody = modal.querySelector('#ldaModalDrawerBody');
163 modalBody.innerHTML = hiddenPortlet.innerHTML;
164 }
165
166 if (!getElementByIdIfExists("ldaModalDrawer")) {
167 // Append the modal to the document body
168 document.body.appendChild(modal);
169
170 // Add an event listener to remove the modal when it is closed
171 $(modal).on('hidden.bs.modal', function () {
172 // Remove the modal from the DOM
173 $(modal).remove();
174 });
175
176 $(modal).modal('show');
177 }
178 }
179</script>
