Widget: DCTList: Difference between revisions

Revision as of 12:08, 15 June 2022

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

@@ Line 92: / Line 92: @@
      const sourcesLayout = [
-         ['Facebook', 'Twitter', 'Instagram', 'YouTube'],
+         {
-        ['Crowd', 'Web'],
+            title: 'General',
+            sources: ['Crowd', 'Web']
+        },
+        {
+            title: 'Platforms',
+            sources: ['Facebook', 'Twitter', 'Instagram', 'YouTube']
+        }
      ];
@@ Line 243: / Line 249: @@
          for (const layoutGroup of sourcesLayout) {
              const group = [];
-             for (const source of layoutGroup) {
+             for (const source of layoutGroup.sources) {
                  let idx = sourcesCopy.findIndex(src => src.name === source);
                  if (idx !== -1) { group.push(sourcesCopy.splice(idx, 1)[0]); }
              }
-             if (group.length > 0) { groupedSources.push(group); }
+             if (group.length > 0) { groupedSources.push({ title: layoutGroup.title, sources: group }); }
          }
-         groupedSources.push(sourcesCopy);
+         groupedSources.push({ title: 'More', sources: sourcesCopy });
          let dataSourceFilterHtml = '';
          groupedSources.forEach(group => {
-             dataSourceFilterHtml += group.reduce((acc, curr, idx) => {
+            const groupHeaderHtml = '<div class="filter-group-header">' + group.title + '</div>';
+             dataSourceFilterHtml += group.sources.reduce((acc, curr, idx) => {
                  const identifier = escapeAttr(curr.name);
-                let groupHeaderHtml = '';
+                 return acc +
-                if (idx === 0) {
+                 '<div ' + (idx === 0 ? ' class="filter-group-start">' + groupHeaderHtml : '>') +
-                    groupHeaderHtml = '<div class="filter-group-header">' +
-                        'Group Title' +
-                        '</div>';
-                }
-                 return acc + groupHeaderHtml +
-                 '<div ' + (idx === 0 ? ' class="filter-group-start">' : '>') +
                  '<input type="checkbox" id="filter-' + identifier + '" value="' + curr.name + '" checked>' +
                  '<label for="filter-' + identifier + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'