1<#-- Retrieve the published date meta data field of the web content -->
2<#assign displaydate = .vars['reserved-article-display-date'].data>
3<#-- Save the original page locale for later -->
4<#assign originalLocale = .locale>
5
6<#-- Set the page locale to the portals default locale -->
7<#setting locale = localeUtil.getDefault()>
8
9<#-- Parse the date to a date object -->
10<#assign displaydate = displaydate?datetime("EEE, d MMM yyyy HH:mm:ss Z")>
11
12<#-- Set the page locale back to the original page locale -->
13<#--#assign locale = ''-->
14<#assign dateFormat = "dd MM yyyy" />
15<#assign publishDate=dateUtil.getDate(displaydate,dateFormat,locale)/>
16
17
18<#assign liferay_ui = taglibLiferayHash["/META-INF/liferay-ui.tld"] />
19
20<#assign JournalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")>
21<#assign assetLinkLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetLinkLocalService" )>
22<#assign assetEntryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService" )>
23<#assign getterUtil = staticUtil["com.liferay.portal.kernel.util.GetterUtil"] />
24<#assign currentArticle = JournalArticleLocalService.getArticle(getterUtil.getLong(groupId),.vars['reserved-article-id'].data)>
25<#assign currentArticleResourcePrimKey = currentArticle.getResourcePrimKey()>
26<#assign currentArticleAssetEntry = assetEntryLocalService.getEntry("com.liferay.journal.model.JournalArticle", currentArticleResourcePrimKey)/>
27
28<#assign viewCount = currentArticleAssetEntry.viewCount/>
29
30
31<#assign assetDisplayPageFriendlyURLProvider = serviceLocator.findService("com.liferay.asset.display.page.portlet.AssetDisplayPageFriendlyURLProvider")>
32<#assign friendlyURL = assetDisplayPageFriendlyURLProvider.getFriendlyURL("com.liferay.journal.model.JournalArticle", currentArticleResourcePrimKey, themeDisplay)/>
33
34
35<div class="single">
36 <div class="islamic-background" style="background-image: url(${themeDisplay.getPathThemeImages()}/pattern1.png);background-repeat: repeat-x"></div>
37
38 <div class="container">
39
40 <#-- title -->
41 <a class="single-title-wrapper" href="#">
42 <h2 class="single-title esra-heading-two">
43 ${.vars['reserved-article-title'].data}
44 </h2>
45 </a>
46
47 <#-- date and id-->
48 <div class="d-flex justify-content-end">
49 <span class="single-date">
50 <span class="icon-datepicker single-date-datepicker-icon"></span>
51 <span class="js-date" data-date="${publishDate} ?? DD MM YYYY ?? dddd DD MMMM YYYY">${publishDate}</span>
52 </span>
53
54 <span class="single-id">
55 <span>${.vars['reserved-article-id'].data}</span>
56 <span>شناسه:</span>
57 </span>
58 </div>
59
60
61
62
63
64 <div class="single-content">
65 <div class="row">
66
67 <#-- lead -->
68 <#if (lead.getData())?? && lead.getData() != "">
69 <div class="col col-12">
70 <span class="lead">${lead.getData()}</span>
71 </div>
72 </#if>
73
74
75 <#if (content.getData())?? && content.getData() != "">
76 <#-- content -->
77 <div class="col col-12">
78 <div class="single-content-section">
79 <div class="single-content-section-paragraph-container">
80 ${content.getData()}
81 </div>
82 </div>
83 </div>
84 </#if>
85
86
87
88 <#-- image -->
89 <#if (image.getData())?? && image.getData() != "">
90 <div class="col col-12 mt-4">
91 <img src="${image.getData()}" alt="image">
92 </div>
93 </#if>
94
95 <#if (poster.getData())?? && poster.getData() != "">
96 <#assign poster = poster.getData()/>
97 <#elseif (.vars['reserved-article-small-image-url'].data)?? && .vars['reserved-article-small-image-url'].data != "">
98 <#assign poster = .vars['reserved-article-small-image-url'].data />
99 <#else>
100 <#assign poster = themeDisplay.getPathThemeImages() + '/placeholder.jpg' />
101 </#if>
102
103 <#-- video -->
104 <#if (link.getData())?? && link.getData() != "">
105 <#assign videoUrl= link.getData()>
106 <#elseif (video.getData())?? && video.getData() != "">
107 <#assign videoUrl= video.getData()>
108 <#else>
109 <#assign videoUrl= "">
110 </#if>
111 <div class="single-content-video-wrapper text-center">
112 <#if (videoUrl)?? && videoUrl != "">
113 <div>
114 <video class="single-content-video" poster="${poster}" preload="none">
115 <source src="${videoUrl}" type="video/mp4">
116 Your browser does not support the video tag.
117 </video>
118 <div class="single-content-video-overlay">
119 <div class="single-content-play-video">
120 <img src="${themeDisplay.getPathThemeImages()}/play.png" alt="">
121 </div>
122 </div>
123
124 </div>
125 <a href="${videoUrl}" class="btn btn-info my-3">دانلود فایل تصویری</a>
126 </#if>
127 </div>
128
129
130 <#-- audio -->
131 <#if (audiolink.getData())?? && audiolink.getData() != "">
132 <#assign audioUrl= audiolink.getData()>
133 <#elseif (audio.getData())?? && audio.getData() != "">
134 <#assign audioUrl= audio.getData()>
135 <#else>
136 <#assign audioUrl= "">
137 </#if>
138 <#if (audioUrl)?? && audioUrl != "">
139 <div class="col col-6 mt-4 mx-auto px-0 text-center">
140 <audio controls class="w-100">
141 <source src="${audioUrl}" type="audio/ogg">
142 <source src="${audioUrl}" type="audio/mpeg">
143 No audio support.
144 </audio>
145 <a href="${audioUrl}" class="btn btn-info my-3">دانلود فایل صوتی</a>
146 </div>
147 </#if>
148
149
150 <#-- word -->
151 <#if (wordlink.getData())?? && wordlink.getData() != "">
152 <#assign wordUrl= wordlink.getData()>
153 <#else>
154 <#assign wordUrl= "">
155 </#if>
156 <#if (wordUrl)?? && wordUrl != "">
157 <div class="col col-12 mt-12 mx-auto px-0 text-center">
158 <a href="${wordUrl}" class="btn btn-info my-3">دانلود فایل ورد</a>
159 </div>
160 </#if>
161
162
163 <#-- PDF -->
164 <#if (pdflink.getData())?? && pdflink.getData() != "">
165 <#assign pdfUrl= pdflink.getData()>
166 <#else>
167 <#assign pdfUrl= "">
168 </#if>
169 <#if (pdfUrl)?? && pdfUrl != "">
170 <div class="col col-12 mt-12 mx-auto px-0 text-center">
171 <a href="${pdfUrl}" class="btn btn-info my-3">دانلود فایل PDF</a>
172 </div>
173 </#if>
174
175
176
177
178 <#if (describtion.getData())?? && describtion.getData() != "">
179 <#-- describtion -->
180 <div class="col col-12">
181 <div class="single-content-section">
182 <div class="single-content-section-paragraph-container">
183 ${describtion.getData()}
184 </div>
185 </div>
186 </div>
187 </#if>
188
189
190 <#if (gallary.getData())?? && gallary.getData() != "">
191
192 <div class="col col-12">
193 <div class="content-gallery-container">
194
195
196 <div class="content-gallery-title-container">
197 <h2 class="esra-heading-two content-gallery-title">
198 سایر تصاویر
199 </h2>
200 </div>
201
202 <div class="content-gallery splide splide-${themeDisplay.getPortletDisplay().getId()}">
203
204 <div class="splide__track">
205 <ul class="splide__list">
206 <#list gallary.getSiblings() as cur_gallary>
207 <#if (cur_gallary.getData())?? && cur_gallary.getData() != "">
208 <li class="splide__slide">
209 <a href="${cur_gallary.getData()}">
210 <div class="content-gallery-item">
211 <div class="content-gallery-item-image-container">
212 <img class="content-gallery-item-image" alt="${cur_gallary.getAttribute("alt")}" src="${cur_gallary.getData()}"/>
213 </div>
214 </div>
215 </a>
216 </li>
217 </#if>
218 </#list>
219 </ul>
220 </div>
221 </div>
222 </div>
223 </div>
224 </#if>
225
226
227 <div class="col col-12">
228 <hr class="content-horizontal-line">
229 </div>
230
231
232 <div class="col col-12">
233 <div class="single-content-footnote">
234 <div class="single-content-print">
235 <span class="icon-printer single-view-icon"></span>
236 </div>
237 <div class="single-content-share">
238 <div class="share">
239 <span class="app-icon icon-share"></span>
240 <div class="share-methods">
241 <div class="whatsapp">
242 <span class="app-icon icon-whatsapp"></span>
243 </div>
244 <div class="telegram">
245 <span class="app-icon icon-telegram"></span>
246 </div>
247 <div class="twitter">
248 <span class="app-icon icon-twiiter"></span>
249 </div>
250 </div>
251
252 </div>
253
254
255
256 </div>
257 <div class="short-link">لینک کوتاه:
258 <input type="text" value="${friendlyURL}" id="myInput" disabled>
259 <button onclick="myFunction()" class="app-link-button px-0">کپی</button>
260 </div>
261 </div>
262
263
264
265 <script>
266 function myFunction() {
267 // Get the text field
268 var copyText = document.getElementById("myInput");
269
270 copyText.select();
271 copyText.setSelectionRange(0, 99999); // For mobile devices
272
273 navigator.clipboard.writeText(copyText.value);
274
275
276 }
277 </script>
278
279
280 </div>
281
282
283
284 </div>
285 </div>
286 </div>
287</div>
288
289
290<style>
291
292 body {
293 margin: 0;
294 padding: 0;
295
296 }
297
298 a:hover {
299 text-decoration: none;
300 }
301
302 .single-title-wrapper {
303 display: block;
304 padding: 60px 0 20px 0;
305 }
306
307 .single-title {
308 -webkit-line-clamp: 2 !important;
309 margin: 0;
310 padding: 0;
311 }
312
313 .app-link-button {
314 background: #dde7ea;
315 border-radius: 7px;
316 border: 2px solid #00bceb;
317 font-family: IRANSans;
318 font-style: normal;
319 font-weight: 500;
320 font-size: 15px;
321 text-align: center;
322 padding: 4px 26px;
323 min-width: 50px;
324 color: #00bceb;
325 transition: 300ms;
326 height: 32px;
327 line-height: 1rem;
328 }
329
330 .short-link {
331 padding: 7px 0;
332 display: flex;
333 right: 150px;
334 position: absolute;
335 top: 50%;
336 transform: translateY(-50%);
337 line-height: 2.5rem;
338 }
339
340 input#myInput {
341 font-size: 12px;
342 width: 240px;
343 height: 34px;
344 direction: ltr;
345 color: #00bceb;
346 margin: 0 7px;
347 }
348
349
350@media only screen and (max-width: 768px)
351{
352
353.short-link {
354 padding: 7px 0;
355 display: flex;
356 right: 0;
357 position: absolute;
358 top: 85%;
359 transform: translateY(-50%);
360 line-height: 2.5rem;
361 width: 100%;
362}
363}
364 .single-date, .single-id {
365 font-style: normal;
366 font-weight: normal;
367 font-size: 12px;
368 color: #0D274D;
369 display: block;
370 text-align: left;
371 }
372
373 .single-id {
374 display: flex;
375 flex-direction: row-reverse;
376 align-items: center;
377 margin-right: 10px;
378 }
379
380 .single-date-datepicker-icon, .single-id-icon {
381 vertical-align: middle;
382 }
383
384 .single-id-icon {
385 margin: 0 2px;
386 }
387.btn-info {
388 background-color: #ffffff;
389 border-color: #00277269;
390 color: #07348b;
391}
392
393 .single-thumbnail {
394 border-radius: 8px;
395 overflow: hidden;
396 box-shadow: 0 5px 15px 0 #00000026;
397 margin: 20px 0;
398 width: 100%;
399 max-height: 565px;
400 }
401
402 .single-thumbnail-image {
403 width: 100%;
404 height: 100%;
405 object-fit: cover;
406 object-position: center;
407 }
408
409 .single-view {
410 font-style: normal;
411 font-weight: normal;
412 font-size: 12px;
413 color: #0D274D;
414 text-align: left;
415 }
416
417 html.ltr .single-view {
418 direction: rtl;
419 }
420
421 html.rtl .single-view {
422 direction: ltr;
423 }
424
425 .single-content {
426 width: 100%;
427 }
428
429 .lead {
430 color: #0d274d;
431 font-weight: bold;
432 margin: 21px 0 0 0;
433 display: block;
434 }
435
436 .single-content-section {
437 width: 100%;
438 text-align: justify;
439 margin-top: 30px;
440 }
441
442 .single-content-section p {
443 margin: 0;
444 font-style: normal;
445 font-weight: normal;
446 font-size: 18px;
447 line-height: 36px;
448 /* or 200% */
449 color: #6A6969;
450 }
451
452
453 .single-content-section img {
454 border-radius: 8px;
455 overflow: hidden;
456 }
457
458 .single-content-video-wrapper {
459 width: 100%;
460 height: 100%;
461 max-width: 768px;
462 margin: 24px auto;
463 }
464
465 .single-content-video-wrapper > div {
466 position: relative;
467 width: 100%;
468 height: 100%;
469 border-radius: 20px;
470 overflow: hidden;
471 }
472
473 .single-content-video {
474 width: 100%;
475 height: 100%;
476 padding: 0;
477 margin: 0;
478 object-fit: cover;
479 }
480
481 .single-content-video-overlay {
482 width: 100%;
483 height: 100%;
484 position: absolute;
485 left: 0;
486 top: 0;
487 background: rgba(0, 0, 0, .7);
488 z-index: 2;
489 display: flex;
490 align-items: center;
491 justify-content: center;
492 }
493
494 .single-content-play-video {
495 width: 90px;
496 height: 90px;
497 }
498
499 .single-content-play-video img {
500 width: 100%;
501 height: 100%;
502 border: 5px solid #ffffff;
503 border-radius: 100%;
504 cursor: pointer;
505 }
506
507
508 .single-content-footnote {
509 width: 100%;
510 display: flex;
511 align-items: center;
512 justify-content: space-between;
513 flex-direction: row;
514 padding: 45px 0 60px 0;
515 margin:0 0 20px 0;
516 position: relative;
517 }
518
519 .single-content-print {
520 font-size: 30px;
521 position: absolute;
522 left: 0;
523 top: 50%;
524 transform: translateY(-50%);
525 color: #00BCEB;
526 cursor: pointer;
527 display: flex;
528 align-items: center;
529 justify-content: center;
530 }
531
532 .single-content-share {
533 width: 143px;
534 height: 35px;
535 position: absolute;
536 right: 0;
537 top: 50%;
538 transform: translateY(-50%);
539 }
540
541 .single-content-share .share .share-methods {
542 display: flex;
543 font-size: 21px;
544 color: #00BCEB;
545 cursor: pointer;
546 justify-content: space-between;
547 align-items: center;
548 width: 120px;
549 height: 100%;
550 border: 2px solid #00BCEB;
551 padding: 3px 10px;
552 border-radius: 10px;
553 background: #dde7ea;
554 }
555
556 .single-content-share .share .share-methods > div {
557 display: flex;
558 align-items: center;
559 justify-content: center;
560 }
561
562
563 .single-content-created-at b {
564 font-style: normal;
565 font-weight: bold;
566 font-size: 18px;
567
568 color: #00BCEB;
569 }
570
571 .single-content-created-at {
572 font-size: 16px;
573 color: #0D274D;
574 }
575
576 .single-content-created-at:before {
577 content: 'نوشته شده';
578 font-size: 18px;
579 font-weight: 700;
580 color: #00BCEB;
581 }
582
583
584
585
586 .content-gallery-title-container {
587 margin: 45px 0;
588 }
589
590 .content-gallery-title {
591 font-size: 28px;
592 }
593
594 .content-gallery-item {
595 width: 100%;
596 }
597
598 .content-gallery-item-image-container {
599 width: 100%;
600 height: 220px;
601 border-radius: 8px;
602 overflow: hidden;
603 }
604
605 .content-gallery-item-image {
606 width: 100%;
607 height: 100%;
608 object-fit: cover;
609 object-position: center;
610 }
611
612
613 .content-gallery .splide__pagination {
614 display: none;
615 }
616
617
618 .content-gallery button.splide__arrow {
619 background: #00BCEB;
620 transform: translateY(-50%) scale(.8);
621 }
622
623 .content-gallery button.splide__arrow svg {
624 fill: white;
625 }
626
627 html.ltr .content-gallery .splide__arrow--prev {
628 left: -16px;
629 }
630
631 html.ltr .content-gallery .splide__arrow--next {
632 right: -16px;
633 }
634
635 html.rtl .content-gallery .splide__arrow--prev {
636 left: unset;
637 right: -16px;
638 }
639
640 html.rtl .content-gallery .splide__arrow--next {
641 right: unset;
642 left: -16px;
643 }
644
645
646 @media only screen and (max-width: 768px) {
647
648 .single-title {
649 font-size: 20px;
650 font-weight: 700;
651 line-height: 32px;
652 }
653
654 .single-title-wrapper {
655 padding: 40px 0 15px 0;
656 }
657
658
659 .single-thumbnail {
660 margin: 10px 0;
661 max-height: 328px;
662 }
663
664 .single-content-section p {
665 font-size: 14px;
666 font-weight: 400;
667 line-height: 28px;
668 letter-spacing: 0;
669 }
670
671 .content-gallery-title-container {
672 margin: 25px 0;
673 }
674
675 .content-gallery-item-image-container {
676 max-height: 200px;
677 }
678
679 .content-horizontal-line {
680 margin-top: 55px;
681 }
682
683
684 .single-content-created-at {
685 font-size: 15px;
686 font-weight: 400;
687 }
688
689 .single-content-created-at:before {
690 font-size: 16px;
691 }
692
693 .single-content-print {
694 display: none;
695 }
696
697 }
698
699
700 @media only screen and (max-width: 576px) {
701
702 .single-title-wrapper {
703 padding: 20px 0;
704 }
705
706 .single-title {
707 font-size: 16px;
708 font-weight: 700;
709 line-height: 27px;
710 letter-spacing: -0.03em;
711 text-align: center;
712 }
713
714
715 .content-gallery-title-container {
716 margin: 40px 0 20px 0;
717 }
718
719
720 .single-content-created-at {
721 font-size: 10px;
722 font-weight: 400;
723 }
724
725 .single-content-created-at:before {
726 font-size: 10px;
727 font-weight: 700;
728 letter-spacing: 0;
729 }
730
731 .content-horizontal-line {
732 margin-top: 35px;
733 }
734
735
736
737 }
738
739
740 @media print {
741 nav {
742 display: none;
743 }
744
745 .single-title-wrapper {
746 text-decoration: none !important;
747 }
748
749 .content-gallery-container {
750 display: none;
751 }
752
753 .parent-portlet-page-comments {
754 display: none;
755 }
756
757 .related-news {
758 display: none;
759 }
760
761 footer {
762 display: none;
763 }
764
765
766 }
767
768</style>
769
770<script>
771
772 const gallery = document.querySelector(".splide-${themeDisplay.getPortletDisplay().getId()}");
773
774 if (typeof (gallery) != 'undefined' && gallery != null) {
775
776 new Splide(".splide-${themeDisplay.getPortletDisplay().getId()}", {
777 direction: document.getElementsByTagName("html")[0].getAttribute("dir"),
778 perPage: 3,
779 gap: 25,
780 breakpoints: {
781 992: {
782 perPage: 2,
783 },
784 576: {
785 perPage: 1,
786 },
787 }
788 }).mount();
789
790 }
791
792 const printIcon = document.querySelector('.single-content-print') || null;
793
794 if (typeof (printIcon) != 'undefined' && printIcon != null) {
795
796 printIcon.addEventListener('click', () => {
797 window.print()
798 })
799 }
800
801
802 share();
803
804 function share() {
805 const title = document.querySelector('title').innerText.trim();
806 const url = window.location.href.trim();
807 const content = title + " --- " + url;
808
809 const icons = document.querySelectorAll('.share-methods .app-icon');
810
811 let link;
812
813 icons.forEach((icon) => {
814 icon.addEventListener(('click'), (e) => {
815 var target = e.target;
816 var classList = target.classList;
817 console.log(classList, classList.contains('icon-twiiter'));
818 if (classList.contains('icon-twiiter')) {
819 const prefix = "https://twitter.com/intent/tweet?text=";
820 link = prefix + content;
821 }
822 if (classList.contains('icon-telegram')) {
823 const prefix = "https://telegram.me/share/url?url=";
824 link = prefix + content;
825 }
826 if (classList.contains('icon-whatsapp')) {
827 const prefix = "whatsapp://send?text=";
828 link = prefix + url;
829 }
830 if (classList.contains('icon-link')) {
831 const prefix = "";
832 link = url;
833 }
834
835 window.open(link, '_blank', 'toolbar=0,location=0,menubar=0');
836
837 })
838 })
839
840
841 }
842
843
844 playVideo();
845
846 function playVideo() {
847
848 const playButton = document.querySelector('.single-content-play-video') || null;
849
850 if (typeof (playButton) != 'undefined' && playButton != null) {
851 playButton.addEventListener('click', () => {
852
853
854 var container = document.querySelector('.single-content-video-wrapper');
855 var video = container.querySelector(".single-content-video");
856 var overlay = container.querySelector(".single-content-video-overlay");
857
858 video.play();
859 video.setAttribute('controls', 'controls');
860 video.style.objectFit = 'cover';
861 overlay.style.display = 'none';
862
863 })
864 }
865
866 }
867
868
869</script>