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

package/src/components/news/NewsPopUpComponent.js

@@ -1,591 +1,591 @@
-/* eslint-env browser */
-/* eslint jsx-a11y/no-noninteractive-tabindex: 0 */
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsLanguageChangeComponent from './NewsLanguageChangeComponent';
-import NewsSocialComponent from './NewsSocialComponent';
-import { newsLabels as labels } from '../../lib/i18n';
-import { AUNewsHelpers, AUNewsConfig } from '../../lib/au-news';
-
-const setFade = () => {
-  const fade = document.getElementById('fade');
-  if (fade) {
-    fade.style.display = 'block';
-    fade.style.opacity = 0.7;
-    fade.style.zIndex = 101;
-  }
-};
-
-class NewsPopUpComponent extends React.Component {
-  static getItem(id, lang, callback) {
-    const url = `${AUNewsConfig.server}/index.php?eID=getAuNewsFeed&mode=id&key=${id}&lang=${lang}&callback=?`;
-    // Axios does not support JSONP requests!
-    $.ajax({
-      url,
-      dataType: 'json',
-      jsonpCallback: url.hashCode(),
-      jsonp: true,
-      cache: true,
-      success: (data) => {
-        if (data && data.length === 1) {
-          if (typeof callback === 'function' && data[0].hidden !== '1') {
-            callback(data[0]);
-          }
-        }
-      },
-    });
-  }
-
-  static calculateHeight() {
-    if (document.querySelector('.au_news_popup') && !AU.helpers.isMobileDevice()) {
-      const element = document.querySelector('.au_news_popup');
-      const viewPortHeight = Math.max(
-        document.documentElement.clientHeight, window.innerHeight || 0,
-      );
-      const popupTop = getComputedStyle(element).top.replace('px', '');
-      const popupBottom = getComputedStyle(element).bottom.replace('px', '');
-      element.querySelector('.au_news_popup_inner').style.height = `${viewPortHeight - popupTop - popupBottom}px`;
-    }
-  }
-
-  constructor(props) {
-    super(props);
-
-    const { item } = props;
-    this.state = {
-      item,
-    };
-
-    this.posBeforeShow = 0;
-  }
-
-  componentDidMount() {
-    const {
-      item,
-      id,
-      lang,
-      print,
-    } = this.props;
-    const { item: sItem } = this.state;
-    if (item == null) {
-      NewsPopUpComponent.getItem(id, lang, (_item) => {
-        const trackerLink = `/virtual/news/${AUNewsHelpers.typeIdToText(_item.type)}/open-single/id-${_item.id}/${_item.permalink}`;
-        AU.tracking.trackSingle(trackerLink);
-        this.setState({
-          item: _item,
-        }, () => {
-          if (print) {
-            window.print();
-          }
-        });
-      });
-    }
-
-    setFade();
-    document.querySelector('.au_news_popup_inner').focus();
-    NewsPopUpComponent.calculateHeight();
-    if (sItem != null) {
-      // this.setDisqus();
-      NewsPopUpComponent.setLightBox();
-    }
-    this.posBeforeShow = document.documentElement.scrollTop === 0
-      ? document.body.scrollTop : document.documentElement.scrollTop;
-    document.querySelector('body').classList.add('news-overlay-open');
-    AU.resize.push(() => {
-      NewsPopUpComponent.calculateHeight();
-    });
-  }
-
-  componentDidUpdate() {
-    const { item } = this.state;
-    if (item != null) {
-      // this.setDisqus();
-      NewsPopUpComponent.setLightBox();
-      setFade();
-    }
-  }
-
-  componentWillUnmount() {
-    const fade = document.getElementById('fade');
-    if (fade) {
-      fade.style.display = 'none';
-      document.querySelector('body').style.overflowY = 'visible';
-      document.documentElement.scrollTop = this.posBeforeShow;
-      document.body.scrollTop = this.posBeforeShow;
-    }
-  }
-
-  setDisqus() {
-    const { item } = this.state;
-    window.disqus_url = item.permalink;
-    if (window.disqus_url !== '' && !item.comments_closed && item.id > 0) {
-      if (!window.disqus_loaded) {
-        $.getScript('//disqus.com/forums/rapexegesis/embed.js', () => {
-          window.disqus_loaded = true;
-        });
-      } else {
-        window.DISQUS.reset({
-          reload: true,
-        });
-      }
-    }
-  }
-
-  static setLightBox() {
-    $('.au_news_popup a[rel="lightbox"]').magnificPopup({
-      type: 'image',
-      gallery: {
-        enabled: true,
-      },
-      modal: false,
-    });
-  }
-
-  render() {
-    const { item } = this.state;
-    const { lang } = this.props;
-
-    let outerClassName = 'au_news_popup social';
-    if (AUNewsHelpers.isiPad()) {
-      outerClassName += ' ipad';
-    }
-
-    if (!item) {
-      return (
-        <div className={outerClassName}>
-          <div className="au_news_popup_inner" tabIndex="0" />
-        </div>
-      );
-    }
-
-    const additionalInfo = item.links.length > 0
-      || item.related.length > 0
-      || item.files.length > 0;
-    const renderCategories = null; /* item.categories ? item.categories.map(
-      (c, j) => (
-        <span key={c.category}>
-          {`${j === 0 ? '' : ', '} ${c.category}`}
-        </span>
-      ),
-    ) : ''; */
-
-    const printUrl = window.location.href.replace(window.location.hash, `?newsprint=true${window.location.hash}`);
-
-    return (
-      <div className="au_news_popup social">
-        <div className="au_news_popup_inner" tabIndex="0">
-          <div className="au_news_overlay">
-            <span className="au_news-single-print">
-              <a
-                href={printUrl}
-                onClick={(e) => {
-                  e.preventDefault();
-                  window.open(printUrl, '', 'width=1025,height=600');
-                }}
-              >
-                Print
-              </a>
-            </span>
-            <NewsLanguageChangeComponent
-              getItem={NewsPopUpComponent.getItem}
-              item={item}
-              lang={lang}
-            />
-          </div>
-          <div className="au_news_overlay_wrapper">
-            <h1
-              className="au_news_overlay_header"
-              dangerouslySetInnerHTML={{
-                __html: item.header,
-              }}
-            />
-            <div className="header_bg" />
-            <div className="au_news-single-item au_news-single2-item">
-              <p
-                className="au_news-single-subheader"
-                dangerouslySetInnerHTML={{
-                  __html: item.subheader,
-                }}
-              />
-              {(() => {
-                if (item.event_from == null) {
-                  return (
-                    <p className="au_news-legend">
-                      <span className="au_news-single-date">{item.date}</span>
-                      <span>
-                        <span className="au_news-date-author-separator"> | </span>
-                        <span className="aunews-single-author">
-                          <a href={`mailto:${item.author.email}`}>{item.author.name}</a>
-                        </span>
-                      </span>
-                    </p>
-                  );
-                }
-                return null;
-              })()}
-              {(() => {
-                if (item.image.src !== '' && item.layout === 'Standard') {
-                  return (
-                    <div className="news-set1-img1all">
-                      <a href={item.image.href} title={item.image.title} rel="lightbox">
-                        <img
-                          src={item.image.src}
-                          alt={item.image.title}
-                          width={item.image.width}
-                          height={item.image.height}
-                        />
-                      </a>
-                      <p className="au_news-single2-imgcaption">{item.image.title}</p>
-                    </div>
-                  );
-                }
-                return null;
-              })()}
-              {(() => {
-                if (item.event_from) {
-                  const fromDateSplit = item.event_from.date.split('.');
-                  const toDateSplit = item.event_to.date.split('.');
-                  let fromDate;
-                  let toDate;
-
-                  if (lang === 'en') {
-                    fromDate = new Date(
-                      parseInt(fromDateSplit[0], 10),
-                      parseInt(fromDateSplit[1], 10) - 1,
-                      parseInt(fromDateSplit[2], 10),
-                    );
-                    toDate = new Date(
-                      parseInt(toDateSplit[0], 10),
-                      parseInt(toDateSplit[1], 10) - 1,
-                      parseInt(toDateSplit[2], 10),
-                    );
-                  } else {
-                    fromDate = new Date(
-                      parseInt(fromDateSplit[2], 10),
-                      parseInt(fromDateSplit[1], 10) - 1,
-                      parseInt(fromDateSplit[0], 10),
-                    );
-                    toDate = new Date(
-                      parseInt(toDateSplit[2], 10),
-                      parseInt(toDateSplit[1], 10) - 1,
-                      parseInt(toDateSplit[0], 10),
-                    );
-                  }
-
-                  const differentDays = !(
-                    toDate.getFullYear() === fromDate.getFullYear()
-                    && toDate.getMonth() === fromDate.getMonth()
-                    && toDate.getDate() === fromDate.getDate()
-                  );
-
-                  return (
-                    <div>
-                      <table className="au_newsevent-event">
-                        <colgroup>
-                          <col className="first-col" />
-                          <col className="second-col" />
-                        </colgroup>
-                        <tbody>
-                          <tr className="au_newsevent_date_wrap">
-                            <td className="au_newsevent-date-text">{labels[lang].news.eventDate}</td>
-                            <td>
-                              <span className="au_newsevent-from-date">
-                                <span className="au_news_events_weekday">
-                                  {`${labels[lang].news.weekdays[fromDate.getDay()]} `}
-                                </span>
-                                <span className="au_news_events_date">
-                                  {`${fromDate.getDate() + (lang === 'da' ? '.' : '')} `}
-                                </span>
-                                <span className="au_news_events_month">
-                                  {`${labels[lang].news.months[fromDate.getMonth()]} ${fromDate.getFullYear()}`}
-                                </span>
-                              </span>
-                              {(() => {
-                                if (differentDays) {
-                                  return (
-                                    <span>
-                                      <span className="au_newsevent-to-text"> &mdash; </span>
-                                      <span className="au_newsevent-to-date">
-                                        <span className="au_news_events_weekday">
-                                          {`${labels[lang].news.weekdays[toDate.getDay()]} `}
-                                        </span>
-                                        <span className="au_news_events_date">
-                                          {`${toDate.getDate() + (lang === 'da' ? '.' : '')} `}
-                                        </span>
-                                        <span className="au_news_events_month">
-                                          {`${labels[lang].news.months[toDate.getMonth()]} ${toDate.getFullYear()}`}
-                                        </span>
-                                      </span>
-                                    </span>
-                                  );
-                                }
-                                return null;
-                              })()}
-
-                            </td>
-                          </tr>
-                          <tr className="au_newsevent-row-even">
-                            <td className="au_newsevent-time-text">{labels[lang].news.eventTime}</td>
-                            <td>
-                              <span className="au_newsevent-from-time">{item.event_from.time}</span>
-                              {(() => {
-                                if (!differentDays) {
-                                  return (
-                                    <span>
-                                      <span className="au_newsevent-to-text"> &mdash; </span>
-                                      <span className="au_newsevent-to-time">{item.event_to.time}</span>
-                                    </span>
-                                  );
-                                }
-                                return null;
-                              })()}
-                            </td>
-                          </tr>
-                          <tr className="au_newsevent_where_wrap">
-                            <td className="au_newsevent-where-text">{labels[lang].news.eventWhere}</td>
-                            <td className="au_newsevent-where">{item.event_where}</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                      {(() => {
-                        if (item.event_regurl !== '') {
-                          if (lang === 'da' && item.event_regfrom && item.event_regto) {
-                            const regFromDateSplit = item.event_regfrom.date.split('.');
-                            item.event_regfrom.date = `${regFromDateSplit[2]}.${regFromDateSplit[1]}.${regFromDateSplit[0]}`;
-                            const regToDateSplit = item.event_regto.date.split('.');
-                            item.event_regto.date = `${regToDateSplit[2]}.${regToDateSplit[1]}.${regToDateSplit[0]}`;
-                          }
-
-                          if (!(item.event_regfrom && item.event_regto) || (new Date() > new Date(item.event_regfrom.date.replace(/\./g, '-')) && new Date() < new Date(item.event_regto.date.replace(/\./g, '-')))) {
-                            return (
-                              <span className="au_newsevent_register">
-                                <a className="button" href={(item.event_regurl.indexOf('@') > -1 ? 'mailto:' : '') + item.event_regurl}>{labels[lang].news.eventRegistration}</a>
-                              </span>
-                            );
-                          }
-                        }
-                        return null;
-                      })()}
-                    </div>
-                  );
-                }
-                return null;
-              })()}
-              {(() => {
-                const renderSubImages = item.subimages.map((s) => (
-                  <div key={s.href}>
-                    <a href={s.href} title={s.title} rel="lightbox">
-                      <img src={s.src} alt={s.title} width={s.width} height={s.height} />
-                    </a>
-                    <p className="au_news-single-imgcaption">
-                      {s.title}
-                    </p>
-                  </div>
-                ));
-
-                if (item.image.src !== '' && item.image.layout5 !== '' && item.layout === 'Alternativ 1') {
-                  return (
-                    <div className="au_news-single-sub-images">
-                      <div>
-                        <a href={item.image.href} title={item.image.title} rel="lightbox">
-                          <img src={item.image.layout5} alt={item.image.title} />
-                        </a>
-                        <p className="au_news-single-imgcaption">
-                          {item.image.title}
-                        </p>
-                      </div>
-                      {renderSubImages}
-                    </div>
-                  );
-                }
-
-                if (item.subimages.length > 0 && item.image.src !== '' && item.layout === 'Standard') {
-                  return (
-                    <div className="au_news-single-sub-images">
-                      {renderSubImages}
-                    </div>
-                  );
-                }
-                return null;
-              })()}
-              <div
-                className="au_news_content"
-                dangerouslySetInnerHTML={{
-                  __html: item.content,
-                }}
-              />
-              {(() => {
-                if (item.event_from) {
-                  return (
-                    <p className="au_news-legend">
-                      <span className="au_news-single-date">{item.date}</span>
-                      <span>
-                        <span className="au_news-date-author-separator"> | </span>
-                        <span className="aunews-single-author">
-                          <a href={`mailto:${item.author.email}`}>{item.author.name}</a>
-                        </span>
-                      </span>
-                    </p>
-                  );
-                }
-                return null;
-              })()}
-              <div className="au_news-single-news-category">
-                <strong>{renderCategories}</strong>
-              </div>
-              <div className="au_news-single-news-permalink">
-                <strong><a href={item.permalink}>{item.permalink}</a></strong>
-              </div>
-              {(() => {
-                if (additionalInfo) {
-                  const renderLinks = item.links.map((l) => <a href={l.href}>{l.text}</a>);
-
-                  const renderRelated = item.related.map((r) => (
-                    <span>
-                      <a className="au_news-related-link" href={`${AUNewsConfig.newsUrl}${r.id}`}>{r.text}</a>
-                      {`  ${r.date}`}
-                    </span>
-                  ));
-
-                  const renderFiles = item.files.map((f) => <a href={f.href}>{f.text}</a>);
-
-                  return (
-                    <div className="au_bt_dark au_bb_dark au_news-single-additional-info">
-                      {(() => {
-                        if (item.links.length > 0) {
-                          return (
-                            <dl className="au_news-single-links">
-                              <dt>Links</dt>
-                              <dd>
-                                {renderLinks}
-                              </dd>
-                            </dl>
-                          );
-                        }
-                        return null;
-                      })()}
-                      {(() => {
-                        if (item.related.length > 0) {
-                          return (
-                            <dl className="au_news-single-related">
-                              <dt>{lang === 'da' ? 'Læs også' : 'Read more'}</dt>
-                              <dd>
-                                {renderRelated}
-                              </dd>
-                            </dl>
-                          );
-                        }
-                        return null;
-                      })()}
-                      {(() => {
-                        if (item.files.length > 0) {
-                          return (
-                            <dl className="au_news-single-files">
-                              <dt>Download</dt>
-                              <dd>
-                                {renderFiles}
-                              </dd>
-                            </dl>
-                          );
-                        }
-                        return null;
-                      })()}
-                    </div>
-                  );
-                }
-                return null;
-              })()}
-            </div>
-            {(() => {
-              if (!item.comments_closed) {
-                return <div id="disqus_thread" />;
-              }
-              return null;
-            })()}
-          </div>
-          <NewsSocialComponent item={item} lang={lang} />
-        </div>
-        <button
-          type="button"
-          className="au_news_overlay_close"
-          onClick={() => {
-            window.location.hash = '';
-          }}
-        />
-      </div>
-    );
-  }
-}
-
-NewsPopUpComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  print: PropTypes.bool.isRequired,
-  item: PropTypes.shape({
-    type: PropTypes.number.isRequired,
-    id: PropTypes.number.isRequired,
-    header: PropTypes.string.isRequired,
-    subheader: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    permalink: PropTypes.string.isRequired,
-    comments_closed: PropTypes.bool.isRequired,
-    links: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string.isRequired,
-      text: PropTypes.string.isRequired,
-    })).isRequired,
-    categories: PropTypes.arrayOf(PropTypes.shape({
-      category: PropTypes.string.isRequired,
-    })).isRequired,
-    files: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string.isRequired,
-      text: PropTypes.string.isRequired,
-    })).isRequired,
-    related: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.number.isRequired,
-      text: PropTypes.string.isRequired,
-    })).isRequired,
-    event_from: PropTypes.shape({
-      date: PropTypes.string,
-      time: PropTypes.string,
-    }),
-    event_to: PropTypes.shape({
-      date: PropTypes.string,
-      time: PropTypes.string,
-    }),
-    event_where: PropTypes.string.isRequired,
-    event_regfrom: PropTypes.shape({
-      date: PropTypes.string,
-      time: PropTypes.string,
-    }),
-    event_regto: PropTypes.shape({
-      date: PropTypes.string,
-      time: PropTypes.string,
-    }),
-    event_regurl: PropTypes.string.isRequired,
-    date: PropTypes.string.isRequired,
-    autor: PropTypes.shape({
-      email: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-    }).isRequired,
-    image: PropTypes.shape({
-      src: PropTypes.string.isRequired,
-      href: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      width: PropTypes.string.isRequired,
-      height: PropTypes.string.isRequired,
-      layout5: PropTypes.string.isRequired,
-    }),
-    subimages: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      width: PropTypes.string.isRequired,
-      height: PropTypes.string.isRequired,
-    })),
-    layout: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-  }).isRequired,
-  id: PropTypes.number.isRequired,
-};
-
-NewsPopUpComponent.displayName = 'NewsPopUpComponent';
-export default NewsPopUpComponent;
+/* eslint-env browser */
+/* eslint jsx-a11y/no-noninteractive-tabindex: 0 */
+/* eslint jsx-a11y/control-has-associated-label: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import NewsLanguageChangeComponent from './NewsLanguageChangeComponent';
+import NewsSocialComponent from './NewsSocialComponent';
+import { newsLabels as labels } from '../../lib/i18n';
+import { AUNewsHelpers, AUNewsConfig } from '../../lib/au-news';
+
+const setFade = () => {
+  const fade = document.getElementById('fade');
+  if (fade) {
+    fade.style.display = 'block';
+    fade.style.opacity = 0.7;
+    fade.style.zIndex = 101;
+  }
+};
+
+class NewsPopUpComponent extends React.Component {
+  static getItem(id, lang, callback) {
+    const url = `${AUNewsConfig.server}/index.php?eID=getAuNewsFeed&mode=id&key=${id}&lang=${lang}&callback=?`;
+    // Axios does not support JSONP requests!
+    $.ajax({
+      url,
+      dataType: 'json',
+      jsonpCallback: url.hashCode(),
+      jsonp: true,
+      cache: true,
+      success: (data) => {
+        if (data && data.length === 1) {
+          if (typeof callback === 'function' && data[0].hidden !== '1') {
+            callback(data[0]);
+          }
+        }
+      },
+    });
+  }
+
+  static calculateHeight() {
+    if (document.querySelector('.au_news_popup') && !AU.helpers.isMobileDevice()) {
+      const element = document.querySelector('.au_news_popup');
+      const viewPortHeight = Math.max(
+        document.documentElement.clientHeight, window.innerHeight || 0,
+      );
+      const popupTop = getComputedStyle(element).top.replace('px', '');
+      const popupBottom = getComputedStyle(element).bottom.replace('px', '');
+      element.querySelector('.au_news_popup_inner').style.height = `${viewPortHeight - popupTop - popupBottom}px`;
+    }
+  }
+
+  constructor(props) {
+    super(props);
+
+    const { item } = props;
+    this.state = {
+      item,
+    };
+
+    this.posBeforeShow = 0;
+  }
+
+  componentDidMount() {
+    const {
+      item,
+      id,
+      lang,
+      print,
+    } = this.props;
+    const { item: sItem } = this.state;
+    if (item == null) {
+      NewsPopUpComponent.getItem(id, lang, (_item) => {
+        const trackerLink = `/virtual/news/${AUNewsHelpers.typeIdToText(_item.type)}/open-single/id-${_item.id}/${_item.permalink}`;
+        AU.tracking.trackSingle(trackerLink);
+        this.setState({
+          item: _item,
+        }, () => {
+          if (print) {
+            window.print();
+          }
+        });
+      });
+    }
+
+    setFade();
+    document.querySelector('.au_news_popup_inner').focus();
+    NewsPopUpComponent.calculateHeight();
+    if (sItem != null) {
+      // this.setDisqus();
+      NewsPopUpComponent.setLightBox();
+    }
+    this.posBeforeShow = document.documentElement.scrollTop === 0
+      ? document.body.scrollTop : document.documentElement.scrollTop;
+    document.querySelector('body').classList.add('news-overlay-open');
+    AU.resize.push(() => {
+      NewsPopUpComponent.calculateHeight();
+    });
+  }
+
+  componentDidUpdate() {
+    const { item } = this.state;
+    if (item != null) {
+      // this.setDisqus();
+      NewsPopUpComponent.setLightBox();
+      setFade();
+    }
+  }
+
+  componentWillUnmount() {
+    const fade = document.getElementById('fade');
+    if (fade) {
+      fade.style.display = 'none';
+      document.querySelector('body').style.overflowY = 'visible';
+      document.documentElement.scrollTop = this.posBeforeShow;
+      document.body.scrollTop = this.posBeforeShow;
+    }
+  }
+
+  setDisqus() {
+    const { item } = this.state;
+    window.disqus_url = item.permalink;
+    if (window.disqus_url !== '' && !item.comments_closed && item.id > 0) {
+      if (!window.disqus_loaded) {
+        $.getScript('//disqus.com/forums/rapexegesis/embed.js', () => {
+          window.disqus_loaded = true;
+        });
+      } else {
+        window.DISQUS.reset({
+          reload: true,
+        });
+      }
+    }
+  }
+
+  static setLightBox() {
+    $('.au_news_popup a[rel="lightbox"]').magnificPopup({
+      type: 'image',
+      gallery: {
+        enabled: true,
+      },
+      modal: false,
+    });
+  }
+
+  render() {
+    const { item } = this.state;
+    const { lang } = this.props;
+
+    let outerClassName = 'au_news_popup social';
+    if (AUNewsHelpers.isiPad()) {
+      outerClassName += ' ipad';
+    }
+
+    if (!item) {
+      return (
+        <div className={outerClassName}>
+          <div className="au_news_popup_inner" tabIndex="0" />
+        </div>
+      );
+    }
+
+    const additionalInfo = item.links.length > 0
+      || item.related.length > 0
+      || item.files.length > 0;
+    const renderCategories = null; /* item.categories ? item.categories.map(
+      (c, j) => (
+        <span key={c.category}>
+          {`${j === 0 ? '' : ', '} ${c.category}`}
+        </span>
+      ),
+    ) : ''; */
+
+    const printUrl = window.location.href.replace(window.location.hash, `?newsprint=true${window.location.hash}`);
+
+    return (
+      <div className="au_news_popup social">
+        <div className="au_news_popup_inner" tabIndex="0">
+          <div className="au_news_overlay">
+            <span className="au_news-single-print">
+              <a
+                href={printUrl}
+                onClick={(e) => {
+                  e.preventDefault();
+                  window.open(printUrl, '', 'width=1025,height=600');
+                }}
+              >
+                Print
+              </a>
+            </span>
+            <NewsLanguageChangeComponent
+              getItem={NewsPopUpComponent.getItem}
+              item={item}
+              lang={lang}
+            />
+          </div>
+          <div className="au_news_overlay_wrapper">
+            <h1
+              className="au_news_overlay_header"
+              dangerouslySetInnerHTML={{
+                __html: item.header,
+              }}
+            />
+            <div className="header_bg" />
+            <div className="au_news-single-item au_news-single2-item">
+              <p
+                className="au_news-single-subheader"
+                dangerouslySetInnerHTML={{
+                  __html: item.subheader,
+                }}
+              />
+              {(() => {
+                if (item.event_from == null) {
+                  return (
+                    <p className="au_news-legend">
+                      <span className="au_news-single-date">{item.date}</span>
+                      <span>
+                        <span className="au_news-date-author-separator"> | </span>
+                        <span className="aunews-single-author">
+                          <a href={`mailto:${item.author.email}`}>{item.author.name}</a>
+                        </span>
+                      </span>
+                    </p>
+                  );
+                }
+                return null;
+              })()}
+              {(() => {
+                if (item.image.src !== '' && item.layout === 'Standard') {
+                  return (
+                    <div className="news-set1-img1all">
+                      <a href={item.image.href} title={item.image.title} rel="lightbox">
+                        <img
+                          src={item.image.src}
+                          alt={item.image.title}
+                          width={item.image.width}
+                          height={item.image.height}
+                        />
+                      </a>
+                      <p className="au_news-single2-imgcaption">{item.image.title}</p>
+                    </div>
+                  );
+                }
+                return null;
+              })()}
+              {(() => {
+                if (item.event_from) {
+                  const fromDateSplit = item.event_from.date.split('.');
+                  const toDateSplit = item.event_to.date.split('.');
+                  let fromDate;
+                  let toDate;
+
+                  if (lang === 'en') {
+                    fromDate = new Date(
+                      parseInt(fromDateSplit[0], 10),
+                      parseInt(fromDateSplit[1], 10) - 1,
+                      parseInt(fromDateSplit[2], 10),
+                    );
+                    toDate = new Date(
+                      parseInt(toDateSplit[0], 10),
+                      parseInt(toDateSplit[1], 10) - 1,
+                      parseInt(toDateSplit[2], 10),
+                    );
+                  } else {
+                    fromDate = new Date(
+                      parseInt(fromDateSplit[2], 10),
+                      parseInt(fromDateSplit[1], 10) - 1,
+                      parseInt(fromDateSplit[0], 10),
+                    );
+                    toDate = new Date(
+                      parseInt(toDateSplit[2], 10),
+                      parseInt(toDateSplit[1], 10) - 1,
+                      parseInt(toDateSplit[0], 10),
+                    );
+                  }
+
+                  const differentDays = !(
+                    toDate.getFullYear() === fromDate.getFullYear()
+                    && toDate.getMonth() === fromDate.getMonth()
+                    && toDate.getDate() === fromDate.getDate()
+                  );
+
+                  return (
+                    <div>
+                      <table className="au_newsevent-event">
+                        <colgroup>
+                          <col className="first-col" />
+                          <col className="second-col" />
+                        </colgroup>
+                        <tbody>
+                          <tr className="au_newsevent_date_wrap">
+                            <td className="au_newsevent-date-text">{labels[lang].news.eventDate}</td>
+                            <td>
+                              <span className="au_newsevent-from-date">
+                                <span className="au_news_events_weekday">
+                                  {`${labels[lang].news.weekdays[fromDate.getDay()]} `}
+                                </span>
+                                <span className="au_news_events_date">
+                                  {`${fromDate.getDate() + (lang === 'da' ? '.' : '')} `}
+                                </span>
+                                <span className="au_news_events_month">
+                                  {`${labels[lang].news.months[fromDate.getMonth()]} ${fromDate.getFullYear()}`}
+                                </span>
+                              </span>
+                              {(() => {
+                                if (differentDays) {
+                                  return (
+                                    <span>
+                                      <span className="au_newsevent-to-text"> &mdash; </span>
+                                      <span className="au_newsevent-to-date">
+                                        <span className="au_news_events_weekday">
+                                          {`${labels[lang].news.weekdays[toDate.getDay()]} `}
+                                        </span>
+                                        <span className="au_news_events_date">
+                                          {`${toDate.getDate() + (lang === 'da' ? '.' : '')} `}
+                                        </span>
+                                        <span className="au_news_events_month">
+                                          {`${labels[lang].news.months[toDate.getMonth()]} ${toDate.getFullYear()}`}
+                                        </span>
+                                      </span>
+                                    </span>
+                                  );
+                                }
+                                return null;
+                              })()}
+
+                            </td>
+                          </tr>
+                          <tr className="au_newsevent-row-even">
+                            <td className="au_newsevent-time-text">{labels[lang].news.eventTime}</td>
+                            <td>
+                              <span className="au_newsevent-from-time">{item.event_from.time}</span>
+                              {(() => {
+                                if (!differentDays) {
+                                  return (
+                                    <span>
+                                      <span className="au_newsevent-to-text"> &mdash; </span>
+                                      <span className="au_newsevent-to-time">{item.event_to.time}</span>
+                                    </span>
+                                  );
+                                }
+                                return null;
+                              })()}
+                            </td>
+                          </tr>
+                          <tr className="au_newsevent_where_wrap">
+                            <td className="au_newsevent-where-text">{labels[lang].news.eventWhere}</td>
+                            <td className="au_newsevent-where">{item.event_where}</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                      {(() => {
+                        if (item.event_regurl !== '') {
+                          if (lang === 'da' && item.event_regfrom && item.event_regto) {
+                            const regFromDateSplit = item.event_regfrom.date.split('.');
+                            item.event_regfrom.date = `${regFromDateSplit[2]}.${regFromDateSplit[1]}.${regFromDateSplit[0]}`;
+                            const regToDateSplit = item.event_regto.date.split('.');
+                            item.event_regto.date = `${regToDateSplit[2]}.${regToDateSplit[1]}.${regToDateSplit[0]}`;
+                          }
+
+                          if (!(item.event_regfrom && item.event_regto) || (new Date() > new Date(item.event_regfrom.date.replace(/\./g, '-')) && new Date() < new Date(item.event_regto.date.replace(/\./g, '-')))) {
+                            return (
+                              <span className="au_newsevent_register">
+                                <a className="button" href={(item.event_regurl.indexOf('@') > -1 ? 'mailto:' : '') + item.event_regurl}>{labels[lang].news.eventRegistration}</a>
+                              </span>
+                            );
+                          }
+                        }
+                        return null;
+                      })()}
+                    </div>
+                  );
+                }
+                return null;
+              })()}
+              {(() => {
+                const renderSubImages = item.subimages.map((s) => (
+                  <div key={s.href}>
+                    <a href={s.href} title={s.title} rel="lightbox">
+                      <img src={s.src} alt={s.title} width={s.width} height={s.height} />
+                    </a>
+                    <p className="au_news-single-imgcaption">
+                      {s.title}
+                    </p>
+                  </div>
+                ));
+
+                if (item.image.src !== '' && item.image.layout5 !== '' && item.layout === 'Alternativ 1') {
+                  return (
+                    <div className="au_news-single-sub-images">
+                      <div>
+                        <a href={item.image.href} title={item.image.title} rel="lightbox">
+                          <img src={item.image.layout5} alt={item.image.title} />
+                        </a>
+                        <p className="au_news-single-imgcaption">
+                          {item.image.title}
+                        </p>
+                      </div>
+                      {renderSubImages}
+                    </div>
+                  );
+                }
+
+                if (item.subimages.length > 0 && item.image.src !== '' && item.layout === 'Standard') {
+                  return (
+                    <div className="au_news-single-sub-images">
+                      {renderSubImages}
+                    </div>
+                  );
+                }
+                return null;
+              })()}
+              <div
+                className="au_news_content"
+                dangerouslySetInnerHTML={{
+                  __html: item.content,
+                }}
+              />
+              {(() => {
+                if (item.event_from) {
+                  return (
+                    <p className="au_news-legend">
+                      <span className="au_news-single-date">{item.date}</span>
+                      <span>
+                        <span className="au_news-date-author-separator"> | </span>
+                        <span className="aunews-single-author">
+                          <a href={`mailto:${item.author.email}`}>{item.author.name}</a>
+                        </span>
+                      </span>
+                    </p>
+                  );
+                }
+                return null;
+              })()}
+              <div className="au_news-single-news-category">
+                <strong>{renderCategories}</strong>
+              </div>
+              <div className="au_news-single-news-permalink">
+                <strong><a href={item.permalink}>{item.permalink}</a></strong>
+              </div>
+              {(() => {
+                if (additionalInfo) {
+                  const renderLinks = item.links.map((l) => <a href={l.href}>{l.text}</a>);
+
+                  const renderRelated = item.related.map((r) => (
+                    <span>
+                      <a className="au_news-related-link" href={`${AUNewsConfig.newsUrl}${r.id}`}>{r.text}</a>
+                      {`  ${r.date}`}
+                    </span>
+                  ));
+
+                  const renderFiles = item.files.map((f) => <a href={f.href}>{f.text}</a>);
+
+                  return (
+                    <div className="au_bt_dark au_bb_dark au_news-single-additional-info">
+                      {(() => {
+                        if (item.links.length > 0) {
+                          return (
+                            <dl className="au_news-single-links">
+                              <dt>Links</dt>
+                              <dd>
+                                {renderLinks}
+                              </dd>
+                            </dl>
+                          );
+                        }
+                        return null;
+                      })()}
+                      {(() => {
+                        if (item.related.length > 0) {
+                          return (
+                            <dl className="au_news-single-related">
+                              <dt>{lang === 'da' ? 'Læs også' : 'Read more'}</dt>
+                              <dd>
+                                {renderRelated}
+                              </dd>
+                            </dl>
+                          );
+                        }
+                        return null;
+                      })()}
+                      {(() => {
+                        if (item.files.length > 0) {
+                          return (
+                            <dl className="au_news-single-files">
+                              <dt>Download</dt>
+                              <dd>
+                                {renderFiles}
+                              </dd>
+                            </dl>
+                          );
+                        }
+                        return null;
+                      })()}
+                    </div>
+                  );
+                }
+                return null;
+              })()}
+            </div>
+            {(() => {
+              if (!item.comments_closed) {
+                return <div id="disqus_thread" />;
+              }
+              return null;
+            })()}
+          </div>
+          <NewsSocialComponent item={item} lang={lang} />
+        </div>
+        <button
+          type="button"
+          className="au_news_overlay_close"
+          onClick={() => {
+            window.location.hash = '';
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+NewsPopUpComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  print: PropTypes.bool.isRequired,
+  item: PropTypes.shape({
+    type: PropTypes.number.isRequired,
+    id: PropTypes.number.isRequired,
+    header: PropTypes.string.isRequired,
+    subheader: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    permalink: PropTypes.string.isRequired,
+    comments_closed: PropTypes.bool.isRequired,
+    links: PropTypes.arrayOf(PropTypes.shape({
+      href: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+    })).isRequired,
+    categories: PropTypes.arrayOf(PropTypes.shape({
+      category: PropTypes.string.isRequired,
+    })).isRequired,
+    files: PropTypes.arrayOf(PropTypes.shape({
+      href: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+    })).isRequired,
+    related: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      text: PropTypes.string.isRequired,
+    })).isRequired,
+    event_from: PropTypes.shape({
+      date: PropTypes.string,
+      time: PropTypes.string,
+    }),
+    event_to: PropTypes.shape({
+      date: PropTypes.string,
+      time: PropTypes.string,
+    }),
+    event_where: PropTypes.string.isRequired,
+    event_regfrom: PropTypes.shape({
+      date: PropTypes.string,
+      time: PropTypes.string,
+    }),
+    event_regto: PropTypes.shape({
+      date: PropTypes.string,
+      time: PropTypes.string,
+    }),
+    event_regurl: PropTypes.string.isRequired,
+    date: PropTypes.string.isRequired,
+    autor: PropTypes.shape({
+      email: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    }).isRequired,
+    image: PropTypes.shape({
+      src: PropTypes.string.isRequired,
+      href: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      width: PropTypes.string.isRequired,
+      height: PropTypes.string.isRequired,
+      layout5: PropTypes.string.isRequired,
+    }),
+    subimages: PropTypes.arrayOf(PropTypes.shape({
+      href: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      width: PropTypes.string.isRequired,
+      height: PropTypes.string.isRequired,
+    })),
+    layout: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+  }).isRequired,
+  id: PropTypes.number.isRequired,
+};
+
+NewsPopUpComponent.displayName = 'NewsPopUpComponent';
+export default NewsPopUpComponent;