Difference between revisions of "Widget:DCTList"
From LINKS Community Center
| Line 65: | Line 65: | ||
.data-source-img, .func-img { width: 2em; height: 2em; margin-right: .4em; margin-bottom: .4em; } | .data-source-img, .func-img { width: 2em; height: 2em; margin-right: .4em; margin-bottom: .4em; } | ||
.source-img-placeholder { display:inline-block; width: 2em; height: 2em; } | .source-img-placeholder { display:inline-block; width: 2em; height: 2em; } | ||
| − | + | #dct-tabulator img.unselected { | |
filter: grayscale(1); | filter: grayscale(1); | ||
opacity: .25; | opacity: .25; | ||
| Line 293: | Line 293: | ||
title: 'Functions', | title: 'Functions', | ||
field: 'functions', | field: 'functions', | ||
| + | cssClass: 'functions-cell', | ||
formatter: function (cell) { | formatter: function (cell) { | ||
const output = cell.getValue() | const output = cell.getValue() | ||
| − | .map(func => '<img class="func-img" src="' + fnImages[func] + '" alt="' + func + '" title="' + func + '">') | + | .map(func => '<img class="func-img" src="' + fnImages[func] + |
| + | '" data-value="' + func + | ||
| + | '" alt="' + func + | ||
| + | '" title="' + func + | ||
| + | '">') | ||
.join(''); | .join(''); | ||
return output; | return output; | ||
| Line 303: | Line 308: | ||
title: 'Supported Platforms', | title: 'Supported Platforms', | ||
field: 'dataSources', | field: 'dataSources', | ||
| − | cssClass: 'data- | + | cssClass: 'data-sources-cell', |
formatter: function (cell) { | formatter: function (cell) { | ||
const val = cell.getValue(); | const val = cell.getValue(); | ||
| Line 322: | Line 327: | ||
}); | }); | ||
return out; | return out; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
} | } | ||
| Line 345: | Line 340: | ||
if (!(filters[0] && filters[0].type)) { return; } | if (!(filters[0] && filters[0].type)) { return; } | ||
| − | const | + | const markImages = () => { |
const selectedSources = filters[0].type.dataSources; | const selectedSources = filters[0].type.dataSources; | ||
| − | document.querySelectorAll('.data- | + | const selectedFunctions = filters[0].type.functions; |
| + | |||
| + | // Mark data source images | ||
| + | document.querySelectorAll('.data-sources-cell .data-source-img').forEach(img => { | ||
if (selectedSources.includes(img.dataset.value)) { img.classList.remove('unselected'); } | if (selectedSources.includes(img.dataset.value)) { img.classList.remove('unselected'); } | ||
else { img.classList.add('unselected'); } | else { img.classList.add('unselected'); } | ||
}); | }); | ||
| − | tabulator.off('renderComplete', | + | |
| + | // Mark functions images | ||
| + | document.querySelectorAll('.functions-cell .func-img').forEach(img => { | ||
| + | if (selectedFunctions.includes(img.dataset.value)) { img.classList.remove('unselected'); } | ||
| + | else { img.classList.add('unselected'); } | ||
| + | }); | ||
| + | |||
| + | tabulator.off('renderComplete', markImages); | ||
} | } | ||
| − | tabulator.on('renderComplete', | + | tabulator.on('renderComplete', markImages); |
}); | }); | ||
Revision as of 13:32, 15 June 2022
Development verstion of the DCT List.
Not ready for production!