1<#assign
2owlId= "slider" + random.nextLong()
3/>
4<#if !entries?has_content>
5 <#if !themeDisplay.isSignedIn()>
6 ${renderRequest.setAttribute("PORTLET_CONFIGURATOR_VISIBILITY", true)}
7 </#if>
8
9 <div class="alert alert-info">
10 <@liferay_ui["message"] key="there-are-no-results" />
11 </div>
12<#else>
13 <#assign
14 titleMaxLength = 60
15 isShowFullContent = stringUtil.equals(assetLinkBehavior, "showFullContent")
16 dateFormat = "dd.MM.yyyy"
17 totalPages = entries?size?number
18 journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")
19 />
20 <div class="nnk_slider">
21 <div id="${owlId}" class="nnk_slider owl-wrapper">
22 <#list 0..entries?size-1 as i>
23 <@getArticle entry=entries[i] />
24 </#list>
25 </div>
26 <div class="nnk_slider-controls py-3 py-mt-2">
27 <button id="play-btn-${owlId}" class="btn btn-secondary"
28 style="display:none"
29 aria-label="<@liferay.language key='nnk.asset.publisher.slider-play'/>">
30 <@liferay_ui["icon"] icon="play" />
31 </button>
32 <button id="pause-btn-${owlId}" class="btn btn-secondary"
33 aria-label="<@liferay.language key='nnk.asset.publisher.slider-stop'/>">
34 <@liferay_ui["icon"] icon="pause" />
35 </button>
36
37 <button id="btn-prev-${owlId}" class="btn-prev btn btn-secondary"
38 aria-label="<@liferay.language key='nnk.asset.publisher.slider-prev-article'/>">
39 </button>
40
41 <#list 1..totalPages as pageIndex>
42 <button id="btn-page-${owlId}-${pageIndex}"
43 class="btn-page ${owlId} btn btn-secondary"
44 data-page="${pageIndex - 1}"
45 aria-label="<@liferay.language key='nnk.asset.publisher.slider-go-to-article' /> ${pageIndex}">
46 ${pageIndex}
47 </button>
48 </#list>
49
50 <button id="btn-next-${owlId}" class="btn-next btn btn-secondary"
51 aria-label="<@liferay.language key='nnk.asset.publisher.slider-next-article'/>">
52 </button>
53 </div>
54
55 </div>
56 <hr>
57</#if>
58
59<#macro getArticle entry>
60<div class="nnk_slider-item row m-0 px-3 pb-0">
61
62 <#assign
63 assetRenderer = entry.getAssetRenderer()
64 entryTitle = htmlUtil.escape(stringUtil.shorten(assetRenderer.getTitle(locale), titleMaxLength))
65 summary = assetRenderer.getSummary(renderRequest, renderResponse.getResponse())
66 imageUrl = assetRenderer.getURLImagePreview(renderRequest)!""
67 />
68
69 <#if !summary?has_content>
70 <#attempt>
71 <#assign
72 journalArticle = assetRenderer.getArticle()
73 journalArticleDisplay = journalArticleLocalService.getArticleDisplay(journalArticle.getGroupId(), journalArticle.getArticleId(), "", l, themeDisplay)
74 articleContent = journalArticleDisplay.getContent()
75 summary = htmlUtil.stripHtml(articleContent)
76 />
77 <#recover>
78 <#assign
79 journalArticle = assetRenderer.getArticle()
80 />
81 </#attempt>
82 </#if>
83
84 <#if imageUrl?has_content>
85 <#assign contentMaxLength = 200 />
86 <#else>
87 <#assign contentMaxLength = 350 />
88 </#if>
89
90 <#if imageUrl?has_content>
91 <div class="nnk_slider-item-photo col-12 col-lg-4 p-0 m-0">
92 <img data-src="${imageUrl}"
93 alt="<@liferay.language key='nnk.asset.publisher.slider-image-alt-prefix' /> ${entryTitle}"
94 class="nnk_slider-image lazyOwl">
95 </div>
96 <div class="nnk_slider-item-content p-2 py-lg-4 px-lg-4 col-12 col-lg-8">
97 <#else>
98 <div class="nnk_slider-item-content p-2 py-lg-4 px-lg-4 col-12">
99 </#if>
100 <div class="nnk_slider-edit-article">
101 <@getEditIcon />
102 </div>
103 <p class="nnk_slider-asset-publish-date text-3">
104 ${dateUtil.getDate(entry.getPublishDate(), dateFormat, locale)}
105 </p>
106 <div>
107 <a href="${assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse.getResponse(), assetRenderer, entry, isShowFullContent)}">
108 <h3 class="nnk_slider-asset-title c-my-4">${entryTitle}</h3>
109 </a>
110 <div class="nnk_slider-asset-summary">
111 <p>
112 ${stringUtil.shorten((summary), contentMaxLength)}
113 </p>
114 </div>
115 </div>
116 </div>
117 </div>
118 </#macro>
119
120 <#macro getEditIcon>
121 <#attempt>
122 <#if assetRenderer.hasEditPermission(themeDisplay.getPermissionChecker())>
123 <#assign editPortletURL = assetRenderer.getURLEdit(renderRequest, renderResponse.getResponse(), windowStateFactory.getWindowState("NORMAL"), themeDisplay.getURLCurrent())!"" />
124
125 <#if validator.isNotNull(editPortletURL)>
126 <#assign title = languageUtil.format(locale, "edit-x", htmlUtil.escape(assetRenderer.getTitle(locale)), false) />
127 <@liferay_ui["icon"]
128 cssClass="icon-monospaced visible-interaction"
129 icon="pencil"
130 markupView="lexicon"
131 message=title
132 url=editPortletURL.toString()
133 />
134 </#if>
135 </#if>
136 <#recover>
137 </#attempt>
138 </#macro>
139
140 <script>
141 $(function() {
142 var owl = $('#${owlId}');
143 owl.owlCarousel({
144 singleItem: true,
145 stopOnHover: false,
146 transitionStyle: "fade",
147 autoHeight: true,
148 autoPlay: true,
149 rewindNav: true,
150 lazyLoad: true,
151 mouseDrag: false,
152 addClassActive: true,
153 pagination: false,
154 afterAction: function() {
155 updateActivePagination();
156 },
157 afterInit: function(){
158 owl.show();
159 }
160 });
161
162 $('.btn-page.${owlId}').on('click', function() {
163 var pageIndex = $(this).data('page');
164 $('.btn-page.${owlId}').removeClass('active');
165 $(this).addClass('active');
166 owl.trigger('owl.goTo', pageIndex);
167 });
168
169 $('#btn-prev-${owlId}').on('click', function() {
170 owl.trigger('owl.prev');
171 });
172
173 $('#btn-next-${owlId}').on('click', function() {
174 owl.trigger('owl.next');
175 });
176
177 $('#play-btn-${owlId}').on('click', function() {
178 owl.trigger('owl.play', [3000]);
179 $('#play-btn-${owlId}').css('display', 'none');
180 $('#pause-btn-${owlId}').css('display', 'block');
181 });
182
183 $('.owl-item.active').on('mousedown', function(event) {
184 event.stopPropagation();
185 });
186
187 $('#pause-btn-${owlId}').on('click', function() {
188 owl.trigger('owl.stop');
189 $('#pause-btn-${owlId}').css('display', 'none');
190 $('#play-btn-${owlId}').css('display', 'block');
191 });
192
193 function updateActivePagination() {
194 var currentIndex = owl.find('.owl-item.active').index();
195 $('.btn-page.${owlId}').removeClass('active');
196 $('.btn-page.${owlId}').eq(currentIndex).addClass('active');
197 }
198 });
199 </script>