Widget: DCTList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
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; }
         .data-source-img.unselected {
         #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-source-cell',
                     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;
                        // 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" data-value="' + curr + '" src="' + url + '" alt="' + curr +'" title="' + curr + '">'
                        //        : prev + ' ' + curr;
                        // }, '');
                        // return output;
                     }
                     }
                 }
                 }
Line 345: Line 340:
             if (!(filters[0] && filters[0].type)) { return; }
             if (!(filters[0] && filters[0].type)) { return; }


             const markDeselectedDataSources = () => {
             const markImages = () => {
                 const selectedSources = filters[0].type.dataSources;
                 const selectedSources = filters[0].type.dataSources;
                 document.querySelectorAll('.data-source-cell .data-source-img').forEach(img => {
                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', markDeselectedDataSources);
 
                // 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', markDeselectedDataSources);
             tabulator.on('renderComplete', markImages);
         });
         });


Revision as of 12:32, 15 June 2022

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

Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:DCTList&oldid=4966"