ernestwisniewski/kbin

View on GitHub
assets/controllers/kbin_controller.js

Summary

Maintainability
A
0 mins
Test Coverage
// SPDX-FileCopyrightText: 2023 /kbin contributors <https://kbin.pub/>
//
// SPDX-License-Identifier: AGPL-3.0-only

import {ApplicationController, useDebounce} from 'stimulus-use'

/* stimulusFetch: 'lazy' */
export default class extends ApplicationController {
    static values = {
        loading: Boolean,
    }

    static debounces = ['mention']

    connect() {
        useDebounce(this, {wait: 800})
        this.handleDropdowns();
        this.handleOptionsBarScroll();
        this.handleDefaultTheme();
    }

    handleDropdowns() {
        this.element.querySelectorAll('.dropdown > a').forEach((dropdown) => {
            dropdown.addEventListener('click', (event) => {
                event.preventDefault();
            });
        });
    }

    handleOptionsBarScroll() {
        const container = document.getElementById('options');
        if (container) {
            const containerWidth = container.clientWidth;
            const area = container.querySelector('.options__main');
            const areaWidth = area.scrollWidth;

            if (areaWidth > containerWidth && !area.nextElementSibling) {
                container.insertAdjacentHTML('beforeend', '<menu class="scroll"><li class="scroll-left"><i class="fa-solid fa-circle-left"></i></li><li class="scroll-right"><i class="fa-solid fa-circle-right"></i></li></menu>');

                const scrollLeft = container.querySelector('.scroll-left');
                const scrollRight = container.querySelector('.scroll-right');
                const scrollArea = container.querySelector('.options__main');

                scrollRight.addEventListener('click', () => {
                    scrollArea.scrollLeft += 100;
                });
                scrollLeft.addEventListener('click', () => {
                    scrollArea.scrollLeft -= 100;
                });
            }
        }
    }

    handleDefaultTheme() {
        if (!document.querySelector('body').classList.contains('theme--default')) {
            return;
        }

        let preferredTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

        const now = new Date();
        const expireTime = now.getTime() + 60 * 60 * 1000;
        const expireDate = new Date(expireTime).toUTCString();
        document.cookie = `kbin_theme=${preferredTheme}; expires=${expireDate}; path=/`;

        document.querySelector('body').classList.remove('theme--default');
        document.querySelector('body').classList.add(`theme--${preferredTheme}`);
    }

    /**
     * Handles interaction with the mobile nav button, opening the sidebar
     * @param {*} e 
     */
    handleNavToggleClick(e) {      
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.toggle('open');
    }

    changeLang(event) {
        window.location.href = '/settings/theme/kbin_lang/' + event.target.value;
    }
}