Difference between revisions of "Widget:DevGuidelines"

From LINKS Community Center
Jump to: navigation, search
Line 221: Line 221:
 
         'use strict';
 
         'use strict';
  
 +
        /**
 +
        * @typedef {Object} FilterState
 +
        * @property {string[]} phases
 +
        * @property {string[]} thematics
 +
        * @property {string[]} audienceExperiences
 +
        * @property {string[]} audienceTargets
 +
        * @property {string[]} languages
 +
        */
 +
        let table;  // Tabulator instance
  
 +
        const PHASES = ["Before", "During", "After"];
  
 
         const getQueryUrl = query => '/api.php?action=ask&format=json&query=' + encodeURIComponent(query);
 
         const getQueryUrl = query => '/api.php?action=ask&format=json&query=' + encodeURIComponent(query);
Line 247: Line 257:
 
             return Object.keys(guidelinesResponse.query.results).map(title => {
 
             return Object.keys(guidelinesResponse.query.results).map(title => {
 
                 const guidelineResult = guidelinesResponse.query.results[title];
 
                 const guidelineResult = guidelinesResponse.query.results[title];
 +
 +
                /** @type {Guideline} **/
 
                 const guideline = {};
 
                 const guideline = {};
 
                 guideline.title = title;
 
                 guideline.title = title;
Line 262: Line 274:
 
         function applyFilters(clear) {
 
         function applyFilters(clear) {
 
             // TODO: apply Filters
 
             // TODO: apply Filters
 +
            if (!table) return;
 +
 +
            // If clear=true, pass empty object to the filter to disable it.
 +
            if (clear) {
 +
                table.setFilter(guidelineFilter, {});
 +
                return;
 +
            }
 +
 +
 +
            /** @type {FilterState} **/
 +
            const filterState = {};
 +
 +
            const phaseOptions = Array.from(document.querySelectorAll('#phase-filter input[type="checkbox"]'));
 +
            const selectedPhases = phaseOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
 +
            filterState.phases = selectedPhases.length === phaseOptions.length ? undefined : selectedPhases;
 +
 +
            const thematicOptions = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]'));
 +
            const selectedthematics = thematicOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
 +
            filterState.thematics = selectedthematics.length === thematicOptions.length ? undefined : selectedthematics;
 +
           
 +
            const audienceExperienceOptions = Array.from(document.querySelectorAll('#audience-experience-filter input[type="checkbox"]'));
 +
            const selectedaudienceExperiences = audienceExperienceOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
 +
            filterState.audienceExperiences = selectedaudienceExperiences.length === audienceExperienceOptions.length ? undefined : selectedaudienceExperiences;
 +
 +
            const audienceTargetOptions = Array.from(document.querySelectorAll('#target-audience-filter input[type="checkbox"]'));
 +
            const selectedaudienceTargets = audienceTargetOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
 +
            filterState.audienceTargets = selectedaudienceTargets.length === audienceTargetOptions.length ? undefined : selectedaudienceTargets;
 +
 +
            const languageOptions = Array.from(document.querySelectorAll('#language-filter input[type="checkbox"]'));
 +
            const selectedlanguages = languageOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
 +
            filterState.languages = selectedlanguages.length === languageOptions.length ? undefined : selectedlanguages;
 +
 +
            table.setFilter(guidelineFilter, filterState);
 
         }
 
         }
  
 +
 +
        /**
 +
        * @param {Guideline} guideline
 +
        * @param {FilterState} filterState
 +
        */
 +
        function guidelineFilter(guideline, filterState) {
 +
            // If filtering property is empty, don't apply the filter (set the check to true).
 +
            // Passing an empty object (as with applyFilters(true)) should result in an unfiltered table.
 +
            const phaseCheck = filterState.phases
 +
                ? guideline[PHASE_PROP].some(phase => filterState.phases.includes(phase))
 +
                : true;
 +
            const thematicCheck = filterState.thematics
 +
                ? guideline[THEME_PROP].some(theme => filterState.functions.includes(theme))
 +
                : true;
 +
            const audienceExperiencesCheck = filterState.audienceExperiences
 +
                ? guideline[EX_PROP].some(ex => filterState.audienceExperiences.includes(ex))
 +
                : true;
 +
            const audienceTargetCheck = filterState.audienceTargets
 +
                ? guideline[TA_PROP].some(target => filterState.audienceTargets.includes(target))
 +
                : true;
 +
            const langCheck = filterState.languages
 +
                ? guideline[LANG_PROP].some(lang => filterState.languages.includes(lang))
 +
                : true;
 +
 +
            return phaseCheck && thematicCheck && audienceExperiencesCheck && audienceTargetCheck && langCheck;
 +
        }
  
 
         Promise.all([getGuidelines()]).then(data => {
 
         Promise.all([getGuidelines()]).then(data => {
Line 283: Line 354:
 
                 EXPERIENCE_LEVEL_VALUES = EXPERIENCE_LEVEL_VALUES.concat(guideline[EX_PROP])  
 
                 EXPERIENCE_LEVEL_VALUES = EXPERIENCE_LEVEL_VALUES.concat(guideline[EX_PROP])  
 
                 YEAR_LEVEL_VALUES =  YEAR_LEVEL_VALUES.concat(guideline[YEAR_PROP])
 
                 YEAR_LEVEL_VALUES =  YEAR_LEVEL_VALUES.concat(guideline[YEAR_PROP])
−
                PHASE_VALUES = PHASE_VALUES.concat(guideline[PHASE_PROP])
 
 
             }
 
             }
  
Line 291: Line 361:
 
             EXPERIENCE_LEVEL_VALUES = new Set(EXPERIENCE_LEVEL_VALUES);
 
             EXPERIENCE_LEVEL_VALUES = new Set(EXPERIENCE_LEVEL_VALUES);
 
             YEAR_LEVEL_VALUES = new Set(YEAR_LEVEL_VALUES);
 
             YEAR_LEVEL_VALUES = new Set(YEAR_LEVEL_VALUES);
−
             PHASE_VALUES = new Set(PHASE_VALUES);
+
             PHASE_VALUES = PHASES;
  
 
             let languageFilterHtml = Array.from(LANGUAGES_VALUES.values()).reduce((acc, curr) => {
 
             let languageFilterHtml = Array.from(LANGUAGES_VALUES.values()).reduce((acc, curr) => {
Line 338: Line 408:
 
             document.getElementById('audience-experience-filter').innerHTML = targetAudienceExperienceHtml;
 
             document.getElementById('audience-experience-filter').innerHTML = targetAudienceExperienceHtml;
 
              
 
              
−
             const table = new Tabulator('#guideline-tabulator', {
+
             const tabulator = new Tabulator('#guideline-tabulator', {
 
                 data: guidelines,
 
                 data: guidelines,
 
                 layout: 'fitDataFill',
 
                 layout: 'fitDataFill',
Line 379: Line 449:
 
             });
 
             });
  
−
             table.on('tableBuilt', () => {
+
             tabulator.on('tableBuilt', () => {
 
                 table.redraw(true);
 
                 table.redraw(true);
 
                 console.log('done')
 
                 console.log('done')
 +
                table = tabulator;
 +
 
             });
 
             });
−
             table.on('dataFiltered', (filters, rows) => {
+
             tabulator.on('dataFiltered', (filters, rows) => {
 
                 const summary = document.getElementById('filter-summary');
 
                 const summary = document.getElementById('filter-summary');
 
                 const filter = filters[0];
 
                 const filter = filters[0];
−
 
 
             });
 
             });
  

Revision as of 10:50, 23 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=8579"