Difference between revisions of "MediaWiki:Common.js"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
$(function () { | $(function () { | ||
− | + | // configuration | |
+ | let colorForSpecialElements = '#933221' | ||
+ | // can be one of: <ro> <hu> <en> | ||
+ | let configuredFor = 'ro' | ||
+ | let roNWTURL = 'http://localhost:3001/ro/' | ||
+ | let huNWTURL = 'http://localhost:3001/hu/' | ||
+ | let enNWTURL = 'http://localhost:3001/en/' | ||
+ | // DOM side effects | ||
+ | var verses = Array.prototype.slice.call( document.getElementsByClassName("bible-verse"), 0 ); | ||
+ | verses.forEach(verse => { | ||
+ | verse.addEventListener("mouseover", () => { | ||
+ | verse.style.cursor = "pointer" | ||
+ | }); | ||
+ | }); | ||
+ | verses.forEach((verse) => { | ||
+ | verse.addEventListener("click", async () => { | ||
+ | toggleState(verse) | ||
+ | |||
+ | if (areVersesAlreadyFetched(verse)) { | ||
+ | return | ||
+ | } else { | ||
+ | verse.setAttribute('loaded', true); | ||
+ | let newLis = await createDinamicLis(verse) | ||
+ | clearAllChildrenAndAddElementsToParrent( | ||
+ | verse.children[2].children[1], newLis | ||
+ | ) | ||
+ | } | ||
+ | }) | ||
+ | }) | ||
+ | |||
+ | function clearAllChildrenAndAddElementsToParrent(parrent, children) { | ||
+ | parrent.innerHTML = '' | ||
+ | children.forEach(child => parrent.appendChild(child)) | ||
+ | } | ||
+ | |||
+ | function areVersesAlreadyFetched(verse) { | ||
+ | return verse.getAttribute('loaded') == 'true' | ||
+ | } | ||
+ | |||
+ | async function createDinamicLis(verse) { | ||
+ | let parsedVerse = verse.children[0].innerText | ||
+ | //let parsedVerse = verse.getAttribute("verse") | ||
+ | let ulElement = verse.children[2].children[1] | ||
+ | |||
+ | fetchedVerses = await fetchNWTVerses(parseVerseAttribute(parsedVerse)); | ||
+ | return createLiElements(fetchedVerses, ulElement); | ||
+ | } | ||
+ | |||
+ | function createLiElements(fetchedVerses, ul) { | ||
+ | let result = []; | ||
+ | fetchedVerses.forEach(versesGroup=> { | ||
+ | let li = document.createElement('li') | ||
+ | li.style.color = colorForSpecialElements | ||
+ | li.style.fontSize = '1.5em' | ||
+ | li.style.textTransform = 'capitalize' | ||
+ | li.style.paddingBottom = '0.3em' | ||
+ | li.innerHTML = versesGroup.book + ' ' + versesGroup.chapter | ||
+ | result.push(li) | ||
+ | versesGroup.verseElements.forEach(verse => { | ||
+ | let li = document.createElement('li') | ||
+ | let hr = document.createElement('hr') | ||
+ | hr.style.borderStyle = 'ridge' | ||
+ | let liContent = "" | ||
+ | verse.forEach(el => { | ||
+ | liContent = liContent + el + '<br>' | ||
+ | }) | ||
+ | li.innerHTML = liContent | ||
+ | result.push(li) | ||
+ | result.push(hr) | ||
+ | }) | ||
+ | }); | ||
+ | return result | ||
+ | } | ||
+ | |||
+ | function toggleState(verse) { | ||
+ | let verseDisplay = verse.getElementsByClassName("translations-container")[0].style.display; | ||
+ | hideAllVerses(verses); | ||
+ | verse.getElementsByClassName("translations-container")[0].style.display = renderState(verseDisplay, "block"); | ||
+ | } | ||
+ | |||
+ | function hideAllVerses(elements) { | ||
+ | elements.forEach((element) => { | ||
+ | element.getElementsByClassName("translations-container")[0].style.display = "none"; | ||
+ | }) | ||
+ | } | ||
+ | |||
+ | function renderState(currentState, toggledState) { | ||
+ | if (currentState === "none") { | ||
+ | return toggledState | ||
+ | } | ||
+ | return "none" | ||
+ | } | ||
+ | |||
+ | function getVersesFromMainBlock(mainBlock) { | ||
+ | let result = [] | ||
+ | |||
+ | changeNumberOfTheFirstVerseWithNumberOne(mainBlock) | ||
+ | |||
+ | Array.from(mainBlock.children).forEach(verse => { | ||
+ | let verseContent = [] | ||
+ | if (verse.classList.contains('verse')) { | ||
+ | |||
+ | Array.from(verse.children).forEach(child => { | ||
+ | if (child.innerText != '' ) { | ||
+ | verseContent.push(stripSymbols(['+','*'], child.innerText)) | ||
+ | } | ||
+ | }) | ||
+ | |||
+ | changeColorOfVerseNumber(verseContent) | ||
+ | |||
+ | result.push(verseContent) | ||
+ | } | ||
+ | }) | ||
+ | return result | ||
+ | } | ||
+ | |||
+ | function changeColorOfVerseNumber(verseContent) { | ||
+ | let re = new RegExp(/^\d+|\d+\b|\d+(?=\w)/g); //starts with digit, one or more | ||
+ | let m = re.exec(verseContent[0]) | ||
+ | if (m != null) { | ||
+ | verseContent[0] = verseContent[0].replace(m[0], '<strong style="color: ' + colorForSpecialElements + '"' + '>' + m[0] + '</strong>') | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function changeNumberOfTheFirstVerseWithNumberOne(mainBlock) { | ||
+ | let re = new RegExp(/^\d+|\d+\b|\d+(?=\w)/g); //starts with digit, one or more | ||
+ | let m = re.exec(mainBlock.getElementsByClassName('verse')[0].children[0].innerText) | ||
+ | mainBlock.getElementsByClassName('verse')[0].children[0].innerText = ' ' + mainBlock.getElementsByClassName('verse')[0].children[0].innerText.replace(m[0], 1) | ||
+ | } | ||
+ | |||
+ | function getSpecificVerses(versesList, arrayOfSpecificVerses) { | ||
+ | let result = [] | ||
+ | arrayOfSpecificVerses.forEach(verseNumber => { | ||
+ | result.push(versesList[verseNumber - 1]) | ||
+ | }) | ||
+ | return result | ||
+ | } | ||
+ | |||
+ | |||
+ | // Bussiness logic | ||
+ | function parseVerseAttribute(verseString) { | ||
+ | // 21:1;22:2 | ||
+ | let arrayOfGroupsDelimiter = ';' | ||
+ | // 21:1-7,9 | ||
+ | let versesGroupsDelimiter = ',' | ||
+ | |||
+ | let book = verseString.replace(/ .*/,'') | ||
+ | let stringWithoutBook = verseString.replace(book, '') | ||
+ | |||
+ | let result = { book: book, groups: processChaptersAndVerses(stringWithoutBook)} | ||
+ | return result | ||
+ | |||
+ | function processChaptersAndVerses(stringWithoutBook) { | ||
+ | let groups = stringWithoutBook.split(arrayOfGroupsDelimiter); | ||
+ | let result = [] | ||
+ | groups.forEach(group => { | ||
+ | result.push(processGroup(group)) | ||
+ | }) | ||
+ | return result | ||
+ | } | ||
+ | |||
+ | if (verseString.includes(";")) { | ||
+ | let book = verseString.replace(/ .*/,'') | ||
+ | let stringWithoutBook = verseString.replace(book, '') | ||
+ | |||
+ | let groups = stringWithoutBook.split(';'); | ||
+ | let parsedGroups = []; | ||
+ | groups.forEach(group => { | ||
+ | parsedGroups.push(createObjectForStringGroup(group)); | ||
+ | }) | ||
+ | } | ||
+ | |||
+ | function processGroup(group) { | ||
+ | let chapter = group.split(':')[0] | ||
+ | let verses = group.split(':')[1] | ||
+ | |||
+ | return {chapter: parseInt(chapter), verses: processVersesGroups(verses)}; | ||
+ | } | ||
+ | |||
+ | function processVersesGroups(verses) { | ||
+ | let versesGroups = verses.split(',') | ||
+ | let result = []; | ||
+ | versesGroups.forEach(verseGroup => { | ||
+ | if (isRangeVerseGroup(verseGroup)) { | ||
+ | Array.prototype.push.apply(result, processVerseGroup(verseGroup)); | ||
+ | } else { | ||
+ | result.push(processVerseGroup(verseGroup)) | ||
+ | } | ||
+ | }) | ||
+ | return result; | ||
+ | } | ||
+ | |||
+ | function processVerseGroup(group) { | ||
+ | if(isSimpleVerseGroup(group)) { | ||
+ | return Number(group) | ||
+ | } | ||
+ | if(isMultipleVerseGroup(group)) { | ||
+ | console.log("Range verse group: " + group); | ||
+ | } | ||
+ | if(isRangeVerseGroup(group)) { | ||
+ | let parsed = group.split('-') | ||
+ | let result = []; | ||
+ | for (let i = Number(parsed[0]); i <= Number(parsed[1]); i++) { | ||
+ | result.push(Number(i)) | ||
+ | } | ||
+ | return result | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | function createObjectForStringGroup(group) { | ||
+ | let chapter = Number(group.split(":")[0]) | ||
+ | let verses = group.split(":")[1] | ||
+ | let parsedVerses = parseVerses(verses); | ||
+ | console.log('') | ||
+ | } | ||
+ | } | ||
+ | |||
+ | async function fetchNWTVerses(verses) { | ||
+ | // let roBaseURL = 'https://www.jw.org/ro/biblioteca/biblia/nwt/carti/' | ||
+ | if (configuredFor === 'ro') { | ||
+ | URL = roNWTURL | ||
+ | } | ||
+ | if (configuredFor === 'hu') { | ||
+ | URL = huNWTURL | ||
+ | } | ||
+ | if (configuredFor === 'en') { | ||
+ | URL = enNWTURL | ||
+ | } | ||
+ | let book = verses.book | ||
+ | |||
+ | return new Promise((resolve, reject) => { | ||
+ | let result = []; | ||
+ | |||
+ | for (let i = 0; i < verses.groups.length; i++) { | ||
+ | let url = URL + book + "/" + verses.groups[i].chapter | ||
+ | |||
+ | fetch(url) | ||
+ | .then(response => response.text()) | ||
+ | .then(data => { | ||
+ | var parser = new DOMParser(); | ||
+ | var htmlDoc = parser.parseFromString(data, 'text/html'); | ||
+ | return htmlDoc | ||
+ | }) | ||
+ | .then(parser => { | ||
+ | let mainBlock = parser.getElementById('bibleText') | ||
+ | if((verses.groups.length -1) == i) { | ||
+ | result.push({book: clearDashSimbolFromInputString(book), chapter: verses.groups[i].chapter, verseElements:getSpecificVerses(getVersesFromMainBlock(mainBlock), verses.groups[i].verses)}) | ||
+ | resolve(result) | ||
+ | } else { | ||
+ | result.push({book: clearDashSimbolFromInputString(book), chapter: verses.groups[i].chapter, verseElements:getSpecificVerses(getVersesFromMainBlock(mainBlock), verses.groups[i].verses)}) | ||
+ | } | ||
+ | }) | ||
+ | .catch(error => { | ||
+ | console.log(error) | ||
+ | reject(); | ||
+ | |||
+ | }) | ||
+ | } | ||
+ | }) | ||
+ | } | ||
+ | |||
+ | function clearDashSimbolFromInputString(string) { | ||
+ | return string.replaceAll('-', ' ') | ||
+ | } | ||
+ | |||
+ | function stripSymbols(symbolsToBeRemoved, verseElement) { | ||
+ | symbolsToBeRemoved.forEach(symbol => { | ||
+ | verseElement = verseElement.replaceAll(symbol, '') | ||
+ | }) | ||
+ | return verseElement | ||
+ | } | ||
+ | |||
+ | function isSimpleVerseGroup(group) { | ||
+ | if (Number(group)) { | ||
+ | return true | ||
+ | } | ||
+ | return false | ||
+ | } | ||
+ | function isMultipleVerseGroup(group) { | ||
+ | if (group.includes(',')) { | ||
+ | return true | ||
+ | } | ||
+ | return false | ||
+ | } | ||
+ | function isRangeVerseGroup(group) { | ||
+ | if (group.includes('-')) { | ||
+ | return true | ||
+ | } | ||
+ | return false | ||
+ | } | ||
}()); | }()); |
Revision as of 13:51, 11 February 2021
$(function () {
// configuration
let colorForSpecialElements = '#933221'
// can be one of: <ro> <hu> <en>
let configuredFor = 'ro'
let roNWTURL = 'http://localhost:3001/ro/'
let huNWTURL = 'http://localhost:3001/hu/'
let enNWTURL = 'http://localhost:3001/en/'
// DOM side effects
var verses = Array.prototype.slice.call( document.getElementsByClassName("bible-verse"), 0 );
verses.forEach(verse => {
verse.addEventListener("mouseover", () => {
verse.style.cursor = "pointer"
});
});
verses.forEach((verse) => {
verse.addEventListener("click", async () => {
toggleState(verse)
if (areVersesAlreadyFetched(verse)) {
return
} else {
verse.setAttribute('loaded', true);
let newLis = await createDinamicLis(verse)
clearAllChildrenAndAddElementsToParrent(
verse.children[2].children[1], newLis
)
}
})
})
function clearAllChildrenAndAddElementsToParrent(parrent, children) {
parrent.innerHTML = ''
children.forEach(child => parrent.appendChild(child))
}
function areVersesAlreadyFetched(verse) {
return verse.getAttribute('loaded') == 'true'
}
async function createDinamicLis(verse) {
let parsedVerse = verse.children[0].innerText
//let parsedVerse = verse.getAttribute("verse")
let ulElement = verse.children[2].children[1]
fetchedVerses = await fetchNWTVerses(parseVerseAttribute(parsedVerse));
return createLiElements(fetchedVerses, ulElement);
}
function createLiElements(fetchedVerses, ul) {
let result = [];
fetchedVerses.forEach(versesGroup=> {
let li = document.createElement('li')
li.style.color = colorForSpecialElements
li.style.fontSize = '1.5em'
li.style.textTransform = 'capitalize'
li.style.paddingBottom = '0.3em'
li.innerHTML = versesGroup.book + ' ' + versesGroup.chapter
result.push(li)
versesGroup.verseElements.forEach(verse => {
let li = document.createElement('li')
let hr = document.createElement('hr')
hr.style.borderStyle = 'ridge'
let liContent = ""
verse.forEach(el => {
liContent = liContent + el + '<br>'
})
li.innerHTML = liContent
result.push(li)
result.push(hr)
})
});
return result
}
function toggleState(verse) {
let verseDisplay = verse.getElementsByClassName("translations-container")[0].style.display;
hideAllVerses(verses);
verse.getElementsByClassName("translations-container")[0].style.display = renderState(verseDisplay, "block");
}
function hideAllVerses(elements) {
elements.forEach((element) => {
element.getElementsByClassName("translations-container")[0].style.display = "none";
})
}
function renderState(currentState, toggledState) {
if (currentState === "none") {
return toggledState
}
return "none"
}
function getVersesFromMainBlock(mainBlock) {
let result = []
changeNumberOfTheFirstVerseWithNumberOne(mainBlock)
Array.from(mainBlock.children).forEach(verse => {
let verseContent = []
if (verse.classList.contains('verse')) {
Array.from(verse.children).forEach(child => {
if (child.innerText != '' ) {
verseContent.push(stripSymbols(['+','*'], child.innerText))
}
})
changeColorOfVerseNumber(verseContent)
result.push(verseContent)
}
})
return result
}
function changeColorOfVerseNumber(verseContent) {
let re = new RegExp(/^\d+|\d+\b|\d+(?=\w)/g); //starts with digit, one or more
let m = re.exec(verseContent[0])
if (m != null) {
verseContent[0] = verseContent[0].replace(m[0], '<strong style="color: ' + colorForSpecialElements + '"' + '>' + m[0] + '</strong>')
}
}
function changeNumberOfTheFirstVerseWithNumberOne(mainBlock) {
let re = new RegExp(/^\d+|\d+\b|\d+(?=\w)/g); //starts with digit, one or more
let m = re.exec(mainBlock.getElementsByClassName('verse')[0].children[0].innerText)
mainBlock.getElementsByClassName('verse')[0].children[0].innerText = ' ' + mainBlock.getElementsByClassName('verse')[0].children[0].innerText.replace(m[0], 1)
}
function getSpecificVerses(versesList, arrayOfSpecificVerses) {
let result = []
arrayOfSpecificVerses.forEach(verseNumber => {
result.push(versesList[verseNumber - 1])
})
return result
}
// Bussiness logic
function parseVerseAttribute(verseString) {
// 21:1;22:2
let arrayOfGroupsDelimiter = ';'
// 21:1-7,9
let versesGroupsDelimiter = ','
let book = verseString.replace(/ .*/,'')
let stringWithoutBook = verseString.replace(book, '')
let result = { book: book, groups: processChaptersAndVerses(stringWithoutBook)}
return result
function processChaptersAndVerses(stringWithoutBook) {
let groups = stringWithoutBook.split(arrayOfGroupsDelimiter);
let result = []
groups.forEach(group => {
result.push(processGroup(group))
})
return result
}
if (verseString.includes(";")) {
let book = verseString.replace(/ .*/,'')
let stringWithoutBook = verseString.replace(book, '')
let groups = stringWithoutBook.split(';');
let parsedGroups = [];
groups.forEach(group => {
parsedGroups.push(createObjectForStringGroup(group));
})
}
function processGroup(group) {
let chapter = group.split(':')[0]
let verses = group.split(':')[1]
return {chapter: parseInt(chapter), verses: processVersesGroups(verses)};
}
function processVersesGroups(verses) {
let versesGroups = verses.split(',')
let result = [];
versesGroups.forEach(verseGroup => {
if (isRangeVerseGroup(verseGroup)) {
Array.prototype.push.apply(result, processVerseGroup(verseGroup));
} else {
result.push(processVerseGroup(verseGroup))
}
})
return result;
}
function processVerseGroup(group) {
if(isSimpleVerseGroup(group)) {
return Number(group)
}
if(isMultipleVerseGroup(group)) {
console.log("Range verse group: " + group);
}
if(isRangeVerseGroup(group)) {
let parsed = group.split('-')
let result = [];
for (let i = Number(parsed[0]); i <= Number(parsed[1]); i++) {
result.push(Number(i))
}
return result
}
}
function createObjectForStringGroup(group) {
let chapter = Number(group.split(":")[0])
let verses = group.split(":")[1]
let parsedVerses = parseVerses(verses);
console.log('')
}
}
async function fetchNWTVerses(verses) {
// let roBaseURL = 'https://www.jw.org/ro/biblioteca/biblia/nwt/carti/'
if (configuredFor === 'ro') {
URL = roNWTURL
}
if (configuredFor === 'hu') {
URL = huNWTURL
}
if (configuredFor === 'en') {
URL = enNWTURL
}
let book = verses.book
return new Promise((resolve, reject) => {
let result = [];
for (let i = 0; i < verses.groups.length; i++) {
let url = URL + book + "/" + verses.groups[i].chapter
fetch(url)
.then(response => response.text())
.then(data => {
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(data, 'text/html');
return htmlDoc
})
.then(parser => {
let mainBlock = parser.getElementById('bibleText')
if((verses.groups.length -1) == i) {
result.push({book: clearDashSimbolFromInputString(book), chapter: verses.groups[i].chapter, verseElements:getSpecificVerses(getVersesFromMainBlock(mainBlock), verses.groups[i].verses)})
resolve(result)
} else {
result.push({book: clearDashSimbolFromInputString(book), chapter: verses.groups[i].chapter, verseElements:getSpecificVerses(getVersesFromMainBlock(mainBlock), verses.groups[i].verses)})
}
})
.catch(error => {
console.log(error)
reject();
})
}
})
}
function clearDashSimbolFromInputString(string) {
return string.replaceAll('-', ' ')
}
function stripSymbols(symbolsToBeRemoved, verseElement) {
symbolsToBeRemoved.forEach(symbol => {
verseElement = verseElement.replaceAll(symbol, '')
})
return verseElement
}
function isSimpleVerseGroup(group) {
if (Number(group)) {
return true
}
return false
}
function isMultipleVerseGroup(group) {
if (group.includes(',')) {
return true
}
return false
}
function isRangeVerseGroup(group) {
if (group.includes('-')) {
return true
}
return false
}
}());