Widget: DCTList: Difference between revisions

Revision as of 14:51, 8 June 2022

Development verstion of the DCT List.
Not ready for production!

@@ Line 56: / Line 56: @@
       */
-     /** @param {string} title */
+    /** @param {string} title */
-     function getUrl(title) {
+     const getUrl = title => {
          return title ? '/index.php/Special:FilePath/' + title : title;
      }
      /** @param {string} text */
-     function escapeAttr(text) {
+     const escapeAttr = text => {
          return text ? text.replace(/\s/g, '-') : text;
+    }
+    const table = new Tabulator("#dct-tabulator", {
+        layout: 'fitColumns',
+        columns: [
+            {
+                title: 'Name',
+                field: 'name',
+                formatter: function (cell) {
+                    /** @type {DCT} */
+                    const dct = cell.getData();
+                    return '<a href="' + dct.url + '">' + dct.name + '</a>';
+                }
+            },
+            {
+                title: 'Data Sources',
+                field: 'dataSources',
+                formatter: function (cell) {
+                    const output = cell.getValue().reduce((prev, curr) => {
+                        const src = dataSources.find(src => src.name === curr);
+                        const url = src ? src.image : '';
+                        return url ? prev + '<img class="data-source-img" src="' + url + '">' : prev + ' ' + curr;
+                    }, '');
+                    return output;
+                }
+            }
+        ]
+    });
+    /**
+     * @param {DCT} dct
+     * @param {DCT} filterState
+     */
+    function dctFilter(dct, filterState) {
+        return dct.dataSources.some(source => filterState.dataSources.includes(source));
+    }
+    function updateFilter() {
      }
@@ Line 98: / Line 137: @@
          return dctList;
-    }
-    /**
-     * @param {DCT} dct
-     * @param {DCT} filterState
-     */
-    function dctFilter(dct, filterState) {
-        return dct.dataSources.some(source => filterState.dataSources.includes(source));
      }
@@ Line 113: / Line 144: @@
          const dcts = data[1];
-         // Set up filters.
+         // Create filters.
          const filterHtml = dataSources.reduce((prev, curr) => {
              const identifier = escapeAttr(curr.name);
@@ Line 122: / Line 153: @@
          document.getElementById('data-source-filter').innerHTML = filterHtml;
-        // Set up table.
-        const table = new Tabulator("#dct-tabulator", {
-            layout: 'fitColumns',
-            columns: [
-                {
-                    title: 'Name',
-                    field: 'name',
-                    formatter: function (cell) {
-                        /** @type {DCT} */
-                        const dct = cell.getData();
-                        return '<a href="' + dct.url + '">' + dct.name + '</a>';
-                    }
-                },
-                {
-                    title: 'Data Sources',
-                    field: 'dataSources',
-                    formatter: function (cell) {
-                        const output = cell.getValue().reduce((prev, curr) => {
-                            const src = dataSources.find(src => src.name === curr);
-                            const url = src ? src.image : '';
-                            return url ? prev + '<img class="data-source-img" src="' + url + '">' : prev + ' ' + curr;
-                        }, '');
-                        return output;
-                    }
-                }
-            ]
-        });
          table.on('tableBuilt', () => { table.setData(dcts); });
          table.on('dataFiltered', (filters, rows) => {
              console.log(filters)