Image slider 1b.gtmpl

<%
/**
* DESCRIPTION: a CLV (Content List or Content by Query portlet) template for displaying eXo Platform news articles.
* DATE: May 2021
* AUTHOR: Marwen Mema (marwenmema@gmail.com)
* CLV DISPLAY PARAMETERS: none
**/

import org.exoplatform.wcm.webui.paginator.UICustomizeablePaginator;
import org.exoplatform.wcm.webui.clv.UICLVPortlet;
import org.exoplatform.wcm.webui.Utils;
import org.exoplatform.services.wcm.core.NodeLocation;
import org.exoplatform.services.jcr.core.ManageableRepository;
import org.exoplatform.services.wcm.utils.WCMCoreUtils;
import org.exoplatform.social.core.identity.model.Identity;
import org.exoplatform.social.core.identity.provider.OrganizationIdentityProvider;
import org.exoplatform.social.core.space.model.Space;
import org.exoplatform.social.core.space.spi.SpaceService;
import org.exoplatform.webui.application.WebuiRequestContext;
import org.exoplatform.portal.webui.util.Util;
import org.exoplatform.services.security.ConversationState;
import org.exoplatform.commons.utils.CommonsUtils;
import org.exoplatform.container.PortalContainer;
import org.exoplatform.news.NewsService;

import javax.jcr.Node;
import org.apache.commons.lang.StringEscapeUtils;
import org.htmlcleaner.HtmlCleaner;

import java.time.format.DateTimeFormatter;
import java.time.format.FormatStyle;
import java.time.LocalDateTime;
import java.util.TimeZone;
import java.util.Date;

SpaceService spaceService = CommonsUtils.getService(SpaceService.class);
NewsService newsService = CommonsUtils.getService(NewsService.class);

public String getProfileFullName(String userName) {
  String profileFullName = "";
  Identity identity = org.exoplatform.social.webui.Utils.getIdentityManager().getOrCreateIdentity(OrganizationIdentityProvider.NAME, userName, true);
  if(identity != null && identity.getProfile() != null) {
    profileFullName = identity.getProfile().getFullName();
  }
  return StringEscapeUtils.escapeHtml(profileFullName);
}

def propertyName = "exo:title";
def repo = "";
def workspace = "";
def uuid = "";
def siteName = org.exoplatform.portal.webui.util.Util.getPortalRequestContext().getPortalOwner();
Locale locale = WebuiRequestContext.getCurrentInstance().getLocale();
def mediumDateFormat = DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM).withLocale(locale);

def language = locale.getLanguage();
def draftMsg = _ctx.appRes("PublicationStates.draft");
def publishedMsg = _ctx.appRes("PublicationStates.published");
def requestContext = _ctx.getRequestContext();
def jsManager = requestContext.getJavascriptManager();

if (uicomponent.getUIPageIterator().getAvailable() > 0) {
%>

<style type="text/css">

#image-slider-1b {
  position: relative;
  display: block;
  height: 200px;
  width: 100%;
  margin: 0 0 20px 0;  /* <-- Adjust this margin if needed */
}
#image-slider-1b .slide-viewer {
  position: relative;
  height: 100%;
  overflow: hidden;
}
#image-slider-1b .slide-group {
  position: relative;
  height: 100%;
  width: 100%;
}
#image-slider-1b .slide {
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}
#image-slider-1b .slide:first-child {
  display: block;
}
#image-slider-1b .slide-link {
  position: absolute;
  height: 100%;
  width: 100%;
  text-decoration: none;
}
#image-slider-1b .slide-image {
  height: 100%;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  -webkit-filter: brightness(0.7);
          filter: brightness(0.7);
  -webkit-animation: zoom 12s infinite;
  animation: zoom 12s infinite;
}
#image-slider-1b .slide:hover .slide-image {
  -webkit-filter: brightness(0.55);
          filter: brightness(0.55);
}
/* If you want to remove the zoom effect, delete the following zoom keyframes */
@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.14);
            transform: scale(1.14);
  }
}
@keyframes zoom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.14);
            transform: scale(1.14);
  }
}
#image-slider-1b .text-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 4px rgb(0 0 0 / 78%);
  overflow: hidden;
  margin: 0 15%;
}
#image-slider-1b .slide-title {
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  padding-bottom: 2px;
}
#image-slider-1b .slide-link:hover .slide-title,
#image-slider-1b .slide-link:focus .slide-title,
#image-slider-1b .slide-link:active .slide-title {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
#image-slider-1b .slide-indicators {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
}
#image-slider-1b a.slide-btn {
  color: #fff;
  font-size: 34px;
  margin: 0 4px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#image-slider-1b .slide-btn.active,
#image-slider-1b a.slide-btn:hover {
  color: var(--allPagesPrimaryColor, #578dc9);
  cursor: pointer;
}
#image-slider-1b svg {
  -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
          filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}
#image-slider-1b .previous-btn,
.next-btn {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 0;
  bottom: 0;
  width: 65px;
  cursor: pointer;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
#image-slider-1b .previous-btn:hover,
#image-slider-1b .next-btn:hover {
  background: rgb(0 0 0 / 26%);
}
#image-slider-1b .previous-btn {
  left: 0;
}
#image-slider-1b .next-btn {
  right: 0;
}

/***** MOBILE VIEW *****/
/* Break point 1 */
#image-slider-1b.BP1 .text-area {
  margin: 0 90px;
}
#image-slider-1b.BP1 .slide-title {
  font-size: 20px;
}
/* Break point 2 */
#image-slider-1b.BP2 .text-area {
  margin: 0 65px;
}
#image-slider-1b.BP2 .slide-title {
  font-size: 20px;
}

</style>

<div id="image-slider-1b" data-observe-resizes data-breakpoints='{"BP1":760,"BP2":530}'>
  <div class="slide-viewer">
    <div class="slide-group">

<%

  def currentPageData = uicomponent.getCurrentPageData();

  for (def i = 0; i < currentPageData.size(); i++) {

  def viewNode = currentPageData.get(i);

  if(!Utils.isViewable(viewNode)) continue;
  def isShowTitle = uicomponent.isShowField(UICLVPortlet.PREFERENCE_SHOW_TITLE);
  def isShowDate = uicomponent.isShowField(UICLVPortlet.PREFERENCE_SHOW_DATE_CREATED);
  def isShowLink = uicomponent.isShowField(UICLVPortlet.PREFERENCE_SHOW_LINK);
  def isShowReadmore = uicomponent.isShowField(UICLVPortlet.PREFERENCE_SHOW_READMORE);

  def newsTitle = "";

  StringBuilder newsUrl = new StringBuilder("");
  if (viewNode.hasProperty("exo:activities")) {
    def newsActivityId =  viewNode.getProperty("exo:activities").getString().split(";")[0].split(":")[1];
    Space newsPostedInSpace = spaceService.getSpaceById( viewNode.getProperty("exo:activities").getString().split(";")[0].split(":")[0]);
    def portalName = PortalContainer.getCurrentPortalContainerName();
    def portalOwner = CommonsUtils.getCurrentPortalOwner();
    def currentUsername = newsService.getCurrentIdentity().getUserId();
    if (spaceService.isMember(newsPostedInSpace, currentUsername)) {
      newsUrl.append("/").append(portalName).append("/").append(portalOwner).append("/activity?id=").append(newsActivityId);
    } else {
      newsUrl.append("/").append(portalName).append("/").append(portalOwner).append("/news/detail?content-id=").append(newsService.getPath(viewNode));
    }
  }
  def itemLink = newsUrl.toString();

  def newsPostedDate = "";
  if(viewNode.hasProperty("publication:liveDate")) {
    def postedDate = LocalDateTime.ofInstant(viewNode.getProperty("publication:liveDate").getDate().toInstant(), TimeZone.getDefault().toZoneId());
    newsPostedDate = postedDate.format(mediumDateFormat);
  }

  def isShowImage = uicomponent.isShowField(UICLVPortlet.PREFERENCE_SHOW_ILLUSTRATION);
  def imgSrc;
  if(isShowImage) {
    if(viewNode.hasNode("illustration")) {
      def imageNode = viewNode.getNode("illustration");
      imgSrc = WCMCoreUtils.generateImageURI(imageNode, null);
    } else {
      imgSrc = '/news/images/newsImageDefault.png';
    }
  }

  def itemName = viewNode.getName();
  def itemTitle = uicomponent.getTitle(viewNode);

  if(viewNode.hasProperty("exo:title")) {
    newsTitle = StringEscapeUtils.escapeHtml(viewNode.getProperty("exo:title").getString());
  }

  def newsBody = "";
  if(viewNode.hasProperty("exo:body")) {
    newsBody = viewNode.getProperty("exo:body").getString();
    newsBody = new HtmlCleaner().clean(newsBody).getText();
  }

  def itemOwner = "";
  if(viewNode.hasProperty("exo:author")) {
    itemOwner = viewNode.getProperty("exo:author").getString();
    itemOwner = getProfileFullName(itemOwner);
  }

  def itemSummary = StringEscapeUtils.escapeHtml(uicomponent.getSummary(viewNode));
  def itemSummaryField = uicomponent.getSummaryField(viewNode);
  def isShowSummary = uicomponent.isShowField(UICLVPortlet.PREFERENCE_SHOW_SUMMARY) && itemSummary != null;

  repo = ((ManageableRepository)viewNode.getSession().getRepository()).getConfiguration().getName();
  workspace = viewNode.getSession().getWorkspace().getName();
  uuid = viewNode.getUUID();

%>

      <div class="slide" id="slide-$uuid">
        <a class="slide-link" target="_self" href="$itemLink">
          <img class="slide-image" src="$imgSrc">
          <div class="text-area">
            <span class="slide-title">$newsTitle</span>
          </div>
        </a>
      </div>

    <%
    }
  }
  %>
  	</div>
  </div>
  <div class="slide-indicators"></div>
  <div class="previous-btn" title="Previous">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="65px" height="65px" viewBox="-11 -11.5 65 66">
      <path fill="#fff" d="M25.43,33.243L14.628,22.429c-0.433-0.432-0.433-1.132,0-1.564L25.43,10.051c0.432-0.432,1.132-0.432,1.563,0	c0.431,0.431,0.431,1.132,0,1.564L16.972,21.647l10.021,10.035c0.432,0.433,0.432,1.134,0,1.564	c-0.215,0.218-0.498,0.323-0.78,0.323C25.929,33.569,25.646,33.464,25.43,33.243z" />
    </svg>
  </div>
  <div class="next-btn" title="Next">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="65px" height="65px" viewBox="-11 -11.5 65 66">
      <path fill="#fff" d="M18.022,33.569c 0.282,0-0.566-0.105-0.781-0.323c-0.432-0.431-0.432-1.132,0-1.564l10.022-10.035 			L17.241,11.615c 0.431-0.432-0.431-1.133,0-1.564c0.432-0.432,1.132-0.432,1.564,0l10.803,10.814c0.433,0.432,0.433,1.132,0,1.564 L18.805,33.243C18.59,33.464,18.306,33.569,18.022,33.569z" />
    </svg>
  </div>
</div>

<script>
// Animate slides and enable slide buttons and indicators

require(['SHARED/jquery'], function(jquery) {

	jquery('#image-slider-1b').each(function() {
	  var slider = jquery('#image-slider-1b');
	  var group = slider.find('.slide-group');
	  var slides = slider.find('.slide');
	  var bulletArray = [];
	  var currentIndex = 0;
	  var timeout;
	  
	  function move(newIndex) {
	    var animateLeft, slideLeft;
	    
	    advance();
	    
	    if (group.is(':animated') || currentIndex === newIndex) {
	      return;
	    }
	    
	    bulletArray[currentIndex].removeClass('active');
	    bulletArray[newIndex].addClass('active');
	    
	    if (newIndex > currentIndex) {
	      slideLeft = '100%';
	      animateLeft = '-100%';
	    } else {
	      slideLeft = '-100%';
	      animateLeft = '100%';
	    }
	    
	    slides.eq(newIndex).css({
	      display: 'block',
	      left: slideLeft
	    });
	    group.animate({
	      left: animateLeft
	    }, function() {
	      slides.eq(currentIndex).css({
	        display: 'none'
	      });
	      slides.eq(newIndex).css({
	        left: 0
	      });
	      group.css({
	        left: 0
	      });
	      currentIndex = newIndex;
	    });
	  }
	  
	  function advance() {
	    clearTimeout(timeout);
	    timeout = setTimeout(function() {
	      if (currentIndex < (slides.length - 1)) {
	        move(currentIndex + 1);
	      } else {
	        move(0);
	      }
	    }, 10000);  // <-- Slide speed in milliseconds. Adjust as needed.
	  }
	  
	  jquery('#image-slider-1b .next-btn').on('click', function() {
	    if (currentIndex < (slides.length - 1)) {
	      move(currentIndex + 1);
	    } else {
	      move(0);
	    }
	  });
	  
	  jquery('#image-slider-1b .previous-btn').on('click', function() {
	    if (currentIndex !== 0) {
	      move(currentIndex - 1);
	    } else {
	      move(0);
	    }
	  });
	  
	  jquery.each(slides, function(index) {
	    var button = jquery('<a class="slide-btn">&bull;</a>');
	    if (index === currentIndex) {
	      button.addClass('active');
	    }
	    button.on('click', function() {
	      move(index);
	    }).appendTo('#image-slider-1b .slide-indicators');
	    bulletArray.push(button);
	  });
	  
	  advance();

	});
});

// A solution for enabling responsive containers (container queries)
// Source and explanation: https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/

// Only run if ResizeObserver is supported.
if ('ResizeObserver' in self) {
  // Create a single ResizeObserver instance to handle all
  // container elements. The instance is created with a callback,
  // which is invoked as soon as an element is observed as well
  // as any time that element's size changes.
  var ro = new ResizeObserver(function(entries) {
    // Default breakpoints that should apply to all observed
    // elements that don't define their own custom breakpoints.
    var defaultBreakpoints = {SM: 384, MD: 576, LG: 768, XL: 960};

    entries.forEach(function(entry) {
      // If breakpoints are defined on the observed element,
      // use them. Otherwise use the defaults.
      var breakpoints = entry.target.dataset.breakpoints ?
          JSON.parse(entry.target.dataset.breakpoints) :
          defaultBreakpoints;

      // Update the matching breakpoints on the observed element.
      Object.keys(breakpoints).forEach(function(breakpoint) {
        var maxWidth = breakpoints[breakpoint];
        if (entry.contentRect.width <= maxWidth) {
          entry.target.classList.add(breakpoint);
        } else {
          entry.target.classList.remove(breakpoint);
        }
      });
    });
  });

  // Find all elements with the `data-observe-resizes` attribute
  // and start observing them.
  var elements = document.querySelectorAll('[data-observe-resizes]');
  for (var element, i = 0; element = elements[i]; i++) {
    ro.observe(element);
  }
}

</script>