Prolific Sidebar Toggle

Toggle the sidebar visibility

Du musst eine Erweiterung wie Tampermonkey, Greasemonkey oder Violentmonkey installieren, um dieses Skript zu installieren.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

Sie müssten eine Skript Manager Erweiterung installieren damit sie dieses Skript installieren können

(Ich habe schon ein Skript Manager, Lass mich es installieren!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Prolific Sidebar Toggle
// @version      1.1
// @description  Toggle the sidebar visibility
// @author       Lintilla
// @match        https://app.prolific.com/studies
// @grant        none
// @run-at       document-idle
// @license      MIT
// @namespace http://tampermonkey.net/
// ==/UserScript==

(function() {
    'use strict';

    const STORAGE_KEY = 'sidebar-hidden';

    function setSidebarState(hidden) {
        const sidebar = document.querySelector('.projects-sidebar');
        if (!sidebar) return;
        sidebar.style.display = hidden ? 'none' : 'block';
        localStorage.setItem(STORAGE_KEY, hidden ? '1' : '0');
    }

    function getSidebarState() {
        return localStorage.getItem(STORAGE_KEY) === '1';
    }

    function applySidebarState() {
        const sidebar = document.querySelector('.projects-sidebar');
        if (!sidebar) return;
        sidebar.style.display = getSidebarState() ? 'none' : 'block';
    }

    function addSidebarToggle() {
        const messagesLink = document.querySelector('a[data-testid="messages-link"]');
        if (!messagesLink) return;
        if (document.getElementById('sidebar-toggle-link')) return;

        const toggleLink = document.createElement('a');
        toggleLink.href = "#";
        toggleLink.id = "sidebar-toggle-link";
        toggleLink.className = "nav-link";

        function updateToggleText() {
            toggleLink.textContent = getSidebarState() ? "Show Sidebar" : "Hide Sidebar";
        }

        toggleLink.addEventListener('click', function(e) {
            e.preventDefault();
            const hidden = !getSidebarState();
            setSidebarState(hidden);
            updateToggleText();
            applySidebarState();
        });

        applySidebarState();
        updateToggleText();

        messagesLink.parentNode.insertBefore(toggleLink, messagesLink.nextSibling);
    }

    addSidebarToggle();
    const observer = new MutationObserver(() => {
        addSidebarToggle();
        applySidebarState();
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();