Featured articles mosaic 1d.gtmpl

<%
/**
* DESCRIPTION: a CLV (Content List or Content by Query portlet) template for displaying eXo Platform news articles.
* DATE: April 2021
* AUTHOR: Marwen Mema (marwenmema@gmail.com)
* CLV DISPLAY PARAMETERS: You can activate/deactivate "Show header" parameter and fill out the header name field in your CLV display settings. You can also activate/deactivate the "Show date" parameter. The remaining parameters can be ignored as they are not taken into account.
**/

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">

#featured-articles-mosaic-2b {
  overflow: hidden;
  margin: 0 0 20px 0;  /* <-- Adjust this margin if needed */
}
#featured-articles-mosaic-2b .header-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-weight: 400;
  letter-spacing: .033em;
  text-transform: uppercase;
  padding: 0 10px;
}
#featured-articles-mosaic-2b .header-txt {
  font-size: 16px;
  color: #9e9e9e;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  padding: 16px 0;
}
#featured-articles-mosaic-2b .seeAll-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #f5f5f5;
  height: 28px;
  width: auto;
  margin-top: 12px;
  padding: 0 12.4px;
  border-radius: 4px;
  text-decoration: none;
}
#featured-articles-mosaic-2b .seeAll-btn:hover {
  background-color: #eeeeee;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
}
#featured-articles-mosaic-2b .seeAll-btn-text {
  font-size: 12px;
  color: #9e9e9e;
  text-transform: uppercase;
}
#featured-articles-mosaic-2b .mosaic-container {
  display: -ms-grid;
  display: grid;
  gap: 2px;
  height: 335px;
  overflow: hidden;
}
#featured-articles-mosaic-2b .article {
  position: relative;
  overflow: hidden;
}
#featured-articles-mosaic-2b .article:nth-child(1) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
}
#featured-articles-mosaic-2b .titleArea {
  position: absolute;
  bottom: 0;
  margin: 15px;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: white;
  text-shadow: 0 0 4px rgb(0 0 0 / 86%);
  line-height: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
#featured-articles-mosaic-2b .article:nth-child(1) .titleArea {
  font-size: 23px;
  font-weight: 600;
  line-height: 27px;
  -webkit-line-clamp: 5;
}
#featured-articles-mosaic-2b .article:nth-child(2) {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}
#featured-articles-mosaic-2b .article:nth-child(n + 2) .titleArea {
  -webkit-line-clamp: 5;
}
#featured-articles-mosaic-2b .article:nth-child(3) {
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4 / 5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}
#featured-articles-mosaic-2b .article:nth-child(n + 6) {
  display: none;
}
#featured-articles-mosaic-2b a {
  height: 100%;
  width: 100%;
}
#featured-articles-mosaic-2b .article img {
  max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 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.61);
  filter: brightness(0.61);
}
#featured-articles-mosaic-2b .article:hover img {
  -webkit-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
  -webkit-filter: brightness(0.3);
  filter: brightness(0.3);
}
#featured-articles-mosaic-2b .articlePreTitle {
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 6px;
}

/****** MOBILE VIEW ******/
/* Break point 1 */
#featured-articles-mosaic-2b.BP1 .article:nth-child(2) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
}
#featured-articles-mosaic-2b.BP1 .article:nth-child(3) {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
}
#featured-articles-mosaic-2b.BP1 .mosaic-container {
  height: 700px;
}
/* Break point 2 */
#featured-articles-mosaic-2b.BP2 .article:nth-child(2) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
}
#featured-articles-mosaic-2b.BP2 .article:nth-child(3) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / 5;
}
#featured-articles-mosaic-2b.BP2 .article:nth-child(n + 4) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}
#featured-articles-mosaic-2b.BP2 .article:nth-child(n + 2) .titleArea {
  -webkit-line-clamp: 4;
}

</style>

<div id="featured-articles-mosaic-2b" data-observe-resizes data-breakpoints='{"BP1":650,"BP2":470}'>

  <%
  def header = uicomponent.getHeader();
  def isShowHeader = uicomponent.isShowField(UICLVPortlet.PREFERENCE_SHOW_HEADER) && header != null && header.trim().length() != 0;
  if (isShowHeader) {
  %>
  <div class="header-area">
    <div class="header-txt">$header</div>
    <a class="seeAll-btn" target="_self" href="/portal/dw/news">
      <%
      def seeAllBtn = "";
      if (language.equals("fr")) {
        seeAllBtn = "Voir tout";
      } else if (language.equals("de")) {
        seeAllBtn = "Alles sehen";
      } else if (language.equals("es")) {
        seeAllBtn = "Ver todo";
      } else if (language.equals("it")) {
        seeAllBtn = "Vedi tutto";
      } else if (language.equals("pt")) {
        seeAllBtn = "Ver tudo";
      } else if (language.equals("ru")) {
        seeAllBtn = "Увидеть все";
      } else if (language.equals("ar")) {
        seeAllBtn = "إظهار الكل";
      } else {
        seeAllBtn = "See all";
      }
      %>
      <div class="seeAll-btn-text">$seeAllBtn</div>
    </a>
  </div>
  <style type="text/css">
    #featured-articles-mosaic-2b {
      background: white;
    }
    #featured-articles-mosaic-2b .mosaic-container {
      padding: 0 10px 10px;
    }
  </style>
  <%
  }
  %>

  <div class="mosaic-container">

<%

  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="article">
      <a class="articleLink" target="_self" href="$itemLink">
        <img src="$imgSrc">
        <div class="titleArea">
          <%
          if (isShowDate) {
          %>
          <div class="articlePreTitle">$newsPostedDate</div>
          <%
            }
          %>
          <div class="articleTitle">$newsTitle</div>
        </div>
      </a>
    </div>

    <%
    }
  }
  %>

  </div>
</div>

<script>
  // 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>