Last active
October 18, 2017 22:04
-
-
Save rhettl/aa926e1b4d4ce17f4d458627289a4da8 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Anaonymous function to scrape and reform data. | |
* @params {jQuery} $ | |
*/ | |
(function ($) { | |
/** | |
* Make an object where keys are years and values | |
* are sorted arrays of people and hrefs. | |
*/ | |
const people = $('.column2a').children() // Get children of fist column | |
.add($('.column2b').children()) // add children of second column | |
.filter(function () { // Filter by ... | |
return !$(this).is('br'); // -> remove <br> | |
}) | |
.filter(function () { // Fitler By ... | |
return !($(this).is('h2') && $(this).has('a').length); // -> remove H2 with A | |
}) | |
.toArray() // Get normal JS Array | |
.reduce((arr, next, i) => { | |
const newI = Math.floor(i / 2); // get the new index based on pairs; 0&1 will be 0, 2&3 will be 1, etc... | |
if (!arr[newI]) arr[newI] = {}; // make output object for this index | |
if (i % 2 === 0) { // On even items | |
arr[newI].year = +($(next).text().match(/(\d+)/)[1]); // -> get year from header | |
} else { // On Odd items | |
let people = $('a', next).toArray() // -> get anchors | |
.map(function (elem) { | |
return [$(elem).text(), $(elem).attr('href')] | |
}) // keep text and href | |
.filter(([name]) => !!name) // remove links without names | |
.map(([name, link]) => { // each person | |
let [_, first, last] = name.match(/^(.*) ([^\s]+)$/i); // -> get first and last name | |
if (/ v[ao]n$/i.test(first)) { // correct for van/von names | |
const [_, newFirst, v] = first.toString().match(/^(.*) (v[ao]n)$/i); | |
first = newFirst; | |
last = `${v} ${last}`; | |
} | |
return {first, last, link}; // return object with names and link | |
}) | |
; | |
arr[newI].people = people; // asign to output object | |
} | |
return arr; | |
}, []) | |
.reduce((obj, next) => { | |
let yr = `${next.year}`; | |
if (!obj[yr]) { // initialize the people array for a year | |
obj[yr] = []; | |
} | |
obj[yr] = obj[yr] // set people to equal existing people | |
.concat(next.people) // plus more people | |
.sort((a, b) => { // then sort | |
if (a.last > b.last) return +1; // by last name | |
if (a.last < b.last) return -1; | |
if (a.first > b.first) return +1; // then first name | |
if (a.first < b.first) return -1; | |
return 0; // a.first + a.last === b.first + b.last | |
}) | |
; | |
return obj; | |
}, {}) | |
; | |
/** | |
* Make HTML which has | |
* `.spotlight-group>h2.spotlight-year{year}+ul.spotlight-people>.li{person.name}` | |
* ^^ this is called Zen Coding. it is a shorthand for making HTML using mostly CSS selector text. | |
*/ | |
let html = Object.getOwnPropertyNames(people) // Get years | |
.sort() // Sort years | |
.reverse() // Reverse the sort (largest to smallest) | |
.map(year => { // for each year | |
let listItems = people[year] | |
.map(p => `<li><a href="${p.link}">${p.first} ${p.last}</a></li>`) // Make a List item for each person | |
.join(''); // join as a string | |
/** | |
* return the spotlight-group for that year. | |
*/ | |
return `<div class="spotlight-group"><h2 class="spotlight-year">${year}</h2><ul class="spotlight-people">${listItems}</ul></div>`; | |
}) | |
.join('') // join all years as a string | |
; | |
$('.column2b').remove(); // remove unneeded column | |
$('.column2a').replaceWith($(`<div>${html}</div>`)); // replace the other column with new content in a div wrapper. | |
})(window.jQuery); // hand window.jQuery to closure for $ variable. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment