1<#-- Docs and Tools Template --> 

2    <#assign dlFileEntryService=serviceLocator.findService('com.liferay.document.library.kernel.service.DLFileEntryService') /> <div id="docsTools_${.vars['reserved-article-id'].data}"> <div class="docsToolsFullContainer"> <div class="row d-flex justify-content-center pt-5"> <#if SectionTitle.getData()?has_content> <div class="docsTools-title">${SectionTitle.getData()}</div> </#if> </div> <div class="row d-flex justify-content-center pb-3"> <#if SectionDescription.getData()?has_content> <div class="docsTools-description w-50 pt-5 d-flex justify-content-center flex-column">${SectionDescription.getData()}</div> </#if> </div> <!--<table class="docsToolsDescription-container"> <tr> <td class="docsTools-empty-td"></td> <td class="docsTools-title">&nbsp;</td> <td class="docsTools-empty-td"></td> </tr> <tr> <td class="docsTools-empty-td"></td> <#if SectionTitle.getData()?has_content> <td class="docsTools-title">${SectionTitle.getData()}</td> <#else> <td class="docsTools-title"></td> </#if> <td class="docsTools-empty-td"></td> </tr> <tr> <#if SectionDescription.getData()?has_content> <td class="docsTools-empty-td"></td> <td class="docsTools-description"> <br> ${SectionDescription.getData()} <br> </td> <td class="docsTools-empty-td"></td> </#if> </tr> </table>--> <#if AccordionTitle.getSiblings()?has_content> <div id="accordion_${.vars['reserved-article-id'].data}" class="docsToolsAccordionContainer"> <#assign accordionPosition=0> <#list AccordionTitle.getSiblings() as cur_AccordionTitle> <#assign accordionPosition=accordionPosition+1> <div class="card docsToolsAccordion"> <div class="card-header docsToolsCardHeader clickClass" id="headingOne_${.vars['reserved-article-id'].data}_${accordionPosition}" onClick="changeIcon(this)"> <h2 class="mb-0 docsToolsTitle"> <button class="btn btn-link docsToolsTitleButton collapsed" data-toggle="collapse" data-target="#collapseOne_${.vars['reserved-article-id'].data}_${accordionPosition}" aria-expanded="false" aria-controls="collapseOne_${.vars['reserved-article-id'].data}_${accordionPosition}"> <div class="accordionTitle"> ${cur_AccordionTitle.getData()} </div> <div class="icon-title"> <i class="glyphicon my-glyphicon-plus"></i> </div> </button> </h2> </div> <div id="collapseOne_${.vars['reserved-article-id'].data}_${accordionPosition}" class="collapse myCustomAccordion" aria-labelledby="headingOne_${.vars['reserved-article-id'].data}_${accordionPosition}" data-parent="#accordion_${.vars['reserved-article-id'].data}_${accordionPosition}"> <div class="card-body accordionContent"> <#if cur_AccordionTitle.FileLinkTitle.getSiblings()?has_content> <#assign nFile=0 /> <#list cur_AccordionTitle.FileLinkTitle.getSiblings() as cur_AccordionTitleFileLinkTitle> <#assign fileAttachment=''> <#assign fileUrlInfoToSplit=''> <#assign file=''> <#assign nFile=nFile + 1 /> <#if cur_AccordionTitleFileLinkTitle.FileAttachment.getData()?length gt 0 && cur_AccordionTitleFileLinkTitle.FileAttachment.getData()?has_content> <#assign fileAttachment=cur_AccordionTitleFileLinkTitle.FileAttachment.getData() /> <#assign fileUrlInfoToSplit=fileAttachment?split("/") /> <#assign file=dlFileEntryService.getFileEntryByUuidAndGroupId(fileUrlInfoToSplit[5]?split("?")[0], fileUrlInfoToSplit[2]?number) /> <#assign fileAttachment=cur_AccordionTitleFileLinkTitle.FileAttachment.getData() /> </#if> <div class="row fileRow"> <div class="col-8 pb-2"> <#if cur_AccordionTitleFileLinkTitle.getData()?has_content && cur_AccordionTitleFileLinkTitle.getData()?length gt 0> <h3 class="mb-0 docsToolsFileTitle">${cur_AccordionTitleFileLinkTitle.getData()}</h3> </#if> <#if file?has_content> <#-- <h5 class="mb-0 docsToolsFileInfo"> </h5> --> <#assign currentDate=.now> <#assign numberOfDays=30?long> <#assign timeInMillisecond=(1000 * 60 * 60 * 24 * numberOfDays)> <#if file.getVersion()?string !="1.0"> <#-- if file version is update --> <#if (currentDate?long - file.getModifiedDate()?long) lte timeInMillisecond> <div> <h5 class="mb-0 docsToolsFileInfo"> PUBLISHED ON ${file.getModifiedDate()?string("dd/MM/yyyy")} <span class="badge badge-new-version p-2">New Version</span></h5> </div> <#else> <#-- no label "new version" --> <div class="subtitle pb-3 align-self-center"> <h5 class="mb-0 docsToolsFileInfo"> PUBLISHED ON ${file.getModifiedDate()?string("dd/MM/yyyy")} </h5> </div> </#if> <#else> <#-- if file version isn't update --> <#if (currentDate?long - file.getCreateDate()?long) lte timeInMillisecond> <div> <h5 class="mb-0 docsToolsFileInfo"> PUBLISHED ON ${file.getCreateDate()?string("dd/MM/yyyy")} <span class="badge badge-default-version p-2">New</span></h5> </div> <#else> <#-- no label "new version" --> <div class="subtitle pb-3 align-self-center"> <h5 class="mb-0 docsToolsFileInfo"> PUBLISHED ON ${file.getCreateDate()?string("dd/MM/yyyy")} </h5> </div> </#if> </#if> </#if> </div> <div class="col"> <div class="row"> <div class="col-5 fileExtandDimension"> <#if file?has_content> <h5> ${file.getExtension()?upper_case} (${((file.getSize()/1024)/1024)?string["0.##"]} Mb) </h5> <!-- <#assign fileCreateDate_Date = getterUtil.getString(file.getCreateDate())> <#if validator.isNotNull(fileCreateDate_Date)> <#assign fileCreateDate_DateObj = dateUtil.parseDate("yyyy-MM-dd", fileCreateDate_Date, locale)> ${dateUtil.getDate(fileCreateDate_DateObj, "dd.MM.yyyy", locale)} </#if> <#assign fileLastPublishDate_Date = getterUtil.getString(file.getLastPublishDate())> <#if validator.isNotNull(fileLastPublishDate_Date)> <#assign fileLastPublishDate_DateObj = dateUtil.parseDate("yyyy-MM-dd", fileLastPublishDate_Date, locale)> ${dateUtil.getDate(fileLastPublishDate_DateObj, "dd.MM.yyyy", locale)} </#if> <#assign fileModifiedDate_Date = getterUtil.getString(file.getModifiedDate())> <#if validator.isNotNull(fileModifiedDate_Date)> <#assign fileModifiedDate_DateObj = dateUtil.parseDate("yyyy-MM-dd", fileModifiedDate_Date, locale)> ${dateUtil.getDate(fileModifiedDate_DateObj, "dd.MM.yyyy", locale)} </#if> --> </#if> </div> <#if file?has_content> <div class="col detailViewButton"> <div class="item-col-asset about-button"> <#assign titoloAccordion=cur_AccordionTitleFileLinkTitle.getData()?replace('<[^>]+>','','r') /> <#assign descrFile=cur_AccordionTitleFileLinkTitle.FileDescription.getData()?replace('<[^>]+>','','r') /> <#assign currentUrl=themeDisplay.getURLCurrent() /> <#if currentUrl?contains("/docs-and-tools")> <#assign urlForDetail=currentUrl?substring(0, currentUrl?last_index_of("/docs-and-tools")) /> <#else> <#assign urlForDetail=currentUrl /> </#if> <#if themeDisplay.getSiteGroup().getParentGroupId() !=0> <a href="${currentUrl}/docs-and-tools-details?id=${.vars['reserved-article-id'].data}&nAcc=${accordionPosition}&file=${nFile}"> <button class="btn bottone"> DETAIL </button> </a> <#else> <a href="/docs-and-tools-details?id=${.vars['reserved-article-id'].data}&nAcc=${accordionPosition}&file=${nFile}"> <button class="btn bottone"> DETAIL </button> </a> </#if> <!-- ${urlForDetail} <a href="${urlForDetail}/docs-and-tools-details?id=${.vars['reserved-article-id'].data}&nAcc=${accordionPosition}&file=${nFile}"> DETAIL </a>--> <!--<button type="button" class="btn bottone" data-toggle="modal" data-target="#fileInfoModal" data-filetitle='${titoloAccordion}' <#if cur_AccordionTitleFileLinkTitle.FileImage.getData()?? && cur_AccordionTitleFileLinkTitle.FileImage.getData() != ""> data-fileimageurl='${cur_AccordionTitleFileLinkTitle.FileImage.getData()}' data-fileimagealt='${cur_AccordionTitleFileLinkTitle.FileImage.getAttribute("alt")}' data-fileentryid='${cur_AccordionTitleFileLinkTitle.FileImage.getAttribute("fileEntryId")}' <#else> data-fileimageurl='' data-fileimagealt='no image' data-fileentryid='' </#if> data-filedescription='${descrFile}'> VIEW DETAIL </button>--> </div> </div> </#if> <div class="col detailViewButton"> <div class="item-col-asset about-button"> <#if file?has_content> <a href="${fileAttachment}" target="_blank"> <button class="btn bottone"> VIEW </button> </a> <!--<button class="btn bottone downloadFileButton"> <a class="btn bottone" href="${fileAttachment}" target="_blank"> <i class="glyphicon glyphicon-download-alt"></i> </a> </button>--> <#else> <#if cur_AccordionTitleFileLinkTitle.LinkExternalPage.getData()?has_content> <a href="${cur_AccordionTitleFileLinkTitle.LinkExternalPage.getData()}" target="_blank"> <button class="btn bottone"> VIEW </button> </a> <!--<button class="btn bottone downloadFileButton"> <a href="${cur_AccordionTitleFileLinkTitle.LinkExternalPage.getData()}" target="_blank"> <i class="glyphicon glyphicon-link"></i> </a> </button>--> </#if> </#if> </div> </div> </div> </div> </div> </#list> </#if> </div> <#if cur_AccordionTitle.AllAccordionFileArchive.getData()?has_content> <#assign allFileZipAttachment=cur_AccordionTitle.AllAccordionFileArchive.getData() /> <#assign allfileZipUrlInfoToSplit=allFileZipAttachment?split("/") /> <#assign allfileZip=dlFileEntryService.getFileEntryByUuidAndGroupId(allfileZipUrlInfoToSplit[5]?split("?")[0], allfileZipUrlInfoToSplit[2]?number) /> <div class="col-md-12 downloadAllFiles"> <a class="btn bottone" href="${allFileZipAttachment}"> <button class="btn bottone"> DOWNLOAD ALL FILES (${((allfileZip.getSize()/1024)/1024)?string["0.##"]} Mb)&nbsp;&nbsp;<i class="glyphicon glyphicon-download-alt"></i> </button> </a> </div> </#if> </div> </div> </#list> </div> </#if> </div> <div id="fileInfoModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fileInfoModalLabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog modal-dialog-centered modalInfoFileContainer" style="width:800px; height: 400px; display:flex;"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="fileInfoModalLabel"></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4"> <img id="selected-file-image" alt="" data-fileentryid="" src="" /> </div> <div class="col-md-8"> <h3 id="selected-file-description"></h3> </div> </div> </div> </div> </div> </div> <script> 

3    function changeIcon(who) { 

4        $(who).find('i').toggleClass('my-glyphicon-plus my-glyphicon-minus'); 

5    }; 

6 

7    $('#fileInfoModal').on('show.bs.modal', 

8        function(event) { 

9            var modal = $('#fileInfoModal') 

10            modal.removeClass('hiddenModal'); 

11            modal.addClass('horizontalCenterModal'); 

12            //modal.draggable({ handle: ".modal-content" }); 

13 

14            var button = $(event.relatedTarget) // Button that triggered the modal 

15            //console.log(button); 

16            var title = button.data('filetitle') // Extract info from data-* attributes 

17            //console.log(title); 

18            var imgUrl = button.data('fileimageurl') // Extract info from data-* attributes 

19            console.log(imgUrl); 

20            var imgAlt = button.data('fileimagealt') // Extract info from data-* attributes 

21            console.log(imgAlt); 

22            var fileentryid = button.data('fileentryid') // Extract info from data-* attributes 

23            console.log(fileentryid); 

24            var description = button.data('filedescription') // Extract info from data-* attributes 

25            console.log(description); 

26 

27            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 

28            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 

29 

30            modal.find('.modal-title').text('Detail for file ' + title) 

31            modal.find('#selected-file-image').attr('src', imgUrl) 

32            modal.find('#selected-file-image').attr('alt', imgAlt) 

33            modal.find('#selected-file-image').attr('data-fileentryid', fileentryid) 

34            modal.find('#selected-file-description').text(description) 

35        }) 

36 

37    $('#fileInfoModal').on('hide.bs.modal', 

38        function() { 

39            var modal = $('#fileInfoModal') 

40            modal.addClass('hiddenModal'); 

41        }) 

42    </script>