Nik Topler
GitHub
commit
d9c11b70d8
8 changed files with 263 additions and 253 deletions
202
CSS/index.css
202
CSS/index.css
|
|
@ -395,160 +395,110 @@ body{
|
|||
#profile-extra-options .grid .profile-img-link .img:hover{
|
||||
filter: brightness(0.96);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*? Main Content */
|
||||
|
||||
/* Main Content */
|
||||
|
||||
main {
|
||||
grid-row: 2/3;
|
||||
background-color: var(--bg);
|
||||
overflow-y: scroll;
|
||||
overflow-x: visible;
|
||||
}
|
||||
.side-bar{
|
||||
.side-bar {
|
||||
left: 0;
|
||||
top: 65px;
|
||||
height: 100%;
|
||||
height: calc(100% - 64px);
|
||||
width: 17.5rem;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
overflow: scroll;
|
||||
transition: ease-in-out all .3s;
|
||||
}
|
||||
.side-bar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.side-bar-content {
|
||||
font-size: 0.875rem;
|
||||
height: 100%;
|
||||
width: 17.5rem;
|
||||
padding: 15px 0;
|
||||
left: 0px;
|
||||
display: grid;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: all ease-in-out 0.3s;
|
||||
grid-template-rows: 3rem 3rem 3rem 3rem 0.9rem 3rem 0.9rem 3rem 3rem 3rem 3rem 3rem 3rem 0.9rem 3rem 3rem 3rem 3rem 1fr;
|
||||
}
|
||||
.side-bar-content a, .side-bar-content .language{
|
||||
padding-left: 30px;
|
||||
}
|
||||
.side-bar-content a{
|
||||
.side-bar-content .sidebar-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--font-dark);
|
||||
}
|
||||
.side-bar-content a.active{
|
||||
color: var(--blue-light);
|
||||
}
|
||||
.side-menu-categories{
|
||||
height: 46px;
|
||||
width: 16.2rem;
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.side-bar-content hr{
|
||||
border-top: 1px solid var(--hover-medium);
|
||||
}
|
||||
.side-bar-content a{
|
||||
cursor: pointer;
|
||||
}
|
||||
.language{
|
||||
margin: auto 0;
|
||||
}
|
||||
.language > *{
|
||||
display: block;
|
||||
color: #3c4043;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.language:hover > *{
|
||||
color: var(--blue-light);
|
||||
}
|
||||
.side-bar i{
|
||||
color: var(--font);
|
||||
padding-right: 0.5rem;
|
||||
width: 1.3rem;
|
||||
}
|
||||
.side-bar span{
|
||||
font-weight: 400;
|
||||
}
|
||||
.side-bar strong{
|
||||
font-weight: 600;
|
||||
}
|
||||
.side-bar a:hover i,.side-bar a:hover{
|
||||
color: var(--blue-light);
|
||||
}
|
||||
.side-bar footer{
|
||||
color: var(--font-medium);
|
||||
}
|
||||
.side-bar footer span{
|
||||
width: 1px;
|
||||
}
|
||||
#main .side-bar footer a{
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.side-bar footer a:hover{
|
||||
color: var(--font-dark);
|
||||
}
|
||||
.side-menu-active, a .side-menu-active {
|
||||
background-color: var(--side-bar-active) !important;
|
||||
color: var(--blue-light) !important;
|
||||
}
|
||||
.side-bar-content footer{
|
||||
grid-template-rows: calc(100% - 107px) 6%;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.side-bar-content footer div{
|
||||
grid-row: 2/3;
|
||||
padding-left: 2rem;
|
||||
.side-bar-content .sidebar-line {
|
||||
height: 22px;
|
||||
width: 16.2rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.side-bar-content footer div > *{
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
.side-bar-content .sidebar-line hr {
|
||||
border-bottom: 1px solid var(--hover-dark);
|
||||
width: 90%;
|
||||
}
|
||||
.side-bar footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
.side-bar-content div.icon {
|
||||
margin: 0 1rem 0 1.5rem;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.side-bar-content a {
|
||||
color: var(--font-dark);
|
||||
transition: ease-in-out .12s;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.side-bar-content footer div a:hover {
|
||||
text-decoration: underline;
|
||||
.side-bar-content div.other .text { margin: 0 0.7rem 0 1.5rem; }
|
||||
.sidebar-category.country {
|
||||
display: grid;
|
||||
font-size: 0.9rem;
|
||||
color: var(--font-dark);
|
||||
}
|
||||
.sidebar-help i{
|
||||
padding-left: 0.5rem;
|
||||
.sidebar-country-container > * { padding: 0 0 0 1.5rem; }
|
||||
.side-bar footer div a { color: var(--font-medium); }
|
||||
.side-bar footer .text { padding: 1rem 0.5rem; }
|
||||
.side-bar .about { margin-left: 1.5rem; }
|
||||
.sidebar-category:hover div a,
|
||||
.sidebar-category:hover div i,
|
||||
.sidebar-category:hover span,
|
||||
.sidebar-category:hover strong {
|
||||
color: var(--blue-light);
|
||||
}
|
||||
|
||||
.about-sidebar-content{
|
||||
left: -100%;
|
||||
transition: all ease-in-out .3s;
|
||||
border-right: 1px solid var(--border-medium);
|
||||
border-top: 1px solid var(--border-medium);
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.about-sidebar-content.active{
|
||||
left: 0%;
|
||||
}
|
||||
.header-about > *{
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.header-about a{
|
||||
width: fit-content;
|
||||
}
|
||||
.header-about i{
|
||||
padding-right: 5px;
|
||||
}
|
||||
.about-container{
|
||||
grid-column: 1/4;
|
||||
.sidebar-category.active { background-color: var(--side-bar-active) !important; }
|
||||
.sidebar-category.active div a,
|
||||
.sidebar-category.active div i {
|
||||
color: var(--blue-light) !important;
|
||||
}
|
||||
/** Main Section */
|
||||
.main-content-section {
|
||||
max-width: 1176px;
|
||||
width: 1080px;
|
||||
/* ERROR width: 1080px; */
|
||||
min-width: 250px;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
transition: all ease-in-out .3s;
|
||||
}
|
||||
.main-content-container {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12,minmax(0,1fr));
|
||||
grid-gap: 16px 32px;
|
||||
grid-template-columns: repeat(12,minmax(0, 1fr));
|
||||
grid-gap: 1rem 2rem;
|
||||
}
|
||||
.article-container { grid-column: 1/9; }
|
||||
#main-side-content-container { grid-column: 9/13; }
|
||||
|
|
@ -1339,24 +1289,22 @@ body{
|
|||
grid-column: 8/13;
|
||||
}
|
||||
} */
|
||||
@media screen and (max-width: 1681px) {
|
||||
@media screen and (max-width: 1778px) {
|
||||
.main-content-section {
|
||||
margin-left: 280px;
|
||||
margin-left: 290px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1100px) {
|
||||
.main-content-section {
|
||||
.main-content-section {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.side-bar-content {
|
||||
.side-bar {
|
||||
background-color: var(--bg);
|
||||
border: 1px solid var(--border-medium);
|
||||
overflow: auto;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
}
|
||||
.side-bar-content {
|
||||
left: -280px;
|
||||
}
|
||||
.side-bar { margin-left: -280px; }
|
||||
}
|
||||
@media screen and (max-width: 964px) {
|
||||
.navigation-bar { grid-template-columns: 120px 1fr 85px; }
|
||||
|
|
|
|||
132
JS/main.js
132
JS/main.js
|
|
@ -1,6 +1,8 @@
|
|||
let pathLocation = '../'
|
||||
let weatherArrayToday
|
||||
let weatherArrayTommorow
|
||||
let weatherArray2Days
|
||||
|
||||
const weather = {
|
||||
async getweather() {
|
||||
city = changeDiacritics(userLocationInformationValue[3])
|
||||
|
|
@ -93,9 +95,12 @@ const searchBox = {
|
|||
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}`)
|
||||
fetch : async (input, type) => {
|
||||
let res
|
||||
place = 0
|
||||
if(type === 'words' || !type) res = await fetch(`https://api.datamuse.com/words?ml=${input}`)
|
||||
else if(type === 'suggest') res = await fetch(`https://api.datamuse.com/sug?s=${input}`)
|
||||
else if(type === 'sp') res = await fetch(`https://api.datamuse.com/words?sp=${input}`)
|
||||
return words = await res.json()
|
||||
},
|
||||
suggest : async() => {
|
||||
|
|
@ -103,19 +108,19 @@ const suggest = {
|
|||
let suggestWordsArray = []
|
||||
let input = mainSearchInput.value.split(' ')
|
||||
let n = 0
|
||||
|
||||
while(suggestWordsArray.length < 21) {
|
||||
const maxLength = 40
|
||||
|
||||
while(suggestWordsArray.length < 30) {
|
||||
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)
|
||||
if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value && suggestWordsArray.length < 30) suggestWordsArray.push(fetchArray[i].word)
|
||||
|
||||
input[n] = removeCharactersInString(input[n], 0, -1)
|
||||
if(input.length === 0) break
|
||||
}
|
||||
suggest.generate(suggestWordsArray)
|
||||
removeDisableSideElements()
|
||||
|
||||
},
|
||||
generate : (array) => {
|
||||
let section = document.querySelector('article.suggested-words.aside section')
|
||||
|
|
@ -130,11 +135,12 @@ const suggest = {
|
|||
}
|
||||
},
|
||||
manageSuggestWords : async () => {
|
||||
let suggestWordsArray = await suggest.fetch(mainSearchInput.value)
|
||||
const maxLength = 10
|
||||
let suggestWordsArray = await suggest.getSuggestWords()
|
||||
if(suggestWordsArray.length === 0) return hideSuggestWords()
|
||||
|
||||
if(suggestWordsArray.length > 6) suggestWordsArray = removeCharactersInString(suggestWordsArray, 4, suggestWordsArray.length)
|
||||
|
||||
if(suggestWordsArray.length > maxLength)
|
||||
suggestWordsArray = suggestWordsArray.slice(0, maxLength)
|
||||
suggest.suggestBox(suggestWordsArray)
|
||||
|
||||
for(let i = 0; i < suggestMainInput.getElementsByTagName('div').length; i++) {
|
||||
|
|
@ -144,7 +150,14 @@ const suggest = {
|
|||
suggestMainInput.getElementsByTagName('div')[i].classList.add('active')
|
||||
}
|
||||
suggestMainInput.getElementsByTagName('div')[i].onmouseleave = () => { suggestMainInput.getElementsByTagName('div')[i].classList.remove('active','key') }
|
||||
}
|
||||
}
|
||||
},
|
||||
getSuggestWords : async() => {
|
||||
let array
|
||||
if(mainSearchInput.value.length < 3) array = await suggest.fetch(mainSearchInput.value, 'sp')
|
||||
else array = await suggest.fetch(mainSearchInput.value, 'words')
|
||||
if(array.length === 0) array = await suggest.fetch(mainSearchInput.value, 'suggest')
|
||||
return array
|
||||
},
|
||||
suggestBox : (words) => {
|
||||
let wordBoxes = words.map(word => `<div class="grid pointer" onclick="suggest.selectSuggestedSearchOption(this.firstElementChild)">
|
||||
|
|
@ -199,20 +212,9 @@ const responsiveVersion = {
|
|||
// }
|
||||
}
|
||||
|
||||
const regularExpressions = {
|
||||
url : {
|
||||
query : /[\?|\&]+[q]+[=].*?[&]/g,
|
||||
country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g,
|
||||
backgroundColor : /[\&]+[b]+[g]+[=].*/g
|
||||
},
|
||||
string : {
|
||||
symbols : /[@_!#$%^&*()<>?/|}{~:]/g
|
||||
}
|
||||
}
|
||||
|
||||
const php = {
|
||||
info : async(word) => {
|
||||
const response = await fetch('privateInfo.php', {
|
||||
const response = await fetch(`${pathLocation}privateInfo.php`, {
|
||||
method: "POST",
|
||||
body: createFormData(word)
|
||||
})
|
||||
|
|
@ -228,13 +230,33 @@ const php = {
|
|||
}
|
||||
|
||||
const error = {
|
||||
window : () => {
|
||||
// Checkes if correct country acronym is in URL
|
||||
if(window.location.search.match(regularExpressions.url.country)) {
|
||||
let countryAcronym = window.location.search.match(regularExpressions.url.country)[0].slice(5, 7)
|
||||
let country = getAcronymCountry(countryAcronym)
|
||||
if(country) sclStrong.innerHTML = country
|
||||
else return openLinks(filePath.headlines)
|
||||
}
|
||||
},
|
||||
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)
|
||||
// if(mainSearchInput.value.length === 0) return true
|
||||
// if(window.location.pathname.includes('search') && window.location.search.match(regularExpressions.url.query)[0].slice(3, -1).length === 0) return true
|
||||
// if(window.location.search.match(regularExpressions.url.query)[0].slice(3, -1).length === 0) return true
|
||||
}
|
||||
}
|
||||
|
||||
const regularExpressions = {
|
||||
url : {
|
||||
query : /[\?|\&]+[q]+[=].*?[&]/g,
|
||||
country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g,
|
||||
backgroundColor : /[\&]+[b]+[g]+[=].*/g
|
||||
},
|
||||
string : {
|
||||
symbols : /[@_!#$%^&*()<>?/|}{~:]/g
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,10 +283,12 @@ window.onload = async () => {
|
|||
// Close all open windows
|
||||
hideExtraSearchOptions()
|
||||
hideSuggestWords()
|
||||
// document.querySelectorAll('article').forEach(article => { article.onclick = () => { alert() }})
|
||||
|
||||
document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' })
|
||||
|
||||
await user.location()
|
||||
error.window()
|
||||
|
||||
removeActiveSidebarCategory()
|
||||
if (window.location.pathname.includes('headlines')) headlines()
|
||||
else if (window.location.pathname.includes('for-you')) forYou()
|
||||
|
|
@ -281,13 +305,12 @@ window.onload = async () => {
|
|||
else if (window.location.pathname.includes('about')) about()
|
||||
else if (window.location.pathname.includes('help')) help()
|
||||
else if (window.location.pathname.includes('search')) mainSearch()
|
||||
|
||||
await user.location()
|
||||
// changeBackgroundColor()
|
||||
|
||||
// let query = location.search.match(regularExpressions.url.query)[0]
|
||||
// query = removeCharactersInString(query, 3, query.length - 1)
|
||||
|
||||
/* Search news */
|
||||
}
|
||||
|
||||
window.onclick = (e) => {
|
||||
|
|
@ -304,6 +327,11 @@ function historyPushState(webiste, string, country, background) { history.pushSt
|
|||
|
||||
function changeBackgroundColor() { document.body.className = window.location.search.match(regularExpressions.url.backgroundColor)[0].slice(4,10) }
|
||||
|
||||
/**
|
||||
* This function gets a language and returns it's acronym
|
||||
* @param {string} target
|
||||
* @returns {string} language acronym
|
||||
*/
|
||||
function getLanguageAcronym(target) {
|
||||
for(let i = 0; i < language.length; i++)
|
||||
if(language[i] === target)
|
||||
|
|
@ -381,7 +409,9 @@ function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 }
|
|||
async function headlines() {
|
||||
// await weather.getWeather()
|
||||
// weather.updateWeather()
|
||||
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement)
|
||||
|
||||
pathLocation = ''
|
||||
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement.parentElement)
|
||||
|
||||
historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`)
|
||||
}
|
||||
|
|
@ -390,8 +420,9 @@ async function headlines() {
|
|||
function mainSearch(extra, type) {
|
||||
let url = ''
|
||||
let newSearch = false
|
||||
pathLocation = ''
|
||||
|
||||
// error.search()
|
||||
if(error.search() === true) return
|
||||
|
||||
if(!type) type = 'main-url'
|
||||
if(!window.location.pathname.includes('search')) newSearch = true
|
||||
|
|
@ -458,25 +489,25 @@ async function headlines() {
|
|||
/* FOR YOU */
|
||||
|
||||
function forYou() {
|
||||
sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement)
|
||||
sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement.parentElement)
|
||||
}
|
||||
|
||||
/* FOLLOWING */
|
||||
|
||||
function following() {
|
||||
sidebarCategorySelect(document.querySelector('.fa-star').parentElement)
|
||||
sidebarCategorySelect(document.querySelector('.fa-star').parentElement.parentElement)
|
||||
}
|
||||
|
||||
/* LIBRARY */
|
||||
|
||||
function library() {
|
||||
sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement)
|
||||
sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement.parentElement)
|
||||
}
|
||||
|
||||
/* CATEGORIES */
|
||||
|
||||
function category(word) {
|
||||
sidebarCategorySelect(document.querySelector(`.${word}`).parentElement)
|
||||
sidebarCategorySelect(document.querySelector(`.${word}`).parentElement.parentElement)
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
|
|
@ -494,7 +525,9 @@ mainSearchInput.onfocus = () => {
|
|||
else if(mainSearchInput.value.length !== 0) showSuggestWords()
|
||||
suggest.manageSuggestWords()
|
||||
}
|
||||
|
||||
mainSearchInput.onblur = () => {
|
||||
// hideSuggestWords()
|
||||
}
|
||||
mainSearchInput.oninput = () => {
|
||||
if(mainSearchInput.value.length === 0) return hideSuggestWords()
|
||||
else if(suggestMainInput.classList.contains('disable')) showSuggestWords()
|
||||
|
|
@ -506,7 +539,7 @@ mainSearchInput.onkeyup = (e) => {
|
|||
let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key')
|
||||
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}`)
|
||||
else historyPushState(location.origin + location.pathname, `?q=${mainSearchInput.value.trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
|
||||
mainSearch()
|
||||
}
|
||||
if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
|
||||
|
|
@ -539,14 +572,9 @@ function updateCountrySelect(country) {
|
|||
}
|
||||
|
||||
function createUrlPath(type, search) {
|
||||
if(search === undefined && location.pathname.includes(type)) return
|
||||
let path
|
||||
let query = ''
|
||||
if(search === undefined && location.pathname.includes(type)) return
|
||||
if(type === 'headlines') path = filePath.headlines
|
||||
else if(type === 'search') {
|
||||
path = filePath.search
|
||||
query = `q=${search}&`
|
||||
}
|
||||
else if(type === 'following') path = filePath.following
|
||||
else if(type === 'for-you') path = filePath.forYou
|
||||
else if(type === 'library') path = filePath.library
|
||||
|
|
@ -557,8 +585,8 @@ function createUrlPath(type, search) {
|
|||
else if(type === 'entertainment') path = filePath.entertainment
|
||||
else if(type === 'sports') path = filePath.sports
|
||||
else if(type === 'health') path = filePath.health
|
||||
|
||||
return path = `${path}?${query}cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
|
||||
path = `${path}?cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
|
||||
openLinks(path)
|
||||
}
|
||||
|
||||
let activeCountry
|
||||
|
|
@ -694,15 +722,15 @@ function clickInOutCheck(parent, target) {
|
|||
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 = []
|
||||
noChildren = []
|
||||
if(clickOnOpenedElement === true) return
|
||||
if(parent === extraSearchOptions && target !== extOptIcon) hideExtraSearchOptions()
|
||||
else if(parent === suggestMainInput && document.activeElement !== mainSearchInput) hideSuggestWords()
|
||||
else if(parent === extOptProfile) manageExtraProfileOptions()
|
||||
else if(parent === selectCountryDiv && countryDivExceptions.some((val) => val === target) === false) hideSelectCountry()
|
||||
else if(parent === logInOptions && target !== loginButton) manageLoginOptions()
|
||||
}
|
||||
function doesElementHaveChildren(parent) {
|
||||
if(parent.children.length > 0){
|
||||
|
|
|
|||
33
JS/show.js
33
JS/show.js
|
|
@ -1,27 +1,20 @@
|
|||
|
||||
let sideMenuCounter = 0
|
||||
function manageSideMenu() {
|
||||
if(checkWindowWidth900() === true && sideMenuCounter === 0){
|
||||
sideBarContent.style.left = '-100%'
|
||||
if(window.innerWidth < 1101 && sideMenuCounter === 0){
|
||||
sideBar.style.marginLeft = '-100%'
|
||||
sideMenuCounter = 1
|
||||
} else if(checkWindowWidth900() === true && sideMenuCounter === 1){
|
||||
sideBarContent.style.left = '0%'
|
||||
} else if(window.innerWidth < 1101 && sideMenuCounter === 1){
|
||||
sideBar.style.marginLeft = '0'
|
||||
sideMenuCounter = 0
|
||||
} else if(checkWindowWidth900() === false && sideMenuCounter === 0){
|
||||
sideBarContent.style.left = '-100%'
|
||||
} else if(window.innerWidth > 1100 && sideMenuCounter === 0){
|
||||
sideBar.style.marginLeft = '-100%'
|
||||
sideMenuCounter = 1
|
||||
} else if(checkWindowWidth900() === false && sideMenuCounter === 1) {
|
||||
sideBarContent.classList.remove('disable')
|
||||
sideBarContent.style.left = '0%'
|
||||
} else if(window.innerWidth > 1100 && sideMenuCounter === 1) {
|
||||
sideBar.style.marginLeft = '0'
|
||||
sideMenuCounter = 0
|
||||
}
|
||||
}
|
||||
|
||||
function checkWindowWidth900() {
|
||||
if(window.innerWidth > 930) return true
|
||||
else return false
|
||||
}
|
||||
|
||||
function manageExtraSearchOptions() {
|
||||
if(extraSearchOptions.classList.contains('disable')) {
|
||||
hideSuggestWords()
|
||||
|
|
@ -134,13 +127,13 @@ function resetExtraSearchOptions() {
|
|||
}
|
||||
|
||||
function sidebarCategorySelect(selectedElement) {
|
||||
if(selectedElement.classList.contains('side-menu-active')) return
|
||||
selectedElement.classList.add('side-menu-active')
|
||||
selectedElement.firstElementChild.classList.add('side-menu-active')
|
||||
if(selectedElement.classList.contains('active')) return
|
||||
selectedElement.classList.add('active')
|
||||
selectedElement.firstElementChild.classList.add('active')
|
||||
/* Search news articles */
|
||||
}
|
||||
function removeActiveSidebarCategory() {
|
||||
let oldSelectedElements = document.querySelectorAll('.side-menu-active')
|
||||
let oldSelectedElements = document.querySelectorAll('sidebar-category.active')
|
||||
for(let i = 0; i < oldSelectedElements.length; i++)
|
||||
oldSelectedElements[i].classList.remove('side-menu-active')
|
||||
oldSelectedElements[i].classList.remove('active')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,22 +52,24 @@
|
|||
/** Main Content */
|
||||
/** Side Menu */
|
||||
let sideBarContent = document.getElementById('side-bar-content')
|
||||
let sideBar = document.getElementById('side-bar')
|
||||
const selectCountryDiv = document.getElementById('select-country')
|
||||
const listOfCountries = document.getElementById('list-of-countries')
|
||||
const selectedCountry = document.getElementById('country-name-side-menu')
|
||||
const suggestCountryCountainer = document.getElementById('suggest-country')
|
||||
const searchCountriesInput = document.getElementById('search-country-input')
|
||||
let mainContentSection = document.getElementById('main-content-section')
|
||||
const mainContentSection = document.getElementById('main-content-section')
|
||||
let mainAsideContent = document.getElementById('main-side-content-container')
|
||||
let aboutContentSection = document.getElementById('about-content-section')
|
||||
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 sclSpan = showCountriesLink.firstElementChild.firstElementChild
|
||||
const sclStrong = showCountriesLink.firstElementChild.lastElementChild
|
||||
|
||||
|
||||
const main = document.getElementById('main')
|
||||
|
||||
const overlay = document.getElementById('overlay')
|
||||
let navigationBarProfileImageDiv = document.getElementById('navigation-bar-profile-img-div')
|
||||
let extOptProfile = document.getElementById('profile-extra-options')
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
||||
<meta name="google-signin-client_id"
|
||||
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
||||
|
||||
|
|
@ -13,7 +14,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/diacritics.js" defer></script>
|
||||
<script src="../JS/main.js" defer></script>
|
||||
<script src="../JS/sign.js" defer></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +1,84 @@
|
|||
<aside class="side-bar absolute">
|
||||
<div class="side-bar-content grid fixed" id="side-bar-content">
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('headlines')"><i
|
||||
class="fal fa-newspaper fa-lg"></i>Top Stories</a>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('for-you')"><i
|
||||
class="fas fa-user-alt fa-lg"></i>For you</a>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('following')"><i
|
||||
class="fal fa-star fa-lg"></i>Following</a>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('library')"><i
|
||||
class="fas fa-bookmark fa-lg"></i>Saved news</a>
|
||||
<hr>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('covid-19')"><i
|
||||
class="fad fa-shield-cross fa-lg"></i>COVID-19</a>
|
||||
<hr>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('world')"><i
|
||||
class="fad fa-globe-europe fa-lg"></i>World</a>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('business')"><i
|
||||
class="fad fa-building fa-lg"></i>Business</a>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('technology')"><i
|
||||
class="fad fa-microchip fa-lg"></i>Technology</a>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('entertainment')"><i
|
||||
class="fas fa-camera-movie" ></i>Entertainment</a>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('sports')"><i
|
||||
class="fas fa-tennis-ball fa-lg"></i>Sports</a>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('health')"><i
|
||||
class="fas fa-heartbeat fa-lg"></i>Health</a>
|
||||
<hr>
|
||||
<div class="language extra-side-menu pointer" id="show-countries-button"
|
||||
onclick="showSelectCountry()">
|
||||
<span>Language & Region</span>
|
||||
<strong id="country-name-side-menu">United States</strong>
|
||||
<aside class="side-bar absolute grid" id="side-bar">
|
||||
<div class="flex">
|
||||
<div class="side-bar-container" id="side-bar-container">
|
||||
<div>
|
||||
<div class="side-bar-content" id="side-bar-content">
|
||||
<div class="sidebar-category" onclick="createUrlPath('headlines')">
|
||||
<div class="icon"><i class="fal fa-newspaper fa-lg"></i></div>
|
||||
<div><a href="#">Top Stories</a></div>
|
||||
</div>
|
||||
<div class="sidebar-category" onclick="createUrlPath('for-you')">
|
||||
<div class="icon"><i class="fas fa-user-alt fa-lg"></i></div>
|
||||
<div><a href="#">For you</a></div>
|
||||
</div>
|
||||
<div class="sidebar-category" onclick="createUrlPath('following')">
|
||||
<div class="icon"><i class="fal fa-star fa-lg"></i></div>
|
||||
<div><a href="#" class="side-menu-categories">Following</a></div>
|
||||
</div>
|
||||
<div class="sidebar-category" onclick="createUrlPath('library')">
|
||||
<div class="icon"><i class="fas fa-bookmark fa-lg"></i></div>
|
||||
<div><a href="#" class="side-menu-categories">Saved news</a></div>
|
||||
</div>
|
||||
<div class="sidebar-line"><hr></div>
|
||||
<div class="sidebar-category" onclick="createUrlPath('covid-19')">
|
||||
<div class="icon"><i class="fad fa-shield-cross fa-lg"></i></div>
|
||||
<div><a href="#" class="side-menu-categories">COVID-19</a></div>
|
||||
</div>
|
||||
<div class="sidebar-line"><hr></div>
|
||||
<div class="categories">
|
||||
<div class="sidebar-category" onclick="createUrlPath('world')">
|
||||
<div class="icon"><i class="fad fa-globe-europe fa-lg"></i></div>
|
||||
<div><a href="#" class="side-menu-categories">World</a></div>
|
||||
</div>
|
||||
<div class="sidebar-category" onclick="createUrlPath('business')">
|
||||
<div class="icon"><i class="fad fa-building fa-lg"></i></div>
|
||||
<div><a href="#" class="side-menu-categories">Business</a></div>
|
||||
</div>
|
||||
<div class="sidebar-category" onclick="createUrlPath('technology')">
|
||||
<div class="icon"><i class="fad fa-microchip fa-lg"></i></div>
|
||||
<div><a href="#" class="side-menu-categories">Technology</a></div>
|
||||
</div>
|
||||
<div class="sidebar-category" onclick="createUrlPath('entertainment')">
|
||||
<div class="icon"><i class="fas fa-camera-movie"></i></div>
|
||||
<div><a href="#" class="side-menu-categories">Entertainment</a></div>
|
||||
</div>
|
||||
<div class="sidebar-category" onclick="createUrlPath('sports')">
|
||||
<div class="icon"><i class="fas fa-tennis-ball fa-lg"></i></div>
|
||||
<div><a href="#" class="side-menu-categories">Sports</a></div>
|
||||
</div>
|
||||
<div class="sidebar-category" onclick="createUrlPath('health')">
|
||||
<div class="icon"><i class="fas fa-heartbeat fa-lg"></i></div>
|
||||
<div><a href="#" class="side-menu-categories">Health</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-line"><hr></div>
|
||||
<div class="other">
|
||||
<div class="sidebar-category country" id="show-countries-button" onclick="showSelectCountry()">
|
||||
<div class="sidebar-country-container grid">
|
||||
<span>Language & Region</span>
|
||||
<strong id="country-name-side-menu"><?php echo 'United States' ?></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-category">
|
||||
<div class="text"><a href="#" class="side-menu-categories" onclick="createUrlPath('sources')">Sources</a></div>
|
||||
</div>
|
||||
<div class="sidebar-category">
|
||||
<div class="text"><a href="#" onclick="createUrlPath('settings')">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-category">
|
||||
<div class="text"><a href="#" class="sidebar-help"
|
||||
onclick="createUrlPath('help')">Help</a></div>
|
||||
<div><i class="far fa-external-link-alt fa-sm"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="about text"><a href="#" onclick="createUrlPath('about')">About</a></div>
|
||||
<div><span class="flex align-center justify-center" style="color: var(--font-medium);">•</span></div>
|
||||
<div class="text"><a href="https://newsapi.org/" target="_blank" id="news-api-link">News Api</a> </div>
|
||||
</footer>
|
||||
</div>
|
||||
<a href="#" class="side-menu-categories" onclick="createUrlPath('sources')">Sources</a>
|
||||
<a href="#" onclick="createUrlPath('settings')">Settings</a>
|
||||
<a href="#" class="sidebar-help" onclick="createUrlPath('help')">Help<i class="far fa-external-link-alt fa-sm"></i></a>
|
||||
<footer class="grid">
|
||||
<div>
|
||||
<a href="#" onclick="createUrlPath('about')">About</a>
|
||||
<span class="flex align-center justify-center">•</span>
|
||||
<a href="https://newsapi.org/" target="_blank" id="news-api-link">News API</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="side-bar-content about-sidebar-content grid fixed" id="about-sidebar-content">
|
||||
<!-- <a href="#" class="active" onclick="sidebarCategorySelect(this)">About</a>
|
||||
<a href="#" class="" onclick="sidebarCategorySelect(this)">Terms of service</a> -->
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> -->
|
||||
<meta name="google-signin-client_id"
|
||||
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<meta name="google-signin-client_id"
|
||||
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue