Difference between revisions of "Widget:GuidelinesList"
From LINKS Community Center
Line 132: | Line 132: | ||
align-items: start; | align-items: start; | ||
} | } | ||
− | + | ||
.filter-content.loose { | .filter-content.loose { | ||
gap: .5em .5em; | gap: .5em .5em; | ||
Line 238: | Line 238: | ||
color: var(--links-orange); | color: var(--links-orange); | ||
} | } | ||
− | |||
.data-source-img, | .data-source-img, | ||
Line 248: | Line 247: | ||
filter: grayscale(1); | filter: grayscale(1); | ||
} | } | ||
− | |||
</style> | </style> | ||
<script> | <script> | ||
Line 260: | Line 258: | ||
* @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 287: | Line 285: | ||
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 298: | Line 296: | ||
const guidelineQuery = '[[Category:Guideline]]' | const guidelineQuery = '[[Category:Guideline]]' | ||
− | + '|?' + DATASRC_PROP | + | // + '|?' + DATASRC_PROP |
+ '|?' + PHASE_PROP | + '|?' + PHASE_PROP | ||
+ '|?' + THEME_PROP | + '|?' + THEME_PROP | ||
Line 319: | Line 317: | ||
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 381: | Line 379: | ||
if (selectedLang.length > 0) filterState.languages = selectedLang; | if (selectedLang.length > 0) filterState.languages = selectedLang; | ||
− | const selectedSources = Array.from(document.querySelectorAll('#data-source-filter input[type="checkbox"]:checked')) | + | // const selectedSources = Array.from(document.querySelectorAll('#data-source-filter input[type="checkbox"]:checked')) |
− | + | // .map(checkbox => checkbox.value); | |
− | if (selectedSources.length > 0) filterState.dataSources = selectedSources; | + | // if (selectedSources.length > 0) filterState.dataSources = selectedSources; |
const selectedTech = Array.from(document.querySelectorAll('#tech-filter input[type="checkbox"]:checked')) | const selectedTech = Array.from(document.querySelectorAll('#tech-filter input[type="checkbox"]:checked')) | ||
Line 415: | Line 413: | ||
? filterState.languages.every(lang => guideline[LANG_PROP].includes(lang)) | ? 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 | const techCheck = filterState.techs | ||
? filterState.techs.every(tech => guideline[TECH_PROP].includes(tech)) | ? filterState.techs.every(tech => guideline[TECH_PROP].includes(tech)) | ||
Line 425: | Line 423: | ||
} | } | ||
− | 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 460: | Line 464: | ||
// 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 = ''; | let dataSourceFilterHtml = ''; | ||
Line 590: | Line 594: | ||
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 688: | Line 691: | ||
// 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 697: | Line 699: | ||
!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 727: | Line 729: | ||
+ '</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 741: | Line 743: | ||
} | } | ||
− | 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 983: | Line 986: | ||
</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 class="filter-toggle">Mentions Platforms <div class="plus icon"></div></h4> | ||
<div class="filter-container"> | <div class="filter-container"> | ||
Line 992: | Line 995: | ||
<div class="filter-content loose" 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 class="filter-toggle">Mentions Technologies <div class="plus icon"></div></h4> | <h4 class="filter-toggle">Mentions Technologies <div class="plus icon"></div></h4> |
Revision as of 12:48, 18 July 2023
Current version of the List of Guidelines.
Currently in use – do not modify!