class App {
constructor() {
this.excerptArray = []
this.displayArray = []
this.topicArray = [];
}
load() {
d3.csv('https://beta.ctvnews.ca/content/dam/common/exceltojson/trudeau-speeches.txt').then(data => {
data.forEach(d => {
new Excerpt(d.Phrase, d.Date, d.sentence)
this.topicArray.includes(d.Phrase) ? null : this.topicArray.push(d.Phrase)
})
this.create()
})
}
create() {
document.querySelectorAll('.speech-container').forEach(div => {
let topic = div.dataset.phrase;
new Display (topic, div, topic.charAt(0).toUpperCase() + topic.slice(1), topic)
})
this.displayArray.forEach(display => display.create())
}
}
class Excerpt {
constructor(id, date, excerpt) {
this.id = id;
this.excerpt = excerpt;
this.date = date;
myApp.excerptArray.push(this)
}
highlight(phrase) {
let variations = [phrase, phrase.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1)).join(' ')];
phrase.split(' ').forEach((word, i) => {
let temp = phrase.split(' ');
temp[i] = temp[i].charAt(0).toUpperCase() + temp[i].slice(1)
variations.push(temp.join(' '))
})
let join = this.excerpt;
variations.forEach(v => {
let split = join.split(v);
join = split.join(`${v}`)
})
return `"${join}"`;
}
}
class Display {
constructor(id, parent, title, phrase) {
this.parent = parent;
this.id = id;
this.title = title;
this.phrase = phrase;
this.excerptArray = [];
this.index = 0;
myApp.displayArray.push(this)
}
get currentExcerpt() {
return this.excerptArray[this.index]
}
create() {
const parent = this.parent;
if (!myApp.topicArray.includes(this.phrase)) {
console.log(`No data for phrase: "${this.phrase}"`)
return parent.remove()
}
myApp.excerptArray.forEach(excerpt => {
if (excerpt.id === this.id) {
this.excerptArray.push(excerpt)
}
})
let titleContainer = make('div', parent, 'title-container')
titleContainer.innerText = `"${this.title}"`;
this.excerptContainer = make('div', parent, 'excerpt-container');
this.excerptCount = make('div', this.excerptContainer, 'excerpt-count')
this.excerptDiv = make('div', this.excerptContainer, 'excerpt-div')
this.dateContainer = make('div', parent, 'date-container')
let leftArrow = make('div', parent, 'arrow left')
leftArrow.innerText = "◄"
leftArrow.onclick = () => {
this.index--
if (this.index < 0) {
this.index = this.excerptArray.length - 1;
}
this.update()
}
let rightArrow = make('div', parent, 'arrow right')
rightArrow.innerText = "►"
rightArrow.onclick = () => {
this.index++
if (this.index >= this.excerptArray.length) {
this.index = 0;
}
this.update();
}
let disclaimer = make('div', parent, 'disclaimer')
disclaimer.innerText = 'Sentences have been pulled from unedited speech transcripts and might not be verbatim'
this.update();
}
update() {
this.excerptCount.innerHTML = `${this.index + 1} / ${this.excerptArray.length}`
this.excerptDiv.innerHTML = this.currentExcerpt.highlight(this.phrase);
this.dateContainer.innerText = this.currentExcerpt.date;
}
}
function make(type, parent, CLASS=null, ID=null) {
let element = document.createElement(type);
ID ? element.setAttribute('class', CLASS) : null;
CLASS ? element.setAttribute('class', CLASS) : null;
return parent.appendChild(element);
}
const myApp = new App();
myApp.load()