Added newsrooms resources logic and templates

js/solstice/eclipsefdn.newsroom-resources.js

+/*!
+ * Copyright (c) 2022 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ *   Zhou Fang <zhou.fang@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import templateResourceList from './templates/newsroom-resources/resources-list.mustache';
+import templateResourceImage from './templates/newsroom-resources/resources-image.mustache';
+import templateResourceImageWithTitle from './templates/newsroom-resources/resources-image-with-title.mustache';
+import parse from 'parse-link-header';
+import { displayErrMsg } from '../utils/utils';
+
+const eclipseFdnResources = (async () => {
+  const resourcesElements = document.querySelectorAll('.newsroom-resources');
+  if (!resourcesElements || resourcesElements.length === 0) {
+    return;
+  }
+
+  const resLink = function (linkType, item) {
+    let linkObj = { link: '', icon: '', type: '' };
+    if (linkType === 'direct') {
+      return item.direct_link
+        ? (linkObj = { link: item.direct_link || '', icon: 'pdf', type: 'PDF' })
+        : (linkObj = { link: item.landing_link || '', icon: 'text', type: 'HTML' });
+    }
+    return item.landing_link
+      ? (linkObj = { link: item.landing_link || '', icon: 'text', type: 'HTML' })
+      : (linkObj = { link: item.direct_link || '', icon: 'pdf', type: 'PDF' });
+  };
+
+  resourcesElements.forEach(async (resourcesElement) => {
+    let hasError = false;
+    const titles = resourcesElement.getAttribute('data-res-title')?.replaceAll(', ', ',')?.split(',');
+    const resourceTypes = resourcesElement.getAttribute('data-res-type')?.replaceAll(', ', ',')?.split(',');
+    const viewMoreLinks = resourcesElement.getAttribute('data-res-view-more')?.replaceAll(', ', ',')?.split(',');
+    let resourcesData = [];
+    titles.forEach((title, index) => {
+      resourcesData.push({
+        title,
+        resourceType: resourceTypes[index],
+        viewMoreLink: viewMoreLinks?.[index],
+        data: [],
+        isFetching: true,
+      });
+    });
+
+    const formatDate = function () {
+      let theDate = new Date(this.date).toDateString();
+      theDate = theDate.slice(0, 3) + ',' + theDate.slice(3);
+      return theDate;
+    };
+
+    const displayDataOnPage = (data) => {
+      switch (resourcesElement.getAttribute('data-res-template')) {
+        case 'list':
+          resourcesElement.innerHTML = templateResourceList({
+            items: data,
+            resLink: function () {
+              return resLink(resourcesElement.getAttribute('data-res-link'), this);
+            },
+          });
+          break;
+        case 'image':
+          const skipItems = resourcesElement.getAttribute('data-res-skip');
+          if (skipItems) {
+            data.forEach((item) => item.data.splice(0, skipItems));
+          }
+          resourcesElement.innerHTML = templateResourceImage({
+            items: data,
+            resClass: resourcesElement.getAttribute('data-res-class'),
+            resLink: function () {
+              return resLink(resourcesElement.getAttribute('data-res-link'), this);
+            },
+          });
+          break;
+        case 'image-with-title':
+          resourcesElement.innerHTML = templateResourceImageWithTitle({
+            items: data,
+            resClass: resourcesElement.getAttribute('data-res-class'),
+            resLink: function () {
+              return resLink(resourcesElement.getAttribute('data-res-link'), this);
+            },
+            formatDate,
+          });
+          break;
+        default:
+          break;
+      }
+    };
+
+    const fetchWithPagination = async (resource, index) => {
+      let data = [];
+      const pagesizeAttribute = resourcesElement.getAttribute('data-res-limit');
+      const pagesize = pagesizeAttribute || 100;
+      let url = `https://newsroom.eclipse.org/api/resources?pagesize=${pagesize}&parameters[publish_to]=${resourcesElement.getAttribute(
+        'data-res-wg'
+      )}&parameters[resource_type][]=${resource.resourceType}&page=1`;
+      const getData = async () => {
+        try {
+          let response = await fetch(url);
+          if (response.ok) {
+            let newData = await response.json();
+            data = [...data, ...newData.resources];
+            const links = parse(response.headers.get('link'));
+            if (links?.next?.url && !pagesizeAttribute) {
+              url = links.next.url;
+              await getData();
+            }
+            return;
+          }
+          hasError = true;
+          displayErrMsg(resourcesElement, response.status);
+        } catch (error) {
+          console.log(error);
+          hasError = true;
+          displayErrMsg(resourcesElement, error);
+        }
+      };
+
+      await getData();
+
+      if (hasError) {
+        return;
+      }
+      resourcesData[index] = { ...resourcesData[index], isFetching: false, data };
+    };
+
+    resourcesElement.innerHTML = templateResourceList({
+      items: resourcesData,
+    });
+
+    await Promise.all(resourcesData.map((item, index) => fetchWithPagination(item, index)));
+
+    if (hasError) {
+      return;
+    }
+    displayDataOnPage(resourcesData);
+  });
+})();
+
+export default eclipseFdnResources;

js/solstice/index.js

@@ -23,3 +23,4 @@ import './eclipsefdn.solstice-rss-blog-list';
 import './eclipsefdn.solstice-slider';
 import './eclipsefdn.time-conversion';
 import './eclipsefdn.wgs-list.js'
+import './eclipsefdn.newsroom-resources.js'

js/solstice/templates/newsroom-resources/resources-image-with-title.mustache

+{{#items}}
+  <h2 class="margin-bottom-30">{{title}}</h2>
+  <div class="resources each-resource row">
+  {{#isFetching}}
+    <div class="margin-left-30">
+      <i class="fa fa-spinner fa-pulse fa-2x fa-fw margin-20"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+  {{/isFetching}}
+  {{^isFetching}}
+    {{#data}}
+      <div class="{{resClass}}">
+        <div class="resources-summary">
+          <a class="resources-summary-img text-center" href="{{resLink.link}}">
+            <img src="{{image}}" alt="Cover of {{title}}">
+          </a>
+          <h4 class="resources-summary-heading"><a href="{{resLink.link}}">{{title}}</a></h4>
+          <p class="resources-summary-date">{{formatDate}}</p>
+          <p class="margin-top-10">
+            <a href="{{resLink.link}}"><i class="fa fa-file-{{resLink.icon}}-o" aria-hidden="true"></i><span class="sr-only">{{resLink.type}} Link</span></a>
+         </p>
+        </div>
+      </div>
+    {{/data}}
+  {{/isFetching}}
+  {{#viewMoreLink}}
+    <p class="col-sm-24 text-right resources-more"><a href="{{viewMoreLink}}">View More</a></p>
+  {{/viewMoreLink}}
+  </div>
+{{/items}}

js/solstice/templates/newsroom-resources/resources-image.mustache

+{{#items}}
+  {{#isFetching}}
+    <div class="margin-left-30">
+      <i class="fa fa-spinner fa-pulse fa-2x fa-fw margin-20"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+  {{/isFetching}}
+  {{^isFetching}}
+    {{#data}}
+      <div class="{{resClass}}">
+          <a class="image-container" aria-label="download {{title}}" href="{{resLink.link}}">
+            <img class="cover" alt="Cover of {{title}}" src="{{image}}">
+          </a>
+          <a class="btn btn-primary success-stories-download" aria-label="download {{title}}" href="{{resLink.link}}">
+            Download
+          </a>
+      </div>
+    {{/data}}
+  {{/isFetching}}
+{{/items}}

js/solstice/templates/newsroom-resources/resources-list.mustache

+{{#items}}
+  <h2>{{title}}</h2>
+  {{#isFetching}}
+    <div class="margin-left-30">
+      <i class="fa fa-spinner fa-pulse fa-2x fa-fw margin-20"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+  {{/isFetching}}
+  {{^isFetching}}
+    <ul>
+      {{#data}}
+        <li>
+          <a href="{{resLink.link}}">{{title}}</a>
+        </li>
+      {{/data}}
+    </ul>
+  {{/isFetching}}
+{{/items}}