Skip to content

Commit 9728d05

Browse files
khemaratokhemarato
authored
Add big table (#393)
* Add big table * prod nits * more nits --------- Co-authored-by: Khemarato Bhikkhu <theopenbuddhistuniversity@gmail.com>
1 parent 052f05c commit 9728d05

10 files changed

Lines changed: 279 additions & 228 deletions

File tree

‎_categories/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: "All Content by Type"
3+
permalink: "/content/"
4+
layout: default
5+
---
6+
7+
<article class="content-category"></article>
8+
<header class="post-header">
9+
<h1 class="post-title">{{ page.title | escape }}</h1>
10+
<a href="/feed/content.xml"><i class="fas fa-rss-square"></i> RSS Feed</a>
11+
</header>
12+
13+
<div class="post-content">
14+
<table>
15+
<colgroup>
16+
<col width="70%" />
17+
<col width="30%" />
18+
</colgroup>
19+
<thead>
20+
<tr class="header">
21+
<th>Category</th>
22+
<th>Count</th>
23+
</tr>
24+
</thead>
25+
<tbody>
26+
{% for catentry in site.data.content_categories %}
27+
{% assign cats = catentry | split: "dne,,,,,dne" %}{% assign cats = catentry.subs | default: cats %}
28+
{% for catslug in cats %}
29+
{% include content-category-row.html category=catslug %}
30+
{% endfor %}{% endfor %}
31+
<tr><td><a href="/content/all">TOTAL</a></td><td>{{ site.content.size }}</td></tr>
32+
</tbody>
33+
</table>
34+
</div></article>

‎_categories/index.md‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎_includes/big_content_table.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
{%- assign contents = include.contents | sort: "slug" | reverse | sort: "expected_value", "first" | reverse -%}
2+
<div style="display: none;" id="table-loading"><h3><i class="fas fa-circle-notch fa-spin"></i> Table Loading...</h3></div>
3+
<script>
4+
document.getElementById("table-loading").style = "";
5+
</script>
6+
<table id="mainContentList">
7+
<thead>
8+
<th>Name</th>
9+
<th>Formats</th>
10+
<th>Year</th>
11+
<th>Author(s)</th>
12+
<th>Featured In...</th>
13+
<th>Date Added</th>
14+
<th>Size</th>
15+
<th><i class="fas fa-cloud-arrow-down"></i><span style="display: none">Downloads</span></th>
16+
</thead>
17+
<tbody>
18+
{%- for p in contents -%}
19+
<tr id="{{ p.slug }}">
20+
<td><a href="{{ p.url }}" target="_blank">{%- include_cached content_icon.html category=p.category subcat=p.subcat -%} {{ p.title | markdownify | remove: '<p>' | remove: '</p>' }}</a></td>
21+
<td>{%- include content_filelinks.html content=p newtab=true -%}</td>
22+
<td>{{ p.year }}</td>
23+
<td>{%- if p.authors.size > 0 -%}
24+
{%- include_cached content_authors_string.html content=p -%}
25+
{%- elsif p.editor -%}
26+
{%- assign editors = p.editor | split: " and " -%}
27+
{%- include_cached content_authors_string.html authors=editors -%}
28+
{%- elsif p.reader -%}
29+
{%- assign readers = p.reader | split: " and " -%}
30+
{%- include_cached content_authors_string.html authors=readers -%}
31+
{%- elsif p.translator -%}
32+
{%- assign translators = p.translator | split: " and " -%}
33+
{%- include_cached content_authors_string.html authors=translators -%}
34+
{%- endif -%}
35+
</td>
36+
{%- assign primarytag = false -%}
37+
{%- assign ordinality = 9999 -%}
38+
{%- if p.course -%}
39+
{%- for candidatecourse in site.courses -%}
40+
{%- if p.course == candidatecourse.slug -%}
41+
{%- capture primarytag -%}<a href="{{ candidatecourse.url }}">
42+
<i class="{{ candidatecourse.icon }}"></i>
43+
{{ candidatecourse.title | escape }}
44+
</a>{%- endcapture -%}
45+
{%- assign ordinality = forloop.index -%}
46+
{%- break -%}
47+
{%- endif -%}
48+
{%- endfor -%}
49+
{%- unless primarytag -%}
50+
{%- for candidatetag in site.tags -%}
51+
{%- if candidatetag.slug == p.course -%}
52+
{%- capture primarytag -%}<a href="{{ candidatetag.url }}">
53+
<i class="fas fa-tag"></i>
54+
{{ candidatetag.title | escape }}
55+
</a>{%- endcapture -%}
56+
{%- assign ordinality = forloop.index | plus: site.courses.size -%}
57+
{%- break -%}
58+
{%- endif -%}
59+
{%- endfor -%}
60+
{%- endunless -%}
61+
{%- endif -%}
62+
{%- unless primarytag -%}
63+
{%- for candidatetag in site.tags -%}
64+
{%- if p.tags contains candidatetag.slug -%}
65+
{%- capture primarytag -%}<a href="{{ candidatetag.url }}">
66+
<i class="fas fa-tag"></i>
67+
{{ candidatetag.title | escape }}
68+
</a>{%- endcapture -%}
69+
{%- assign ordinality = forloop.index | plus: site.courses.size -%}
70+
{%- break -%}
71+
{%- endif -%}
72+
{%- endfor -%}
73+
{%- endunless -%}
74+
<td data-order="{{ ordinality }}">
75+
{%- if primarytag -%}
76+
{{ primarytag }}
77+
{%- endif -%}
78+
</td>
79+
<td>
80+
{{ p.date | date: "%Y-%m-%d %H:%M" }}
81+
</td>
82+
<td data-order="{{ p.total_mins }}">
83+
{%- include content_size.html content=p -%}
84+
</td>
85+
<td>
86+
{%- assign plus = 1 -%}
87+
{%- unless p.external_url or p.drive_links.size > 0 -%}{%- assign plus = 0 -%}{%- endunless -%}
88+
{{ site.data.content_downloads[p.content_path] | default: 0 | plus: plus }}
89+
</td>
90+
</tr>
91+
{%- endfor -%}
92+
</tbody>
93+
</table>
94+
<link rel="stylesheet" href="/assets/css/datatables{%- if jekyll.environment == "production" -%}.min{%- endif -%}.css" />
95+
<style>
96+
#main {max-width: revert;}
97+
</style>
98+
<script src="/assets/js/datatables{%- if jekyll.environment == "production" -%}.min{%- endif -%}.js"></script>
99+
<script src="/assets/js/utils.js"></script>
100+
<script>
101+
const initialwindowwidth = $(window).width();
102+
const mainContentList = new DataTable("#mainContentList", {
103+
"order": [], // Save the page order as the default sort
104+
"layout": {
105+
"topStart": {
106+
"buttons": [
107+
{
108+
// "popoverTitle": "",
109+
"extend": "colvis",
110+
"columns": ":not(.unhideable)"
111+
},
112+
]
113+
},
114+
"bottomStart": {
115+
"pageLength": {
116+
"menu": [10, 25, 50, 100, 250, 500, 1000]
117+
}
118+
}
119+
},
120+
"columnDefs": [
121+
{ "targets": [0], "visible": true, "className": "unhideable"},
122+
{ "targets": [1], "visible": initialwindowwidth > 550},
123+
{ "targets": [2], "width": "70px", "visible": initialwindowwidth > 475},
124+
{ "targets": [4], "visible": initialwindowwidth > 700},
125+
{ "targets": [5], "visible": initialwindowwidth > 790},
126+
{ "targets": [6], "visible": initialwindowwidth > 850},
127+
{ "targets": [7], "visible": initialwindowwidth > 820}
128+
]
129+
});
130+
131+
function updateTableToReflectURLParams() {
132+
window.tableDrawLock = true;
133+
const requestedOrder = getQueryVariable('order'); // e.g. ?order=1.asc
134+
const requestedCols = getQueryVariable('cols'); // e.g. ?cols=0.1.10.11
135+
const requestedPageSize = getQueryVariable('n'); // e.g. ?n=50
136+
const requestedPage = getQueryVariable('p'); // e.g. ?n=50&p=2
137+
const requestedSearch = getQueryVariable('q'); // e.g. q=citta
138+
139+
if (requestedOrder !== undefined) {
140+
const order = requestedOrder.split('.');
141+
if (order.length <= 2) {
142+
order[0] = parseInt(order[0]);
143+
mainContentList.order(order);
144+
}
145+
}
146+
if (requestedSearch !== undefined) {
147+
document.getElementById('dt-search-0').value = requestedSearch;
148+
mainContentList.search(requestedSearch);
149+
}
150+
if (requestedCols !== undefined) {
151+
const cols = requestedCols.split('.');
152+
mainContentList.columns().every((i) => {
153+
mainContentList.columns(i).visible(cols.includes(i.toString()));
154+
});
155+
}
156+
if (requestedPageSize !== undefined) {
157+
const ps = parseInt(requestedPageSize);
158+
if (ps > 0) {
159+
mainContentList.page.len(ps);
160+
}
161+
}
162+
mainContentList.draw();
163+
if (requestedPage !== undefined) {
164+
const p = parseInt(requestedPage);
165+
if (p >= 0) {
166+
mainContentList.page(p).draw(false);
167+
}
168+
}
169+
setTimeout(() => window.tableDrawLock = undefined, 5);
170+
}
171+
updateTableToReflectURLParams();
172+
addEventListener('popstate', updateTableToReflectURLParams);
173+
174+
function getURLForCurrentTable() {
175+
const url = new URL(location);
176+
url.searchParams.set('n', mainContentList.page.len());
177+
url.searchParams.set('p', mainContentList.page());
178+
url.searchParams.set('order', mainContentList.order().flat().join('.'));
179+
const vises = mainContentList.columns().visible();
180+
url.searchParams.set('cols', vises.reduce((r,c,i)=>c?[...r,i]:r,[]).join('.'));
181+
url.searchParams.set('q', mainContentList.search());
182+
return url;
183+
}
184+
function pushNewTableState() {
185+
if (window.tableDrawLock) return;
186+
history.replaceState({},'',getURLForCurrentTable());
187+
}
188+
setTimeout(() => {
189+
history.replaceState({},'',getURLForCurrentTable());
190+
mainContentList.on('draw', pushNewTableState);
191+
mainContentList.on('column-visibility.dt', pushNewTableState);
192+
}, 200);
193+
$("#table-loading").hide();
194+
</script>

0 commit comments

Comments
 (0)