Skip to content

Commit

Permalink
Adding support for multi topics
Browse files Browse the repository at this point in the history
  • Loading branch information
@aanunez
aanunez authored Apr 28, 2022
1 parent a67312c commit 8ef5266
Showing 1 changed file with 115 additions and 115 deletions.
230 changes: 115 additions & 115 deletions site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ let ctri = {
data: "display",
className: "dataTablesDisplayCol",
render: (data, type, row, meta) => {
return type === 'filter' ? jQuery(data).text() : data;
return type === 'filter' ? jQuery(data).text() : data
},
visible: true
},
Expand All @@ -30,15 +30,15 @@ let ctri = {
title: "Topic",
data: "topic",
render: (data, type, row, meta) => {
return data[0];
return data.join(', ')
},
visible: false
},
{
title: "Primary Author",
data: "author",
render: (data, type, row, meta) => {
return typeof data[0] == "string" ? data[0] : data[0][2];
return typeof data[0] == "string" ? data[0] : data[0][2]
},
visible: false
},
Expand All @@ -47,81 +47,81 @@ let ctri = {
data: "date_of_publication",
render: (data, type, row, meta) => {
if ( type === "sort" ) {
let mdy = data.split('/');
let [m,d,y] = mdy;
return mdy.length == 3 ? `${y.padStart(4,'0')}${m.padStart(2,'0')}${d.padStart(2,'0')}` : data;
let mdy = data.split('/')
let [m,d,y] = mdy
return mdy.length == 3 ? `${y.padStart(4,'0')}${m.padStart(2,'0')}${d.padStart(2,'0')}` : data
}
return data;
return data
},
visible: false
}
],

loadData: async () => {
fetch(ctri.dataLink).then(response => {
return response.text();
return response.text()
}).then(csv => {
ctri.data = ctri.csv2json(csv);
ctri.refresh(0);
});
ctri.data = ctri.csv2json(csv)
ctri.refresh(0)
})
},

csv2json: (csvString) => {
let json = [];
let csvArray = csvString.split("\n");
let json = []
let csvArray = csvString.split("\n")

// Remove the column names from csvArray into csvColumns.
let csvColumns = csvArray.shift().split(',');
let csvColumns = csvArray.shift().split(',')

csvArray.forEach( (rowString) => {
// Regex split the string to ignore commas in quotes
let csvRow = rowString
.replace(/(,,)/g,',"",')
.replace(/(^,)/g,'"",')
.replace(/(,$)/g,',""')
.replace(/(,,)/g,',"",').match(/(".*?"|[^",]+)(?=\s*,|\s*$)/g);
.replace(/(,,)/g,',"",').match(/(".*?"|[^",]+)(?=\s*,|\s*$)/g)

// Here we work on a single row.
// Create an object with all of the csvColumns as keys.
let row = new Object();
for ( let colNum = 0; colNum < csvRow.length; colNum++) {
let row = new Object()
for ( let colNum = 0 colNum < csvRow.length colNum++) {
// Remove beginning and ending quotes since stringify will add them.
let colData = csvRow[colNum].replace(/^['"]|['"]$/g, "");
row[csvColumns[colNum]] = colData;
let colData = csvRow[colNum].replace(/^['"]|['"]$/g, "")
row[csvColumns[colNum]] = colData
}

// Special check for our data format (more than 1 topic/author)
let author = [row['first_name'],row['middle_name'],row['last_name']];
let author = [row['first_name'],row['middle_name'],row['last_name']]
if ( row['title'].length ) {
row['author'] = [author];
row['topic'] = [row['topic']];
json.push(row);
row['author'] = [author]
row['topic'] = [row['topic']]
json.push(row)
} else {
if ( author.join('').length ) {
json[json.length-1].author.push(author);
json[json.length-1].author.push(author)
}
if ( row['topic'].length ) {
json[json.length-1].topic.push(row['topic']);
json[json.length-1].topic.push(row['topic'])
}
}
});
})

return json;
return json
},

refresh: (attempt) => {
if ( attempt > 10 ) {
console.log("Unable to load data, possible format issue.");
return;
console.log("Unable to load data, possible format issue.")
return
}
try {
ctri.table.clear();
ctri.table.rows.add(ctri.generateTableStruct());
ctri.table.draw();
ctri.updateTopicDropDown();
ctri.table.clear()
ctri.table.rows.add(ctri.generateTableStruct())
ctri.table.draw()
ctri.updateTopicDropDown()
} catch(e) {
console.log(e);
setTimeout(ctri.refresh, 200, attempt+1);
console.log(e)
setTimeout(ctri.refresh, 200, attempt+1)
}
},

Expand All @@ -135,81 +135,81 @@ let ctri = {
createdRow: (row,data,index) => jQuery(row).addClass('dataTablesRow'),
dom: 'lftpi',
drawCallback: () => {
ctri.displaySortingValue();
ctri.displaySortingValue()
},
language: {
"zeroRecords": "No matching journal entries",
"emptyTable": "Loading...",
"search": ""
}
});
})

// Grab data from google sheets, refreshes data when done
ctri.loadData();
ctri.loadData()

// Setup buttons, placeholders, and styles
jQuery('#mainDataTable tbody').on('click', '.expandButton', ctri.expand);
jQuery("input.form-control").prop('placeholder','Search journal entries');
jQuery(".dataTables_length select").removeClass("form-select form-select-sm").addClass("dataTablesCustom_length");
jQuery("#mainDataTable_filter").after(ctri.generateSortDropDown);
jQuery(".dataTablesCustom_sort").on('change', ctri.sort).trigger("change");
jQuery(".dataTablesCustom_order").on('click', ctri.orderToggle);
jQuery(".dataTablesCustom_sort").after(ctri.generateTopicsDropDown());
jQuery(".dataTablesCustom_topic").on('change', ctri.topicFilterDraw).trigger("change");
jQuery.fn.dataTable.ext.search.push(ctri.topicFilter);
jQuery('#mainDataTable tbody').on('click', '.expandButton', ctri.expand)
jQuery("input.form-control").prop('placeholder','Search journal entries')
jQuery(".dataTables_length select").removeClass("form-select form-select-sm").addClass("dataTablesCustom_length")
jQuery("#mainDataTable_filter").after(ctri.generateSortDropDown)
jQuery(".dataTablesCustom_sort").on('change', ctri.sort).trigger("change")
jQuery(".dataTablesCustom_order").on('click', ctri.orderToggle)
jQuery(".dataTablesCustom_sort").after(ctri.generateTopicsDropDown())
jQuery(".dataTablesCustom_topic").on('change', ctri.topicFilterDraw).trigger("change")
jQuery.fn.dataTable.ext.search.push(ctri.topicFilter)
},

expand: (e) => {
let $tr = jQuery(e.currentTarget).closest('tr');
let row = ctri.table.row($tr);
let $tr = jQuery(e.currentTarget).closest('tr')
let row = ctri.table.row($tr)
if (row.child.isShown()) {
row.child.hide();
$tr.find('.expandButton').removeClass("fa-circle-minus").addClass("fa-circle-plus");
$tr.removeClass('shown');
row.child.hide()
$tr.find('.expandButton').removeClass("fa-circle-minus").addClass("fa-circle-plus")
$tr.removeClass('shown')
} else {
row.child( ctri.generateHTMLforChild(row.data()), 'dataTableChild').show();
$tr.find('.expandButton').removeClass("fa-circle-plus").addClass("fa-circle-minus");
$tr.addClass('shown');
row.child( ctri.generateHTMLforChild(row.data()), 'dataTableChild').show()
$tr.find('.expandButton').removeClass("fa-circle-plus").addClass("fa-circle-minus")
$tr.addClass('shown')
}
},

sort: (e) => {
let selection = jQuery(".dataTablesCustom_sort").val();
jQuery(".dataTablesCustom_sort").css('color', selection ? 'black' : ctri.disabledTextColor );
let index = ctri.dataCols.map(x => x.data).indexOf( jQuery(e.currentTarget).val() );
ctri.table.order( [ index > -1 ? index : 0, 'asc' ] ).draw();
ctri.displaySortingValue();
let selection = jQuery(".dataTablesCustom_sort").val()
jQuery(".dataTablesCustom_sort").css('color', selection ? 'black' : ctri.disabledTextColor )
let index = ctri.dataCols.map(x => x.data).indexOf( jQuery(e.currentTarget).val() )
ctri.table.order( [ index > -1 ? index : 0, 'asc' ] ).draw()
ctri.displaySortingValue()
},

displaySortingValue: () => {
let selection = jQuery(".dataTablesCustom_sort").val();
jQuery(".sortingValue").text("");
let selection = jQuery(".dataTablesCustom_sort").val()
jQuery(".sortingValue").text("")
if ( ["","title","journal","author"].includes(selection) ) {
return;
return
}
jQuery(".sortingValue").each( (_,el) => {
let data = ctri.table.row(jQuery(el).closest('tr')).data();
jQuery(el).text(data[selection]);
});
let data = ctri.table.row(jQuery(el).closest('tr')).data()
jQuery(el).text(data[selection])
})
},

orderToggle: () => {
ctri.order = ctri.order == "asc" ? "desc" : "asc";
let table = jQuery('#mainDataTable').DataTable();
ctri.table.order( [ ctri.table.order()[0][0], ctri.order ] ).draw();
ctri.order = ctri.order == "asc" ? "desc" : "asc"
let table = jQuery('#mainDataTable').DataTable()
ctri.table.order( [ ctri.table.order()[0][0], ctri.order ] ).draw()
jQuery(".dataTablesCustom_order i").removeClass('fa-arrow-down-short-wide fa-arrow-up-short-wide')
jQuery(".dataTablesCustom_order i").addClass(`fa-arrow-${ctri.order == "asc" ? 'down' : 'up'}-short-wide`)
},

generateTableStruct: () => {
let data = [];
let data = []
ctri.data.forEach( (el) => {
let authors = [];
let authors = []
el.author.forEach( (el) => {
authors.push(typeof el == "string" ? el : ((el[2]||"").trim()+" "+(el[0][0]||"").trim()+(el[1][0]||"").trim()).trim());
});
authors = authors.filter(n=>n);
let link = el.url ? `<a href="${el.url}" class="fileLink"><i class="fa-regular fa-file-lines"></i></a>` : "";
authors.push(typeof el == "string" ? el : ((el[2]||"").trim()+" "+(el[0][0]||"").trim()+(el[1][0]||"").trim()).trim())
})
authors = authors.filter(n=>n)
let link = el.url ? `<a href="${el.url}" class="fileLink"><i class="fa-regular fa-file-lines"></i></a>` : ""
data.push(jQuery.extend({
'display': `
<div class="container m-0">
Expand Down Expand Up @@ -244,41 +244,41 @@ let ctri = {
</div>
</div>
`
}, el));
});
return data;
}, el))
})
return data
},

generateHTMLforChild: (data) => {
let authors = [];
let authors = []
data.author.forEach( (el) => {
authors.push(typeof el == "string" ? el : ((el[2]||"").trim()+" "+(el[0][0]||"").trim()+(el[1][0]||"").trim()).trim());
});
authors = authors.filter(n=>n);
let date = "";
let year = "";
authors.push(typeof el == "string" ? el : ((el[2]||"").trim()+" "+(el[0][0]||"").trim()+(el[1][0]||"").trim()).trim())
})
authors = authors.filter(n=>n)
let date = ""
let year = ""
if( data.date_of_publication ) {
let [m,d,y] = data.date_of_publication.split('/');
year = y;
let tmp = new Date(`${y}-${m}-${d}`);
date = tmp.toLocaleString('default', { year:'numeric', month: 'long', day:"numeric" });
date = m == "1" && d == "1" ? "" : date;
let [m,d,y] = data.date_of_publication.split('/')
year = y
let tmp = new Date(`${y}-${m}-${d}`)
date = tmp.toLocaleString('default', { year:'numeric', month: 'long', day:"numeric" })
date = m == "1" && d == "1" ? "" : date
}
year = year ? `(${year})` : "";
let journal = data.journal ? ` ${data.journal}. ` : "";
let volume = data.volume ? `Vol. ${data.volume}, ` : "";
let page = data.page ? `: ${data.page}.` : ".";
let issue = data.issue ? `No. ${data.issue}` : "";
let primaryTopic = data.topic.length ? `${data.topic[0]}. ` : "";
let topics = data.topic.length > 1 ? `${data.topic.join(', ')}. ` : "";
year = year ? `(${year})` : ""
let journal = data.journal ? ` ${data.journal}. ` : ""
let volume = data.volume ? `Vol. ${data.volume}, ` : ""
let page = data.page ? `: ${data.page}.` : "."
let issue = data.issue ? `No. ${data.issue}` : ""
let primaryTopic = data.topic.length ? `${data.topic[0]}. ` : ""
let topics = data.topic.length > 1 ? data.topic.join(', ') : ""
let apa = ""
if ( journal ) {
apa = `${authors.join(', ')} ${year} ${data.title}.${journal}${volume}${issue}${page}`;
apa = `${authors.join(', ')} ${year} ${data.title}.${journal}${volume}${issue}${page}`
} else {
// Non Journal, online should have full date
apa = `${authors.join(', ')}.${data.title}.${primaryTopic}Online ${date}.`;
apa = `${authors.join(', ')}.${data.title}.${primaryTopic}Online ${date}.`
}
apa = apa.trim().replaceAll(" "," ").replaceAll(". .",".").replaceAll(", .",".");
apa = apa.trim().replaceAll(" "," ").replaceAll(". .",".").replaceAll(", .",".")

return `
<div><b>Authors:</b> ${authors.join(', ')}</div>
Expand All @@ -290,45 +290,45 @@ let ctri = {
<div><b>Issue:</b> ${data.issue||"N/A"}</div>
<div><b>Pages:</b> ${data.page||"N/A"}</div>
<div><b>APA:</b> ${apa}</div>
`;
`
},

generateSortDropDown: () => {
let html = "<option value=''>Sort by...</option>";
let html = "<option value=''>Sort by...</option>"
ctri.dataCols.forEach( (el) => {
if ( !el.visible ) {
html = `${html}<option value="${el.data}">${el.title}</option>`;
html = `${html}<option value="${el.data}">${el.title}</option>`
}
});
})
return `
<a class="dataTablesCustom_order">
<i class="fa-solid fa-arrow-down-short-wide"></i>
</a>
<select class="dataTablesCustom_sort">${html}</select>`;
<select class="dataTablesCustom_sort">${html}</select>`
},

generateTopicsDropDown: () => {
return `
<select class="dataTablesCustom_topic">
<option value=''>Filter to topic...</option>
</select>`;
</select>`
},

updateTopicDropDown: () => {
let topics = ctri.data.map(x=>x.topic).flat().filter((v, i, a) => a.indexOf(v) === i);
let html = topics.map( topic => `<option>${topic}</option>`).join('');
jQuery(".dataTablesCustom_topic").append(html);
let topics = ctri.data.map(x=>x.topic).flat().filter((v, i, a) => a.indexOf(v) === i)
let html = topics.map( topic => `<option>${topic}</option>`).join('')
jQuery(".dataTablesCustom_topic").append(html)
},

topicFilterDraw: () => {
let selection = jQuery(".dataTablesCustom_topic").val();
jQuery(".dataTablesCustom_topic").css('color', selection ? 'black' : ctri.disabledTextColor );
ctri.table.draw();
let selection = jQuery(".dataTablesCustom_topic").val()
jQuery(".dataTablesCustom_topic").css('color', selection ? 'black' : ctri.disabledTextColor )
ctri.table.draw()
},

topicFilter: (settings, data, dataIndex) => {
let selection = jQuery(".dataTablesCustom_topic").val();
return !selection || data[3] == selection;
let selection = jQuery(".dataTablesCustom_topic").val()
return !selection || data[3].includes(selection)
}
};
jQuery(document).ready(ctri.init);
}
jQuery(document).ready(ctri.init)

0 comments on commit 8ef5266

Please sign in to comment.