1<#--
2@author: Musta
3@description: Widget for Net Service Tabs
4@lib: slick.js
5-->
6
7<#if !entries?has_content>
8 <#if !themeDisplay.isSignedIn()>
9 ${renderRequest.setAttribute("PORTLET_CONFIGURATOR_VISIBILITY", true)}
10 </#if>
11
12 <div class="alert alert-info">
13 <@liferay_ui["message"] key="there-are-no-results" />
14 </div>
15</#if>
16<#assign javascript_folder = themeDisplay.getPathThemeJavaScript() />
17<#if entries?has_content>
18 <#assign DLFileEntryService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLFileEntryService") />
19 <#assign
20 portletDisplay = themeDisplay.getPortletDisplay()
21 portletId = portletDisplay.getId()
22 />
23
24 <div id="slider-tabs">
25 <!-- slide indications -->
26 <div id="card-info" class="d-block d-md-none card-info">
27 <div class="card-info__arrow d-flex align-items-center justify-content-center py-4">
28 <span class="card-info__arrow-left pr-4">
29 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.01 34.75">
30 <polygon class="cls-1" style="fill: #358c7c;" points="37.63 0 34.1 3.54 45.41 14.85 0 14.85 0 19.84 45.47 19.84 34.1 31.22 37.63 34.75 55.01 17.38 37.63 0"></polygon>
31 </svg>
32 </span>
33 <#if themeDisplay.getLanguageId() == "it_IT">
34 <span>Scorri orizzontalmente</span>
35 <#else>
36 <span>Scroll left or right</span>
37 </#if>
38 <span class="card-info__arrow-right pl-4">
39 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.01 34.75">
40 <polygon class="cls-1" style="fill: #358c7c;" points="37.63 0 34.1 3.54 45.41 14.85 0 14.85 0 19.84 45.47 19.84 34.1 31.22 37.63 34.75 55.01 17.38 37.63 0"></polygon>
41 </svg>
42 </span>
43 </div>
44 </div>
45
46 <!-- nav -->
47 <div class="slider-nav" id="slider-nav-${portletId}">
48 <#list entries as curEntry>
49 <#assign
50 entry = curEntry
51 assetRenderer = entry.getAssetRenderer()
52 entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale))
53 className = assetRenderer.getClassName()
54 viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, assetRenderer, entry, !stringUtil.equals(assetLinkBehavior, "showFullContent"))
55 activeClass = ""
56 journalArticle = assetRenderer.getArticle()
57 document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) rootElement = document.getRootElement()
58 />
59 <#if curEntry_index == 0>
60 <#assign activeClass = "active"/>
61 </#if>
62
63 <#list rootElement.elements() as dynamicElement>
64 <#if "Icona" == dynamicElement.attributeValue("name")>
65 <#assign icon = dynamicElement.element("dynamic-content").getData() />
66 <#assign array = '[' + icon + ']'>
67 <#assign object = array?eval[0]>
68 <#list object?keys as key>
69 <#if key == "uuid">
70 <#assign uuid = key>
71 <#assign fileEntry = DLFileEntryService.getFileEntryByUuidAndGroupId(object[key],groupId) >
72 <#assign urlImageIcon = "/documents/" + fileEntry.getGroupId() + "/" + fileEntry.getFolderId() + "/" + fileEntry.getFileName() >
73 </#if>
74 </#list>
75
76 </#if>
77 </#list>
78
79 <div class="slide-nav-item ${activeClass}" id="nav-${curEntry_index}">
80 <div class="slide-nav-item__inner d-flex flex-column align-items-center justify-content-center">
81 <img src="${urlImageIcon}" width="50px" height="50px"> <!-- -->
82 <h3 class="mt-2">${entryTitle}</h3>
83 </div>
84 </div>
85 </#list>
86 </div>
87
88 <!-- contenuto -->
89 <div class="slider-for" id="slider-for-${portletId}">
90 <#list entries as curEntry>
91 <#assign
92 entry = curEntry
93 assetRenderer = entry.getAssetRenderer()
94 entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale))
95 className = assetRenderer.getClassName()
96 viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, assetRenderer, entry, !stringUtil.equals(assetLinkBehavior, "showFullContent"))
97 activeContentClass = ""
98 />
99 <#if curEntry_index == 0>
100 <#assign activeContentClass = "active"/>
101 </#if>
102 <#assign
103 journalArticle = assetRenderer.getArticle()
104 />
105 <div class="${activeContentClass}" id="nav-content-${curEntry_index}">
106 <@liferay_journal["journal-article"]
107 groupId=journalArticle.getGroupId()
108 articleId=journalArticle.getArticleId()
109 ddmTemplateKey=journalArticle.getTemplateId()
110 />
111 </div>
112 </#list>
113 </div>
114 </div>
115
116 <script>
117 $(document).ready(function(){
118 $.getScript("${javascript_folder}/slick.js", function() {
119 $('#slider-for-${portletId}').slick({
120 slidesToShow: 1,
121 slidesToScroll: 1,
122 //initialSlide: 3,
123 arrows: false,
124 dots: false,
125 fade: true,
126 asNavFor: '#slider-nav-${portletId}',
127 responsive: [
128 {
129 breakpoint: 768,
130 settings: {
131 adaptiveHeight: true
132 }
133 }
134 ]
135 });
136 var sliderNav = $('#slider-nav-${portletId}');
137 sliderNav.slick({
138 centerMode: true,
139 slidesToShow: 7,
140 slidesToScroll: 1,
141 //initialSlide: 3,
142 asNavFor: '#slider-for-${portletId}',
143 dots: false,
144 arrows: false,
145 //infinite: false,
146 focusOnSelect: true,
147 responsive: [
148 {
149 breakpoint: 768,
150 settings: {
151 slidesToShow: 1,
152 centerMode: true,
153 centerPadding: '100px'
154 }
155 }
156 ]
157 });
158
159 var slick = sliderNav.slick('getSlick');
160 sliderNav.on('click', '.card-info__arrow', function () {
161 var curSlide = slick.slideCount === slick.currentSlide ? 0 : slick.currentSlide + 1;
162 sliderNav.slick('slickGoTo', curSlide, true);
163 console.log(slick);
164 });
165
166 $("#slider-tabs .slider-nav .slick-track").addClass("d-flex align-items-center width-net-full");
167 });
168 });
169 </script>
170
171 <style>
172 .slider-nav {
173 z-index: 2;
174 position: relative;
175 }
176 .slider-nav .slick-list {
177 min-height: 165px;
178 }
179 .slider-nav .slide-nav-item {
180 white-space: nowrap;
181 background: linear-gradient(0deg, rgba(15,108,98,1) 0%, rgba(9,65,59,1) 100%);
182 color: white;
183 }
184 .slider-nav .slick-slide:not(.slick-current) .slide-nav-item img {
185 filter: grayscale(1) invert(1);
186 }
187 .slider-nav .slick-slide {
188 position: relative;
189 cursor: pointer;
190 }
191 .slider-nav .slick-slide:not(.slick-current) .slide-nav-item .slide-nav-item__inner {
192 padding-top: 1rem;
193 padding-bottom: 1rem;
194 }
195 /*--- attivo --*/
196 .slider-nav .slick-slide.slick-current .slide-nav-item .slide-nav-item__inner {
197 padding: 1.5rem 0;
198 }
199 .slider-nav .slick-slide.slick-current .slide-nav-item .slide-nav-item__inner:before {
200 content: "";
201 display: inline-block;
202 height: 4px;
203 background: #ffac00;
204 width: 100%;
205 top: -1px;
206 position: absolute;
207 }
208 .slider-nav .slick-slide.slick-current .slide-nav-item {
209 position: relative;
210 background: #ffffff;
211 border: 1px solid #dee2e6;
212 }
213 .slider-nav .slick-slide.slick-current .slide-nav-item:after,
214 .slider-nav .slick-slide.slick-current .slide-nav-item:before {
215 top: 100%;
216 left: 50%;
217 border: solid transparent;
218 content: " ";
219 height: 0;
220 width: 0;
221 position: absolute;
222 pointer-events: none;
223 }
224 .slider-nav .slick-slide.slick-current .slide-nav-item:after {
225 border-color: rgba(136, 183, 213, 0);
226 border-top-color: #FFF;
227 border-width: 16px;
228 margin-left: -16px;
229 margin-top: -1px;
230 }
231 .slider-nav .slick-slide.slick-current .slide-nav-item:before {
232 border-color: rgba(194, 225, 245, 0);
233 border-top-color: #dee2e6;
234 border-width: 17px;
235 margin-left: -17px;
236 }
237 .slider-nav .slick-slide.slick-current .slide-nav-item h3 {
238 color: initial;
239 }
240
241 .slider-for {
242 top: -35px;
243 }
244
245 @media (max-width: 768px) {
246 .card-info {
247 background: #f6f7f9;
248 position: relative;
249 bottom: -8px;
250 padding-bottom: 0.5rem;
251 text-transform: uppercase;
252 }
253 .card-info .card-info__arrow svg {
254 width: 20px;
255 }
256 .card-info .card-info__arrow-left svg {
257 transform: rotate(180deg);
258 }
259 }
260 </style>
261</#if>