jcloud_frontend/assets/scripts/search/main.js

'use strict';

import { addQueryParam, strip } from '../tools/main.js';

const fetchResults = async function (query) {
    return [
        {
            'icon': `${strip(query, '/')}/favicon.ico`,
            'name': query,
            'url': query,
            'title': query,
            'description': query
        },
        {
            'icon': 'https://jcloud-services.ddns.net/assets/img/favicon.png',
            'name': 'jCloud',
            'url': 'https://jcloud-services.ddns.net',
            'title': 'jCloud',
            'description': 'Der beste Ort für deine Fotos, Dateien, Notizen, Präsentationen und vieles mehr.'
        },
        {
            'icon': 'https://jcloud-services.ddns.net/seekra/static/img/favicon/favicon.svg',
            'name': 'Seekra',
            'url': 'https://seekra.fwh.is/',
            'title': 'Seekra',
            'description': 'The (currently not working) search engine Seekra'
        },
        {
            'icon': 'https://example.com/favicon.ico',
            'name': 'Example',
            'url': 'https://example.com/',
            'title': 'Example',
            'description': 'This domain is for use in documentation examples without needing permission. Avoid use in operations.'
        },
    ];
}

const displayResults = async function (query) {
    const searchContainer = document.querySelector('#search-container')
    const resultsContainer = document.querySelector('#search-results-container');

    searchContainer.classList.add('showing-results');
    resultsContainer.innerHTML = '';

    const results = await fetchResults(query);
    
    for (let result of results) {
        const container = document.createElement('div');
        const header = document.createElement('a');
        const description = document.createElement('div');
        const headerFirstLine = document.createElement('div');
        const title = document.createElement('div');
        const iconWrapper = document.createElement('div');
        const icon = document.createElement('img');
        const headerText = document.createElement('div');
        const siteName = document.createElement('div');
        const url = document.createElement('div');


        container.classList.add('search-result');
        container.classList.add('glass');
        container.classList.add('blue-glass');

        header.classList.add('search-result-header');
        header.href = result.url;

        description.classList.add('search-result-description');
        description.textContent = result.description;

        headerFirstLine.classList.add('search-result-header-first-line');

        title.classList.add('search-result-title');
        title.textContent = result.title;

        iconWrapper.classList.add('search-result-icon');

        icon.src = result.icon;
        icon.alt = '';

        siteName.textContent = result.name;

        url.classList.add('search-result-url');
        url.textContent = result.url;


        iconWrapper.appendChild(icon);
        headerText.appendChild(siteName);
        headerText.appendChild(url);
        headerFirstLine.append(iconWrapper);
        headerFirstLine.append(headerText);
        header.appendChild(headerFirstLine);
        header.appendChild(title);
        container.appendChild(header);
        container.appendChild(description);

        resultsContainer.appendChild(container)
    }
};


const refreshSuggestions = function (query) {
    // TEST
    const result = Array();
    for (let r = 0; r < 10; r++) {
        result.push('Test ' + Math.random());
    };
    return result;
};

const displaySuggestions = function (suggestions) {
    const suggestionsContainer = document.querySelector('#search-suggestions-list');
    const searchInput = document.querySelector('#search-input');
    suggestionsContainer.innerHTML = '';
    for (let suggestion of suggestions) {
        const container = document.createElement('div');
        const element = document.createElement('div');
        const acceptButton = document.createElement('button');
        const acceptIcon = document.createElement('img');
        const content = document.createElement('div');

        container.classList.add('suggestion-container');
        element.classList.add('suggestion');
        acceptButton.classList.add('accept-suggestion');
        acceptButton.classList.add('glass');
        acceptButton.classList.add('dark-glass');
        acceptButton.classList.add('blue-glass');
        acceptIcon.src = '/assets/img/jcloud-ui-icons/autocomplete-insert.svg';
        content.classList.add('content');
        
        // BEGIN NOT USED
        container.dataset.suggestionId = crypto.randomUUID();
        // END NOT USED

        acceptButton.dataset.acceptButton = '';
        acceptIcon.dataset.acceptButton = '';
        content.textContent = suggestion;
        suggestionsContainer.onclick = function (e) {
            if (e.target.dataset.acceptButton === undefined) {
                searchInput.value = suggestion;
                displayResults(searchInput.value);
            };
        };
        acceptButton.onclick = function () {
            displaySuggestions(refreshSuggestions(searchInput.value));
            searchInput.value = suggestion;
        };

        acceptButton.appendChild(acceptIcon);
        element.appendChild(acceptButton);
        element.appendChild(content);
        container.appendChild(element);

        suggestionsContainer.appendChild(container);
    };
};

const showSearch = function () {
    displaySuggestions(refreshSuggestions());
    const searchTriggerButton = document.querySelector('#search-trigger');
    const searchContainer = document.querySelector('#search-container');
    const searchSuggestionsContainerInner = document.querySelector('#search-container > div');
    const searchSuggestions = document.querySelector('#search-suggestions');
    const searchInput = document.querySelector('#search-input');
    const searchRecents = document.querySelector('#search-recents');
    
    const left = searchSuggestions;
    const right = searchRecents;

    searchTriggerButton.classList.add('expanded');
    searchTriggerButton.dataset.expanded = '';
    searchContainer.classList.add('show');
    searchContainer.classList.add('visible');

    searchInput.oninput = function () {
        displaySuggestions(refreshSuggestions(searchInput.value));
    };

    const maximizeSuggestions = function (side) {
        if (!(side === left || side === right)) return;
        const borderRadius = getComputedStyle(searchContainer).getPropertyValue('--border-radius').slice(0, 2);
        const containerWidth = resizer.parentNode.getBoundingClientRect().width - 0 * borderRadius;
        let leftWidth;
        if (side === left) {
            left.classList.add('floating');
            right.classList.add('floating');
            left.classList.remove('secondary-suggestions');
            right.classList.add('secondary-suggestions');
            leftWidth = (containerWidth - 2 * borderRadius) / containerWidth;
            left.onclick = null;
            right.onclick = function () {
                maximizeSuggestions(right);
            };
        } else {
            left.classList.add('floating');
            right.classList.add('floating');
            right.classList.remove('secondary-suggestions');
            left.classList.add('secondary-suggestions');
            leftWidth = 2 * borderRadius / containerWidth;
            right.onclick = null;
            left.onclick = function () {
                maximizeSuggestions(left);
            };
        }
        left.style.setProperty('--expanded-width', `${leftWidth * 100}%`);
        right.style.setProperty('--expanded-width', `${(1 - leftWidth) * 100}%`);
        setTimeout(function () {
            left.classList.remove('floating');
            right.classList.remove('floating');
        }, 300);
    };
    
    const resizer = document.querySelector('#search-suggestions-containers-resizer');
    let isResizing = false;
    resizer.onpointerdown = function () {
        isResizing = true;
        document.onpointerup = function () {
            isResizing = false;
            document.onpointerup = undefined;
        };
    };
    const handleResize = function (e) {
        if (!isResizing) return;
        const borderRadius = getComputedStyle(searchContainer).getPropertyValue('--border-radius').slice(0, 2);
        const containerWidth = resizer.parentNode.getBoundingClientRect().width;
        console.log(resizer.parentNode)
        console.log(containerWidth);
        let leftWidth = (e.clientX - searchContainer.children[0].getBoundingClientRect().left) / containerWidth;
        const minWidth = 100;
        if (leftWidth * containerWidth < 2 * borderRadius + minWidth) {
            leftWidth = 2 * borderRadius / containerWidth;
            left.classList.add('floating');
            right.classList.add('floating');
            left.classList.add('secondary-suggestions');
            left.onclick = function () {
                maximizeSuggestions(left);
            };
        } else {
            left.onclick = null;
            left.classList.remove('secondary-suggestions');
        };
        if (leftWidth * containerWidth > containerWidth - 2 * borderRadius - minWidth) {
            leftWidth = (containerWidth - 2 * borderRadius) / containerWidth;
            left.classList.add('floating');
            right.classList.add('floating');
            right.classList.add('secondary-suggestions');
            right.onclick = function () {
                maximizeSuggestions(right);
            };
        } else {
            right.onclick = null;
            right.classList.remove('secondary-suggestions');
        };
        left.style.setProperty('--expanded-width', `${leftWidth * 100}%`);
        right.style.setProperty('--expanded-width', `${(1 - leftWidth) * 100}%`);
        setTimeout(function () {
            left.classList.remove('floating');
            right.classList.remove('floating');
        }, 300);
    };
    document.addEventListener('pointermove', handleResize);

    left.onclick = null;
    right.onclick = null;
    if (left.classList.contains('secondary-suggestions')) {
        left.onclick = function () {
            maximizeSuggestions(left);
        };
    };
    if (right.classList.contains('secondary-suggestions')) {
        right.onclick = function () {
            maximizeSuggestions(right);
        };
    };


    const hide = function (event) {
        if (!searchTriggerButton.contains(event.target) && !searchSuggestionsContainerInner.contains(event.target)) {
            window.removeEventListener('click', hide, { capture: true });
            window.removeEventListener('touchend', hide, { capture: true });
            searchTriggerButton.classList.remove('expanded');
            searchTriggerButton.removeAttribute('data-expanded');
            searchContainer.classList.remove('show');
            searchContainer.classList.remove('showing-results');

            if (left.classList.contains('secondary-suggestions')) {
                left.classList.add('secondary-suggestions-animation');
            } else {
                left.classList.remove('secondary-suggestions-animation');
            };
            if (right.classList.contains('secondary-suggestions')) {
                right.classList.add('secondary-suggestions-animation');
            } else {
                right.classList.remove('secondary-suggestions-animation');
            };

            setTimeout(function () {
                searchContainer.classList.remove('visible');
            }, Number(getComputedStyle(searchContainer).getPropertyValue('--close-animation-duration').slice(0, -1)) * 1000);
        };
    };

    setTimeout(function () {
        window.addEventListener('click', hide, { capture: true });
        window.addEventListener('touchend', hide, { capture: true });
    }, 100);
};

export { showSearch, displaySuggestions, refreshSuggestions, displayResults };