Erste-Projekt-von-Moh/assets/js/palettepro.js

document.addEventListener("DOMContentLoaded", function () {
    var menuLinks = document.querySelectorAll(".pp-menu-link");
    var contentSections = document.querySelectorAll(".pp-card-content");

    // Retrieve the active section from local storage
    var activeSection = localStorage.getItem("activeSection");

    // Function to remove 'settings-active' class from all menu links
    function removeActiveClass(elements) {
        elements.forEach(function (element) {
            element.classList.remove("settings-active");
        });
    }

    // Function to hide all content sections
    function hideContentSections() {
        contentSections.forEach(function (section) {
            section.style.display = "none";
        });
    }

    // Function to set the active section and menu link
    function setActiveSection(sectionId, link) {
        removeActiveClass(menuLinks);
        hideContentSections();

        document.querySelector(sectionId).style.display = "block";
        link.classList.add("settings-active");

        // Store the active section in local storage
        localStorage.setItem("activeSection", sectionId);
    }

    // If there is an active section, show it and update the menu link
    if (activeSection) {
        removeActiveClass(menuLinks);
        hideContentSections();

        var activeMenuLink = document.querySelector(
            'a[href="' + activeSection + '"]'
        );

        if (activeMenuLink) {
            setActiveSection(activeSection, activeMenuLink);
        }
    } else {
        // If no active section is stored, set the first link as active by default
        setActiveSection(menuLinks[0].getAttribute("href"), menuLinks[0]);
    }

    // Add click event listener to menu links
    menuLinks.forEach(function (link) {
        link.addEventListener("click", function (e) {
            e.preventDefault();

            var target = this.getAttribute("href");
            var targetElement = document.querySelector(target);

            setActiveSection(target, this);
        });
    });
});

// <!------------------------------------------------------------------------------
// ------------------- pp color picker sctipt
// ------------------------------------------------------------------------------->

(function ($) {
    "use strict";
    $(document).ready(function () {
        $(".pp-color-picker").spectrum({
            preferredFormat: ["hex"],
            showInput: true,
            showInitial: true,
            allowEmpty: true,
            clickoutFiresChange: true,
            showAlpha: true,
            showPalette: true,
            palette: [
                ["#f0f0f1", "#1d2327", "#0073aa", "#f2f6fc", "#ffc0c0"],
                ["green", "#005782", "#1a1a1a", "#f2f6fc", "#ffc0c0"],
                ["#dd4124", "#f7b91f", "#e95095", "#7049ba", "#c0ffc0"],
                ["#dd4124", "#e86646", "#f07b69", "#f7918c", "#fab6b0"],
                ["#ff6699", "#ff80aa", "#ff99bb", "#ffb3cc", "#ffcce5"],
                ["#ff9933", "#ffa54d", "#ffbb66", "#ffd080", "#ffe699"],
                ["#3399ff", "#4da3ff", "#66adff", "#80b7ff", "#99c1ff"],
                ["#99cc33", "#a3cc4d", "#add366", "#b7dd80", "#c1e699"],
                ["#9966ff", "#a373ff", "#ac80ff", "#b58cff", "#bf99ff"],
                ["#cc6699", "#d280ad", "#db8cb9", "#e599c5", "#efb3d1"],
                ["#ffcc00", "#ffd633", "#ffe066", "#ffeb99", "#fff5cc"],
                ["#333333", "#4d4d4d", "#666666", "#808080", "#999999"],
            ],
            showPaletteOnly: true, // Set to true to show only the palette
            maxSelectionSize: 2, // Limit the number of colors that can be selected
            togglePaletteOnly: true, // Allow toggling between picker and palette
            replacerClassName: "custom-color-picker", // Add a custom class name for the color picker container
            appendTo: ".color-picker-container", // Append the color picker to a specific element or selector
            showButtons: true, // Display OK and Cancel buttons
            chooseText: "Apply", // Customize the text of the "Apply" button

            // Callbacks
            change: function (color) {
                console.log("Color changed:", color.toHexString());
            },
            move: function (color) {
                console.log("Color moving:", color.toHexString());
            },
            show: function (color) {
                console.log("Picker shown:", color.toHexString());
            },
            hide: function (color) {
                console.log("Picker hidden:", color.toHexString());
            },
            beforeShow: function (color) {
                console.log("Before show:", color.toHexString());
            },
            beforeHide: function (color) {
                console.log("Before hide:", color.toHexString());
            },
            cancel: function (color) {
                console.log("Color selection canceled:", color.toHexString());
            },
            choose: function (color) {
                console.log("Color selected:", color.toHexString());
            },
        });
        showHideFields();
    });
})(jQuery);

////////////////////////////////////////////////////////////////////////////////
/////////////////////////// + - border radius
////////////////////////////////////////////////////////////////////////////////

function changeValue(operator, event) {
    event.preventDefault(); // Prevent form submission and page refresh

    const input = document.getElementById("border-radius");
    let value = parseInt(input.value);

    if (operator === "+") {
        value += 1;
    } else if (operator === "-" && value > 0) {
        value -= 1;
    }

    input.value = value;
}

// function setBorderRadius(value, event) {
//     event.preventDefault();
//     document.getElementById("border-radius").value = value;
// }

function setBorderRadius(value, event) {
    event.preventDefault();
    document.getElementById("border-radius").value = value;
    // Remove 'active' class from all buttons
    var buttons = document.getElementsByClassName("pp-borderradius-btn");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].classList.remove("active");
    }
    // Add 'active' class to the clicked button
    event.target.classList.add("active");
}

////////////////////////////////////////////////////////////////////////////////
/////////////////////////// Gradient für loginbackground color
////////////////////////////////////////////////////////////////////////////////
const colorRadio = document.getElementById("login-bg-color-radio");
const gradientRadio = document.getElementById("login-bg-gradient");
const colorFields = document.getElementById("login-bg-color-field");
const gradientFields = document.getElementById("login-bg-gradient-field");

function toggleFields() {
    if (colorRadio.checked) {
        colorFields.classList.remove("pp-hidden");
        gradientFields.classList.add("pp-hidden");
    } else if (gradientRadio.checked) {
        colorFields.classList.add("pp-hidden");
        gradientFields.classList.remove("pp-hidden");
    }
}

colorRadio.addEventListener("change", toggleFields);
gradientRadio.addEventListener("change", toggleFields);

toggleFields(); // Ensure the correct fields are shown on page load

////////////////////////////////////////////////////////////////////////////////
/////////////////////////// loader refresh after 1sec
////////////////////////////////////////////////////////////////////////////////
var timeoutID;

// Function to show the loader and refresh the page after 1 second
function showLoaderAndRefresh() {
    var loader = document.querySelector(".loader");

    loader.style.display = "block";

    timeoutID = setTimeout(function () {
        window.location.reload();
    }, 1000);
}

// Hide the loader and clear the timeout when the page finishes loading
window.addEventListener("load", function () {
    var loader = document.querySelector(".loader");
    loader.style.display = "none";

    clearTimeout(timeoutID);
});

// Show the loader and set the timeout when the page is being refreshed
window.addEventListener("beforeunload", showLoaderAndRefresh);
////////////////////////////////////////////////////////////////////////////////
/////////////////////////// nnnnnn
////////////////////////////////////////////////////////////////////////////////