1<!-- VARIABLES -->
2
3
4<!-- SERVICES -->
5<#assign dlAppServiceUtil = serviceLocator.findService("com.liferay.document.library.kernel.service.DLAppLocalService") />
6<#assign rawMetadataProcessorUtil = staticUtil["com.liferay.portal.kernel.metadata.RawMetadataProcessorUtil"] />
7
8<#if entries?has_content>
9 <#assign entries3 = [] />
10 <#assign entriesAll = [] />
11 <#list entries as entry>
12 <#assign entries3 = entries3 + [ entry ] />
13 <#if (entry?index+1)%3 == 0 || !entries[entry?index+1]?has_content >
14 <#assign entriesAll = entriesAll + [ entries3 ] />
15 <#assign entries3 = [] />
16 </#if>
17 </#list>
18</#if>
19<div class="container">
20 <div class="clients-main">
21 <#if entriesAll?has_content>
22 <#list entriesAll as entries3>
23 <#if (entries3?index+1)%2 == 0 >
24 <@par entries=entries3 />
25 <#else>
26 <@impar entries=entries3 />
27 </#if>
28 </#list>
29 </#if>
30 </div>
31</div>
32
33<#macro impar entries>
34 <div class="row">
35 <div class="col-md-6">
36 <#if entries[0]?has_content>
37 <@showEntry entry=entries[0] blockSize="large" />
38 </#if>
39 </div>
40 <div class="col-md-6">
41 <div class="row">
42 <div class="col-md-12">
43 <#if entries[1]?has_content>
44 <@showEntry entry=entries[1] blockSize="small" />
45 </#if>
46 </div>
47 <div class="col-md-12">
48 <#if entries[2]?has_content>
49 <@showEntry entry=entries[2] blockSize="small" />
50 </#if>
51 </div>
52 </div>
53 </div>
54 </div>
55</#macro>
56
57<#macro par entries>
58 <div class="row">
59 <div class="col-md-6">
60 <div class="row">
61 <div class="col-md-12">
62 <#if entries[0]?has_content>
63 <@showEntry entry=entries[0] blockSize="small" />
64 </#if>
65 </div>
66 <div class="col-md-12">
67 <#if entries[1]?has_content>
68 <@showEntry entry=entries[1] blockSize="small" />
69 </#if>
70 </div>
71 </div>
72 </div>
73 <div class="col-md-6">
74 <#if entries[2]?has_content>
75 <@showEntry entry=entries[2] blockSize="large" />
76 </#if>
77 </div>
78 </div>
79</#macro>
80
81<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
82 <div class="pswp__bg"></div>
83 <div class="pswp__scroll-wrap">
84 <div class="pswp__container">
85 <div class="pswp__item"></div>
86 <div class="pswp__item"></div>
87 <div class="pswp__item"></div>
88 </div>
89 <div class="pswp__ui pswp__ui--hidden">
90 <div class="pswp__top-bar">
91 <div class="pswp__counter"></div>
92 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
93 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
94 <div class="pswp__preloader">
95 <div class="pswp__preloader__icn">
96 <div class="pswp__preloader__cut">
97 <div class="pswp__preloader__donut"></div>
98 </div>
99 </div>
100 </div>
101 </div>
102 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
103 <div class="pswp__share-tooltip"></div>
104 </div>
105 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
106 </button>
107 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
108 </button>
109 <div class="pswp__caption">
110 <div class="pswp__caption__center"></div>
111 </div>
112 </div>
113 </div>
114</div>
115
116
117<#macro showEntry entry blockSize>
118
119 <#if entry?has_content>
120
121 <#assign renderer = entry.getAssetRenderer() />
122 <#assign journalArticle = renderer.getArticle() />
123 <#assign articleId = journalArticle.getArticleId() />
124 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale)) />
125 <#assign rootElement = document.getRootElement() />
126 <#assign nombre = saxReaderUtil.createXPath("dynamic-element[@name='nombre']").selectSingleNode(rootElement).getStringValue() />
127 <#assign imgData = saxReaderUtil.createXPath("dynamic-element[@name='imageMainFieldSet']/dynamic-element[@name='imageMain']").selectSingleNode(rootElement).getStringValue() />
128 <#assign videoData = saxReaderUtil.createXPath("dynamic-element[@name='video']").selectSingleNode(rootElement).getStringValue() />
129 <#assign imgGalleryNodes = saxReaderUtil.createXPath("dynamic-element[@name='imageFieldSet']/dynamic-element[@name='image']").selectNodes(rootElement) />
130
131 <#if imgData?trim != "" >
132
133 <#assign imgDataJson = jsonFactoryUtil.createJSONObject(imgData) />
134 <#assign imgFileEntry = dlAppServiceUtil.getFileEntry(getterUtil.getLong(imgDataJson.getString("fileEntryId"))) />
135
136 <#assign galleryFileEntries = [] />
137 <#if imgGalleryNodes?has_content>
138 <#list imgGalleryNodes as imgGalleryNode>
139 <#if imgGalleryNode.getStringValue()?trim != "" >
140 <#assign galleryImgData = imgGalleryNode.getStringValue() />
141 <#assign galleryImgDataJson = jsonFactoryUtil.createJSONObject(galleryImgData) />
142 <#assign galleryFileEntry = dlAppServiceUtil.getFileEntry(getterUtil.getLong(galleryImgDataJson.getString("fileEntryId"))) />
143 <#assign galleryFileEntries = galleryFileEntries + [ galleryFileEntry ] />
144 </#if>
145 </#list>
146 </#if>
147
148 <#if galleryFileEntries?has_content>
149
150 <article class="client-article">
151 <a href="#" id="gallery${articleId}">
152 <div class="img-overlay">
153 <div class="background"></div>
154 <div class="text">
155 <p>${nombre}</p>
156 </div>
157 <div class="fas fa-arrow-right icon"></div>
158 </div>
159 <#assign imgClass = "img-fluid img-short" />
160 <#if blockSize == "large" >
161 <#assign imgClass = "img-fluid img-large" />
162 </#if>
163 <@adaptive_media_image["img"] class=imgClass fileVersion=imgFileEntry.getFileVersion() />
164 </a>
165 </article>
166
167 <script type="text/javascript">
168
169 $("#gallery${articleId}").click(function(event) {
170 var pswpElement = document.querySelectorAll('.pswp')[0];
171
172 //build items array
173 var items = [
174 <#list galleryFileEntries as fileEntry>
175
176 <#assign imageWidth = "800" />
177 <#assign imageHeight = "500" />
178
179 <#assign ddmFormFieldValues = rawMetadataProcessorUtil.getRawMetadataMap(fileEntry.getMimeType(), fileEntry.getContentStream())["TIKARAWMETADATA"].getDDMFormFieldValues() />
180 <#list ddmFormFieldValues as ddmFormFieldValue>
181 <#if ddmFormFieldValue.getName() == "TIFF_IMAGE_WIDTH">
182 <#assign imageWidth = ddmFormFieldValue.getValue().getString(locale) />
183 <#elseif ddmFormFieldValue.getName() == "TIFF_IMAGE_LENGTH">
184 <#assign imageHeight = ddmFormFieldValue.getValue().getString(locale) />
185 </#if>
186 </#list>
187 <#assign imageHeight = imageHeight?number * 1000 / imageWidth?number />
188
189 <#assign imageWidth = "1000"/>
190
191 <#if imageHeight?number gt 1000 >
192
193 <#assign imageHeight = imageHeight?number * 700 / imageWidth?number />
194 <#assign imageWidth = "700"/>
195
196 </#if>
197
198
199 <#assign galleryImgUrl = "/documents/"+20127+"/"+fileEntry.getFolderId()+"/"+fileEntry.getTitle()+"/"+fileEntry.getUuid()>
200 {
201 src: "${galleryImgUrl}",
202 w: ${imageWidth},
203 h: ${imageHeight}
204
205 },
206 </#list>
207 ];
208 //define options (if needed)
209 var options = {
210 // optionName: 'option value'
211 // for example:
212 index: 0 // start at first slide
213 };
214 //Initializes and opens PhotoSwipe
215 var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
216 gallery.init();
217
218 event.preventDefault();
219 });
220 </script>
221
222 <#elseif videoData?trim != "" >
223
224 <#assign videoDataJson = jsonFactoryUtil.createJSONObject(videoData) />
225 <#assign videoFileEntry = dlAppServiceUtil.getFileEntryByUuidAndGroupId(videoDataJson.getString("uuid"), getterUtil.getLong(videoDataJson.getString("groupId"))) />
226 <#assign videoUrl = "/documents/"+20127+"/"+videoFileEntry.getFolderId()+"/"+videoFileEntry.getTitle()+"/"+videoFileEntry.getUuid()>
227
228 <#assign poster = "" />
229 <#assign imageUrl = "/documents/"+20127+"/"+imgFileEntry.getFolderId()+"/"+imgFileEntry.getTitle()+"/"+imgFileEntry.getUuid() />
230 <#assign poster = 'poster="' + imageUrl + '"' />
231
232 <article class="client-article">
233 <a data-toggle="modal" href="#modal${articleId}">
234 <#assign imgClass = "img-fluid img-short" />
235 <#if blockSize == "large" >
236 <#assign imgClass = "img-fluid img-large" />
237 </#if>
238 <@adaptive_media_image["img"] class=imgClass fileVersion=imgFileEntry.getFileVersion() />
239 <div class="icon-right">
240 <img class="img-fluid" src="/o/fagor-industrial-portal-theme/images/video-icon.png">
241 </div>
242 </a>
243 <div class="text-left"><p>${nombre}</p></div>
244
245 <div id="modal${articleId}" class="modal fade clients-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
246 <div class="fagor-modal-dialog modal-dialog modal-dialog-centered modal-lg" role="document">
247 <div class="modal-content">
248 <div class="modal-body">
249 <video id="video${articleId}" controls ${poster}>
250 <source src="${videoUrl}" type="video/mp4">
251 Your browser does not support the video tag.
252 </video>
253 </div>
254 </div>
255 </div>
256 </div>
257 </article>
258 <script type="text/javascript">
259 $("#modal${articleId}").on("hidden.bs.modal", function () {
260 var vid = document.getElementById("video${articleId}");
261 vid.pause();
262 });
263 </script>
264
265 <#else>
266
267 <article class="client-article">
268 <#assign imgClass = "img-fluid img-short" />
269 <#if blockSize == "large" >
270 <#assign imgClass = "img-fluid img-large" />
271 </#if>
272 <@adaptive_media_image["img"] class=imgClass fileVersion=imgFileEntry.getFileVersion() />
273 <div class="text-left"><p>${nombre}</p></div>
274 </article>
275
276 </#if>
277
278 </#if>
279 </#if>
280</#macro>
