Difference between revisions of "Widget:GuidelinesList"

From LINKS Community Center
Jump to: navigation, search
(Created page with "<noinclude>Current version of the List of Guidelines.<br><strong style="color:red;">Prod version</strong></noinclude> <includeonly> <link href="/resources/assets/tabulator...")
 
 
(33 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<noinclude>Current version of the List of Guidelines.<br><strong style="color:red;">Prod version</strong></noinclude>
+
<noinclude>Current version of the List of Guidelines.<br><strong style="color:red;">Currently in use &ndash; do not modify!</strong></noinclude>
 
<includeonly>
 
<includeonly>
−
     <link href="/resources/assets/tabulator.min.css" rel="stylesheet">
+
     <link href="/resources/assets/tabulator/dist/css/tabulator.min.css" rel="stylesheet">
−
     <script type="text/javascript" src="/resources/assets/tabulator.min.js"></script>
+
     <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
 
     <style>
 
     <style>
 
         #guideline-list-wrapper {
 
         #guideline-list-wrapper {
Line 11: Line 11:
 
         #guideline-list-wrapper h1,
 
         #guideline-list-wrapper h1,
 
         #guideline-list-wrapper h2,
 
         #guideline-list-wrapper h2,
−
         #guideline-list-wrapper h3 {
+
         #guideline-list-wrapper h3,
 +
        #guideline-list-wrapper h4 {
 
             font-family: 'Raleway';
 
             font-family: 'Raleway';
 
             font-weight: 300;
 
             font-weight: 300;
Line 116: Line 117:
 
         }
 
         }
  
−
        .filter-wrapper h4 {
+
         .filter-wrapper .filter-toggle {
−
            display: flex;
 
−
            justify-content: space-between;
 
−
            align-items: flex-start;
 
−
        }
 
−
 
 
−
         .filter-wrapper .filter-toggle svg {
 
−
            width: 1.5em;
 
−
            height: 1.5em;
 
−
            fill: var(--links-orange);
 
 
             cursor: pointer;
 
             cursor: pointer;
 
         }
 
         }
  
−
         .filter-wrapper.open .filter-toggle {
+
         .filter-wrapper.open .plus.icon::after {
−
             transform: rotate(180deg);
+
             transform: rotate(0);
 
         }
 
         }
  
 
         .filter-content {
 
         .filter-content {
 
             font-size: 1.2em;
 
             font-size: 1.2em;
−
             margin-bottom: 4em;
+
             margin-bottom: 2em;
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
 
             grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
−
            gap: 1em 1em;
 
 
             align-items: start;
 
             align-items: start;
 +
        }
 +
 +
        .filter-content.loose {
 +
            gap: .5em .5em;
 
         }
 
         }
  
Line 163: Line 158:
 
             height: 2em;
 
             height: 2em;
 
             margin: 0 .5em 0 0;
 
             margin: 0 .5em 0 0;
 +
        }
 +
 +
        .filter-content label {
 +
            display: inline;
 
         }
 
         }
  
Line 211: 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 228: 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 240: Line 242:
 
         }
 
         }
  
−
 
+
         /* .data-source-img,
−
         .data-source-img,
 
 
         .func-img {
 
         .func-img {
 
             width: 1.2rem;
 
             width: 1.2rem;
Line 248: Line 249:
 
             margin-bottom: .4rem;
 
             margin-bottom: .4rem;
 
             filter: grayscale(1);
 
             filter: grayscale(1);
−
         }
+
         } */
−
 
 
 
     </style>
 
     </style>
 
     <script>
 
     <script>
Line 261: 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 288: 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 296: Line 296:
 
         const TA_PROP = 'Target Audience';
 
         const TA_PROP = 'Target Audience';
 
         const TECH_PROP = 'Technologies'
 
         const TECH_PROP = 'Technologies'
 +
        const PUB_PROP = 'Publishing Organisation';
  
 
         const guidelineQuery = '[[Category:Guideline]]'
 
         const guidelineQuery = '[[Category:Guideline]]'
−
             + '|?' + DATASRC_PROP
+
             // + '|?' + DATASRC_PROP
 
             + '|?' + PHASE_PROP
 
             + '|?' + PHASE_PROP
 
             + '|?' + THEME_PROP
 
             + '|?' + THEME_PROP
Line 305: Line 306:
 
             + '|?' + EX_PROP
 
             + '|?' + EX_PROP
 
             + '|?' + TA_PROP
 
             + '|?' + TA_PROP
−
             + '|?' + TECH_PROP;
+
             + '|?' + TECH_PROP
−
        + '|limit=500'
+
            + '|?' + PUB_PROP
 +
            + '|limit=500';
  
 
         async function getGuidelines() {
 
         async function getGuidelines() {
Line 318: 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 326: Line 328:
 
                 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);
 
                 guideline[TECH_PROP] = guidelineResult.printouts[TECH_PROP].map(value => value.fulltext);
 +
                guideline[PUB_PROP] = guidelineResult.printouts[PUB_PROP].map(value => value.fulltext);
 
                 return guideline;
 
                 return guideline;
 
             });
 
             });
 
         }
 
         }
  
 +
        // Fetches platform / data source information.
 +
        // async function getSources() {
 +
        //    const IMG_KEY = 'IMAGE';
 +
        //    const sourceResponse = await fetch(
 +
        //        getQueryUrl('[[Category:Social media platform]]|?' + IMG_KEY)
 +
        //    ).then(response => response.json());
  
−
         // Fetches platform / data source information.
+
         //     return Object.keys(sourceResponse.query.results).map(platform => {
−
        async function getSources() {
+
        //        const img = sourceResponse.query.results[platform].printouts[IMG_KEY][0];
−
            const IMG_KEY = 'IMAGE';
+
        //        return {
−
             const sourceResponse = await fetch(
+
        //             name: platform,
−
                getQueryUrl('[[Category:Social media platform]]|?' + IMG_KEY)
+
        //             image: img ? getFilePath(img.fulltext) : undefined
−
             ).then(response => response.json());
+
        //        };
 +
        //    });
 +
        // }
  
−
            return Object.keys(sourceResponse.query.results).map(platform => {
 
−
                const img = sourceResponse.query.results[platform].printouts[IMG_KEY][0];
 
−
                return {
 
−
                    name: platform,
 
−
                    image: img ? getFilePath(img.fulltext) : undefined
 
−
                };
 
−
            });
 
−
        }
 
 
         function applyFilters(clear) {
 
         function applyFilters(clear) {
−
            // TODO: apply Filters
 
 
             if (!table) return;
 
             if (!table) return;
  
Line 359: Line 361:
 
             const filterState = {};
 
             const filterState = {};
  
−
             const phaseOptions = Array.from(document.querySelectorAll('#phase-filter input[type="checkbox"]'));
+
             const selectedPhases = Array.from(document.querySelectorAll('#phase-filter input[type="checkbox"]:checked'))
−
            const selectedPhases = phaseOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
−
             filterState.phases = selectedPhases.length === phaseOptions.length ? undefined : selectedPhases;
+
             if (selectedPhases.length > 0) filterState.phases = selectedPhases;
  
−
             const thematicOptions = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]'));
+
             const selectedThematics = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]:checked'))
−
            const selectedthematics = thematicOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
−
             filterState.thematics = selectedthematics.length === thematicOptions.length ? undefined : selectedthematics;
+
             if (selectedThematics.length > 0) filterState.thematics = selectedThematics;
  
−
             const audienceExperienceOptions = Array.from(document.querySelectorAll('#audience-experience-filter input[type="checkbox"]'));
+
             const selectedExp = Array.from(document.querySelectorAll('#audience-experience-filter input[type="checkbox"]:checked'))
−
            const selectedaudienceExperiences = audienceExperienceOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
−
             filterState.audienceExperiences = selectedaudienceExperiences.length === audienceExperienceOptions.length ? undefined : selectedaudienceExperiences;
+
             if (selectedExp.length > 0) filterState.audienceExperiences = selectedExp;
  
−
             const audienceTargetOptions = Array.from(document.querySelectorAll('#target-audience-filter input[type="checkbox"]'));
+
             const selectedTA = Array.from(document.querySelectorAll('#target-audience-filter input[type="checkbox"]:checked'))
−
            const selectedaudienceTargets = audienceTargetOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
−
             filterState.audienceTargets = selectedaudienceTargets.length === audienceTargetOptions.length ? undefined : selectedaudienceTargets;
+
             if (selectedTA.length > 0) filterState.audienceTargets = selectedTA;
  
−
             const languageOptions = Array.from(document.querySelectorAll('#language-filter input[type="checkbox"]'));
+
             const selectedLang = Array.from(document.querySelectorAll('#language-filter input[type="checkbox"]:checked'))
−
            const selectedlanguages = languageOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
−
             filterState.languages = selectedlanguages.length === languageOptions.length ? undefined : selectedlanguages;
+
             if (selectedLang.length > 0) filterState.languages = selectedLang;
  
−
             const sourceOptions = Array.from(document.querySelectorAll('#data-source-filter input[type="checkbox"]'));
+
             // const selectedSources = Array.from(document.querySelectorAll('#data-source-filter input[type="checkbox"]:checked'))
−
             const selectedSources = sourceOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
             //    .map(checkbox => checkbox.value);
−
             filterState.dataSources = selectedSources.length === sourceOptions.length ? undefined : selectedSources;
+
             // if (selectedSources.length > 0) filterState.dataSources = selectedSources;
  
−
             const techOptions = Array.from(document.querySelectorAll('#tech-filter input[type="checkbox"]'));
+
             const selectedTech = Array.from(document.querySelectorAll('#tech-filter input[type="checkbox"]:checked'))
−
            const selectedTechs = techOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
−
             filterState.techs = selectedTechs.length === techOptions.length ? undefined : selectedTechs;
+
             if (selectedTech.length > 0) filterState.techs = selectedTech;
  
 
             table.setFilter(guidelineFilter, filterState);
 
             table.setFilter(guidelineFilter, filterState);
Line 399: Line 401:
 
             // Passing an empty object (as with applyFilters(true)) should result in an unfiltered table.
 
             // Passing an empty object (as with applyFilters(true)) should result in an unfiltered table.
 
             const phaseCheck = filterState.phases
 
             const phaseCheck = filterState.phases
−
                 ? guideline[PHASE_PROP].some(phase => filterState.phases.includes(phase))
+
                 ? filterState.phases.every(phase => guideline[PHASE_PROP].includes(phase))
 
                 : true;
 
                 : true;
 
             const thematicCheck = filterState.thematics
 
             const thematicCheck = filterState.thematics
−
                 ? guideline[THEME_PROP].some(theme => filterState.thematics.includes(theme))
+
                 ? filterState.thematics.every(thematic => guideline[THEME_PROP].includes(thematic))
 
                 : true;
 
                 : true;
 
             const audienceExperiencesCheck = filterState.audienceExperiences
 
             const audienceExperiencesCheck = filterState.audienceExperiences
−
                 ? guideline[EX_PROP].some(ex => filterState.audienceExperiences.includes(ex))
+
                 ? filterState.audienceExperiences.every(exp => guideline[EX_PROP].includes(exp))
 
                 : true;
 
                 : true;
 
             const audienceTargetCheck = filterState.audienceTargets
 
             const audienceTargetCheck = filterState.audienceTargets
−
                 ? guideline[TA_PROP].some(target => filterState.audienceTargets.includes(target))
+
                 ? filterState.audienceTargets.every(target => guideline[TA_PROP].includes(target))
 
                 : true;
 
                 : true;
 
             const langCheck = filterState.languages
 
             const langCheck = filterState.languages
−
                 ? guideline[LANG_PROP].some(lang => filterState.languages.includes(lang))
+
                 ? filterState.languages.every(lang => guideline[LANG_PROP].includes(lang))
 
                 : true;
 
                 : true;
−
             const sourcesCheck = filterState.dataSources
+
             // const sourcesCheck = filterState.dataSources
−
                ? guideline[DATASRC_PROP].some(source => filterState.dataSources.includes(source))
+
            //    ? filterState.dataSources.every(src => guideline[DATASRC_PROP].includes(src))
 +
            //    : true;
 +
            const techCheck = filterState.techs
 +
                ? filterState.techs.every(tech => guideline[TECH_PROP].includes(tech))
 
                 : true;
 
                 : true;
−
            const techCheck = filterState.techs
 
−
                ? guideline[TECH_PROP].some(source => filterState.techs.includes(source))
 
−
                : 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 458: 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 = '';
 
−
            groupedSources.forEach(group => {
 
−
                dataSourceFilterHtml += '<div class="filter-group-header">' + group.title + '</div>';
 
−
                dataSourceFilterHtml += group.sources.reduce((acc, curr, idx) => {
 
−
                    const identifier = escapeAttr(curr.name);
 
−
                    return acc +
 
−
                        '<div ' + (idx === 0 ? ' class="filter-group-start">' : '>') +
 
−
                        '<input type="checkbox" id="filter-' + identifier + '" value="' + curr.name + '" checked>' +
 
−
                        '<label for="filter-' + identifier + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'
 
−
                }, '');
 
−
            });
 
−
            document.getElementById('data-source-filter').innerHTML = dataSourceFilterHtml;
 
  
 +
            // let dataSourceFilterHtml = '';
 +
            // groupedSources.forEach(group => {
 +
            //    dataSourceFilterHtml += '<div class="filter-group-header">' + group.title + '</div>';
 +
            //    dataSourceFilterHtml += group.sources.reduce((acc, curr, idx) => {
 +
            //        const identifier = escapeAttr(curr.name);
 +
            //        return acc +
 +
            //            '<div ' + (idx === 0 ? ' class="filter-group-start">' : '>') +
 +
            //            '<input type="checkbox" id="filter-' + identifier + '" value="' + curr.name + '">' +
 +
            //            '<label for="filter-' + identifier + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'
 +
            //    }, '');
 +
            // });
 +
            // document.getElementById('data-source-filter').innerHTML = dataSourceFilterHtml;
  
  
Line 488: Line 495:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
−
                     + '<div><input type="checkbox" checked id="language-filter-' + identifier
+
                     + '<div><input type="checkbox" id="language-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="language-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="language-filter-' + identifier + '">' + curr + '</label></div>'
Line 497: Line 504:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
−
                     + '<div><input type="checkbox" checked id="thematic-filter-' + identifier
+
                     + '<div><input type="checkbox" id="thematic-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="thematic-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="thematic-filter-' + identifier + '">' + curr + '</label></div>'
Line 506: Line 513:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
−
                     + '<div><input type="checkbox" checked id="phase-filter-' + identifier
+
                     + '<div><input type="checkbox" id="phase-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="phase-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="phase-filter-' + identifier + '">' + curr + '</label></div>'
Line 515: Line 522:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
−
                     + '<div><input type="checkbox" checked id="target-audience-filter-' + identifier
+
                     + '<div><input type="checkbox" id="target-audience-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="target-audience-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="target-audience-filter-' + identifier + '">' + curr + '</label></div>'
Line 524: Line 531:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
−
                     + '<div><input type="checkbox" checked id="audience-experience-filter-' + identifier
+
                     + '<div><input type="checkbox" id="audience-experience-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="audience-experience-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="audience-experience-filter-' + identifier + '">' + curr + '</label></div>'
Line 533: Line 540:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
−
                     + '<div><input type="checkbox" checked id="tech-filter-' + identifier
+
                     + '<div><input type="checkbox" id="tech-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="tech-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="tech-filter-' + identifier + '">' + curr + '</label></div>'
 
             }, '');
 
             }, '');
 
             document.getElementById('tech-filter').innerHTML = techHtml;
 
             document.getElementById('tech-filter').innerHTML = techHtml;
−
 
  
 
             const tabulator = new Tabulator('#guideline-tabulator', {
 
             const tabulator = new Tabulator('#guideline-tabulator', {
Line 554: Line 560:
 
                         title: 'Year',
 
                         title: 'Year',
 
                         field: YEAR_PROP
 
                         field: YEAR_PROP
 +
                    },
 +
                    {
 +
                        title: 'Publishing Organisation',
 +
                        field: PUB_PROP,
 +
                        formatter: cell => cell.getValue().join(', ')
 
                     },
 
                     },
 
                     {
 
                     {
Line 566: Line 577:
 
                     },
 
                     },
 
                     {
 
                     {
−
                         title: 'Covers thematic',
+
                         title: 'Covers Thematic',
 
                         field: THEME_PROP,
 
                         field: THEME_PROP,
 
                         formatter: cell => cell.getValue().join(', ')
 
                         formatter: cell => cell.getValue().join(', ')
Line 583: Line 594:
 
                         title: 'Mentions Technologies',
 
                         title: 'Mentions Technologies',
 
                         field: TECH_PROP,
 
                         field: TECH_PROP,
−
                         formatter: cell => cell.getValue().join(', ')
+
                         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 = '<div>';
+
                    //        let out = '';
 +
 
 +
                    //        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>';
 +
                    //            }
 +
                    //        });
  
−
                            groupedSources.forEach((group, gIndex) => {
+
                    //         if (!out) { out = '&mdash;' }
−
                                // 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>';
 
−
                        }
 
−
                    }
 
  
 +
                    //        return '<div>' + out + '</div>';
 +
                    //    }
 +
                    // }
 
                 ],
 
                 ],
 
                 initialSort: [
 
                 initialSort: [
Line 626: Line 639:
 
             tabulator.on('tableBuilt', () => {
 
             tabulator.on('tableBuilt', () => {
 
                 tabulator.redraw(true);
 
                 tabulator.redraw(true);
−
                console.log('done')
 
 
                 table = tabulator;
 
                 table = tabulator;
  
 +
                // Set up the table if parameter was passed.
 +
                const params = new URLSearchParams(window.location.search);
 +
                const encoded = params.get('do');
 +
 +
                if (encoded) {
 +
                    const actions = JSON.parse(decodeURIComponent(atob(encoded)));
 +
                    const filter = actions.filter;
 +
 +
                    if (filter) {
 +
                        const thematic = filter[THEME_PROP];
 +
                        if (thematic) {
 +
                            Object.keys(thematic).forEach(theme => {
 +
                                const box = document.getElementById('thematic-filter-' + escapeAttr(theme));
 +
                                box.checked = !!thematic[theme];
 +
                                box.dispatchEvent(new Event('change', { bubbles: true }));
 +
                            });
 +
 +
                            document.getElementById('thematic-filter').closest('.filter-wrapper').classList.toggle('open');
 +
                        }
 +
 +
                        const audience = filter[TA_PROP];
 +
                        if (audience) {
 +
                            Object.keys(audience).forEach(ta => {
 +
                                const box = document.getElementById('target-audience-filter-' + escapeAttr(ta));
 +
                                box.checked = !!audience[ta];
 +
                                box.dispatchEvent(new Event('change', { bubbles: true }));
 +
                            });
 +
 +
                            document.getElementById('target-audience-filter').closest('.filter-wrapper').classList.toggle('open');
 +
                        }
 +
 +
                        applyFilters();
 +
                        toggleFilter();
 +
                    }
 +
 +
                    // Further actions (e.g. open filter panel, etc.)
 +
                    // ...
 +
                }
 
             });
 
             });
 +
 
             tabulator.on('dataFiltered', (filters, rows) => {
 
             tabulator.on('dataFiltered', (filters, rows) => {
 
                 const summary = document.getElementById('filter-summary');
 
                 const summary = document.getElementById('filter-summary');
Line 642: 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 651: 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 681: 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 695: 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 733: 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 760: Line 811:
 
                 // TODO: Check the bugfix for a possible infinite event loop.
 
                 // TODO: Check the bugfix for a possible infinite event loop.
 
                 // This will help detect it, in case it happens.
 
                 // This will help detect it, in case it happens.
−
                 console.log('Table height bugfix: render complete.');
+
                 // console.log('Table height bugfix: render complete.');
  
 
                 try {
 
                 try {
Line 814: Line 865:
 
             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
 
             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
 
                 <defs>
 
                 <defs>
−
                     <clipPath id="b">
+
                     <clipPath id="tit">
 
                         <path d="M65 455h96v96H65z" />
 
                         <path d="M65 455h96v96H65z" />
 
                     </clipPath>
 
                     </clipPath>
 
                 </defs>
 
                 </defs>
−
                 <g clip-path="url(#b)" transform="translate(-65 -455)">
+
                 <g clip-path="url(#tit)" transform="translate(-65 -455)">
 
                     <path
 
                     <path
 
                         d="M138 463H84v79.961h54a5.014 5.014 0 0 0 5.019-5V468a5.014 5.014 0 0 0-5.019-5Zm-52 2h6.261v75.961H86Zm55.019 72.963a3.012 3.012 0 0 1-3.019 3H94.261V465H138a3.013 3.013 0 0 1 3.019 3Z" />
 
                         d="M138 463H84v79.961h54a5.014 5.014 0 0 0 5.019-5V468a5.014 5.014 0 0 0-5.019-5Zm-52 2h6.261v75.961H86Zm55.019 72.963a3.012 3.012 0 0 1-3.019 3H94.261V465H138a3.013 3.013 0 0 1 3.019 3Z" />
Line 824: Line 875:
 
                 </g>
 
                 </g>
 
             </svg>
 
             </svg>
−
             <span>Guidelines</span>
+
             <div>
 +
                <div>Guidelines</div>
 +
                <div style="font-size:small; letter-spacing:.03em; margin-left: .3em;">Social Media and Crowdsourcing
 +
                    Library</div>
 +
            </div>
 
         </h1>
 
         </h1>
 
         <div id="guideline-intro">
 
         <div id="guideline-intro">
Line 843: Line 898:
 
             </ul>
 
             </ul>
 
         </div>
 
         </div>
−
     </div>
+
      
−
 
+
   
−
    <!-- FILTERS -->
+
        <!-- FILTERS -->
−
 
+
        <div id="filter-bar">
−
    <div id="filter-bar">
+
            <div style="display: flex; justify-content: space-between;">
−
        <div style="display: flex; justify-content: space-between;">
+
                <div style="flex: 1 1;">
−
            <div style="flex: 1 1;">
+
                    <h2 style="margin-bottom: 1rem;">Selected Filters</h2>
−
                <h2 style="margin-bottom: 1rem;">Applied Filters</h2>
+
                    <div id="filter-summary">No filter. Showing all results.</div>
−
                <div id="filter-summary">No filter. Showing all results.</div>
+
                </div>
 +
                <div>
 +
                    <button class="large-button" type="button" onclick="toggleFilter()">Open Filters</button>
 +
                </div>
 
             </div>
 
             </div>
−
            <div style="flex: 0 0;">
 
−
                <button class="large-button" type="button" onclick="toggleFilter()">Filters</button>
 
−
            </div>
 
−
        </div>
 
−
        <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
 
  
−
        <div id="gl-filters">
+
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
−
            <h2 style="display: flex; justify-content: space-between;">
+
                 <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
−
                 <div>
+
                <div><a href="/index.php/Form:Guideline" style="font-size: 1.5em; font-variant:small-caps; color: var(--links-orange)">Add new guideline</a></div>
−
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
 
−
                        <defs>
 
−
                            <clipPath id="b">
 
−
                                <path d="M592 312h96v96h-96z" />
 
−
                            </clipPath>
 
−
                        </defs>
 
−
                        <g clip-path="url(#b)" transform="translate(-592 -312)">
 
−
                            <path
 
−
                                d="M636 356.012v38.011l8-8v-30.011L674 326h-68Zm6.588-1.412-.588.584v30.008l-4 4v-34.008l-.585-.586L610.828 328h58.348Z" />
 
−
                        </g>
 
−
                    </svg>
 
−
                    <span>Filters</span>
 
−
                </div>
 
−
                <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
 
−
            </h2>
 
−
            <div style="text-align: center;">
 
−
                <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
 
 
             </div>
 
             </div>
−
             <div class="filter-wrapper">
+
   
−
                 <h4>Covers Thematic <span class="filter-toggle"><svg>
+
             <div id="gl-filters">
−
                             <use href="#chevron-down" />
+
                 <h2 style="display: flex; justify-content: space-between;">
−
                        </svg></span></h4>
+
                    <div>
−
                <div class="filter-container">
+
                        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
−
                    <div class="filter-button-wrapper">
+
                             <defs>
−
                        <button type="button" onclick="selectAll('#thematic-filter')">Select all</button> |
+
                                <clipPath id="b">
−
                         <button type="button" onclick="deselectAll('#thematic-filter')">Clear all</button>
+
                                    <path d="M592 312h96v96h-96z" />
 +
                                </clipPath>
 +
                            </defs>
 +
                            <g clip-path="url(#b)" transform="translate(-592 -312)">
 +
                                <path
 +
                                    d="M636 356.012v38.011l8-8v-30.011L674 326h-68Zm6.588-1.412-.588.584v30.008l-4 4v-34.008l-.585-.586L610.828 328h58.348Z" />
 +
                            </g>
 +
                        </svg>
 +
                         <span>Filters</span>
 
                     </div>
 
                     </div>
−
                     <div class="filter-content" id="thematic-filter"></div>
+
                     <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
 +
                </h2>
 +
                <div style="text-align: center;">
 +
                    <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
 
                 </div>
 
                 </div>
−
            </div>
+
                <div class="filter-wrapper">
−
            <div class="filter-wrapper">
+
                    <h4 class="filter-toggle">Covers Thematic <div class="plus icon"></div></h4>
−
                <h4>Language<span class="filter-toggle"><svg>
+
                    <div class="filter-container">
−
                            <use href="#chevron-down" />
+
                        <div class="filter-button-wrapper">
−
                        </svg></span></h4>
+
                            <button type="button" onclick="selectAll('#thematic-filter')">Select all</button> |
−
                <div class="filter-container">
+
                            <button type="button" onclick="deselectAll('#thematic-filter')">Clear all</button>
−
                    <div class="filter-button-wrapper">
+
                        </div>
−
                        <button type="button" onclick="selectAll('#language-filter')">Select all</button> |
+
                        <div class="filter-content" id="thematic-filter"></div>
−
                        <button type="button" onclick="deselectAll('#language-filter')">Clear all</button>
 
 
                     </div>
 
                     </div>
−
                    <div class="filter-content" id="language-filter"></div>
 
 
                 </div>
 
                 </div>
−
            </div>
+
                <div class="filter-wrapper">
−
            <div class="filter-wrapper">
+
                    <h4 class="filter-toggle">Language <div class="plus icon"></div></h4>
−
                <h4>Disaster Management Phase<span class="filter-toggle"><svg>
+
                    <div class="filter-container">
−
                            <use href="#chevron-down" />
+
                        <div class="filter-button-wrapper">
−
                        </svg></span></h4>
+
                            <button type="button" onclick="selectAll('#language-filter')">Select all</button> |
−
                <div class="filter-container">
+
                            <button type="button" onclick="deselectAll('#language-filter')">Clear all</button>
−
                    <div class="filter-button-wrapper">
+
                        </div>
−
                        <button type="button" onclick="selectAll('#phase-filter')">Select all</button> |
+
                        <div class="filter-content" id="language-filter"></div>
−
                        <button type="button" onclick="deselectAll('#phase-filter')">Clear all</button>
 
 
                     </div>
 
                     </div>
−
                    <div class="filter-content" id="phase-filter"></div>
 
 
                 </div>
 
                 </div>
−
            </div>
+
                <div class="filter-wrapper">
−
            <div class="filter-wrapper">
+
                    <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div></h4>
−
                <h4>Target Audience<span class="filter-toggle"><svg>
+
                    <div class="filter-container">
−
                            <use href="#chevron-down" />
+
                        <div class="filter-button-wrapper">
−
                        </svg></span></h4>
+
                            <button type="button" onclick="selectAll('#phase-filter')">Select all</button> |
−
                <div class="filter-container">
+
                            <button type="button" onclick="deselectAll('#phase-filter')">Clear all</button>
−
                    <div class="filter-button-wrapper">
+
                        </div>
−
                        <button type="button" onclick="selectAll('#target-audience-filter')">Select all</button> |
+
                        <div class="filter-content" id="phase-filter"></div>
−
                        <button type="button" onclick="deselectAll('#target-audience-filter')">Clear all</button>
 
 
                     </div>
 
                     </div>
−
                    <div class="filter-content" id="target-audience-filter"></div>
 
 
                 </div>
 
                 </div>
−
            </div>
+
                <div class="filter-wrapper">
−
            <div class="filter-wrapper">
+
                    <h4 class="filter-toggle">Target Audience <div class="plus icon"></div></h4>
−
                <h4>Audience Experience Level<span class="filter-toggle"><svg>
+
                    <div class="filter-container">
−
                            <use href="#chevron-down" />
+
                        <div class="filter-button-wrapper">
−
                        </svg></span></h4>
+
                            <button type="button" onclick="selectAll('#target-audience-filter')">Select all</button> |
−
                <div class="filter-container">
+
                            <button type="button" onclick="deselectAll('#target-audience-filter')">Clear all</button>
−
                    <div class="filter-button-wrapper">
+
                        </div>
−
                        <button type="button" onclick="selectAll('#audience-experience-filter')">Select all</button> |
+
                        <div class="filter-content" id="target-audience-filter"></div>
−
                        <button type="button" onclick="deselectAll('#audience-experience-filter')">Clear all</button>
 
 
                     </div>
 
                     </div>
−
                    <div class="filter-content" id="audience-experience-filter"></div>
 
 
                 </div>
 
                 </div>
−
            </div>
+
                <div class="filter-wrapper">
−
            <div class="filter-wrapper">
+
                    <h4 class="filter-toggle">Audience Experience Level <div class="plus icon"></div></h4>
−
                <h4>Mentions Platforms <span class="filter-toggle"><svg>
+
                    <div class="filter-container">
−
                            <use href="#chevron-down" />
+
                        <div class="filter-button-wrapper">
−
                        </svg></span></h4>
+
                            <button type="button" onclick="selectAll('#audience-experience-filter')">Select all</button> |
−
                <div class="filter-container">
+
                            <button type="button" onclick="deselectAll('#audience-experience-filter')">Clear all</button>
−
                    <div class="filter-button-wrapper">
+
                        </div>
−
                        <button type="button" onclick="selectAll('#data-source-filter')">Select all</button> |
+
                        <div class="filter-content" id="audience-experience-filter"></div>
−
                        <button type="button" onclick="deselectAll('#data-source-filter')">Clear all</button>
 
 
                     </div>
 
                     </div>
−
                    <div class="filter-content" id="data-source-filter"></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>Mentions Techologies <span class="filter-toggle"><svg>
+
                    <div class="filter-container">
−
                             <use href="#chevron-down" />
+
                        <div class="filter-button-wrapper">
−
                         </svg></span></h4>
+
                            <button type="button" onclick="selectAll('#data-source-filter')">Select all</button> |
−
                <div class="filter-container">
+
                             <button type="button" onclick="deselectAll('#data-source-filter')">Clear all</button>
−
                    <div class="filter-button-wrapper">
+
                        </div>
−
                        <button type="button" onclick="selectAll('#tech-filter')">Select all</button> |
+
                         <div class="filter-content loose" id="data-source-filter"></div>
−
                        <button type="button" onclick="deselectAll('#tech-filter')">Clear all</button>
+
                    </div>
 +
                </div> -->
 +
                <div class="filter-wrapper">
 +
                    <h4 class="filter-toggle">Mentions Technologies <div class="plus icon"></div></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 class="filter-content" id="tech-filter"></div>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
   
 +
        <div id="guideline-tabulator"></div>
 
     </div>
 
     </div>
−
 
−
    <div id="guideline-tabulator"></div>
 
−
 
 
</includeonly>
 
</includeonly>

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"