MediaWiki:PolicyOverview.js
From Linjauskone
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
ORGS_MAX_OPTIONS = 999
var highlightedTerm = null
var highlights = null
var hightlightIndex = 0
function prevMatch() {
var searchword = $("#searchtxt").val();
if(searchword != '') {
$('#overview_actions').addClass('search')
if( hightlightIndex > 0) {
hightlightIndex--
}
replaceText()
}
}
function nextMatch() {
var searchword = $("#searchtxt").val();
if(searchword != '') {
$('#overview_actions').addClass('search')
replaceText()
if(hightlightIndex < highlights.length -1) {
hightlightIndex++
}
}
}
function replaceText() {
var searchword = $("#searchtxt").val();
console.log(hightlightIndex)
if(searchword != highlightedTerm) {
highlightedTerm = searchword
hightlightIndex = 0
$(".card-body").find(".highlight").removeClass("highlight");
var custfilter = new RegExp(searchword, "ig");
var repstr = "<span class='highlight'>" + searchword + "</span>";
if (searchword != "") {
$('.card-body').each(function() {
$(this).html($(this).html().replace(custfilter, repstr));
})
}
highlights = $('.highlight')
if(highlights.length >0) {
highlights[hightlightIndex].scrollIntoView()
$('html, body').animate({scrollTop: '-=70px'}, 0);
}
}
else {
highlights[hightlightIndex].scrollIntoView()
$('html, body').animate({scrollTop: '-=70px'}, 0);
}
$('#numOfMatches').text((hightlightIndex + 1) + '/' + highlights.length)
}
function clearSearch() {
$("#searchtxt").val('');
$('#overview_actions').removeClass('search')
$(".card-body").find(".highlight").removeClass("highlight");
hightlightIndex = 0
$('#numOfMatches').text('')
window.scrollTo(0,0)
}
function updateActionView() {
$('#overview_actions').text('')
var domains = getSelectedOptions('#domains')
var years = getSelectedOptions('#years')
var actors = getSelectedOptions('#actors')
var orgs = getSelectedOptions('#orgs')
console.log(domains)
console.log(years)
console.log(orgs)
console.log(actors)
if(actors.size > 0) {
$('#intro').hide()
}
else {
$('#intro').show()
}
// filter actions based on selections
filtered_actions = filterActions(domains, years, actors)
console.log(filtered_actions)
// render
var column_grouping = 'none' //getSelectedOptions('#col_grouping').values().next().value
var row_grouping = getSelectedOptions('#row_grouping').values().next().value
console.log(row_grouping)
console.log(column_grouping)
grouped_actions = groupActions(filtered_actions, column_grouping, row_grouping)
renderActions(grouped_actions, column_grouping, row_grouping, actors)
document.querySelectorAll('.rowgroup-header').forEach(function(e) {
observer.observe(e)
});
}
function renderActions(actions, column_grouping, row_grouping, actors) {
for(var year = 2020; year < 2026; year++) {
if((''+year in actions)) {
var group = actions[year]
var year_container = $('<div>', {id: 'year' + year, class: 'year-container'})
var year_header_container = $('<div>', {class: 'sticky-top', style:'z-index: 5; background-color: #00426b'})
var year_header = $('<div>', {class: 'year-header '}).html('<h1 class="year">'+year+'</h1>')
year_container.append(year_header_container)
year_header_container.append(year_header)
$('#nav-item-year' + year).show()
var group = actions[year]
if(Array.isArray(group)) {
var header_count = $('<span>', {class: 'action_count'}).text(group.length + ' toimenpidettä')
year_header.append(header_count)
group.forEach(obj => {
action_card = renderAction(obj)
year_container.append(action_card)
})
}
else {
if (row_grouping != 'none') {
var rowKeys = getSortedKeys(group)
var rowZ = 10;
rowKeys.forEach(rowTitle => {
if(row_grouping === 'action_responsible_actor' && !actors.has(rowTitle)) {
// skip
}
else {
var rowgroup_header = $('<div>', {id: 'year-title-' + year, class: 'rowgroup-header sticky-top', style:'z-index:' + rowZ}).html('<h2 style="padding-bottom: 0;">'+rowTitle+'</h2>')
rowZ = rowZ + 1
year_container.append(rowgroup_header)
if(column_grouping != 'none') {
var colKeys = getSortedKeys(group[rowTitle])
var colContainer = $('<div>', {class:'container-fluid'})
var colRow = $('<div>', {class: 'row'})
colKeys.forEach(colTitle => {
if(column_grouping === 'action_responsible_actor' && !actors.has(colTitle)) {
// skip
}else {
var colCol = $('<div>', {class: 'col'})
if(Array.isArray(group[rowTitle][colTitle])) {
var colgroup_header = $('<div>', {class: 'colgroup-header'}).html('<h2>'+colTitle+'</h2>')
colCol.append(colgroup_header)
group[rowTitle][colTitle].forEach(obj => {
action_card = renderAction(obj)
colCol.append(action_card)
})
}
colRow.append(colCol)
}
})
colContainer.append(colRow)
year_container.append(colContainer)
}
else {
var header_count = $('<span>', {class: 'action_count'}).text(group[rowTitle].length + ' toimenpidettä')
rowgroup_header.append(header_count)
group[rowTitle].forEach(obj => {
action_card = renderAction(obj)
year_container.append(action_card)
})
}
}
})
}
else {
var colKeys = getSortedKeys(group)
var colContainer = $('<div>', {class:'container-fluid'})
var colRow = $('<div>', {class: 'row'})
colKeys.forEach(colTitle => {
if(column_grouping === 'action_responsible_actor' && !actors.has(colTitle)) {
// skip
}
else {
var colCol = $('<div>', {class: 'col'})
if(Array.isArray(group[colTitle])) {
var colgroup_header = $('<div>', {class: 'colgroup-header'}).html('<h2>'+colTitle+'</h2>')
colCol.append(colgroup_header)
group[colTitle].forEach(obj => {
action_card = renderAction(obj)
colCol.append(action_card)
})
}
colRow.append(colCol)
}
})
colContainer.append(colRow)
year_container.append(colContainer)
}
}
}
else {
$('#nav-item-year' + year).hide()
}
$('#overview_actions').append(year_container)
}
}
function groupActions(actions, column_grouping, row_grouping) {
// group first by year
groups = group_actions_by_year(actions)
// then by row if selected
if(row_grouping != 'none') {
var nestedProp = null
if (row_grouping != 'action_field') {
nestedProp = 'fulltext'
}
second_level_grouping(groups, row_grouping, nestedProp)
nestedProp = null
if(column_grouping != 'none') {
if (column_grouping != 'action_field') {
nestedProp = 'fulltext'
}
console.log(nestedProp)
third_level_grouping(groups, column_grouping, nestedProp)
}
}
// and last by col if selected
if(column_grouping != 'none' && row_grouping == 'none') {
var nestedProp = null
if (column_grouping != 'action_field') {
nestedProp = 'fulltext'
}
second_level_grouping(groups, column_grouping, nestedProp)
}
console.log(groups)
return groups
}
function second_level_grouping(groups, prop, nestedProp = null) {
console.log(nestedProp)
Object.keys(groups).forEach(function(key) {
var data = groups[key]
const parents = data.reduce((parents, item) => {
if (nestedProp != null) {
for (const _item of item[prop]) {
var value = _item[nestedProp]
const c = parents[value] || []
c.push(item)
parents[value] = c
}
}
else {
const parent = (parents[item[prop]] || []);
parent.push(item);
parents[item[prop]] = parent;
}
return parents
}, {});
groups[key] = parents
})
return groups
}
function third_level_grouping(groups, prop, nestedProp = null) {
console.log(nestedProp)
Object.keys(groups).forEach(function(_key) {
var second_group = groups[_key]
Object.keys(second_group).forEach(function(key) {
data = second_group[key]
const parents = data.reduce((parents, item) => {
if (nestedProp != null) {
for (const _item of item[prop]) {
var value = _item[nestedProp]
const c = parents[value] || []
c.push(item)
parents[value] = c
}
}
else {
const parent = (parents[item[prop]] || []);
parent.push(item);
parents[item[prop]] = parent;
}
return parents
}, {});
second_group[key] = parents
})
})
return groups
}
function filterActions(domains, years, actors) {
// actors
result = actions.filter(action => {
return intersection(
new Set(action.action_responsible_actor.map(a=>a.fulltext)),
actors).size > 0
})
// years
result = result.filter(action => {
return years.has(getActionYear(action))
})
// domains
result = result.filter(action => {
return domains.has(action.action_domain)
})
return result
}