@aarhus-university/au-lib-react-components 9.11.19 → 9.12.0

package/src/components/news/NewsListComponent.js

@@ -1,291 +1,291 @@
-/* eslint-env browser */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import EventLayout1Component from './EventLayout1Component';
-import EventLayout2Component from './EventLayout2Component';
-import EventLayout3Component from './EventLayout3Component';
-import NewsLayout1Component from './NewsLayout1Component';
-import NewsLayout2Component from './NewsLayout2Component';
-import NewsLayout3Component from './NewsLayout3Component';
-import NewsLayout4Component from './NewsLayout4Component';
-import NewsLayout5Component from './NewsLayout5Component';
-import NewsLayout6Component from './NewsLayout6Component';
-import NewsLayout7Component from './NewsLayout7Component';
-import NewsLayout8Component from './NewsLayout8Component';
-import NewsColumnsComponent from './NewsColumnsComponent';
-import NewsRSSComponent from './NewsRSSComponent';
-import AUSpinnerComponent from '../AUSpinnerComponent';
-import { newsLabels as labels } from '../../lib/i18n';
-import { AUNewsConfig } from '../../lib/au-news';
-
-class NewsListComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.pointer = -1;
-    this.layouts = [
-      <NewsLayout1Component />,
-      <NewsLayout2Component />,
-      <NewsLayout3Component />,
-      <NewsLayout4Component />,
-      <NewsLayout5Component />,
-      <NewsLayout6Component />,
-      <NewsLayout7Component />,
-      <NewsLayout8Component />,
-    ];
-
-    this.layoutsEvents = [
-      <EventLayout1Component />,
-      <EventLayout2Component />,
-      <EventLayout3Component />,
-    ];
-
-    const { list, elements } = props;
-
-    this.state = {
-      loading: true,
-      more: !list.noPageBrowser,
-      items: [],
-      elements,
-    };
-
-    this.handleLoadMore = this.handleLoadMore.bind(this);
-    this.incrementPointer = this.incrementPointer.bind(this);
-  }
-
-  componentDidMount() {
-    this.setHeader();
-  }
-
-  getItems(index, amount, callback) {
-    const { list, lang } = this.props;
-    const url = `${AUNewsConfig.server}/index.php?eID=getAuNewsFeed&mode=key&key=${list.feed_key}&index=${index}&amount=${(amount + (list.noPageBrowser === 0 ? 1 : 0))}&lang=${lang}${list.extra_param}&callback=?`;
-
-    // Axios does not support JSONP requests!
-    $.ajax({
-      url,
-      dataType: 'json',
-      jsonpCallback: url.hashCode(),
-      jsonp: true,
-      cache: true,
-      success: (items) => {
-        callback(items, items.length > amount && list.noPageBrowser === 0);
-      },
-    });
-  }
-
-  setHeader() {
-    const { list } = this.props;
-    list.header = document.querySelector(`#c${list.id} .csc-header h1`);
-    if (!list.header) {
-      list.header = document.querySelector(`#c${list.id} .csc-header h2`);
-    }
-    if (list.header) {
-      list.header.parentNode.classList.add('relative');
-    }
-  }
-
-  incrementPointer() {
-    // "Global" pointer til at holde styr på, hvor langt vi er nået igennem data
-    // til de forskellige elementer
-    this.pointer += 1;
-  }
-
-  handleLoadMore(e) {
-    e.preventDefault();
-    this.setState({
-      loading: true,
-    });
-
-    const { elements } = this.props;
-    let lastElement = elements[elements.length - 1];
-    if (Array.isArray(lastElement)) {
-      const temp = lastElement[lastElement.length - 1];
-      if (Array.isArray(temp)) {
-        lastElement = temp[temp.length - 1];
-      } else {
-        lastElement = temp;
-      }
-    }
-
-    const amount = 10;
-    const newElements = [];
-    for (let i = 0; i < amount; i += 1) {
-      newElements.push(lastElement);
-    }
-
-    const { items, elements: sElements } = this.state;
-    this.getItems(items.length - 1, amount, (_items, more) => {
-      this.setState({
-        items: items.slice(0, items.length - 1).concat(_items),
-        elements: sElements.concat(newElements),
-        loading: false,
-        more,
-      });
-    });
-  }
-
-  render() {
-    this.pointer = -1;
-    const {
-      list,
-      elements: pElements,
-      lang,
-      setItem,
-    } = this.props;
-    const {
-      items,
-      elements,
-      loading,
-      more,
-    } = this.state;
-    let isHeader = false;
-    const headerElementValue = list.feed_type === 'events' ? 3 : 6;
-    const renderElements = elements.map((e, j) => {
-      const key = j;
-      // Kolonne
-      if (Array.isArray(e)) {
-        let length = 0;
-        for (let i = 0; i < e.length; i += 1) {
-          for (let n = 0; n < e[i].length; n += 1) {
-            this.incrementPointer();
-            length += 1;
-          }
-        }
-
-        return (
-          <NewsColumnsComponent
-            key={key}
-            type={list.feed_type}
-            listid={list.id}
-            cols={e}
-            items={items.slice(j, j + length)}
-            setPopupItem={setItem}
-            incrementPointer={this.incrementPointer}
-            lang={lang}
-          />
-        );
-      }
-
-      // Ikke-kolonne
-      const element = parseInt(e, 10);
-      if (element === headerElementValue && !isHeader) {
-        isHeader = true;
-        const hItems = [];
-        for (let x = j; x < items.length; x += 1) {
-          // Høker-hack-fix af load more ved listevisning
-          // jf. FB84396 - der er givetvis stadig et issue, hvis listerne ligger i en kolonne...
-          if (parseInt(pElements[x], 10) === headerElementValue
-            || (!Number.isNaN(pElements[x]) && items.length - pElements.length > 2)) {
-            this.incrementPointer();
-            hItems.push(items[this.pointer]);
-          } else {
-            break;
-          }
-        }
-
-        if (list.feed_type === 'events') {
-          return (
-            <EventLayout3Component
-              key={key}
-              listid={list.id}
-              items={hItems}
-              setPopupItem={setItem}
-              lang={lang}
-            />
-          );
-        }
-
-        return (
-          <NewsLayout6Component
-            key={key}
-            listid={list.id}
-            items={hItems}
-            setPopupItem={setItem}
-            lang={lang}
-          />
-        );
-      }
-
-      if (element !== headerElementValue) {
-        this.incrementPointer();
-        isHeader = false;
-        const layoutsArray = list.feed_type === 'events' ? this.layoutsEvents : this.layouts;
-        return React.cloneElement(layoutsArray[element - 1], {
-          key,
-          item: items[this.pointer],
-          listid: list.id,
-          setPopupItem: setItem,
-          lang,
-        });
-      }
-
-      return null;
-    });
-
-    let syndication = null;
-    const syndicationNode = document.querySelector(`#c${list.id} .csc-header`);
-    if (syndicationNode && AUNewsConfig.useSyndication && list.feed_type !== 'events') {
-      syndication = ReactDOM.createPortal(
-        <NewsRSSComponent
-          url={`http:${AUNewsConfig.server}/index.php?eID=getAuNewsFeed&mode=xml&key=${list.feed_key}&lang=${lang}`}
-          lang={lang}
-        />,
-        syndicationNode,
-        '2',
-      );
-    }
-
-    return [
-      <div key={0}>
-        {renderElements}
-        {(() => {
-          if (more) {
-            return (
-              <button
-                type="button"
-                onClick={this.handleLoadMore}
-                className="button small"
-              >
-                {labels[lang].news.listLoadMore}
-              </button>
-            );
-          }
-          return null;
-        })()}
-      </div>,
-      <AUSpinnerComponent
-        key={1}
-        domID={`news-spinner-${list.id}`}
-        loaded={!loading}
-        loadingCondition={loading}
-        onLoad={() => {
-          this.getItems(0, list.amount, (_items, _more) => {
-            this.setState({ items: _items, loading: false, more: _more });
-          });
-        }}
-        content={<div />}
-      />,
-      syndication,
-    ];
-  }
-}
-
-NewsListComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  list: PropTypes.shape({
-    feed_key: PropTypes.string.isRequired,
-    noPageBrowser: PropTypes.bool.isRequired,
-    id: PropTypes.number.isRequired,
-    amount: PropTypes.number.isRequired,
-    extra_param: PropTypes.string.isRequired,
-    header: PropTypes.instanceOf(Element).isRequired,
-    feed_type: PropTypes.string.isRequired,
-  }).isRequired,
-  elements: PropTypes.arrayOf(PropTypes.number).isRequired,
-  setItem: PropTypes.func.isRequired,
-};
-
-NewsListComponent.displayName = 'NewsListComponent';
-export default NewsListComponent;
+/* eslint-env browser */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import EventLayout1Component from './EventLayout1Component';
+import EventLayout2Component from './EventLayout2Component';
+import EventLayout3Component from './EventLayout3Component';
+import NewsLayout1Component from './NewsLayout1Component';
+import NewsLayout2Component from './NewsLayout2Component';
+import NewsLayout3Component from './NewsLayout3Component';
+import NewsLayout4Component from './NewsLayout4Component';
+import NewsLayout5Component from './NewsLayout5Component';
+import NewsLayout6Component from './NewsLayout6Component';
+import NewsLayout7Component from './NewsLayout7Component';
+import NewsLayout8Component from './NewsLayout8Component';
+import NewsColumnsComponent from './NewsColumnsComponent';
+import NewsRSSComponent from './NewsRSSComponent';
+import AUSpinnerComponent from '../AUSpinnerComponent';
+import { newsLabels as labels } from '../../lib/i18n';
+import { AUNewsConfig } from '../../lib/au-news';
+
+class NewsListComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.pointer = -1;
+    this.layouts = [
+      <NewsLayout1Component />,
+      <NewsLayout2Component />,
+      <NewsLayout3Component />,
+      <NewsLayout4Component />,
+      <NewsLayout5Component />,
+      <NewsLayout6Component />,
+      <NewsLayout7Component />,
+      <NewsLayout8Component />,
+    ];
+
+    this.layoutsEvents = [
+      <EventLayout1Component />,
+      <EventLayout2Component />,
+      <EventLayout3Component />,
+    ];
+
+    const { list, elements } = props;
+
+    this.state = {
+      loading: true,
+      more: !list.noPageBrowser,
+      items: [],
+      elements,
+    };
+
+    this.handleLoadMore = this.handleLoadMore.bind(this);
+    this.incrementPointer = this.incrementPointer.bind(this);
+  }
+
+  componentDidMount() {
+    this.setHeader();
+  }
+
+  getItems(index, amount, callback) {
+    const { list, lang } = this.props;
+    const url = `${AUNewsConfig.server}/index.php?eID=getAuNewsFeed&mode=key&key=${list.feed_key}&index=${index}&amount=${(amount + (list.noPageBrowser === 0 ? 1 : 0))}&lang=${lang}${list.extra_param}&callback=?`;
+
+    // Axios does not support JSONP requests!
+    $.ajax({
+      url,
+      dataType: 'json',
+      jsonpCallback: url.hashCode(),
+      jsonp: true,
+      cache: true,
+      success: (items) => {
+        callback(items, items.length > amount && list.noPageBrowser === 0);
+      },
+    });
+  }
+
+  setHeader() {
+    const { list } = this.props;
+    list.header = document.querySelector(`#c${list.id} .csc-header h1`);
+    if (!list.header) {
+      list.header = document.querySelector(`#c${list.id} .csc-header h2`);
+    }
+    if (list.header) {
+      list.header.parentNode.classList.add('relative');
+    }
+  }
+
+  incrementPointer() {
+    // "Global" pointer til at holde styr på, hvor langt vi er nået igennem data
+    // til de forskellige elementer
+    this.pointer += 1;
+  }
+
+  handleLoadMore(e) {
+    e.preventDefault();
+    this.setState({
+      loading: true,
+    });
+
+    const { elements } = this.props;
+    let lastElement = elements[elements.length - 1];
+    if (Array.isArray(lastElement)) {
+      const temp = lastElement[lastElement.length - 1];
+      if (Array.isArray(temp)) {
+        lastElement = temp[temp.length - 1];
+      } else {
+        lastElement = temp;
+      }
+    }
+
+    const amount = 10;
+    const newElements = [];
+    for (let i = 0; i < amount; i += 1) {
+      newElements.push(lastElement);
+    }
+
+    const { items, elements: sElements } = this.state;
+    this.getItems(items.length - 1, amount, (_items, more) => {
+      this.setState({
+        items: items.slice(0, items.length - 1).concat(_items),
+        elements: sElements.concat(newElements),
+        loading: false,
+        more,
+      });
+    });
+  }
+
+  render() {
+    this.pointer = -1;
+    const {
+      list,
+      elements: pElements,
+      lang,
+      setItem,
+    } = this.props;
+    const {
+      items,
+      elements,
+      loading,
+      more,
+    } = this.state;
+    let isHeader = false;
+    const headerElementValue = list.feed_type === 'events' ? 3 : 6;
+    const renderElements = elements.map((e, j) => {
+      const key = j;
+      // Kolonne
+      if (Array.isArray(e)) {
+        let length = 0;
+        for (let i = 0; i < e.length; i += 1) {
+          for (let n = 0; n < e[i].length; n += 1) {
+            this.incrementPointer();
+            length += 1;
+          }
+        }
+
+        return (
+          <NewsColumnsComponent
+            key={key}
+            type={list.feed_type}
+            listid={list.id}
+            cols={e}
+            items={items.slice(j, j + length)}
+            setPopupItem={setItem}
+            incrementPointer={this.incrementPointer}
+            lang={lang}
+          />
+        );
+      }
+
+      // Ikke-kolonne
+      const element = parseInt(e, 10);
+      if (element === headerElementValue && !isHeader) {
+        isHeader = true;
+        const hItems = [];
+        for (let x = j; x < items.length; x += 1) {
+          // Høker-hack-fix af load more ved listevisning
+          // jf. FB84396 - der er givetvis stadig et issue, hvis listerne ligger i en kolonne...
+          if (parseInt(pElements[x], 10) === headerElementValue
+            || (!Number.isNaN(pElements[x]) && items.length - pElements.length > 2)) {
+            this.incrementPointer();
+            hItems.push(items[this.pointer]);
+          } else {
+            break;
+          }
+        }
+
+        if (list.feed_type === 'events') {
+          return (
+            <EventLayout3Component
+              key={key}
+              listid={list.id}
+              items={hItems}
+              setPopupItem={setItem}
+              lang={lang}
+            />
+          );
+        }
+
+        return (
+          <NewsLayout6Component
+            key={key}
+            listid={list.id}
+            items={hItems}
+            setPopupItem={setItem}
+            lang={lang}
+          />
+        );
+      }
+
+      if (element !== headerElementValue) {
+        this.incrementPointer();
+        isHeader = false;
+        const layoutsArray = list.feed_type === 'events' ? this.layoutsEvents : this.layouts;
+        return React.cloneElement(layoutsArray[element - 1], {
+          key,
+          item: items[this.pointer],
+          listid: list.id,
+          setPopupItem: setItem,
+          lang,
+        });
+      }
+
+      return null;
+    });
+
+    let syndication = null;
+    const syndicationNode = document.querySelector(`#c${list.id} .csc-header`);
+    if (syndicationNode && AUNewsConfig.useSyndication && list.feed_type !== 'events') {
+      syndication = ReactDOM.createPortal(
+        <NewsRSSComponent
+          url={`http:${AUNewsConfig.server}/index.php?eID=getAuNewsFeed&mode=xml&key=${list.feed_key}&lang=${lang}`}
+          lang={lang}
+        />,
+        syndicationNode,
+        '2',
+      );
+    }
+
+    return [
+      <div key={0}>
+        {renderElements}
+        {(() => {
+          if (more) {
+            return (
+              <button
+                type="button"
+                onClick={this.handleLoadMore}
+                className="button small"
+              >
+                {labels[lang].news.listLoadMore}
+              </button>
+            );
+          }
+          return null;
+        })()}
+      </div>,
+      <AUSpinnerComponent
+        key={1}
+        domID={`news-spinner-${list.id}`}
+        loaded={!loading}
+        loadingCondition={loading}
+        onLoad={() => {
+          this.getItems(0, list.amount, (_items, _more) => {
+            this.setState({ items: _items, loading: false, more: _more });
+          });
+        }}
+        content={<div />}
+      />,
+      syndication,
+    ];
+  }
+}
+
+NewsListComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  list: PropTypes.shape({
+    feed_key: PropTypes.string.isRequired,
+    noPageBrowser: PropTypes.bool.isRequired,
+    id: PropTypes.number.isRequired,
+    amount: PropTypes.number.isRequired,
+    extra_param: PropTypes.string.isRequired,
+    header: PropTypes.instanceOf(Element).isRequired,
+    feed_type: PropTypes.string.isRequired,
+  }).isRequired,
+  elements: PropTypes.arrayOf(PropTypes.number).isRequired,
+  setItem: PropTypes.func.isRequired,
+};
+
+NewsListComponent.displayName = 'NewsListComponent';
+export default NewsListComponent;