@aarhus-university/au-lib-react-components 10.6.0 → 10.9.0

package/src/layout-2016/components/universe/StudentTopComponent.js

@@ -1,137 +1,137 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const parseBurgerLinks = (elements) => {
-  const links = [];
-  elements.forEach((e) => {
-    const link = e.querySelector('a');
-    links.push({
-      url: link.getAttribute('href'),
-      title: link.innerText,
-      className: e.getAttribute('class'),
-    });
-  });
-  return links;
-};
-
-class StudentTopComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      active: 0,
-      burgerLinks: [],
-    };
-  }
-
-  componentDidMount() {
-    const { promiseHandler } = this.props;
-    document.getElementById('fade').addEventListener('click', () => {
-      this.setState({
-        active: 0,
-      });
-    });
-
-    promiseHandler((data) => {
-      const container = document.createElement('div');
-      container.innerHTML = data;
-      const burgerLinks = container.querySelectorAll('ul.burger-links > li');
-      this.setState({
-        burgerLinks: parseBurgerLinks(burgerLinks),
-      });
-    });
-  }
-
-  componentDidUpdate() {
-    const { active } = this.state;
-    const fade = document.getElementById('fade');
-    if (active > 0) {
-      fade.style.display = 'block';
-    } else {
-      fade.style.display = 'none';
-    }
-    fade.style.opacity = 0;
-    if (active === 1 && typeof window.findWidgetInit !== 'undefined') {
-      window.findWidgetInit('.universe-utility .find-container');
-    }
-    if (active === 2) {
-      AU.alphabox.init();
-    }
-  }
-
-  render() {
-    const { lang, universeLabels } = this.props;
-    const { active, burgerLinks } = this.state;
-
-    const renderBurgerLinks = burgerLinks.map(
-      (u) => (
-        <li key={u.title} className={u.className}>
-          <a href={u.url}>
-            {u.title}
-          </a>
-        </li>
-      ),
-    );
-
-    return [
-      <div key="header" className="large-12 medium-12 small-12 columns">
-        <div>
-          <h2 className="universe-home" dangerouslySetInnerHTML={{ __html: universeLabels[lang].studentTitleLink }} />
-          <ul className="resetlist universe-icons">
-            <li className="mitstudie">
-              <a href={universeLabels[lang].mitstudieUrl}>{universeLabels[lang].mitstudieText}</a>
-            </li>
-            <li className="au" dangerouslySetInnerHTML={{ __html: universeLabels[lang].mainPageLink }} />
-            <li className={active === 1 ? 'active' : null}>
-              <button
-                type="button"
-                className="btn-find"
-                onClick={() => {
-                  this.setState((prevState) => ({
-                    active: prevState.active === 1 ? 0 : 1,
-                  }));
-                }}
-              >
-                Find
-              </button>
-            </li>
-            <li className={active === 2 ? 'active' : null}>
-              <button
-                type="button"
-                className="btn-menu"
-                onClick={() => {
-                  this.setState((prevState) => ({
-                    active: prevState.active === 2 ? 0 : 2,
-                  }));
-                }}
-              >
-                Menu
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>,
-      <div key={1} className={`universe-utility${active === 1 ? ' active' : ''}`}>
-        <div className="find-container au-map" />
-      </div>,
-      <div key={2} className={`universe-utility${active === 2 ? ' active' : ''}`}>
-        <div className="au_alphabox" id="au_alphabox_student_utility" />
-        <div className="universe-utility-links">
-          <ul className="resetlist">
-            {renderBurgerLinks}
-          </ul>
-        </div>
-      </div>,
-    ];
-  }
-}
-
-StudentTopComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  promiseHandler: PropTypes.func.isRequired,
-  universeLabels: PropTypes.shape({}).isRequired,
-};
-
-StudentTopComponent.displayName = 'StudentTopComponent';
-export default StudentTopComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const parseBurgerLinks = (elements) => {
+  const links = [];
+  elements.forEach((e) => {
+    const link = e.querySelector('a');
+    links.push({
+      url: link.getAttribute('href'),
+      title: link.innerText,
+      className: e.getAttribute('class'),
+    });
+  });
+  return links;
+};
+
+class StudentTopComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      active: 0,
+      burgerLinks: [],
+    };
+  }
+
+  componentDidMount() {
+    const { promiseHandler } = this.props;
+    document.getElementById('fade').addEventListener('click', () => {
+      this.setState({
+        active: 0,
+      });
+    });
+
+    promiseHandler((data) => {
+      const container = document.createElement('div');
+      container.innerHTML = data;
+      const burgerLinks = container.querySelectorAll('ul.burger-links > li');
+      this.setState({
+        burgerLinks: parseBurgerLinks(burgerLinks),
+      });
+    });
+  }
+
+  componentDidUpdate() {
+    const { active } = this.state;
+    const fade = document.getElementById('fade');
+    if (active > 0) {
+      fade.style.display = 'block';
+    } else {
+      fade.style.display = 'none';
+    }
+    fade.style.opacity = 0;
+    if (active === 1 && typeof window.findWidgetInit !== 'undefined') {
+      window.findWidgetInit('.universe-utility .find-container');
+    }
+    if (active === 2) {
+      AU.alphabox.init();
+    }
+  }
+
+  render() {
+    const { lang, universeLabels } = this.props;
+    const { active, burgerLinks } = this.state;
+
+    const renderBurgerLinks = burgerLinks.map(
+      (u) => (
+        <li key={u.title} className={u.className}>
+          <a href={u.url}>
+            {u.title}
+          </a>
+        </li>
+      ),
+    );
+
+    return [
+      <div key="header" className="large-12 medium-12 small-12 columns">
+        <div>
+          <h2 className="universe-home" dangerouslySetInnerHTML={{ __html: universeLabels[lang].studentTitleLink }} />
+          <ul className="resetlist universe-icons">
+            <li className="mitstudie">
+              <a href={universeLabels[lang].mitstudieUrl}>{universeLabels[lang].mitstudieText}</a>
+            </li>
+            <li className="au" dangerouslySetInnerHTML={{ __html: universeLabels[lang].mainPageLink }} />
+            <li className={active === 1 ? 'active' : null}>
+              <button
+                type="button"
+                className="btn-find"
+                onClick={() => {
+                  this.setState((prevState) => ({
+                    active: prevState.active === 1 ? 0 : 1,
+                  }));
+                }}
+              >
+                Find
+              </button>
+            </li>
+            <li className={active === 2 ? 'active' : null}>
+              <button
+                type="button"
+                className="btn-menu"
+                onClick={() => {
+                  this.setState((prevState) => ({
+                    active: prevState.active === 2 ? 0 : 2,
+                  }));
+                }}
+              >
+                Menu
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>,
+      <div key={1} className={`universe-utility${active === 1 ? ' active' : ''}`}>
+        <div className="find-container au-map" />
+      </div>,
+      <div key={2} className={`universe-utility${active === 2 ? ' active' : ''}`}>
+        <div className="au_alphabox" id="au_alphabox_student_utility" />
+        <div className="universe-utility-links">
+          <ul className="resetlist">
+            {renderBurgerLinks}
+          </ul>
+        </div>
+      </div>,
+    ];
+  }
+}
+
+StudentTopComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  promiseHandler: PropTypes.func.isRequired,
+  universeLabels: PropTypes.shape({}).isRequired,
+};
+
+StudentTopComponent.displayName = 'StudentTopComponent';
+export default StudentTopComponent;

package/src/layout-2016/components/universe/UniverseContainerComponent.js

@@ -1,65 +1,65 @@
-/* eslint-env browser */
-import React, { useState } from 'react';
-import { universeLabels, profileLabels } from '../../../lib/i18n';
-import StaffTopComponent from './StaffTopComponent';
-import StudentTopComponent from './StudentTopComponent';
-
-const UniverseContainerComponent = () => {
-  const [user, setUser] = useState({
-    chosenFirstNames: '',
-    chosenLastName: '',
-    preferredLanguage: '',
-    auId: 0,
-  });
-
-  const { auAuth } = window;
-  const lang = document.querySelector('html').getAttribute('lang');
-  const body = document.querySelector('body');
-  const staffClass = 'staff';
-  const studentClass = 'student';
-  const { universeGlobalContentPath } = window;
-  let universe = <div />;
-  if (body.classList.contains(staffClass)) {
-    universe = (
-      <StaffTopComponent
-        lang={lang}
-        user={user}
-        promiseHandler={(callback) => {
-          fetch(universeGlobalContentPath).then(
-            (promise) => promise.json(),
-          ).then(
-            (data) => callback(data),
-          );
-        }}
-        onLoad={(context) => {
-          setUser(context);
-        }}
-        auAuth={auAuth}
-        universeLabels={universeLabels}
-        profileLabels={profileLabels}
-      />
-    );
-  }
-  if (body.classList.contains(studentClass)) {
-    universe = (
-      <StudentTopComponent
-        lang={lang}
-        user={user}
-        promiseHandler={(callback) => {
-          fetch(universeGlobalContentPath).then(
-            (promise) => promise.json(),
-          ).then(
-            (data) => callback(data),
-          );
-        }}
-        universeLabels={universeLabels}
-        profileLabels={profileLabels}
-      />
-    );
-  }
-
-  return universe;
-};
-
-UniverseContainerComponent.displayName = 'UniverseContainerComponent';
-export default UniverseContainerComponent;
+/* eslint-env browser */
+import React, { useState } from 'react';
+import { universeLabels, profileLabels } from '../../../lib/i18n';
+import StaffTopComponent from './StaffTopComponent';
+import StudentTopComponent from './StudentTopComponent';
+
+const UniverseContainerComponent = () => {
+  const [user, setUser] = useState({
+    chosenFirstNames: '',
+    chosenLastName: '',
+    preferredLanguage: '',
+    auId: 0,
+  });
+
+  const { auAuth } = window;
+  const lang = document.querySelector('html').getAttribute('lang');
+  const body = document.querySelector('body');
+  const staffClass = 'staff';
+  const studentClass = 'student';
+  const { universeGlobalContentPath } = window;
+  let universe = <div />;
+  if (body.classList.contains(staffClass)) {
+    universe = (
+      <StaffTopComponent
+        lang={lang}
+        user={user}
+        promiseHandler={(callback) => {
+          fetch(universeGlobalContentPath).then(
+            (promise) => promise.json(),
+          ).then(
+            (data) => callback(data),
+          );
+        }}
+        onLoad={(context) => {
+          setUser(context);
+        }}
+        auAuth={auAuth}
+        universeLabels={universeLabels}
+        profileLabels={profileLabels}
+      />
+    );
+  }
+  if (body.classList.contains(studentClass)) {
+    universe = (
+      <StudentTopComponent
+        lang={lang}
+        user={user}
+        promiseHandler={(callback) => {
+          fetch(universeGlobalContentPath).then(
+            (promise) => promise.json(),
+          ).then(
+            (data) => callback(data),
+          );
+        }}
+        universeLabels={universeLabels}
+        profileLabels={profileLabels}
+      />
+    );
+  }
+
+  return universe;
+};
+
+UniverseContainerComponent.displayName = 'UniverseContainerComponent';
+export default UniverseContainerComponent;

package/src/layout-2016/lib/all.js

@@ -1,3 +1,3 @@
-import '../../styles/app.scss';
-import './au-databox';
-import './au-alphabox';
+import '../../styles/app.scss';
+import './au-databox';
+import './au-alphabox';

package/src/layout-2016/lib/au-alphabox.js

@@ -1,100 +1,100 @@
-/* eslint no-prototype-builtins: 0 */
-/* eslint no-restricted-syntax: 0 */
-/* eslint no-unused-vars: 0 */
-/* eslint-env browser */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import AlphaBoxComponent from '../components/alphabox/AlphaBoxComponent';
-
-const defaultOptions = {
-  config: {
-    title: '',
-    url: '',
-    description: '',
-    container: '.au_alphabox',
-    tracking: '/virtual/alphabox/',
-    links: [
-      { title: 'Link 1', url: 'http://www.au.dk' },
-      { title: 'Link 2', url: 'http://www.au.dk' },
-    ],
-  },
-  search: {
-    minLength: 1,
-    placeHolder: '',
-  },
-  background: {
-    color: '#003e5c',
-    linkColor: '#379fcb',
-  },
-  data: {
-    mode: 'json',
-    itemsOnly: false,
-  },
-};
-
-class AUAlphabox {
-  constructor(boxes) {
-    this.boxes = boxes;
-  }
-
-  static mergeOptions(_box) {
-    const box = _box;
-    if (!box.hasOwnProperty('config')) {
-      box.config = {};
-    }
-
-    for (const conf in defaultOptions.config) {
-      if (!box.config.hasOwnProperty(conf)) {
-        box.config[conf] = defaultOptions.config[conf];
-      }
-    }
-
-    if (!box.hasOwnProperty('background')) {
-      box.background = {};
-    }
-
-    for (const bg in defaultOptions.background) {
-      if (!box.background.hasOwnProperty(bg)) {
-        box.background[bg] = defaultOptions.background[bg];
-      }
-    }
-
-    if (!box.hasOwnProperty('search')) {
-      box.search = {};
-    }
-
-    for (const sch in defaultOptions.search) {
-      if (!box.search.hasOwnProperty(sch)) {
-        box.search[sch] = defaultOptions.search[sch];
-      }
-    }
-
-    if (!box.hasOwnProperty('data')) {
-      box.data = {};
-    }
-
-    for (const data in defaultOptions.data) {
-      if (!box.data.hasOwnProperty(data)) {
-        box.data[data] = defaultOptions.data[data];
-      }
-    }
-  }
-
-  init() {
-    for (let i = 0; i < this.boxes.length; i += 1) {
-      const box = this.boxes[i];
-      if (!box.loaded) {
-        box.id = i;
-        AUAlphabox.mergeOptions(box);
-        const mountNode = document.querySelector(box.config.container);
-        const visible = mountNode && getComputedStyle(mountNode).visibility !== 'hidden';
-        if (visible) {
-          ReactDOM.render(<AlphaBoxComponent box={box} />, mountNode);
-          box.loaded = true;
-        }
-      }
-    }
-  }
-}
-
-window.AUAlphabox = AUAlphabox;
+/* eslint no-prototype-builtins: 0 */
+/* eslint no-restricted-syntax: 0 */
+/* eslint no-unused-vars: 0 */
+/* eslint-env browser */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AlphaBoxComponent from '../components/alphabox/AlphaBoxComponent';
+
+const defaultOptions = {
+  config: {
+    title: '',
+    url: '',
+    description: '',
+    container: '.au_alphabox',
+    tracking: '/virtual/alphabox/',
+    links: [
+      { title: 'Link 1', url: 'http://www.au.dk' },
+      { title: 'Link 2', url: 'http://www.au.dk' },
+    ],
+  },
+  search: {
+    minLength: 1,
+    placeHolder: '',
+  },
+  background: {
+    color: '#003e5c',
+    linkColor: '#379fcb',
+  },
+  data: {
+    mode: 'json',
+    itemsOnly: false,
+  },
+};
+
+class AUAlphabox {
+  constructor(boxes) {
+    this.boxes = boxes;
+  }
+
+  static mergeOptions(_box) {
+    const box = _box;
+    if (!box.hasOwnProperty('config')) {
+      box.config = {};
+    }
+
+    for (const conf in defaultOptions.config) {
+      if (!box.config.hasOwnProperty(conf)) {
+        box.config[conf] = defaultOptions.config[conf];
+      }
+    }
+
+    if (!box.hasOwnProperty('background')) {
+      box.background = {};
+    }
+
+    for (const bg in defaultOptions.background) {
+      if (!box.background.hasOwnProperty(bg)) {
+        box.background[bg] = defaultOptions.background[bg];
+      }
+    }
+
+    if (!box.hasOwnProperty('search')) {
+      box.search = {};
+    }
+
+    for (const sch in defaultOptions.search) {
+      if (!box.search.hasOwnProperty(sch)) {
+        box.search[sch] = defaultOptions.search[sch];
+      }
+    }
+
+    if (!box.hasOwnProperty('data')) {
+      box.data = {};
+    }
+
+    for (const data in defaultOptions.data) {
+      if (!box.data.hasOwnProperty(data)) {
+        box.data[data] = defaultOptions.data[data];
+      }
+    }
+  }
+
+  init() {
+    for (let i = 0; i < this.boxes.length; i += 1) {
+      const box = this.boxes[i];
+      if (!box.loaded) {
+        box.id = i;
+        AUAlphabox.mergeOptions(box);
+        const mountNode = document.querySelector(box.config.container);
+        const visible = mountNode && getComputedStyle(mountNode).visibility !== 'hidden';
+        if (visible) {
+          ReactDOM.render(<AlphaBoxComponent box={box} />, mountNode);
+          box.loaded = true;
+        }
+      }
+    }
+  }
+}
+
+window.AUAlphabox = AUAlphabox;