Difference between revisions of "Widget:DevGuidelines"
From LINKS Community Center
| Line 557: | Line 557: | ||
field: PHASE_PROP, | field: PHASE_PROP, | ||
formatter: cell => cell.getValue().join(', ') | 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. | ||
}); | }); | ||
Revision as of 13:09, 24 November 2022
Development version of the List of Guidelines.
Not ready for production!