Widget: DevGuidelines: Difference between revisions

Revision as of 12:09, 24 November 2022

Development version of the List of Guidelines.
Not ready for production!

@@ Line 557: / Line 557: @@
                          field: PHASE_PROP,
                          formatter: cell => cell.getValue().join(', ')
+                    },
+                    {
+                        title: 'Supported Platforms',
+                        field: 'dataSources',
+                        minWidth: 300, // required for responsiveness when using fitColumns
+                        cssClass: 'data-sources-cell',
+                        formatter: function (cell) {
+                            const val = cell.getValue();
+                            let out = '<div>';
+                            groupedSources.forEach((group, gIndex) => {
+                                // if (gIndex === groupedSources.length - 1) { out += '<div class="sources-collapse">'; }
+                                out += group.sources.reduce((prev, curr) => {
+                                    const idx = val.findIndex(src => src === curr.name);
+                                    if (idx === -1) {
+                                        return prev;
+                                    } else {
+                                        return curr.image
+                                            ? prev + '<img class="data-source-img" data-value="' + curr.name
+                                            + '" src="' + curr.image
+                                            + '" alt="' + curr.name
+                                            + '" title="' + curr.name + '">'
+                                            : prev + ' ' + curr.name;
+                                    }
+                                }, '');
+                                if (gIndex === groupedSources.length - 1) {
+                                    // out += '<span class="sources-collapse-toggle"></span>';
+                                    // out += '</div>';
+                                }
+                            });
+                            return out + '</div>';
+                        }
                      }
@@ Line 628: / Line 660: @@
                  }
+                const markImages = () => {
+                    const selectedSources = filter.type.dataSources;
+                    const selectedFunctions = filter.type.functions;
+                    // Mark data source images
+                    document.querySelectorAll('.data-sources-cell .data-source-img, .tabulator-responsive-collapse .data-source-img')
+                        .forEach(img => {
+                            if (!selectedSources || selectedSources.includes(img.dataset.value)) { img.classList.remove('unselected'); }
+                            else { img.classList.add('unselected'); }
+                        });
+                    // Mark functions images
+                    document.querySelectorAll('.functions-cell .func-img').forEach(img => {
+                        if (!selectedFunctions || selectedFunctions.includes(img.dataset.value)) { img.classList.remove('unselected'); }
+                        else { img.classList.add('unselected'); }
+                    });
+                    tabulator.off('renderComplete', markImages);
+                }
+                tabulator.on('renderComplete', markImages); // TODO: Prevent this from running if corresponding filters are not active.
              });