Difference between revisions of "Widget:GuidelinesList"
From LINKS Community Center
(29 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | <noinclude> | + | <noinclude>Current version of the List of Guidelines.<br><strong style="color:red;">Currently in use – 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 117: | Line 117: | ||
} | } | ||
− | + | .filter-wrapper .filter-toggle { | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | .filter-wrapper .filter-toggle | ||
− | |||
− | |||
− | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
− | .filter-wrapper.open . | + | .filter-wrapper.open .plus.icon::after { |
− | transform: rotate( | + | transform: rotate(0); |
} | } | ||
.filter-content { | .filter-content { | ||
font-size: 1.2em; | font-size: 1.2em; | ||
− | margin-bottom: | + | 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)); | ||
− | |||
align-items: start; | align-items: start; | ||
+ | } | ||
+ | |||
+ | .filter-content.loose { | ||
+ | gap: .5em .5em; | ||
} | } | ||
Line 164: | Line 158: | ||
height: 2em; | height: 2em; | ||
margin: 0 .5em 0 0; | margin: 0 .5em 0 0; | ||
+ | } | ||
+ | |||
+ | .filter-content label { | ||
+ | display: inline; | ||
} | } | ||
Line 212: | Line 210: | ||
#guideline-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse { | #guideline-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse { | ||
border: 0 none; | border: 0 none; | ||
− | |||
} | } | ||
Line 229: | 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 241: | Line 242: | ||
} | } | ||
− | + | /* .data-source-img, | |
− | .data-source-img, | ||
.func-img { | .func-img { | ||
width: 1.2rem; | width: 1.2rem; | ||
Line 249: | Line 249: | ||
margin-bottom: .4rem; | margin-bottom: .4rem; | ||
filter: grayscale(1); | filter: grayscale(1); | ||
− | } | + | } */ |
− | |||
</style> | </style> | ||
<script> | <script> | ||
Line 262: | Line 261: | ||
* @property {string[]} audienceTargets | * @property {string[]} audienceTargets | ||
* @property {string[]} languages | * @property {string[]} languages | ||
− | |||
* @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', | |
− | + | // sources: ['Crowd', 'Web'] | |
− | + | // }, | |
− | + | // { | |
− | + | // title: 'Platforms', | |
− | + | // sources: ['Facebook', 'Twitter', 'Instagram', 'YouTube'] | |
− | + | // } | |
− | ]; | + | // ]; |
const PHASES = ["Before", "During", "After"]; | const PHASES = ["Before", "During", "After"]; | ||
Line 289: | 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 297: | 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 307: | Line 307: | ||
+ '|?' + TA_PROP | + '|?' + TA_PROP | ||
+ '|?' + TECH_PROP | + '|?' + TECH_PROP | ||
+ | + '|?' + PUB_PROP | ||
+ '|limit=500'; | + '|limit=500'; | ||
Line 319: | 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 327: | 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()); | ||
− | // | + | // 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) { | ||
− | |||
if (!table) return; | if (!table) return; | ||
Line 360: | Line 361: | ||
const filterState = {}; | const filterState = {}; | ||
− | const | + | const selectedPhases = Array.from(document.querySelectorAll('#phase-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.phases = | + | if (selectedPhases.length > 0) filterState.phases = selectedPhases; |
− | const | + | const selectedThematics = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.thematics = | + | if (selectedThematics.length > 0) filterState.thematics = selectedThematics; |
− | const | + | const selectedExp = Array.from(document.querySelectorAll('#audience-experience-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.audienceExperiences = | + | if (selectedExp.length > 0) filterState.audienceExperiences = selectedExp; |
− | const | + | const selectedTA = Array.from(document.querySelectorAll('#target-audience-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.audienceTargets = | + | if (selectedTA.length > 0) filterState.audienceTargets = selectedTA; |
− | const | + | const selectedLang = Array.from(document.querySelectorAll('#language-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.languages = | + | if (selectedLang.length > 0) filterState.languages = selectedLang; |
− | const | + | // const selectedSources = Array.from(document.querySelectorAll('#data-source-filter input[type="checkbox"]:checked')) |
− | + | // .map(checkbox => checkbox.value); | |
− | filterState.dataSources = | + | // if (selectedSources.length > 0) filterState.dataSources = selectedSources; |
− | const | + | const selectedTech = Array.from(document.querySelectorAll('#tech-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.techs = | + | if (selectedTech.length > 0) filterState.techs = selectedTech; |
table.setFilter(guidelineFilter, filterState); | table.setFilter(guidelineFilter, filterState); | ||
Line 400: | 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 | ||
− | ? | + | ? filterState.phases.every(phase => guideline[PHASE_PROP].includes(phase)) |
: true; | : true; | ||
const thematicCheck = filterState.thematics | const thematicCheck = filterState.thematics | ||
− | ? guideline[THEME_PROP] | + | ? filterState.thematics.every(thematic => guideline[THEME_PROP].includes(thematic)) |
: true; | : true; | ||
const audienceExperiencesCheck = filterState.audienceExperiences | const audienceExperiencesCheck = filterState.audienceExperiences | ||
− | ? guideline[EX_PROP] | + | ? filterState.audienceExperiences.every(exp => guideline[EX_PROP].includes(exp)) |
: true; | : true; | ||
const audienceTargetCheck = filterState.audienceTargets | const audienceTargetCheck = filterState.audienceTargets | ||
− | ? | + | ? filterState.audienceTargets.every(target => guideline[TA_PROP].includes(target)) |
: true; | : true; | ||
const langCheck = filterState.languages | const langCheck = filterState.languages | ||
− | ? | + | ? filterState.languages.every(lang => guideline[LANG_PROP].includes(lang)) |
: true; | : true; | ||
− | const sourcesCheck = filterState.dataSources | + | // const sourcesCheck = filterState.dataSources |
− | + | // ? 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; | ||
− | |||
− | |||
− | |||
− | return phaseCheck && thematicCheck && audienceExperiencesCheck && audienceTargetCheck && langCheck & | + | 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 459: | 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 = []; | |
− | + | // for (const source of layoutGroup.sources) { | |
− | + | // let idx = sourcesCopy.findIndex(src => src.name === source); | |
− | + | // if (idx !== -1) { group.push(sourcesCopy.splice(idx, 1)[0]); } | |
− | + | // } | |
− | + | // 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 + '">' + | ||
+ | // '<label for="filter-' + identifier + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>' | ||
+ | // }, ''); | ||
+ | // }); | ||
+ | // document.getElementById('data-source-filter').innerHTML = dataSourceFilterHtml; | ||
Line 489: | Line 495: | ||
const identifier = escapeAttr(curr); | const identifier = escapeAttr(curr); | ||
return acc | return acc | ||
− | + '<div><input type="checkbox" | + | + '<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 498: | Line 504: | ||
const identifier = escapeAttr(curr); | const identifier = escapeAttr(curr); | ||
return acc | return acc | ||
− | + '<div><input type="checkbox" | + | + '<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 507: | Line 513: | ||
const identifier = escapeAttr(curr); | const identifier = escapeAttr(curr); | ||
return acc | return acc | ||
− | + '<div><input type="checkbox" | + | + '<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 516: | Line 522: | ||
const identifier = escapeAttr(curr); | const identifier = escapeAttr(curr); | ||
return acc | return acc | ||
− | + '<div><input type="checkbox" | + | + '<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 525: | Line 531: | ||
const identifier = escapeAttr(curr); | const identifier = escapeAttr(curr); | ||
return acc | return acc | ||
− | + '<div><input type="checkbox" | + | + '<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 534: | Line 540: | ||
const identifier = escapeAttr(curr); | const identifier = escapeAttr(curr); | ||
return acc | return acc | ||
− | + '<div><input type="checkbox" | + | + '<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 555: | Line 560: | ||
title: 'Year', | title: 'Year', | ||
field: YEAR_PROP | field: YEAR_PROP | ||
+ | }, | ||
+ | { | ||
+ | title: 'Publishing Organisation', | ||
+ | field: PUB_PROP, | ||
+ | formatter: cell => cell.getValue().join(', ') | ||
}, | }, | ||
{ | { | ||
Line 584: | Line 594: | ||
title: 'Mentions Technologies', | title: 'Mentions Technologies', | ||
field: TECH_PROP, | field: TECH_PROP, | ||
− | formatter: cell => cell.getValue().join(', ') | + | 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 = ''; | |
+ | |||
+ | // 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>'; | ||
+ | // } | ||
+ | // }); | ||
− | + | // if (!out) { out = '—' } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | // return '<div>' + out + '</div>'; | ||
+ | // } | ||
+ | // } | ||
], | ], | ||
initialSort: [ | initialSort: [ | ||
Line 627: | Line 639: | ||
tabulator.on('tableBuilt', () => { | tabulator.on('tableBuilt', () => { | ||
tabulator.redraw(true); | tabulator.redraw(true); | ||
− | |||
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 643: | 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 652: | 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 682: | Line 731: | ||
+ '</td></tr>'; | + '</td></tr>'; | ||
} | } | ||
− | if (filter.type.dataSources) { | + | // if (filter.type.dataSources) { |
− | + | // summaryHtml += '<tr><td><strong>Mentions Platforms</strong></td><td>' | |
− | + | // + (filter.type.dataSources.length > 0 ? filter.type.dataSources.join(', ') : 'none') | |
− | + | // + '</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 696: | Line 745: | ||
} | } | ||
− | const markImages = () => { | + | // 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); | |
− | } | + | // } |
− | + | // // TODO: Prevent this from running if corresponding filters are not active. | |
+ | // tabulator.on('renderComplete', markImages); | ||
}); | }); | ||
Line 734: | 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(); | |
− | }, { passive: true }); | + | // }, { passive: true }); |
document.getElementById('tech-filter').addEventListener('change', event => { | document.getElementById('tech-filter').addEventListener('change', event => { | ||
applyFilters(); | applyFilters(); | ||
Line 761: | 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 825: | Line 875: | ||
</g> | </g> | ||
</svg> | </svg> | ||
− | < | + | <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 850: | Line 904: | ||
<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;"> | + | <h2 style="margin-bottom: 1rem;">Selected Filters</h2> |
<div id="filter-summary">No filter. Showing all results.</div> | <div id="filter-summary">No filter. Showing all results.</div> | ||
</div> | </div> | ||
− | <div | + | <div> |
− | <button class="large-button" type="button" onclick="toggleFilter()">Filters</button> | + | <button class="large-button" type="button" onclick="toggleFilter()">Open Filters</button> |
</div> | </div> | ||
</div> | </div> | ||
− | < | + | |
+ | <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;"> | ||
+ | <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2> | ||
+ | <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> | ||
+ | </div> | ||
<div id="gl-filters"> | <div id="gl-filters"> | ||
Line 881: | Line 939: | ||
</div> | </div> | ||
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
− | <h4 | + | <h4 class="filter-toggle">Covers Thematic <div class="plus icon"></div></h4> |
− | |||
− | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
Line 893: | Line 949: | ||
</div> | </div> | ||
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
− | <h4 | + | <h4 class="filter-toggle">Language <div class="plus icon"></div></h4> |
− | |||
− | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
Line 905: | Line 959: | ||
</div> | </div> | ||
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
− | <h4 | + | <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div></h4> |
− | |||
− | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
Line 917: | Line 969: | ||
</div> | </div> | ||
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
− | <h4 | + | <h4 class="filter-toggle">Target Audience <div class="plus icon"></div></h4> |
− | |||
− | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
Line 929: | Line 979: | ||
</div> | </div> | ||
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
− | <h4 | + | <h4 class="filter-toggle">Audience Experience Level <div class="plus icon"></div></h4> |
− | |||
− | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
Line 940: | Line 988: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="filter-wrapper"> | + | <!-- <div class="filter-wrapper"> |
− | <h4 | + | <h4 class="filter-toggle">Mentions Platforms <div class="plus icon"></div></h4> |
− | |||
− | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
Line 949: | Line 995: | ||
<button type="button" onclick="deselectAll('#data-source-filter')">Clear all</button> | <button type="button" onclick="deselectAll('#data-source-filter')">Clear all</button> | ||
</div> | </div> | ||
− | <div class="filter-content" id="data-source-filter"></div> | + | <div class="filter-content loose" id="data-source-filter"></div> |
</div> | </div> | ||
− | </div> | + | </div> --> |
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
− | <h4 | + | <h4 class="filter-toggle">Mentions Technologies <div class="plus icon"></div></h4> |
− | |||
− | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> |
Latest revision as of 14:48, 18 July 2023
Current version of the List of Guidelines.
Currently in use – do not modify!