beenull/News-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated Search functionality

Browse source
This commit is contained in:
Nik Topler 2020-09-20 00:44:09 +02:00
parent 2dd3a0f0b7
commit 7ed059318f
12 changed files with 400 additions and 288 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -5,4 +5,4 @@ package-lock.json
vendor
composer.json
composer.lock
composer.phar
composer.phar

1
CSS/*.css
View file

@ -14,7 +14,6 @@ body{
font-family: 'Noto Sans', sans-serif;
}
.select-div{
position: relative;
padding: 10px;

61
CSS/index.css
View file

@ -1,7 +1,7 @@
body{
display: grid;
grid-template-rows: 65px 1fr;
overflow: hidden;
overflow: auto;
}
/*? Navigation Bar */
@ -413,7 +413,7 @@ body{
width: 17.5rem;
overflow: hidden;
}
.side-bar-content{
.side-bar-content {
font-size: 0.875rem;
height: 100%;
width: 17.5rem;
@ -537,11 +537,12 @@ body{
}
/** Main Section */
.main-content-section {
width: 1180px;
min-width: 500px;
max-width: 1176px;
width: 1080px;
min-width: 250px;
height: 100%;
padding: 20px;
margin-top: 65px;
margin: auto;
}
.main-content-container {
height: 100%;
@ -1330,15 +1331,22 @@ body{
}
/** Responsiveness */
/* @media screen and (max-width: 930px) {
.navigation-bar{
grid-template-columns: 120px 1fr 85px;
/* @media screen and (max-width: 1150px) {
.article-container {
grid-column: 1/8;
}
.main-search-input,.extra-option-icon{
display: none;
#main-side-content-container {
grid-column: 8/13;
}
.search-icon-figure{
grid-column: 3/4;
} */
@media screen and (max-width: 1681px) {
.main-content-section {
margin-left: 280px;
}
}
@media screen and (max-width: 1100px) {
.main-content-section {
margin-left: 0px;
}
.side-bar-content {
background-color: var(--bg);
@ -1346,6 +1354,29 @@ body{
overflow: auto;
z-index: 2;
}
} */
.side-bar-content {
left: -280px;
}
}
@media screen and (max-width: 964px) {
.navigation-bar { grid-template-columns: 120px 1fr 85px; }
.main-search-input,
.extra-option-icon {
display: none;
}
.search-icon-figure{
grid-column: 3/4;
}
}
/* Ipad */
@media screen and (max-width: 768px) {
#main-side-content-container {
display: none;
}
.article-container {
grid-column: 1/13;
}
.main-content-section {
width: 100%;
}
}

2
JS/diacritics.js
View file

@ -302,4 +302,4 @@ for (let i = 0; i < replacementList.length; i++) {
for (let j = 0; j < chars.length; j++)
diacriticsMap[chars[j]] = replacementList[i].base
}
function removeDiacritics(str) { return str.replace(/[^\u0000-\u007e]/g, function(c) { return diacriticsMap[c] || c }) }
function removeDiacritics(str) { return str.replace(/[^\u0000-\u007e]/g, (c) => { return diacriticsMap[c] || c }) }

297
JS/main.js
View file

@ -71,12 +71,13 @@ const searchBox = {
update : async (query) => {
let i = 0
let images = await searchBox.fetch(query)
let searchAside = document.querySelector('article.search.aside')
if(images.hits.length === 0) {
images = await searchBox.fetch('nature')
i = Math.round(Math.random() * images.hits.length)
}
let searchAside = document.querySelector('article.search.aside')
searchAside.firstElementChild.lastElementChild.innerHTML = 'Search'
} else searchAside.firstElementChild.lastElementChild.innerHTML = 'Topic'
searchAside.firstElementChild.firstElementChild.innerHTML = capitalizeString(mainSearchInput.value)
searchAside.firstElementChild.querySelector('figure img').src = images.hits[i].webformatURL
searchAside.firstElementChild.querySelector('figure img').classList.remove('disable')
@ -93,6 +94,7 @@ let mouseSuggestHover = false
let moreSuggestWordsArray = []
const suggest = {
fetch : async (input) => {
// const res = await fetch(`https://api.datamuse.com/words?ml=${input}`)
const res = await fetch(`https://api.datamuse.com/sug?s=${input}`)
return words = await res.json()
},
@ -102,11 +104,12 @@ const suggest = {
let input = mainSearchInput.value.split(' ')
let n = 0
while(suggestWordsArray.length < 16) {
while(suggestWordsArray.length < 21) {
fetchArray = await suggest.fetch(input[n])
for(let i = 0; i < fetchArray.length; i++)
if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value) suggestWordsArray.push(fetchArray[i].word)
input[n] = removeCharactersInString(input[n], 0, -1)
if(input.length === 0) break
}
@ -161,7 +164,7 @@ const suggest = {
selectSuggestedSearchOption : (element) => {
removeActiveSidebarCategory()
hideSuggestWords()
let elementInnerHTML = addCharacterBetweenSpaceInString(element.innerHTML, ' ', '+')
let elementInnerHTML = removeDiacritics(element.innerHTML).trim()
let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
historyPushState(location.origin + location.pathname, `?q=${elementInnerHTML}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`)
mainSearch()
@ -169,32 +172,31 @@ const suggest = {
}
const responsiveVersion = {
mobileVersionNavigationBar() {
mainSearchIcon.classList.add('disable')
mainSearchBackLeftIcon.classList.remove('disable')
navigationBarLeft.classList.add('disable')
navigationBarRight.classList.add('disable')
navigationBarMiddle.style.gridColumn = '1/4'
mainSearchFigure.style.gridColumn = '1/2'
mainSearchBackLeftTooltiptext.classList.remove('disable')
mainSearchInput.style.display = 'grid'
extOptIcon.style.display = 'flex'
mainSearchInput.focus()
sideBarContent.style.left = '-100%'
sideMenuCounter = 1
},
desktopVersionNavigationBar() {
mainSearchIcon.classList.remove('disable')
mainSearchBackLeftIcon.classList.add('disable')
navigationBarLeft.classList.remove('disable')
navigationBarRight.classList.remove('disable')
navigationBarMiddle.style.gridColumn = '2/3'
mainSearchFigure.style.gridColumn = '3/4'
mainSearchBackLeftTooltiptext.classList.add('disable')
mainSearchInput.style.display = 'none'
extOptIcon.style.display = 'none'
}
// mobileVersionNavigationBar() {
// mainSearchIcon.classList.add('disable')
// mainSearchBackLeftIcon.classList.remove('disable')
// navigationBarLeft.classList.add('disable')
// navigationBarRight.classList.add('disable')
// navigationBarMiddle.style.gridColumn = '1/4'
// mainSearchFigure.style.gridColumn = '1/2'
// mainSearchBackLeftTooltiptext.classList.remove('disable')
// mainSearchInput.style.display = 'grid'
// extOptIcon.style.display = 'flex'
// mainSearchInput.focus()
// sideBarContent.style.left = '-100%'
// sideMenuCounter = 1
// },
// desktopVersionNavigationBar() {
// mainSearchIcon.classList.remove('disable')
// mainSearchBackLeftIcon.classList.add('disable')
// navigationBarLeft.classList.remove('disable')
// navigationBarRight.classList.remove('disable')
// navigationBarMiddle.style.gridColumn = '2/3'
// mainSearchFigure.style.gridColumn = '3/4'
// mainSearchBackLeftTooltiptext.classList.add('disable')
// mainSearchInput.style.display = 'none'
// extOptIcon.style.display = 'none'
// }
}
const regularExpressions = {
@ -225,7 +227,43 @@ const php = {
}
}
const error = {
headlines : () => {
},
search : () => {
if(!window.location.search.match(regularExpressions.url.country)
|| !window.location.search.match(regularExpressions.url.backgroundColor)
|| !window.location.search.match(regularExpressions.url.search)) openLinks(filePath.headlines)
}
}
// const error = {
// headlines : () => {
// },
// search : () => {
// // let countryAcronym = window.location.search.match(regularExpressions.url.country)[0].slice(5, 7)
// if(!window.location.search.match(regularExpressions.url.country)
// || !getAcronymCountry(countryAcronym)
// || !window.location.search.match(regularExpressions.url.query)
// || !window.location.search.match(regularExpressions.url.backgroundColor))
// openLinks(filePath.headlines)
// else {
// let urlCountryAcronym = countryAcronym
// let urlCountry = getAcronymCountry(urlCountryAcronym)
// updateCountrySelect(urlCountry)
// }
// }
// }
window.onload = async () => {
// Close all open windows
hideExtraSearchOptions()
hideSuggestWords()
document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' })
await user.location()
removeActiveSidebarCategory()
if (window.location.pathname.includes('headlines')) headlines()
@ -245,27 +283,14 @@ window.onload = async () => {
else if (window.location.pathname.includes('search')) mainSearch()
// changeBackgroundColor()
let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
// if(!window.location.search.match(regularExpressions.url.country))
//historyPushState(window.location.origin + window.location.pathname, '', `?cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`)
// else {
// urlCountryAcronym = window.location.search.match(regularExpressions.url.country)[0].slice(5, 7)
// if(getAcronymCountry(urlCountryAcronym) === undefined) return openLinks(filePath.headlines)
// urlCountry = getAcronymCountry(urlCountryAcronym)
// updateCountrySelect(urlCountry)
// }
// let query = location.search.match(regularExpressions.url.query)[0]
// query = removeCharactersInString(query, 3, query.length - 1)
if(!window.location.search.match(regularExpressions.url.query)) return
let query = location.search.match(regularExpressions.url.query)[0]
query = removeCharactersInString(query, 3, query.length - 1)
/* Search news */
}
window.onclick = (e) => {
window.onclick = (e) => {
if(logInOptions.classList.contains('active')) clickInOutCheck(logInOptions, e.target)
else if(!suggestMainInput.classList.contains('disable')) clickInOutCheck(suggestMainInput, e.target)
else if(!extOptProfile.classList.contains('disable')) clickInOutCheck(extOptProfile, e.target)
@ -279,18 +304,6 @@ function historyPushState(webiste, string, country, background) { history.pushSt
function changeBackgroundColor() { document.body.className = window.location.search.match(regularExpressions.url.backgroundColor)[0].slice(4,10) }
// console.log(changeDiacritics())
// function changeDiacritics() {
// let string = 'leščać'
// string = string.split('')
// console.log(string)
// // const regexDiacritics = /č|ć|đ|š|ž/g
// for(let i = 0; i < string.length; i++)
// if(diacriticLetters.test(string[i]))
// string[i] = diacriticsReplacement[string[i]]
// return string
// }
function getLanguageAcronym(target) {
for(let i = 0; i < language.length; i++)
if(language[i] === target)
@ -312,7 +325,6 @@ function getAcronymLanguage(acronym) {
return language[i]
}
function changeTemperatureUnit(element) {
const unit = element.innerHTML
const temperatureElements = document.querySelectorAll('.temperature')
@ -366,76 +378,81 @@ function fahrenheitToCelsius(number) { return (number - 32) * 5/9 }
function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 }
/* HEADLINES */
async function headlines() {
// await weather.getWeather()
// weather.updateWeather()
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement)
historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`)
}
/* SEARCH */
function mainSearch(extra) {
if(!window.location.pathname.includes('search')) return newSearch(extra)
if(window.location.search.match(regularExpressions.url.query) === null) return openLinks(filePath.headlines)
function mainSearch(extra, type) {
let url = ''
let newSearch = false
addDisableSideElements()
// console.log(extra === undefined)
if(extra === undefined) {
// error.search()
if(!type) type = 'main-url'
if(!window.location.pathname.includes('search')) newSearch = true
if(window.location.search.match(regularExpressions.url.query) === null && newSearch === false) return openLinks(filePath.headlines)
if(!extra && newSearch === true) {
url = removeDiacritics(mainSearchInput.value).trim()
return openLinks(filePath.search + `?q=${url}&cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`)
} else if(extra && newSearch === true) {
url = createUrlExtraOptions()
return openLinks(filePath.search + url[1] + url[2] + url[3])
} else if(!extra && newSearch === false) {
addDisableSideElements()
url = createUrlExtraOptions(type)
historyPushState(url[0], url[1], url[2], url[3])
let searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1)
mainSearchInput.value = addCharacterBetweenSpaceInString(searchInputValue, '+', ' ')
searchBox.update(mainSearchInput.value.trim())
} else {
let extraOptionsUrl = createUrlExtraOptions()
let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
historyPushState(websiteURL, extraOptionsUrl, selectedCountryAcronym, backgroundColor)
mainSearchInput.value = urlEdit(searchInputValue)
} else if(extra && newSearch === false) {
addDisableSideElements()
url = createUrlExtraOptions()
historyPushState(url[0], url[1], url[2], url[3])
}
let searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1)
mainSearchInput.value = urlEdit(searchInputValue)
searchBox.update(mainSearchInput.value.trim())
hideExtraSearchOptions()
hideSuggestWords()
suggest.suggest()
/* Search news articles */
// console.log(url[4])
}
function newSearch(extra) {
if(extra !== undefined) {
}
// if(mainSearchInput.value.length === 0) return
// if(!mainSearchIcon.classList.contains('disable') && window.innerWidth < 930) mobileVersionNavigationBar()
// else if(mainSearchIcon.classList.contains('disable') && window.innerWidth > 930) desktopVersionNavigationBar()
// let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
// if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value,' ','+')
// else {
// let urlPath = createUrlPath('search', searchQuery)
// return console.log(urlPath)
// }
}
function createUrlExtraOptions() {
function createUrlExtraOptions(option) {
let url
let exactPhraseV = exactPhrase.value.trim()
let hasWordsV = hasWords.value.trim()
let excludeWordsV = excludeWords.value.trim()
let exactPhraseV = removeDiacritics(exactPhrase.value).trim().replace(/\s\s+/g, ' ')
let hasWordsV = removeDiacritics(hasWords.value).trim().replace(/\s\s+/g, ' ')
let excludeWordsV = removeDiacritics(excludeWords.value).trim().replace(/\s\s+/g, ' ')
let time = `&t=${indexTimeLabel.innerHTML.trim().replace(' ','').toLowerCase()}`
if(exactPhraseV.length !== 0 && hasWordsV.length === 0 && excludeWordsV.length === 0) url = `"${exactPhraseV.trim()}"`
else if(hasWordsV.length !== 0 && exactPhraseV.length === 0 && excludeWordsV.length === 0) url = addCharacterBetweenSpaceInString(hasWordsV, ' ', '+')
else if(excludeWordsV.length !== 0 && exactPhraseV.length === 0 && hasWordsV.length === 0) url = addCharacterBetweenSpaceInString(excludeWordsV, ' ', '-')
// else if (exactPhraseV.length !== 0 && hasWordsV.length !== 0 && excludeWordsV.length === 0) return `"${exactPhraseV}"+${devideStringIntoWords(hasWordsV,'HW')}`
// else if(hasWordsV.length !== 0 && excludeWordsV.length !== 0 && exactPhraseV.length === 0) return `${devideStringIntoWords(hasWordsV,'HW')} ${devideStringIntoWords(excludeWordsV,'EW')}`
// else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length === 0) return `"${exactPhraseV}" ${devideStringIntoWords(excludeWordsV,'EW')}`
// else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length !== 0) return `"${exactPhraseV}" ${devideStringIntoWords(hasWordsV,'HW')} ${devideStringIntoWords(excludeWordsV,'EW')}`
return url
// historyPushState(location.origin + location.pathname, `?q=${addCharacterBetweenSpaceInString(mainSearchInput.value, ' ', '+')}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
resetExtraSearchOptions()
if(option === 'main-url') {
url = removeDiacritics(window.location.search.match(regularExpressions.url.query)[0].slice(3, -1))
time = ''
} else if(option === 'main-input') {
url = removeDiacritics(mainSearchInput.value).trim()
time = ''
} else if(exactPhraseV.length !== 0 && hasWordsV.length === 0 && excludeWordsV.length === 0) url = `"${exactPhraseV}"`
else if(hasWordsV.length !== 0 && exactPhraseV.length === 0 && excludeWordsV.length === 0) url = hasWordsV
else if(excludeWordsV.length !== 0 && exactPhraseV.length === 0 && hasWordsV.length === 0) url = `-${excludeWordsV}`
else if (exactPhraseV.length !== 0 && hasWordsV.length !== 0 && excludeWordsV.length === 0) url = `"${exactPhraseV}" ${hasWordsV}`
else if(hasWordsV.length !== 0 && excludeWordsV.length !== 0 && exactPhraseV.length === 0) url = `${hasWordsV} ${devideStringIntoWords(excludeWordsV, 'EW')}`
else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length === 0) url = `"${exactPhraseV}" ${devideStringIntoWords(excludeWordsV, 'EW')}`
else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length !== 0) url = `"${exactPhraseV}" ${hasWordsV} ${devideStringIntoWords(excludeWordsV, 'EW')}`
return [`${location.origin}/News-website/search.php`,`?q=${url + time}`,`&cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`, url]
}
function devideStringIntoWords(string, keyword){
if(keyword === 'HW') return `+${string.replace(/\s/g, ' +')}`
if(keyword === 'EW') return `-${string.replace(/\s/g, ' -')}`
if(keyword === 'EW') return `-${string.replace(/\s/g, ' -')}`
}
/* FOR YOU */
@ -473,7 +490,7 @@ function about() {
}
mainSearchInput.onfocus = () => {
if(!extraSearchOptions.classList.contains('disable')) return manageExtraSearchOptions()
if(!extraSearchOptions.classList.contains('disable')) return hideExtraSearchOptions()
else if(mainSearchInput.value.length !== 0) showSuggestWords()
suggest.manageSuggestWords()
}
@ -487,19 +504,13 @@ let place = 0
mainSearchInput.onkeyup = (e) => {
let suggestDivs = suggestMainInput.querySelectorAll('div')
let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key')
if(e.keyCode === 13) {
if(suggestDivActiveKey.length === 1)//historyPushState
console.log(location.origin + location.pathname, `?q=${addCharacterBetweenSpaceInString(suggestDivActiveKey[0].firstElementChild.innerHTML, ' ', '+')}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
else //historyPushState
console.log(location.origin + location.pathname, `?q=${addCharacterBetweenSpaceInString(mainSearchInput.value, ' ', '+')}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
if(e.keyCode === 13) {
if(suggestDivActiveKey.length === 1) historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(suggestDivActiveKey[0].firstElementChild.innerHTML).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
else historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(mainSearchInput.value).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
mainSearch()
// if(!suggestMainInput.classList.contains('disable')) hideSuggestWords()
// return mainSearch()
}
if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
if(suggestMainInput.querySelectorAll('div.active').length === 0 && (e.keyCode === 40 || e.keyCode === 38)) {
mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML
return suggestDivs[place].classList.add('active')
@ -654,7 +665,7 @@ searchCountriesInput.oninput = () => {
}
function elementAdjustmentsSearchCountries(order) {
if(order == 'change') {
if(order === 'change') {
document.querySelectorAll('#select-country > h6')[0].classList.add('disable')
document.querySelectorAll('#select-country > h6')[1].classList.add('disable')
listOfCountries.style.gridRow = '3/8'
@ -669,8 +680,9 @@ let children = []
let hasChildren = []
let noChildren = []
let clickOnOpenedElement
const countryDivExceptions = [showCountriesLink, sclSpan, sclStrong]
function clickInOutCheck(parent, target) {
clickOnOpenedElement = false
doesElementHaveChildren(parent)
@ -678,23 +690,15 @@ function clickInOutCheck(parent, target) {
doesElementHaveChildren(children[0])
children.shift()
}
if(parent === selectCountryDiv || parent === logInOptions){
if(target === overlay) clickOnOpenedElement = false
else clickOnOpenedElement = true
} else {
if(target.lastElementChild == document.querySelectorAll('script').lastElementChild) clickOnOpenedElement = true
else clickOnOpenedElement = false
}
checkIfClickIsOnElement(hasChildren, target)
checkIfClickIsOnElement(noChildren, target)
if(clickOnOpenedElement == false && parent == extraSearchOptions) manageExtraSearchOptions()
else if(clickOnOpenedElement == false && parent == suggestMainInput) hideSuggestWords()
else if(clickOnOpenedElement == false && parent == extOptProfile) manageExtraProfileOptions()
else if(clickOnOpenedElement == false && parent == selectCountryDiv) hideSelectCountry()
else if(clickOnOpenedElement == false && parent == logInOptions) manageLoginOptions()
if(checkIfClickIsOnElement(hasChildren, target) === true || checkIfClickIsOnElement(noChildren, target) === true) clickOnOpenedElement = true
else clickOnOpenedElement = false
if(clickOnOpenedElement === false && parent === extraSearchOptions && target !== extOptIcon) hideExtraSearchOptions()
else if(clickOnOpenedElement === false && parent === suggestMainInput) hideSuggestWords()
else if(clickOnOpenedElement === false && parent === extOptProfile) manageExtraProfileOptions()
else if(clickOnOpenedElement === false && parent === selectCountryDiv && countryDivExceptions.some((val) => val === target) === false) hideSelectCountry()
else if(clickOnOpenedElement === false && parent === logInOptions && target !== loginButton) manageLoginOptions()
children = []
hasChildren = []
@ -708,7 +712,7 @@ function doesElementHaveChildren(parent) {
}
else noChildren.push(parent)
}
function checkIfClickIsOnElement(array, target) { return array.filter(val => { return val === target}) }
function checkIfClickIsOnElement(array, target) { return array.some(val => { return val === target}) }
exactPhrase.oninput = () => { inputExtraSearchOptionChange() }
@ -770,17 +774,8 @@ async function fetchNewsArticles() {
// })
const json = await response.json()
const articles = await json.articles
console.log(articles, `http://cors-anywhere.herokuapp.com/http://newsapi.org/v2/everything?q=-velenje america "coronavirus"&sortBy=popularity&apiKey=${key}`)
}
const information = {
firstName : 'Nik',
lastName : 'Topler'
}
let { firstName } = information
// console.log(firstName)
function createFormData(word) {
let formData = new FormData
formData.append(word, '')
@ -790,9 +785,5 @@ function capitalizeString(string) { return string.charAt(0).toUpperCase() + stri
function removeCharactersInString(string, frontNumber, backNumber) { return string.slice(frontNumber, backNumber)}
function removeDuplicates(array) { array.splice(0, array.length, ...(new Set(array))) }
function removeSelectedValuesFromArray(array, target) { return target.filter(val => !array.includes(val)) }
function addCharacterBetweenSpaceInString(word, replace, character) {
word = word.trim().replace(/\s\s+/g, ' ')
if(replace === ' ') return word.replace(/\s/g, character)
else if(replace === '+') return word.replace(/\+/g, character)
}
function urlEdit(string) { return decodeURIComponent(string).trim().replace(/\s\s+/g, ' ') }
// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"')

26
JS/show.js
View file

@ -25,17 +25,21 @@ function checkWindowWidth900() {
function manageExtraSearchOptions() {
if(extraSearchOptions.classList.contains('disable')) {
hideSuggestWords()
extraSearchOptions.classList.remove('disable')
mainSearchInput.style.borderBottomLeftRadius = '0'
mainSearchInput.style.borderBottomRightRadius = '0'
extOptIcon.style.transform = 'rotate(180deg)'
if(!indexTimeSelect.classList.contains('disable')) indexTimeSelect.classList.add('disable')
} else {
extraSearchOptions.classList.add('disable')
mainSearchInput.style.borderBottomLeftRadius = '6px'
mainSearchInput.style.borderBottomRightRadius = '6px'
extOptIcon.style.transform = 'rotate(0deg)'
}
showExtraSearchOptions()
} else hideExtraSearchOptions()
}
function showExtraSearchOptions() {
extraSearchOptions.classList.remove('disable')
mainSearchInput.style.borderBottomLeftRadius = '0'
mainSearchInput.style.borderBottomRightRadius = '0'
extOptIcon.style.transform = 'rotate(180deg)'
if(!indexTimeSelect.classList.contains('disable')) indexTimeSelect.classList.add('disable')
}
function hideExtraSearchOptions() {
extraSearchOptions.classList.add('disable')
mainSearchInput.style.borderBottomLeftRadius = '6px'
mainSearchInput.style.borderBottomRightRadius = '6px'
extOptIcon.style.transform = 'rotate(0deg)'
}
function resetExtraSearchOptions() {
indexTimeLabel.innerHTML = 'Anytime'

180
JS/sign.js
View file

@ -1,113 +1,101 @@
// /** Google */
function onSignIn(googleUser) {
console.log('Logged in as: ' + JSON.stringify(googleUser.getBasicProfile()))
// // /** Google */
let profile = googleUser.getBasicProfile()
// console.log('ID: ' + profile.getId()) // Do not send to your backend! Use an ID token instead.
// console.log('Name: ' + profile.getName())
// console.log('Image URL: ' + profile.getImageUrl())
// console.log('Email: ' + profile.getEmail())
}
function onFailure(error) {
console.log(error)
}
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function(){
auth2 = gapi.auth2.init({
client_id: '571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
});
attachSignin(document.getElementById('googleBtn'));
});
};
function attachSignin(element) {
auth2.attachClickHandler(element, {},
(googleUser) =>{
console.log(googleUser.getBasicProfile())},
(error) => {
// alert(JSON.stringify(error, undefined, 2));
});
}
startApp()
function signOut() {
var auth2 = gapi.auth2.getAuthInstance()
auth2.signOut().then(function () {
console.log('User signed out.')
})
}
// let googleUser = {}
// function startApp() {
// gapi.load('auth2', () => {
// auth2 = gapi.auth2.init({
// client_id: '571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com',
// cookiepolicy: 'single_host_origin',
// })
// attachSignin(document.getElementById('googleBtn'))
// })
// }
// function attachSignin(element) {
// auth2.attachClickHandler(element, {},
// (googleUser) => {
// console.log(googleUser.getBasicProfile())},
// (error) => {
// alert(JSON.stringify(error, undefined, 2))
// })
// }
// startApp()
// function signOut() {
// let auth2 = gapi.auth2.getAuthInstance()
// auth2.signOut().then(function () {
// console.log('User signed out.')
// })
// }
/** GitHub */
// /** GitHub */
document.getElementById('github-button').addEventListener('click', () => {
// Initialize with your OAuth.io app public key
OAuth.initialize('_nPRfzTNGplyDCW0vD9dmek5QAg');
// Use popup for oauth
// Alternative is redirect
OAuth.popup('github').then(github => {
console.log('github:', github);
// Retrieves user data from oauth provider
// Prompts 'welcome' message with User's email on successful login
// #me() is a convenient method to retrieve user data without requiring you
// to know which OAuth provider url to call
github.me().then(data => {
console.log('me data:', data);
// alert('GitHub says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
});
// Retrieves user data from OAuth provider by using #get() and
// OAuth provider url
github.get('/user').then(data => {
console.log('self data:', data);
})
});
})
// document.getElementById('github-button').addEventListener('click', () => {
// // Initialize with your OAuth.io app public key
// OAuth.initialize('_nPRfzTNGplyDCW0vD9dmek5QAg');
// // Use popup for oauth
// // Alternative is redirect
// OAuth.popup('github').then(github => {
// console.log('github:', github);
// // Retrieves user data from oauth provider
// // Prompts 'welcome' message with User's email on successful login
// // #me() is a convenient method to retrieve user data without requiring you
// // to know which OAuth provider url to call
// github.me().then(data => {
// console.log('me data:', data);
// // alert('GitHub says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
// });
// // Retrieves user data from OAuth provider by using #get() and
// // OAuth provider url
// github.get('/user').then(data => {
// console.log('self data:', data);
// })
// });
// })
// /** FaceBook */
// // /** FaceBook */
// // function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
// // console.log('statusChangeCallback');
// // console.log(response); // The current login status of the person.
// // if (response.status === 'connected') { // Logged into your webpage and Facebook.
// // testAPI();
// // } else { // Not logged into your webpage or we are unable to tell.
// // document.getElementById('status').innerHTML = 'Please log ' +
// // 'into this webpage.';
// // }
// // }
// // // function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
// // // console.log('statusChangeCallback');
// // // console.log(response); // The current login status of the person.
// // // if (response.status === 'connected') { // Logged into your webpage and Facebook.
// // // testAPI();
// // // } else { // Not logged into your webpage or we are unable to tell.
// // // document.getElementById('status').innerHTML = 'Please log ' +
// // // 'into this webpage.';
// // // }
// // // }
// // function checkLoginState() { // Called when a person is finished with the Login Button.
// // FB.getLoginStatus(function(response) { // See the onlogin handler
// // statusChangeCallback(response);
// // });
// // }
// // // function checkLoginState() { // Called when a person is finished with the Login Button.
// // // FB.getLoginStatus(function(response) { // See the onlogin handler
// // // statusChangeCallback(response);
// // // });
// // // }
// // window.fbAsyncInit = function() {
// // FB.init({
// // appId : '1318555625202480',
// // cookie : true, // Enable cookies to allow the server to access the session.
// // xfbml : true, // Parse social plugins on this webpage.
// // version : '' // Use this Graph API version for this call.
// // });
// // // window.fbAsyncInit = function() {
// // // FB.init({
// // // appId : '1318555625202480',
// // // cookie : true, // Enable cookies to allow the server to access the session.
// // // xfbml : true, // Parse social plugins on this webpage.
// // // version : '' // Use this Graph API version for this call.
// // // });
// // FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
// // statusChangeCallback(response); // Returns the login status.
// // });
// // };
// // // FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
// // // statusChangeCallback(response); // Returns the login status.
// // // });
// // // };
// // function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
// // console.log('Welcome! Fetching your information.... ');
// // FB.api('/me', function(response) {
// // console.log('Successful login for: ' + response.name);
// // document.getElementById('status').innerHTML =
// // 'Thanks for logging in, ' + response.name + '!';
// // });
// // }
// // // function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
// // // console.log('Welcome! Fetching your information.... ');
// // // FB.api('/me', function(response) {
// // // console.log('Successful login for: ' + response.name);
// // // document.getElementById('status').innerHTML =
// // // 'Thanks for logging in, ' + response.name + '!';
// // // });
// // // }

10
JS/variables.js
View file

@ -40,10 +40,11 @@
const submitButton = document.getElementById('extraOptionsSearchButton')
const date = document.getElementById('extra-option-select')
/** Navigation Bar Right */
const loginButton = document.getElementById('login-button')
/** Extra Search Options */
let indexTimeSelect = document.getElementById('index-time-select')
let indexTimeLabel = document.getElementById('index-time-label')
const indexTimeSelect = document.getElementById('index-time-select')
const indexTimeLabel = document.getElementById('index-time-label')
/* Navigation Bar Right */
const logInOptions = document.getElementById('login-option-div')
@ -62,6 +63,9 @@
const sideBarAboutContent = document.getElementById('about-sidebar-content')
const mainContentContainer = document.getElementById('main-content-container')
let mainContentHeader = document.getElementById('main-content-header')
const showCountriesLink = document.getElementById('show-countries-button')
const sclSpan = showCountriesLink.firstElementChild
const sclStrong = showCountriesLink.lastElementChild
const overlay = document.getElementById('overlay')

2
add-ons/head.php
View file

@ -13,8 +13,8 @@
<script src="../JS/variables.js" defer></script>
<script src="../JS/show.js" defer></script>
<script src="../JS/main.js" defer></script>
<script src="..JS/diacritics.js" defer></script>
<script src="../JS/main.js" defer></script>
<script src="../JS/sign.js" defer></script>
<script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>

2
add-ons/navigation-bar.php
View file

@ -15,7 +15,7 @@
placeholder="Search for latest news articles" autocomplete="off" value="">
<figure class="search-icon-figure flex align-center justify-center relative" id="search-icon-figure">
<a href="#" class="search-icon flex align-center justify-center border-radius-50"
id="main-search-icon-a" onclick="mainSearch()">
id="main-search-icon-a" onclick="mainSearch(undefined,'main-input')">
<i class="far fa-search" id="main-search-icon"></i>
<i class="far fa-arrow-left back-icon disable" id="main-search-icon-back-left"></i>
</a>

1
headlines.php
View file

@ -13,6 +13,7 @@
<script src="JS/variables.js" defer></script>
<script src="JS/show.js" defer></script>
<script src="JS/diacritics.js" defer></script>
<script src="JS/main.js" defer></script>
<script src="JS/sign.js" defer></script>

104
search.php
View file

@ -33,9 +33,105 @@
<section class="main-content-section single" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<article>
</article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>
<aside id="main-side-content-container">
<article class="search aside">
@ -102,8 +198,6 @@
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>