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
 
(11 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
Line 294: 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 302: 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 323: 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 380: 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 410: 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 417: Line 426:


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


             let COVERS_THEMATIC_VALUES = []
             let COVERS_THEMATIC_VALUES = []
Line 425: 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 437: 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 442: 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 517: 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 559: Line 581:
                     },
                     },
                     {
                     {
                         title: 'Supported Platforms',
                         title: 'Mentions Technologies',
                         field: 'dataSources',
                         field: TECH_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Mentions Platforms',
                        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',
Line 605: 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 612: 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 622: 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 652: 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 659: Line 694:
                     summary.innerHTML = summaryHtml;
                     summary.innerHTML = summaryHtml;
                 }
                 }
                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 675: 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 747: Line 809:
         </defs>
         </defs>
     </svg>
     </svg>


     <div id="guideline-list-wrapper">
     <div id="guideline-list-wrapper">
Line 797: 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 879: 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 888: 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"