@aarhus-university/au-lib-react-components 11.5.1 → 11.6.0

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

@@ -1,400 +1,400 @@
-/* eslint func-names: ["error", "never"] */
-/* eslint no-prototype-builtins: 0 */
-/* eslint no-restricted-syntax: 0 */
-/* eslint max-classes-per-file: 0 */
-/* eslint no-unused-vars: 0 */
-/* eslint-env browser */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import DataBoxComponent from '../components/databox/DataBoxComponent';
-
-const defaultOptions = {
-  config: {
-    container: '.au_databox', // DOM-element
-    firstline: true, // skal søgefeltet stå på en række for sig selv?
-    alphabet: 2, // hvilken knap er alfabetet?
-    initLetter: 'a', // Startbogstavet for alfabetet
-    trigger: 0,
-    tracking: '/virtual/databox/', // GA-tracking
-    buttons: [ // Teksten på knapperne - nyt!
-      { text: 'Dummy knap 1', link: '' },
-      { text: 'Dummy knap 2', link: '' },
-    ],
-    stacked: false,
-    rememberState: false,
-    expand: false,
-  },
-  background: {
-    color: '#003d73',
-    linkColor: '#003d73',
-    src: '',
-    height: 0,
-    text: '',
-    overlay: true,
-  },
-  search: {
-    autocomplete: true,
-    index: 1,
-    minLength: 1,
-    placeHolder: '',
-  },
-  data: {
-    mode: 'json',
-    source: '',
-    callback: null,
-  },
-};
-
-class AUDataboxParser {
-  static json(source, callback) {
-    if (source) {
-      let sourceArr = [];
-      if (!Array.isArray(source)) {
-        sourceArr.push(source);
-      } else {
-        sourceArr = source;
-      }
-      const promises = [];
-      sourceArr.forEach((s) => {
-        promises.push(new Promise((resolve) => {
-          fetch(s).then((promise) => promise.json()).then((data) => {
-            resolve(data);
-          });
-        }));
-      });
-
-      Promise.all(promises).then((values) => {
-        callback({
-          items: values.map((x) => x.items)[0],
-          groupings: values.map((x) => x.groupings)[0] || [],
-        });
-      });
-    }
-  }
-
-  static xml(source, callback) {
-    const xmlFunc = (data) => {
-      const items = [];
-      const children = [];
-      const associations = [];
-
-      let assocXML = [];
-      let count = 1;
-
-      do {
-        assocXML = $(data).find(`associations${count} > item`);
-
-        const assoc = [];
-        for (let i = 0; i < assocXML.length; i += 1) {
-          assoc.push({
-            id: $(assocXML[i]).attr('id'),
-            name: $(assocXML[i]).attr('name'),
-            items: [],
-          });
-        }
-
-        if (assoc.length > 0) {
-          associations.push(assoc);
-        }
-
-        count += 1;
-      } while (assocXML.length > 0);
-
-      const itemsXML = $(data).find('items > item');
-      $.each(itemsXML, function () {
-        const extraXML = $(this).find('extra');
-        const extra = [];
-        $.each(extraXML.find('param'), () => {
-          extra.push({
-            param: $(this).text(),
-          });
-        });
-        const obj = {
-          id: $(this).attr('id'),
-          name: $(this).attr('name'),
-          url: $(this).attr('url'),
-          parent: $(this).attr('parent'),
-          extra,
-          children: [],
-          associations: [],
-        };
-
-        for (let i = 0; i < associations.length; i += 1) {
-          const objAssoc = $(this).find(`association${parseInt(i + 1, 10)}`);
-
-          obj.associations.push([]);
-
-          for (let j = 0; j < objAssoc.length; j += 1) {
-            const id = parseInt($(objAssoc[j]).attr('id'), 10) - 1;
-            obj.associations[i].push({
-              id: associations[i][id].id,
-              name: associations[i][id].name,
-            });
-            associations[i][id].items.push(obj);
-          }
-        }
-
-        items.push(obj);
-        if (typeof obj.parent !== 'undefined' && obj.parent !== '') {
-          children.push(obj);
-        }
-      });
-
-      for (let c = 0; c < children.length; c += 1) {
-        const pid = children[c].parent;
-        for (let p = 0; p < items.length; p += 1) {
-          if (items[p].id === pid) {
-            items[p].children.push(children[c]);
-            break;
-          }
-        }
-      }
-
-      const groupings = [];
-      for (let i = 0; i < associations.length; i += 1) {
-        groupings.push({
-          id: i,
-          associations: associations[i],
-        });
-      }
-
-      callback({
-        rawData: data,
-        items,
-        groupings,
-      });
-    };
-
-    AU.helpers.getXML(source, (data) => {
-      xmlFunc(data);
-    });
-  }
-
-  static table(source, callback) {
-    const table = $(`${source} > table`);
-    const list = $(`${source} > ul`);
-
-    const items = [];
-    const children = [];
-    const associations = [];
-
-    $('li', list).each(function () {
-      const assoc = [];
-      $('> ul > li', this).each(function (i) {
-        assoc.push({
-          id: i,
-          name: $(this).text(),
-          items: [],
-        });
-      });
-
-      if (assoc.length > 0) {
-        associations.push(assoc);
-      }
-    });
-
-    $('tr', table).each(function (i) {
-      if (i > 0) {
-        const cells = $('td', this);
-
-        const id = parseInt(cells.eq(0).text(), 10);
-        const parent = parseInt(cells.eq(1).text(), 10);
-        let name = cells.eq(2).text();
-        name = name.trim();
-        const url = $('a', cells.eq(2)).attr('href');
-        const skip = 3; // Antallet af celler, som ikke angiver associations!
-
-        const obj = {
-          id,
-          name,
-          url,
-          parent,
-          extra: [],
-          children: [],
-          associations: [],
-        };
-
-        for (let j = 0; j < associations.length; j += 1) {
-          const assocCell = cells.eq(j + skip).text();
-          const assocCellSplit = assocCell.split(',');
-
-          obj.associations.push([]);
-
-          for (let k = 0; k < assocCellSplit.length; k += 1) {
-            const aid = parseInt(assocCellSplit[k], 10) - 1;
-
-            if (typeof associations[j][aid] !== 'undefined') {
-              obj.associations[j].push({
-                id: associations[j][aid].id,
-                name: associations[j][aid].name,
-              });
-
-              associations[j][aid].items.push(obj);
-            }
-          }
-        }
-
-        if (obj.parent === 0 || obj.parent === '') {
-          items.push(obj);
-        } else {
-          children.push(obj);
-        }
-      }
-    });
-
-    for (let c = 0; c < children.length; c += 1) {
-      const pid = children[c].parent;
-      for (let p = 0; p < items.length; p += 1) {
-        if (items[p].id === pid) {
-          items[p].children.push(children[c]);
-          break;
-        }
-      }
-    }
-
-    const groupings = [];
-    for (let i = 0; i < associations.length; i += 1) {
-      groupings.push({
-        id: i,
-        associations: associations[i],
-      });
-    }
-
-    callback({
-      items,
-      groupings,
-    });
-  }
-
-  static list(source, callback) {
-    const list = $(source);
-    const items = [];
-    $('li', list).each(function (i) {
-      items.push({
-        id: i,
-        label: $(this).text(),
-        value: $(this).text(),
-        name: $(this).text(),
-        url: $('a', this).attr('href'),
-        children: [],
-        associations: [],
-      });
-    });
-
-    callback({
-      items,
-      groupings: [],
-    });
-  }
-}
-class AUDatabox {
-  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];
-      }
-    }
-
-    return box;
-  }
-
-  static legacyCleanUp(_box) {
-    const box = _box;
-    const container = $(box.config.container);
-    if (container !== null) {
-      const containerChildren = $('> *:not(.no-header)', container); // Kan både være div og h2 elementer
-      if (containerChildren.length > 0) {
-        box.config.buttons = [];
-        containerChildren.each(function () {
-          box.config.buttons.push({
-            text: $(this).text(),
-            link: '',
-          });
-        });
-      }
-    }
-  }
-
-  init() {
-    const parser = {
-      json: AUDataboxParser.json,
-      xml: AUDataboxParser.xml,
-      table: AUDataboxParser.table,
-      list: AUDataboxParser.list,
-    };
-
-    for (let i = 0; i < this.boxes.length; i += 1) {
-      let box = this.boxes[i];
-      if (!box.loaded) {
-        box = AUDatabox.mergeOptions(box);
-        box.id = i;
-        AUDatabox.legacyCleanUp(box);
-        // I stedet for at skulle rette alle gamle søgebokse,
-        // hvor knappernes tekst er sat direkte i HTML'en,
-        // finder vi knapperne her og indsætter dem som 'buttons' i config'en
-        const mountNode = document.querySelector(box.config.container);
-        const visible = mountNode && getComputedStyle(mountNode).visibility !== 'hidden';
-        if (!box.config.stacked
-          && AU.responsive.state
-          && AU.responsive.state.NAME === 'PHONE') {
-          box.config.stacked = true;
-        }
-        if (visible) {
-          ReactDOM.render(<DataBoxComponent
-            box={box}
-            parse={parser[box.data.mode]}
-          />, mountNode);
-          box.loaded = true;
-        }
-
-        if (box.data.mode === 'table' || box.data.mode === 'list') {
-          const dataElement = document.querySelector(box.data.source);
-          if (dataElement) {
-            dataElement.parentNode.removeChild(dataElement);
-          }
-        }
-      }
-    }
-  }
-}
-
-window.AUDatabox = AUDatabox;
+/* eslint func-names: ["error", "never"] */
+/* eslint no-prototype-builtins: 0 */
+/* eslint no-restricted-syntax: 0 */
+/* eslint max-classes-per-file: 0 */
+/* eslint no-unused-vars: 0 */
+/* eslint-env browser */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import DataBoxComponent from '../components/databox/DataBoxComponent';
+
+const defaultOptions = {
+  config: {
+    container: '.au_databox', // DOM-element
+    firstline: true, // skal søgefeltet stå på en række for sig selv?
+    alphabet: 2, // hvilken knap er alfabetet?
+    initLetter: 'a', // Startbogstavet for alfabetet
+    trigger: 0,
+    tracking: '/virtual/databox/', // GA-tracking
+    buttons: [ // Teksten på knapperne - nyt!
+      { text: 'Dummy knap 1', link: '' },
+      { text: 'Dummy knap 2', link: '' },
+    ],
+    stacked: false,
+    rememberState: false,
+    expand: false,
+  },
+  background: {
+    color: '#003d73',
+    linkColor: '#003d73',
+    src: '',
+    height: 0,
+    text: '',
+    overlay: true,
+  },
+  search: {
+    autocomplete: true,
+    index: 1,
+    minLength: 1,
+    placeHolder: '',
+  },
+  data: {
+    mode: 'json',
+    source: '',
+    callback: null,
+  },
+};
+
+class AUDataboxParser {
+  static json(source, callback) {
+    if (source) {
+      let sourceArr = [];
+      if (!Array.isArray(source)) {
+        sourceArr.push(source);
+      } else {
+        sourceArr = source;
+      }
+      const promises = [];
+      sourceArr.forEach((s) => {
+        promises.push(new Promise((resolve) => {
+          fetch(s).then((promise) => promise.json()).then((data) => {
+            resolve(data);
+          });
+        }));
+      });
+
+      Promise.all(promises).then((values) => {
+        callback({
+          items: values.map((x) => x.items)[0],
+          groupings: values.map((x) => x.groupings)[0] || [],
+        });
+      });
+    }
+  }
+
+  static xml(source, callback) {
+    const xmlFunc = (data) => {
+      const items = [];
+      const children = [];
+      const associations = [];
+
+      let assocXML = [];
+      let count = 1;
+
+      do {
+        assocXML = $(data).find(`associations${count} > item`);
+
+        const assoc = [];
+        for (let i = 0; i < assocXML.length; i += 1) {
+          assoc.push({
+            id: $(assocXML[i]).attr('id'),
+            name: $(assocXML[i]).attr('name'),
+            items: [],
+          });
+        }
+
+        if (assoc.length > 0) {
+          associations.push(assoc);
+        }
+
+        count += 1;
+      } while (assocXML.length > 0);
+
+      const itemsXML = $(data).find('items > item');
+      $.each(itemsXML, function () {
+        const extraXML = $(this).find('extra');
+        const extra = [];
+        $.each(extraXML.find('param'), () => {
+          extra.push({
+            param: $(this).text(),
+          });
+        });
+        const obj = {
+          id: $(this).attr('id'),
+          name: $(this).attr('name'),
+          url: $(this).attr('url'),
+          parent: $(this).attr('parent'),
+          extra,
+          children: [],
+          associations: [],
+        };
+
+        for (let i = 0; i < associations.length; i += 1) {
+          const objAssoc = $(this).find(`association${parseInt(i + 1, 10)}`);
+
+          obj.associations.push([]);
+
+          for (let j = 0; j < objAssoc.length; j += 1) {
+            const id = parseInt($(objAssoc[j]).attr('id'), 10) - 1;
+            obj.associations[i].push({
+              id: associations[i][id].id,
+              name: associations[i][id].name,
+            });
+            associations[i][id].items.push(obj);
+          }
+        }
+
+        items.push(obj);
+        if (typeof obj.parent !== 'undefined' && obj.parent !== '') {
+          children.push(obj);
+        }
+      });
+
+      for (let c = 0; c < children.length; c += 1) {
+        const pid = children[c].parent;
+        for (let p = 0; p < items.length; p += 1) {
+          if (items[p].id === pid) {
+            items[p].children.push(children[c]);
+            break;
+          }
+        }
+      }
+
+      const groupings = [];
+      for (let i = 0; i < associations.length; i += 1) {
+        groupings.push({
+          id: i,
+          associations: associations[i],
+        });
+      }
+
+      callback({
+        rawData: data,
+        items,
+        groupings,
+      });
+    };
+
+    AU.helpers.getXML(source, (data) => {
+      xmlFunc(data);
+    });
+  }
+
+  static table(source, callback) {
+    const table = $(`${source} > table`);
+    const list = $(`${source} > ul`);
+
+    const items = [];
+    const children = [];
+    const associations = [];
+
+    $('li', list).each(function () {
+      const assoc = [];
+      $('> ul > li', this).each(function (i) {
+        assoc.push({
+          id: i,
+          name: $(this).text(),
+          items: [],
+        });
+      });
+
+      if (assoc.length > 0) {
+        associations.push(assoc);
+      }
+    });
+
+    $('tr', table).each(function (i) {
+      if (i > 0) {
+        const cells = $('td', this);
+
+        const id = parseInt(cells.eq(0).text(), 10);
+        const parent = parseInt(cells.eq(1).text(), 10);
+        let name = cells.eq(2).text();
+        name = name.trim();
+        const url = $('a', cells.eq(2)).attr('href');
+        const skip = 3; // Antallet af celler, som ikke angiver associations!
+
+        const obj = {
+          id,
+          name,
+          url,
+          parent,
+          extra: [],
+          children: [],
+          associations: [],
+        };
+
+        for (let j = 0; j < associations.length; j += 1) {
+          const assocCell = cells.eq(j + skip).text();
+          const assocCellSplit = assocCell.split(',');
+
+          obj.associations.push([]);
+
+          for (let k = 0; k < assocCellSplit.length; k += 1) {
+            const aid = parseInt(assocCellSplit[k], 10) - 1;
+
+            if (typeof associations[j][aid] !== 'undefined') {
+              obj.associations[j].push({
+                id: associations[j][aid].id,
+                name: associations[j][aid].name,
+              });
+
+              associations[j][aid].items.push(obj);
+            }
+          }
+        }
+
+        if (obj.parent === 0 || obj.parent === '') {
+          items.push(obj);
+        } else {
+          children.push(obj);
+        }
+      }
+    });
+
+    for (let c = 0; c < children.length; c += 1) {
+      const pid = children[c].parent;
+      for (let p = 0; p < items.length; p += 1) {
+        if (items[p].id === pid) {
+          items[p].children.push(children[c]);
+          break;
+        }
+      }
+    }
+
+    const groupings = [];
+    for (let i = 0; i < associations.length; i += 1) {
+      groupings.push({
+        id: i,
+        associations: associations[i],
+      });
+    }
+
+    callback({
+      items,
+      groupings,
+    });
+  }
+
+  static list(source, callback) {
+    const list = $(source);
+    const items = [];
+    $('li', list).each(function (i) {
+      items.push({
+        id: i,
+        label: $(this).text(),
+        value: $(this).text(),
+        name: $(this).text(),
+        url: $('a', this).attr('href'),
+        children: [],
+        associations: [],
+      });
+    });
+
+    callback({
+      items,
+      groupings: [],
+    });
+  }
+}
+class AUDatabox {
+  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];
+      }
+    }
+
+    return box;
+  }
+
+  static legacyCleanUp(_box) {
+    const box = _box;
+    const container = $(box.config.container);
+    if (container !== null) {
+      const containerChildren = $('> *:not(.no-header)', container); // Kan både være div og h2 elementer
+      if (containerChildren.length > 0) {
+        box.config.buttons = [];
+        containerChildren.each(function () {
+          box.config.buttons.push({
+            text: $(this).text(),
+            link: '',
+          });
+        });
+      }
+    }
+  }
+
+  init() {
+    const parser = {
+      json: AUDataboxParser.json,
+      xml: AUDataboxParser.xml,
+      table: AUDataboxParser.table,
+      list: AUDataboxParser.list,
+    };
+
+    for (let i = 0; i < this.boxes.length; i += 1) {
+      let box = this.boxes[i];
+      if (!box.loaded) {
+        box = AUDatabox.mergeOptions(box);
+        box.id = i;
+        AUDatabox.legacyCleanUp(box);
+        // I stedet for at skulle rette alle gamle søgebokse,
+        // hvor knappernes tekst er sat direkte i HTML'en,
+        // finder vi knapperne her og indsætter dem som 'buttons' i config'en
+        const mountNode = document.querySelector(box.config.container);
+        const visible = mountNode && getComputedStyle(mountNode).visibility !== 'hidden';
+        if (!box.config.stacked
+          && AU.responsive.state
+          && AU.responsive.state.NAME === 'PHONE') {
+          box.config.stacked = true;
+        }
+        if (visible) {
+          ReactDOM.render(<DataBoxComponent
+            box={box}
+            parse={parser[box.data.mode]}
+          />, mountNode);
+          box.loaded = true;
+        }
+
+        if (box.data.mode === 'table' || box.data.mode === 'list') {
+          const dataElement = document.querySelector(box.data.source);
+          if (dataElement) {
+            dataElement.parentNode.removeChild(dataElement);
+          }
+        }
+      }
+    }
+  }
+}
+
+window.AUDatabox = AUDatabox;