Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toggle with JavaScript #33

Open
ArchBlood opened this issue Nov 28, 2023 · 2 comments
Open

Toggle with JavaScript #33

ArchBlood opened this issue Nov 28, 2023 · 2 comments
Labels
enhancement New feature or request

Comments

@ArchBlood
Copy link

Have you thought of handling the toggle through JS?

Here's an example

humhub.module('dark-mode').on('humhub:ready', function(event, el) {
    const toggleSwitch = document.createElement('input');
    toggleSwitch.setAttribute('type', 'checkbox');
    toggleSwitch.setAttribute('id', 'modeToggle');

    const label = document.createElement('label');
    label.setAttribute('for', 'modeToggle');
    label.textContent = 'Switch mode:';

    const contentContainer = document.querySelector('.dark-mode-container-selector');
    contentContainer.appendChild(label);
    contentContainer.appendChild(toggleSwitch);

    // Function to set the theme based on the toggle state
    function switchTheme(e) {
        if (e.target.checked) {
            // Apply night mode theme or trigger HumHub's theme change method
            // Example: humhub.theme.apply('night-mode');
        } else {
            // Apply day mode theme or trigger HumHub's theme change method
            // Example: humhub.theme.apply('day-mode');
        }
    }

    // Event listener for the toggle switch
    toggleSwitch.addEventListener('change', switchTheme);

    // Logic to check user's preference from HumHub settings or storage

    // Save user's preference to HumHub settings or storage
    toggleSwitch.addEventListener('change', function(e) {
        if (e.target.checked) {
            // Save night mode preference
            // Example: humhub.settings.set('theme', 'night');
        } else {
            // Save day mode preference
            // Example: humhub.settings.set('theme', 'day');
        }
    });
});
@felixhahnweilheim
Copy link
Owner

I like to keep things simple.

But if you want to remove the full page reload after the modal is saved, you can create a PR.

I think the asset should be registered in the modal view, so the initial page load does not increase.

@ArchBlood
Copy link
Author

I like to keep things simple.

But if you want to remove the full page reload after the modal is saved, you can create a PR.

I think the asset should be registered in the modal view, so the initial page load does not increase.

I'll do some tests on my end of things.

@felixhahnweilheim felixhahnweilheim added the enhancement New feature or request label Nov 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants