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
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 09: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"