functions.js

let slideNumber = 0;

const newsImageSources = ['../img/nasa_news_1.jpg', '../img/nasa_news_2.jpg', '../img/nasa_news_3.jpg'];
const newsTitles = ['Space Station', 'Earth', 'NASA Goddard'];
const newsSubtitles = ['Expedition 48 Crew Lands Safely on Earth', 'NASA Announces Summer 2023 Hottest on Record', 'NASA\'s Webb Snaps Supersonic Outflow of Young Star'];

document.addEventListener("DOMContentLoaded", function() {
    onload();
});

function onload() {
    console.log("Page loaded");

    handleSearchChanged();
    setInterval(slideImage, 30000);
    setHoverForOverlay();
}

function handleSearchChanged() {
    const searchForm = document.forms['search-form'];
    const searchInput = searchForm.elements['search-input'];

    searchInput.addEventListener("input", onInputChanged);
}

async function onInputChanged(event) {
    const searchWord = event.target.value;

    const json = await fetchNews(searchWord);

    if (json === undefined)
        return;

    displaySearchResults(json, searchWord);
}

function fetchNews(searchWord) {
    let request = fetch(`NewsFetch.php?searchWord=${searchWord}`)
                    .then((response) => {
                        if (response.status >= 200 && response.status < 300) {
                            return response.json();
                        } else {
                            return Promise.reject("An error occured while fetching the news!");
                        }
                    })
                    .catch((error) => console.error(error));  
                    
    return request;               
}

function displaySearchResults(json, searchWord) {
    const searchResults = document.getElementById('search-results');

    searchResults.innerText = "";

    const ul = document.createElement('ul');

    json.forEach((news) => {
        const li = createNewsChild(news, searchWord);

        ul.appendChild(li);
    });

    searchResults.appendChild(ul);

    const display = json.length === 0 ? "none" : "block";;
    searchResults.style.display = display;
}

function createNewsChild(news, searchWord) {
    const title = news['title'];
    const id = news['id'];

    const li = document.createElement('li');
    const a = createLinkWithHighlightedParts(title, searchWord)

    const hrefAttr = document.createAttribute('href');
    hrefAttr.value = 'NewsArticle.php?articleId=' + encodeURIComponent(id);

    a.setAttributeNode(hrefAttr);

    li.appendChild(a);

    return li;
}

function createLinkWithHighlightedParts(title, searchWord) {
    const a = document.createElement('a');

    const indices = [...title.toLowerCase().matchAll(new RegExp(searchWord, 'gi'))].map((a) => a.index).sort((a, b) => b-a);
    const length = searchWord.length;
    const separator = '*';

    for (const index of indices) {
        title = title.substr(0, index) + separator + title.substr(index, length) + separator + title.substr(index + length);
    }

    const separatedBySearchWord = title.split(separator);
    const nodes = separatedBySearchWord.map((element) => {
        if (element.toLowerCase() === searchWord.toLowerCase())
            return createSpanNode(element);
        else
            return createTextNode(element);
    })

    a.append(...nodes);   

    return a;
}

function createSpanNode(text) {
    const span = document.createElement('span');

    const textNode = createTextNode(text);
    span.appendChild(textNode);

    const classAttribute = document.createAttribute('class');
    classAttribute.value = 'highlight';

    span.setAttributeNode(classAttribute);

    return span;
}

function createTextNode(text) {
    const textNode = document.createTextNode(text);

    return textNode;
}

function slideImage() {
    slideNumber = (slideNumber + 1) % 3;

    const slideImage = document.getElementById('slide-image');

    const slideContainer = document.getElementById('slide-container');
    const slideTitle = slideContainer.children[0];
    const slideSubtitle = slideContainer.children[1];
    
    let newsImageSource = newsImageSources[slideNumber];
    let newsTitle = newsTitles[slideNumber];
    let newsSubtitle = newsSubtitles[slideNumber];

    slideImage.src = newsImageSource;
    slideTitle.textContent = newsTitle;
    slideSubtitle.textContent = newsSubtitle;
}

function setHoverForOverlay() {
    document.querySelectorAll('.overlay > .overlay-description').forEach(function(element) {
        element.addEventListener("mouseover", function() { hover(this, true); });
        element.addEventListener("mouseout", function() { hover(this, false); });
    });
}

function hover(element, hoverActivated) {
    console.log(element);
    let height = "";

    if (hoverActivated)
        height = "100%";
    else
        height = "auto";

    element.parentElement.style.height = height;
}