Widget: DevGuidelines: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Cschwentker (talk | contribs)
No edit summary
Cschwentker (talk | contribs)
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 225: Line 225:
             padding-right: 10px;
             padding-right: 10px;
         }
         }


         #guideline-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse table {
         #guideline-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse table {
Line 240: Line 239:
             color: var(--links-orange);
             color: var(--links-orange);
         }
         }


         .data-source-img,
         .data-source-img,
Line 262: Line 262:
         * @property {string[]} languages
         * @property {string[]} languages
         * @property {string[]} dataSources
         * @property {string[]} dataSources
        * @property {string[]} techs
         */
         */
         let table;  // Tabulator instance
         let table;  // Tabulator instance
        // This defines how sources are grouped in the filter.
        // Any source not listed here will be added to the last group entitled "More platforms".
        const sourcesLayout = [
            {
                title: 'General',
                sources: ['Crowd', 'Web']
            },
            {
                title: 'Platforms',
                sources: ['Facebook', 'Twitter', 'Instagram', 'YouTube']
            }
        ];


         const PHASES = ["Before", "During", "After"];
         const PHASES = ["Before", "During", "After"];
Line 281: Line 295:
         const EX_PROP = 'Audience Experience Level';
         const EX_PROP = 'Audience Experience Level';
         const TA_PROP = 'Target Audience';
         const TA_PROP = 'Target Audience';
        const TECH_PROP = 'Technologies'


         const guidelineQuery = '[[Category:Guideline]]'
         const guidelineQuery = '[[Category:Guideline]]'
Line 289: Line 304:
             + '|?' + YEAR_PROP
             + '|?' + YEAR_PROP
             + '|?' + EX_PROP
             + '|?' + EX_PROP
             + '|?' + TA_PROP;
             + '|?' + TA_PROP
            + '|?' + TECH_PROP;
         + '|limit=500'
         + '|limit=500'


         async function getGuidelines() {
         async function getGuidelines() {
Line 310: Line 325:
                 guideline[EX_PROP] = guidelineResult.printouts[EX_PROP].map(value => value.fulltext);
                 guideline[EX_PROP] = guidelineResult.printouts[EX_PROP].map(value => value.fulltext);
                 guideline[YEAR_PROP] = guidelineResult.printouts[YEAR_PROP][0] && guidelineResult.printouts[YEAR_PROP][0].raw.slice(-4);
                 guideline[YEAR_PROP] = guidelineResult.printouts[YEAR_PROP][0] && guidelineResult.printouts[YEAR_PROP][0].raw.slice(-4);
                guideline[TECH_PROP] = guidelineResult.printouts[TECH_PROP].map(value => value.fulltext);
                 return guideline;
                 return guideline;
             });
             });
Line 367: Line 383:
             filterState.dataSources = selectedSources.length === sourceOptions.length ? undefined : selectedSources;
             filterState.dataSources = selectedSources.length === sourceOptions.length ? undefined : selectedSources;


            const techOptions = Array.from(document.querySelectorAll('#tech-filter input[type="checkbox"]'));
            const selectedTechs = techOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
            filterState.techs = selectedTechs.length === techOptions.length ? undefined : selectedTechs;


             table.setFilter(guidelineFilter, filterState);
             table.setFilter(guidelineFilter, filterState);
Line 397: Line 416:
                 ? guideline[DATASRC_PROP].some(source => filterState.dataSources.includes(source))
                 ? guideline[DATASRC_PROP].some(source => filterState.dataSources.includes(source))
                 : true;
                 : true;
            const techCheck = filterState.techs
                ? guideline[TECH_PROP].some(source => filterState.techs.includes(source))
                : true


             return phaseCheck && thematicCheck && audienceExperiencesCheck && audienceTargetCheck && langCheck && sourcesCheck;
             return phaseCheck && thematicCheck && audienceExperiencesCheck && audienceTargetCheck && langCheck && sourcesCheck & techCheck;
         }
         }


Line 404: Line 426:


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


             let COVERS_THEMATIC_VALUES = []
             let COVERS_THEMATIC_VALUES = []
Line 412: Line 433:
             let YEAR_LEVEL_VALUES = [];
             let YEAR_LEVEL_VALUES = [];
             let PHASE_VALUES = [];
             let PHASE_VALUES = [];
            let MENTIONS_TECHNOLOGIES_VALUES = [];


             for (const guideline of guidelines) {
             for (const guideline of guidelines) {


                 LANGUAGES_VALUES = LANGUAGES_VALUES.concat(guideline[LANG_PROP]);
                 LANGUAGES_VALUES = LANGUAGES_VALUES.concat(guideline[LANG_PROP]);
                 COVERS_THEMATIC_VALUES = COVERS_THEMATIC_VALUES.concat(guideline[THEME_PROP])
                 COVERS_THEMATIC_VALUES = COVERS_THEMATIC_VALUES.concat(guideline[THEME_PROP]);
                 TARGET_AUDIENCE_VALUES = TARGET_AUDIENCE_VALUES.concat(guideline[TA_PROP])
                 TARGET_AUDIENCE_VALUES = TARGET_AUDIENCE_VALUES.concat(guideline[TA_PROP]);
                 YEAR_LEVEL_VALUES = YEAR_LEVEL_VALUES.concat(guideline[YEAR_PROP])
                 YEAR_LEVEL_VALUES = YEAR_LEVEL_VALUES.concat(guideline[YEAR_PROP]);
                MENTIONS_TECHNOLOGIES_VALUES = MENTIONS_TECHNOLOGIES_VALUES.concat(guideline[TECH_PROP]);
             }
             }


Line 424: Line 447:
             COVERS_THEMATIC_VALUES = COVERS_THEMATIC_VALUES.sort();
             COVERS_THEMATIC_VALUES = COVERS_THEMATIC_VALUES.sort();
             TARGET_AUDIENCE_VALUES = TARGET_AUDIENCE_VALUES.sort();
             TARGET_AUDIENCE_VALUES = TARGET_AUDIENCE_VALUES.sort();
            MENTIONS_TECHNOLOGIES_VALUES = MENTIONS_TECHNOLOGIES_VALUES.sort();


             LANGUAGES_VALUES = new Set(LANGUAGES_VALUES);
             LANGUAGES_VALUES = new Set(LANGUAGES_VALUES);
Line 429: Line 453:
             TARGET_AUDIENCE_VALUES = new Set(TARGET_AUDIENCE_VALUES);
             TARGET_AUDIENCE_VALUES = new Set(TARGET_AUDIENCE_VALUES);
             YEAR_LEVEL_VALUES = new Set(YEAR_LEVEL_VALUES);
             YEAR_LEVEL_VALUES = new Set(YEAR_LEVEL_VALUES);
            MENTIONS_TECHNOLOGIES_VALUES = new Set(MENTIONS_TECHNOLOGIES_VALUES);
             PHASE_VALUES = PHASES;
             PHASE_VALUES = PHASES;
             EXPERIENCE_LEVEL_VALUES = EX_LEVEL;
             EXPERIENCE_LEVEL_VALUES = EX_LEVEL;
Line 504: Line 529:
             }, '');
             }, '');
             document.getElementById('audience-experience-filter').innerHTML = targetAudienceExperienceHtml;
             document.getElementById('audience-experience-filter').innerHTML = targetAudienceExperienceHtml;
         
            let techHtml = Array.from(MENTIONS_TECHNOLOGIES_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="tech-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="tech-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('tech-filter').innerHTML = techHtml;


             const tabulator = new Tabulator('#guideline-tabulator', {
             const tabulator = new Tabulator('#guideline-tabulator', {
Line 544: Line 579:
                         field: PHASE_PROP,
                         field: PHASE_PROP,
                         formatter: cell => cell.getValue().join(', ')
                         formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Mentions Technologies',
                        field: TECH_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Mentions Platforms',
                        field: DATASRC_PROP,
                        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 560: Line 632:
             tabulator.on('dataFiltered', (filters, rows) => {
             tabulator.on('dataFiltered', (filters, rows) => {
                 const summary = document.getElementById('filter-summary');
                 const summary = document.getElementById('filter-summary');
                /** @type {FilterState}  **/
                 const filter = filters[0];
                 const filter = filters[0];


Line 567: Line 642:
                 // 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; }




Line 577: Line 651:
                     !filter.type.audienceTargets &&
                     !filter.type.audienceTargets &&
                     !filter.type.audienceExperiences &&
                     !filter.type.audienceExperiences &&
                     !filter.type.dataSources
                     !filter.type.dataSources &&
                    !filter.type.techs
                 ) { summary.textContent = 'No filter. Showing all results.'; }
                 ) { summary.textContent = 'No filter. Showing all results.'; }
                 else {
                 else {
Line 607: Line 682:
                     }
                     }
                     if (filter.type.dataSources) {
                     if (filter.type.dataSources) {
                         summaryHtml += '<tr><td><strong>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>';
                    }
                    if (filter.type.techs) {
                        summaryHtml += '<tr><td><strong>Mentions Technologies</strong></td><td>'
                            + (filter.type.techs.length > 0 ? filter.type.techs.join(', ') : 'none')
                             + '</td></tr>';
                             + '</td></tr>';
                     }
                     }
Line 615: Line 695:
                 }
                 }


                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.
             });
             });


Line 631: Line 731:
             }, { passive: true });
             }, { passive: true });
             document.getElementById('target-audience-filter').addEventListener('change', event => {
             document.getElementById('target-audience-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('data-source-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('tech-filter').addEventListener('change', event => {
                 applyFilters();
                 applyFilters();
             }, { passive: true });
             }, { passive: true });
Line 703: Line 809:
         </defs>
         </defs>
     </svg>
     </svg>


     <div id="guideline-list-wrapper">
     <div id="guideline-list-wrapper">
Line 753: Line 858:
         </div>
         </div>
         <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
         <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
         <div id="gl-filters">
         <div id="gl-filters">
             <h2 style="display: flex; justify-content: space-between;">
             <h2 style="display: flex; justify-content: space-between;">
Line 835: Line 941:
             </div>
             </div>
             <div class="filter-wrapper">
             <div class="filter-wrapper">
                 <h4>Supported Platforms <span class="filter-toggle"><svg>
                 <h4>Mentions Platforms <span class="filter-toggle"><svg>
                             <use href="#chevron-down" />
                             <use href="#chevron-down" />
                         </svg></span></h4>
                         </svg></span></h4>
Line 844: Line 950:
                     </div>
                     </div>
                     <div class="filter-content" id="data-source-filter"></div>
                     <div class="filter-content" id="data-source-filter"></div>
                </div>
            </div>
            <div class="filter-wrapper">
                <h4>Mentions Techologies <span class="filter-toggle"><svg>
                            <use href="#chevron-down" />
                        </svg></span></h4>
                <div class="filter-container">
                    <div class="filter-button-wrapper">
                        <button type="button" onclick="selectAll('#tech-filter')">Select all</button> |
                        <button type="button" onclick="deselectAll('#tech-filter')">Clear all</button>
                    </div>
                    <div class="filter-content" id="tech-filter"></div>
                 </div>
                 </div>
             </div>
             </div>

Latest revision as of 16:08, 24 November 2022

Development version of the List of Guidelines.
Not ready for production!

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