Difference between revisions of "Widget:GuidelinesList"

From LINKS Community Center
Jump to: navigation, search
 
(6 intermediate revisions by the same user not shown)
Line 132: Line 132:
 
             align-items: start;
 
             align-items: start;
 
         }
 
         }
−
       
+
 
 
         .filter-content.loose {
 
         .filter-content.loose {
 
             gap: .5em .5em;
 
             gap: .5em .5em;
Line 210: Line 210:
 
         #guideline-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse {
 
         #guideline-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse {
 
             border: 0 none;
 
             border: 0 none;
−
            padding: 0 .5em 2em 0;
 
 
         }
 
         }
  
Line 227: Line 226:
 
         #guideline-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse table {
 
         #guideline-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse table {
 
             font-size: smaller;
 
             font-size: smaller;
 +
        }
 +
 +
        #guideline-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse table td {
 +
            white-space: normal;
 
         }
 
         }
  
Line 239: Line 242:
 
         }
 
         }
  
−
 
+
         /* .data-source-img,
−
         .data-source-img,
 
 
         .func-img {
 
         .func-img {
 
             width: 1.2rem;
 
             width: 1.2rem;
Line 247: Line 249:
 
             margin-bottom: .4rem;
 
             margin-bottom: .4rem;
 
             filter: grayscale(1);
 
             filter: grayscale(1);
−
         }
+
         } */
−
 
 
 
     </style>
 
     </style>
 
     <script>
 
     <script>
Line 260: Line 261:
 
         * @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 288:
 
         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 299:
  
 
         const guidelineQuery = '[[Category:Guideline]]'
 
         const guidelineQuery = '[[Category:Guideline]]'
−
             + '|?' + DATASRC_PROP
+
             // + '|?' + DATASRC_PROP
 
             + '|?' + PHASE_PROP
 
             + '|?' + PHASE_PROP
 
             + '|?' + THEME_PROP
 
             + '|?' + THEME_PROP
Line 319: Line 320:
 
                 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 333: Line 334:
  
 
         // Fetches platform / data source information.
 
         // Fetches platform / data source information.
−
         async function getSources() {
+
         // async function getSources() {
−
            const IMG_KEY = 'IMAGE';
+
        //    const IMG_KEY = 'IMAGE';
−
            const sourceResponse = await fetch(
+
        //    const sourceResponse = await fetch(
−
                getQueryUrl('[[Category:Social media platform]]|?' + IMG_KEY)
+
        //        getQueryUrl('[[Category:Social media platform]]|?' + IMG_KEY)
−
            ).then(response => response.json());
+
        //    ).then(response => response.json());
  
−
            return Object.keys(sourceResponse.query.results).map(platform => {
+
        //    return Object.keys(sourceResponse.query.results).map(platform => {
−
                const img = sourceResponse.query.results[platform].printouts[IMG_KEY][0];
+
        //        const img = sourceResponse.query.results[platform].printouts[IMG_KEY][0];
−
                return {
+
        //        return {
−
                    name: platform,
+
        //            name: platform,
−
                    image: img ? getFilePath(img.fulltext) : undefined
+
        //            image: img ? getFilePath(img.fulltext) : undefined
−
                };
+
        //        };
−
            });
+
        //    });
−
         }
+
         // }
  
 
         function applyFilters(clear) {
 
         function applyFilters(clear) {
−
            // TODO: apply Filters
 
 
             if (!table) return;
 
             if (!table) return;
  
Line 381: Line 381:
 
             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 415:
 
                 ? 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))
 
                 : true;
 
                 : true;
  
−
             return phaseCheck && thematicCheck && audienceExperiencesCheck && audienceTargetCheck && langCheck && sourcesCheck & techCheck;
+
             return phaseCheck && thematicCheck && audienceExperiencesCheck && audienceTargetCheck && langCheck && techCheck;
 
         }
 
         }
  
−
         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 466:
  
 
             // 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 = '';
−
             groupedSources.forEach(group => {
+
             // groupedSources.forEach(group => {
−
                dataSourceFilterHtml += '<div class="filter-group-header">' + group.title + '</div>';
+
            //    dataSourceFilterHtml += '<div class="filter-group-header">' + group.title + '</div>';
−
                dataSourceFilterHtml += group.sources.reduce((acc, curr, idx) => {
+
            //    dataSourceFilterHtml += group.sources.reduce((acc, curr, idx) => {
−
                    const identifier = escapeAttr(curr.name);
+
            //        const identifier = escapeAttr(curr.name);
−
                    return acc +
+
            //        return acc +
−
                        '<div ' + (idx === 0 ? ' class="filter-group-start">' : '>') +
+
            //            '<div ' + (idx === 0 ? ' class="filter-group-start">' : '>') +
−
                        '<input type="checkbox" id="filter-' + identifier + '" value="' + curr.name + '">' +
+
            //            '<input type="checkbox" id="filter-' + identifier + '" value="' + curr.name + '">' +
−
                        '<label for="filter-' + identifier + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'
+
            //            '<label for="filter-' + identifier + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'
−
                }, '');
+
            //    }, '');
−
             });
+
             // });
−
             document.getElementById('data-source-filter').innerHTML = dataSourceFilterHtml;
+
             // document.getElementById('data-source-filter').innerHTML = dataSourceFilterHtml;
  
  
Line 590: Line 596:
 
                         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 693:
 
                 // 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 701:
 
                     !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 731:
 
                             + '</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 745:
 
                 }
 
                 }
  
−
                 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 779: Line 784:
 
                 applyFilters();
 
                 applyFilters();
 
             }, { passive: true });
 
             }, { passive: true });
−
             document.getElementById('data-source-filter').addEventListener('change', event => {
+
             // document.getElementById('data-source-filter').addEventListener('change', event => {
−
                applyFilters();
+
            //    applyFilters();
−
             }, { passive: true });
+
             // }, { passive: true });
 
             document.getElementById('tech-filter').addEventListener('change', event => {
 
             document.getElementById('tech-filter').addEventListener('change', event => {
 
                 applyFilters();
 
                 applyFilters();
Line 983: Line 988:
 
                     </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 997:
 
                         <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>

Latest revision as of 14: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=10519"