@aarhus-university/au-lib-react-components 9.11.17 → 10.0.0

package/src/components/news/NewsPopUpComponent.js

@@ -1,591 +0,0 @@
-/* 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;

package/src/components/news/NewsRSSComponent.js

@@ -1,74 +0,0 @@
-/* eslint jsx-a11y/click-events-have-key-events: 0 */
-/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
-/* eslint jsx-a11y/interactive-supports-focus: 0 */
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { newsLabels as labels } from '../../lib/i18n';
-
-class NewsRSSComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      wide: false,
-    };
-  }
-
-  render() {
-    const { wide } = this.state;
-    const { url, lang } = this.props;
-    return (
-      <ul>
-        <li
-          className={`rss header-click-btn${wide ? ' wide' : ''}`}
-          title={labels[lang].news.rssAdd}
-          onClick={() => {
-            this.setState((prevState) => ({
-              wide: !prevState.wide,
-            }));
-          }}
-        >
-          {(() => {
-            if (wide) {
-              return (
-                <div
-                  role="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                >
-                  <div
-                    role="button"
-                    className="close"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      this.setState({
-                        wide: false,
-                      });
-                    }}
-                  />
-                  <h2>
-                    {'RSS '}
-                    <strong>feed</strong>
-                  </h2>
-                  <p>{labels[lang].news.rssCopy}</p>
-                  <input type="text" value={url} readOnly />
-                </div>
-              );
-            }
-            return null;
-          })()}
-        </li>
-      </ul>
-    );
-  }
-}
-
-NewsRSSComponent.propTypes = {
-  url: PropTypes.string.isRequired,
-  lang: PropTypes.string.isRequired,
-};
-
-NewsRSSComponent.displayName = 'NewsRSSComponent';
-export default NewsRSSComponent;