Widget: GuidelinesList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
Line 132: Line 132:
             align-items: start;
             align-items: start;
         }
         }
       
 
         .filter-content.loose {
         .filter-content.loose {
             gap: .5em .5em;
             gap: .5em .5em;
Line 238: Line 238:
             color: var(--links-orange);
             color: var(--links-orange);
         }
         }


         .data-source-img,
         .data-source-img,
Line 248: Line 247:
             filter: grayscale(1);
             filter: grayscale(1);
         }
         }
     </style>
     </style>
     <script>
     <script>
Line 260: Line 258:
         * @property {string[]} audienceTargets
         * @property {string[]} audienceTargets
         * @property {string[]} languages
         * @property {string[]} languages
        * @property {string[]} dataSources
         * @property {string[]} techs
         * @property {string[]} techs
         */
         */
         let table;  // Tabulator instance
         let table;  // Tabulator instance


         // This defines how sources are grouped in the filter.
         // This defines how sources are grouped in the filter.
         // Any source not listed here will be added to the last group entitled "More platforms".
         // Any source not listed here will be added to the last group entitled "More platforms".
         const sourcesLayout = [
         // const sourcesLayout = [
            {
        //    {
                title: 'General',
        //        title: 'General',
                sources: ['Crowd', 'Web']
        //        sources: ['Crowd', 'Web']
            },
        //    },
            {
        //    {
                title: 'Platforms',
        //        title: 'Platforms',
                sources: ['Facebook', 'Twitter', 'Instagram', 'YouTube']
        //        sources: ['Facebook', 'Twitter', 'Instagram', 'YouTube']
            }
        //    }
         ];
         // ];


         const PHASES = ["Before", "During", "After"];
         const PHASES = ["Before", "During", "After"];
Line 287: Line 285:
         const removePrefix = str => str.substring(str.indexOf(':') + 1);
         const removePrefix = str => str.substring(str.indexOf(':') + 1);


         const DATASRC_PROP = 'Data Sources';
         // const DATASRC_PROP = 'Data Sources';
         const PHASE_PROP = 'Disaster Management Phase';
         const PHASE_PROP = 'Disaster Management Phase';
         const THEME_PROP = 'Covers Thematic';
         const THEME_PROP = 'Covers Thematic';
Line 298: Line 296:


         const guidelineQuery = '[[Category:Guideline]]'
         const guidelineQuery = '[[Category:Guideline]]'
             + '|?' + DATASRC_PROP
             // + '|?' + DATASRC_PROP
             + '|?' + PHASE_PROP
             + '|?' + PHASE_PROP
             + '|?' + THEME_PROP
             + '|?' + THEME_PROP
Line 319: Line 317:
                 guideline.title = title;
                 guideline.title = title;
                 guideline.url = guidelineResult.fullurl;
                 guideline.url = guidelineResult.fullurl;
                 guideline[DATASRC_PROP] = guidelineResult.printouts[DATASRC_PROP].map(source => source.fulltext).sort();
                 // guideline[DATASRC_PROP] = guidelineResult.printouts[DATASRC_PROP].map(source => source.fulltext).sort();
                 guideline[PHASE_PROP] = guidelineResult.printouts[PHASE_PROP].map(value => value.fulltext);
                 guideline[PHASE_PROP] = guidelineResult.printouts[PHASE_PROP].map(value => value.fulltext);
                 guideline[THEME_PROP] = guidelineResult.printouts[THEME_PROP].map(value => value.fulltext);
                 guideline[THEME_PROP] = guidelineResult.printouts[THEME_PROP].map(value => value.fulltext);
Line 381: Line 379:
             if (selectedLang.length > 0) filterState.languages = selectedLang;
             if (selectedLang.length > 0) filterState.languages = selectedLang;


             const selectedSources = Array.from(document.querySelectorAll('#data-source-filter input[type="checkbox"]:checked'))
             // const selectedSources = Array.from(document.querySelectorAll('#data-source-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            //    .map(checkbox => checkbox.value);
             if (selectedSources.length > 0) filterState.dataSources = selectedSources;
             // if (selectedSources.length > 0) filterState.dataSources = selectedSources;


             const selectedTech = Array.from(document.querySelectorAll('#tech-filter input[type="checkbox"]:checked'))
             const selectedTech = Array.from(document.querySelectorAll('#tech-filter input[type="checkbox"]:checked'))
Line 415: Line 413:
                 ? filterState.languages.every(lang => guideline[LANG_PROP].includes(lang))
                 ? filterState.languages.every(lang => guideline[LANG_PROP].includes(lang))
                 : true;
                 : true;
             const sourcesCheck = filterState.dataSources
             // const sourcesCheck = filterState.dataSources
                ? filterState.dataSources.every(src => guideline[DATASRC_PROP].includes(src))
            //    ? filterState.dataSources.every(src => guideline[DATASRC_PROP].includes(src))
                : true;
            //    : true;
             const techCheck = filterState.techs
             const techCheck = filterState.techs
                 ? filterState.techs.every(tech => guideline[TECH_PROP].includes(tech))
                 ? filterState.techs.every(tech => guideline[TECH_PROP].includes(tech))
Line 425: Line 423:
         }
         }


         Promise.all([getSources(), getGuidelines()]).then(data => {
         Promise.all([
            // getSources(),
            getGuidelines()
        ]).then(data => {


             const [dataSources, guidelines] = data;
             const [
                // dataSources,
                guidelines
            ] = data;


             let COVERS_THEMATIC_VALUES = []
             let COVERS_THEMATIC_VALUES = []
Line 460: Line 464:


             // Set up sources filter
             // Set up sources filter
             const groupedSources = [];
             // const groupedSources = [];
             const sourcesCopy = Array.from(dataSources);
             // const sourcesCopy = Array.from(dataSources);
             for (const layoutGroup of sourcesLayout) {
             // for (const layoutGroup of sourcesLayout) {
                const group = [];
            //    const group = [];
                for (const source of layoutGroup.sources) {
            //    for (const source of layoutGroup.sources) {
                    let idx = sourcesCopy.findIndex(src => src.name === source);
            //        let idx = sourcesCopy.findIndex(src => src.name === source);
                    if (idx !== -1) { group.push(sourcesCopy.splice(idx, 1)[0]); }
            //        if (idx !== -1) { group.push(sourcesCopy.splice(idx, 1)[0]); }
                }
            //    }
                if (group.length > 0) { groupedSources.push({ title: layoutGroup.title, sources: group }); }
            //    if (group.length > 0) { groupedSources.push({ title: layoutGroup.title, sources: group }); }
             }
             // }
             groupedSources.push({ title: 'More platforms', sources: sourcesCopy });
             // groupedSources.push({ title: 'More platforms', sources: sourcesCopy });


             let dataSourceFilterHtml = '';
             let dataSourceFilterHtml = '';
Line 590: Line 594:
                         formatter: cell => cell.getValue().join(', ') || '&mdash;'
                         formatter: cell => cell.getValue().join(', ') || '&mdash;'
                     },
                     },
                     {
                     // {
                        title: 'Mentions Platforms',
                    //    title: 'Mentions Platforms',
                        field: DATASRC_PROP,
                    //    field: DATASRC_PROP,
                        minWidth: 300, // required for responsiveness when using fitColumns
                    //    minWidth: 300, // required for responsiveness when using fitColumns
                        cssClass: 'data-sources-cell',
                    //    cssClass: 'data-sources-cell',
                        formatter: function (cell) {
                    //    formatter: function (cell) {
                            const val = cell.getValue();
                    //        const val = cell.getValue();
                            let out = '';
                    //        let out = '';


                            groupedSources.forEach((group, gIndex) => {
                    //        groupedSources.forEach((group, gIndex) => {
                                // if (gIndex === groupedSources.length - 1) { out += '<div class="sources-collapse">'; }
                    //            // if (gIndex === groupedSources.length - 1) { out += '<div class="sources-collapse">'; }
                                out += group.sources.reduce((prev, curr) => {
                    //            out += group.sources.reduce((prev, curr) => {
                                    const idx = val.findIndex(src => src === curr.name);
                    //                const idx = val.findIndex(src => src === curr.name);
                                    if (idx === -1) {
                    //                if (idx === -1) {
                                        return prev;
                    //                    return prev;
                                    } else {
                    //                } else {
                                        return curr.image
                    //                    return curr.image
                                            ? prev + '<img class="data-source-img" data-value="' + curr.name
                    //                        ? prev + '<img class="data-source-img" data-value="' + curr.name
                                            + '" src="' + curr.image
                    //                        + '" src="' + curr.image
                                            + '" alt="' + curr.name
                    //                        + '" alt="' + curr.name
                                            + '" title="' + curr.name + '">'
                    //                        + '" title="' + curr.name + '">'
                                            : prev + ' ' + curr.name;
                    //                        : prev + ' ' + curr.name;
                                    }
                    //                }
                                }, '');
                    //            }, '');
                                if (gIndex === groupedSources.length - 1) {
                    //            if (gIndex === groupedSources.length - 1) {
                                    // out += '<span class="sources-collapse-toggle"></span>';
                    //                // out += '<span class="sources-collapse-toggle"></span>';
                                    // out += '</div>';
                    //                // out += '</div>';
                                }
                    //            }
                            });
                    //        });


                            if (!out) { out = '&mdash;' }
                    //        if (!out) { out = '&mdash;' }
 
                            return '<div>' + out + '</div>';
                        }
                    }


                    //        return '<div>' + out + '</div>';
                    //    }
                    // }
                 ],
                 ],
                 initialSort: [
                 initialSort: [
Line 688: Line 691:
                 // Exit if filter object/type doesn't exist (happens after Tabulator's own filter reset).
                 // Exit if filter object/type doesn't exist (happens after Tabulator's own filter reset).
                 if (!(filter && filter.type)) { summary.textContent = 'No filter. Showing all results.'; return; }
                 if (!(filter && filter.type)) { summary.textContent = 'No filter. Showing all results.'; return; }


                 // Update filter text.
                 // Update filter text.
Line 697: Line 699:
                     !filter.type.audienceTargets &&
                     !filter.type.audienceTargets &&
                     !filter.type.audienceExperiences &&
                     !filter.type.audienceExperiences &&
                     !filter.type.dataSources &&
                     // !filter.type.dataSources &&
                     !filter.type.techs
                     !filter.type.techs
                 ) { summary.textContent = 'No filter. Showing all results.'; }
                 ) { summary.textContent = 'No filter. Showing all results.'; }
Line 727: Line 729:
                             + '</td></tr>';
                             + '</td></tr>';
                     }
                     }
                     if (filter.type.dataSources) {
                     // if (filter.type.dataSources) {
                        summaryHtml += '<tr><td><strong>Mentions Platforms</strong></td><td>'
                    //    summaryHtml += '<tr><td><strong>Mentions Platforms</strong></td><td>'
                            + (filter.type.dataSources.length > 0 ? filter.type.dataSources.join(', ') : 'none')
                    //        + (filter.type.dataSources.length > 0 ? filter.type.dataSources.join(', ') : 'none')
                            + '</td></tr>';
                    //        + '</td></tr>';
                     }
                     // }
                     if (filter.type.techs) {
                     if (filter.type.techs) {
                         summaryHtml += '<tr><td><strong>Mentions Technologies</strong></td><td>'
                         summaryHtml += '<tr><td><strong>Mentions Technologies</strong></td><td>'
Line 741: Line 743:
                 }
                 }


                 const markImages = () => {
                 // const markImages = () => {
                    const selectedSources = filter.type.dataSources;
                //    const selectedSources = filter.type.dataSources;
                    const selectedFunctions = filter.type.functions;
                //    const selectedFunctions = filter.type.functions;


                    // Mark data source images
                //    // Mark data source images
                    document.querySelectorAll('.data-sources-cell .data-source-img, .tabulator-responsive-collapse .data-source-img')
                //    document.querySelectorAll('.data-sources-cell .data-source-img, .tabulator-responsive-collapse .data-source-img')
                        .forEach(img => {
                //        .forEach(img => {
                            if (!selectedSources || selectedSources.includes(img.dataset.value)) { img.classList.remove('unselected'); }
                //            if (!selectedSources || selectedSources.includes(img.dataset.value)) { img.classList.remove('unselected'); }
                            else { img.classList.add('unselected'); }
                //            else { img.classList.add('unselected'); }
                        });
                //        });


                    // Mark functions images
                //    // Mark functions images
                    document.querySelectorAll('.functions-cell .func-img').forEach(img => {
                //    document.querySelectorAll('.functions-cell .func-img').forEach(img => {
                        if (!selectedFunctions || selectedFunctions.includes(img.dataset.value)) { img.classList.remove('unselected'); }
                //        if (!selectedFunctions || selectedFunctions.includes(img.dataset.value)) { img.classList.remove('unselected'); }
                        else { img.classList.add('unselected'); }
                //        else { img.classList.add('unselected'); }
                    });
                //    });


                    tabulator.off('renderComplete', markImages);
                //    tabulator.off('renderComplete', markImages);
                 }
                 // }
                 tabulator.on('renderComplete', markImages); // TODO: Prevent this from running if corresponding filters are not active.
                 // // TODO: Prevent this from running if corresponding filters are not active.
                // tabulator.on('renderComplete', markImages);
             });
             });


Line 983: Line 986:
                     </div>
                     </div>
                 </div>
                 </div>
                 <div class="filter-wrapper">
                 <!-- <div class="filter-wrapper">
                     <h4 class="filter-toggle">Mentions Platforms <div class="plus icon"></div></h4>
                     <h4 class="filter-toggle">Mentions Platforms <div class="plus icon"></div></h4>
                     <div class="filter-container">
                     <div class="filter-container">
Line 992: Line 995:
                         <div class="filter-content loose" id="data-source-filter"></div>
                         <div class="filter-content loose" id="data-source-filter"></div>
                     </div>
                     </div>
                 </div>
                 </div> -->
                 <div class="filter-wrapper">
                 <div class="filter-wrapper">
                     <h4 class="filter-toggle">Mentions Technologies <div class="plus icon"></div></h4>
                     <h4 class="filter-toggle">Mentions Technologies <div class="plus icon"></div></h4>

Revision as of 11:48, 18 July 2023

Current version of the List of Guidelines.
Currently in use – do not modify!

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