This repository has been archived by the owner on Nov 25, 2023. It is now read-only.
/
persons.js
139 lines (123 loc) · 5.17 KB
/
persons.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import Shuffle from "shufflejs/src/shuffle";
$(function () {
let $gridEl = $('.persons-list'),
sortByName = (el) => {
return el.getAttribute('data-name').toLowerCase();
},
sortByGroup = (el) => {
return el.getAttribute('data-group-names').toLowerCase();
},
grid = new Shuffle($gridEl, {
itemSelector: 'li.person',
isCentered: false,
initialSort: {by: sortByName}
});
$gridEl.css("min-height", $gridEl.height() + "px");
let $sortSelector = $(".sort-selector");
$sortSelector.find("a").click((ev) => {
ev.preventDefault();
let $selectedNode = $(ev.currentTarget),
sort = $selectedNode.data("sort");
$sortSelector.find(".current-mode").text($selectedNode.text());
if (sort === 'name') {
grid.sort({by: sortByName});
}
if (sort === 'group') {
grid.sort({by: sortByGroup});
}
});
// Unfortunately, shuffle.js apparently has no function to query the new order (to my knowledge),
// So we have to calculate it using the new position of the items
let getSortedItems = () => {
let items = [];
$gridEl.find(".person").each((i, el) => {
let $item = $(el);
if ($item.hasClass("shuffle-item--visible")) {
items.push($(el));
}
});
return items.sort(($it1, $it2) => {
let pos1 = $it1.position(),
pos2 = $it2.position();
if (pos1.top !== pos2.top) {
return pos1.top - pos2.top;
} else if (pos1.left !== pos2.left) {
return pos1.left - pos2.left;
} else {
return 0;
}
});
};
// Make the items tabbable in the correct order, without breaking the natural tab order of the page
let recalcTabindexes = () => {
let lastTabindex = 1;
let overrideTabindex = ($el) => {
if ($el.data('original-tabindex') === undefined) {
let origTabindex = $el.attr('tabindex');
$el.data('original-tabindex', (origTabindex === undefined ? 0 : origTabindex));
}
$el.attr('tabindex', lastTabindex);
lastTabindex++;
};
// Try to find all selectable elements that appear _after_ this grid and set the tabindex explicitly
$gridEl.parents().prevAll().find("a, input, button, [tabindex]").filter(":visible:not(:disabled)").each((i, el) => overrideTabindex($(el)));
getSortedItems().forEach(($item) => {
$item.find("a").attr("tabindex", lastTabindex);
lastTabindex++;
});
// Try to find all selectable elements that appear _after_ this grid and set the tabindex explicitly
$gridEl.parents().nextAll().find("a, input, button, [tabindex]").filter(":visible:not(:disabled)").each((i, el) => overrideTabindex($(el)));
};
grid.on(Shuffle.EventType.LAYOUT, () => {
recalcTabindexes();
});
recalcTabindexes();
if ($gridEl.parents(".tab-pane").length > 0) {
// We're inside a tab content, so the list might disappear and reappear
let tabId = $gridEl.parents(".tab-pane").attr("id"),
$tab = $(".nav-link[href=\"#" + tabId + "\"]");
$tab.on("shown.bs.tab hidden.bs.tab", () => {
// TODO: We don't actually need to update and show the effect every time
grid.update();
});
}
let $groupRadios = $(".filter-organizations input[type=radio]"),
$groupDropdownLinks = $(".filter-organizations a"),
$currentFilterLabel = $(".filter-organizations .current-mode");
// Update Isotope, set the label on the drop-down menu and the state of the radio-button-group
let setParliamentaryGroup = (group) => {
if (group === 'all') {
grid.filter(null);
} else {
grid.filter('organization-' + group);
}
let name = $groupDropdownLinks.filter("[data-filter=" + group + "]").text();
$currentFilterLabel.text(name);
$groupRadios.filter("[value=" + group + "]:not(:checked)").prop("checked", true).trigger("click");
};
// Radio-Button-Group version
$groupRadios.change(() => {
setParliamentaryGroup($groupRadios.filter(":checked").val());
});
// Drop-Down version
$groupDropdownLinks.click((ev) => {
ev.preventDefault();
setParliamentaryGroup($(ev.currentTarget).data("filter"));
});
/* Functions used by frontend testing to query the grid */
// Returns the current filtered, sorted items
$gridEl.data("get-items", () => {
return getSortedItems();
});
// Given a name of a person, this function returns the position in the list of the corresponding item
// Returns null if no person exists with that name of the person is currently not visible
$gridEl.data("get-item-pos-by-name", (name) => {
let positions = $gridEl.data("get-items")();
for (let i = 0; i < positions.length; i++) {
if (positions[i].data("name") === name) {
return i;
}
}
return null;
});
});