Merge pull request #143 from nzzdev/release-3.3.0

Release 3.3.0
nzzdev · Aug 20, 2020 · d84c9e1 · d84c9e1
2 parents 2f8b728 + 9a4b3c1
commit d84c9e1
Show file tree

Hide file tree

Showing 13 changed files with 795 additions and 709 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Q Table [![Build Status](https://travis-ci.com/nzzdev/Q-table.svg?token=g43MZxbtUcZ6QyxqUoJM&branch=dev)](https://travis-ci.com/nzzdev/Q-table) 
+# Q Table [![Build Status](https://travis-ci.com/nzzdev/Q-table.svg?token=g43MZxbtUcZ6QyxqUoJM&branch=dev)](https://travis-ci.com/nzzdev/Q-table)
 
 **Maintainer**: [philipkueng](https://github.com/philipkueng)
 
@@ -130,15 +130,16 @@ This is a feature to shorten large tables in the article and make them collapsab
 
 <img src="/doc/footnotes.png" align="right" width=302 height=437>
 
-Footnotes are a feature to display annotations in the table and the sources in the footer of the table. It uses the `metaData` feature of [Q-Editor](https://github.com/nzzdev/Q-editor/blob/d27d6f9e88a982b10e9e812139712026a7971977/client/src/elements/schema-editor/schema-editor-table.js)
+Footnotes are a feature to display annotations in the table and the sources in the footer of the table. It uses the `metaData` feature of [Q-Editor](https://github.com/nzzdev/Q-editor/blob/d27d6f9e88a982b10e9e812139712026a7971977/client/src/elements/schema-editor/schema-editor-table.js). Footnotes with the same text will be merged together.
 
 ###### Implementation details serverside
 
-- The function `getFilteredMetaDataFootnotes()` will filter and sort all footnotes from `item.data.metaData`. The function will always return an object, when not used the object will be empty
+- The function `getFootnotes()` will filter and sort all footnotes from `item.data.metaData`. Additional the data will be transitioned, that there will be listed only unique footnotes, with an array of coordinates, where the footnote will be placed. The function will always return an object, when not used the object will be empty.
 - Those footnotes will then be passed to the function `getTableData()`
 - Once the `tableData` is adjusted in `getTableData()`, there's a check if footnotes are set
 - If there are footnotes, they will be passed to the function `appendFootnoteAnnotationsToTableData()` along with `tableData` and `options`
 - In `appendFootnoteAnnotationsToTableData()` the `footnoteClass` will be calculated and determined if extra spacing is used or not
+- Before appending the footnotes to the `tableData`, the footnotes array will be flattened and prepared to ease to complexity.
 - [This](https://github.com/nzzdev/Q-table/blob/e4fbf189ce8c1191cdfad2fac60ee9677cc8eda7/helpers/footnotes.js#L62-L75) is the matrix how we apply spacing classes to the cell
 - Because the title in the Card-Layout is already set by the `::before` pseudo element, it's not possible to apply the annotation with this selector as well. Therefore we have to add the unicode to the dataset `data-label` when the Card-Layout is set so we map the footnote annoation value to the `unicode`. **Important**: The mapping of the value is from **1** to **9**.
 - After applying the annotations to the `tableData`, the function `appendFootnoteAnnotationsToTableData()` should return an object like this:
@@ -153,9 +154,9 @@ Footnotes are a feature to display annotations in the table and the sources in t
       footnote: {
         value: 1,
         unicode: "¹",
-        class: null
-      }
-    }
+        class: null,
+      },
+    },
   ],
   [
     {
@@ -165,10 +166,10 @@ Footnotes are a feature to display annotations in the table and the sources in t
       footnote: {
         value: 2,
         unicode: "²",
-        class: null
-      }
-    }
-  ]
+        class: null,
+      },
+    },
+  ],
 ];
 ```
 

diff --git a/helpers/footnotes.js b/helpers/footnotes.js
@@ -8,46 +8,47 @@ function appendFootnoteAnnotationsToTableData(tableData, footnotes, options) {
     6: "\u2076",
     7: "\u2077",
     8: "\u2078",
-    9: "\u2079"
+    9: "\u2079",
   };
   let spacings = [];
+  let flattenedFootnotes = getFlattenedFootnotes(footnotes);
 
-  footnotes.forEach((footnote, index) => {
+  flattenedFootnotes.forEach((footnote) => {
     let footnoteClass = getClass(
       options,
       footnote,
-      footnotes.length,
+      flattenedFootnotes.length,
       tableData[footnote.rowIndex][footnote.colIndex].type,
       tableData[footnote.rowIndex].length - 1
     );
     if (footnoteClass) {
       spacings.push({
         colIndex: footnote.colIndex,
-        class: footnoteClass
+        class: footnoteClass,
       });
     }
     // create a new property to safe the index of the footnote
     tableData[footnote.rowIndex][footnote.colIndex].footnote = {
-      value: index + 1,
-      unicode: unicodes[index + 1],
-      class: footnoteClass
+      value: footnote.value,
+      unicode: unicodes[footnote.value],
+      class: footnoteClass,
     };
   });
 
   // assign spacingClass to cell
   tableData.forEach((row, index) => {
     // assign class when not cardlayout but cardlayoutifsmall
     if (!options.cardLayout || options.cardLayoutIfSmall) {
-      spacings.forEach(spacing => {
+      spacings.forEach((spacing) => {
         row[spacing.colIndex].classes.push(spacing.class);
       });
     }
 
     // assign class when cardlayout or cardlayoutifsmall is active
     if (options.cardLayout || options.cardLayoutIfSmall) {
       if (!options.hideTableHeader && index !== 0) {
-        row.forEach(cell => {
-          footnotes.length >= 10
+        row.forEach((cell) => {
+          flattenedFootnotes.length >= 10
             ? cell.classes.push("q-table-col-footnotes-cardlayout-double")
             : cell.classes.push("q-table-col-footnotes-cardlayout-single");
         });
@@ -76,9 +77,9 @@ function getClass(options, footnote, amountOfFootnotes, type, lastColIndex) {
   return null;
 }
 
-function getFilteredMetaDataFootnotes(metaData, hideTableHeader) {
-  return metaData.cells
-    .filter(cell => {
+function getFootnotes(metaData, hideTableHeader) {
+  let footnotes = metaData.cells
+    .filter((cell) => {
       if (!cell.data.footnote || (hideTableHeader && cell.rowIndex === 0)) {
         return false;
       }
@@ -91,9 +92,52 @@ function getFilteredMetaDataFootnotes(metaData, hideTableHeader) {
       }
       return a.colIndex - b.colIndex;
     });
+  return getStructuredFootnotes(footnotes);
+}
+
+function getStructuredFootnotes(footnotes) {
+  let structuredFootnotes = [];
+  footnotes.forEach((footnote) => {
+    let existingFootnote = structuredFootnotes.find(
+      (filterFootnote) => footnote.data.footnote === filterFootnote.value
+    );
+
+    if (existingFootnote) {
+      existingFootnote.coords.push({
+        colIndex: footnote.colIndex,
+        rowIndex: footnote.rowIndex,
+      });
+    } else {
+      structuredFootnotes.push({
+        value: footnote.data.footnote,
+        index: structuredFootnotes.length + 1,
+        coords: [
+          {
+            colIndex: footnote.colIndex,
+            rowIndex: footnote.rowIndex,
+          },
+        ],
+      });
+    }
+  });
+  return structuredFootnotes;
+}
+
+function getFlattenedFootnotes(footnotes) {
+  let flattenedFootnotes = [];
+  footnotes.forEach((footnote) => {
+    footnote.coords.forEach((coord) => {
+      flattenedFootnotes.push({
+        value: footnote.index,
+        colIndex: coord.colIndex,
+        rowIndex: coord.rowIndex,
+      });
+    });
+  });
+  return flattenedFootnotes;
 }
 
 module.exports = {
-  appendFootnoteAnnotationsToTableData: appendFootnoteAnnotationsToTableData,
-  getFilteredMetaDataFootnotes: getFilteredMetaDataFootnotes
+  appendFootnoteAnnotationsToTableData,
+  getFootnotes,
 };