MediaWiki:Common.js: Difference between revisions

From PsychoactiveWiki
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 19: Line 19:
                 format: 'json'
                 format: 'json'
             }).done(function (data) {
             }).done(function (data) {
                 // FIX: MediaWiki stores wikitext under ['*']
                 // MediaWiki stores wikitext under ['*']
                 textbox.value = data.parse.wikitext['*'];
                 textbox.value = data.parse.wikitext['*'];
             });
             });
Line 26: Line 26:
});
});


//aesthetic
// ==========================
/* Psychedelic prog-rock background controller
// Aesthetic – Psychedelic 70s frame (with saved state)
* Uses CSS variables on :root to swap color palettes.
// ==========================
*/
/* Psychedelic 70s frame – dark mode + white text */
mw.loader.using('jquery', function () {
mw.loader.using('jquery', function () {
     // Enable the psychedelic layout on every page.
     var body = document.body;
     document.body.classList.add('psychedelic-wiki');
     var STORAGE_KEY = 'psy70-frame-state'; // 'on' or 'off'


    // Turn on the theme base class
    body.classList.add('psy70');
    // Restore saved on/off state from localStorage (default: ON)
    var storedState = null;
    try {
        storedState = window.localStorage.getItem(STORAGE_KEY);
    } catch (e) {
        // localStorage not available (privacy mode, etc.) – ignore
    }
    if (storedState === 'off') {
        body.classList.add('psy70-off');
    }
    // Grain overlay element
    var grain = document.createElement('div');
    grain.id = 'psy70-grain';
    body.appendChild(grain);
    // Color palettes with 70s prog/psych vibes
     var palettes = [
     var palettes = [
         {
         {
            // Warm prism / Dark Side of the Moon–ish
             name: 'Sunburst',
             name: 'Dark Side',
             a: '#ff9a00',
             c1: '#ff7a18',
             b: '#ff005c',
             c2: '#af002d',
             c: '#7b5cff',
             c3: '#00e6ff',
             d: '#00f0ff'
             c4: '#7cff6b',
            grid: 'rgba(255, 255, 255, 0.06)'
         },
         },
         {
         {
            // Hawkwind / Space Ritual neon
             name: 'Pastoral',
             name: 'Space Ritual',
             a: '#ffb347',
             c1: '#ff008c',
             b: '#ff6a88',
             c2: '#ffcd00',
             c: '#48c6ef',
             c3: '#4af2c5',
             d: '#3fffa8'
             c4: '#7b5cff',
            grid: 'rgba(255, 255, 255, 0.05)'
         },
         },
         {
         {
            // Lava lamp oranges & blues
             name: 'Cosmic',
             name: 'Lava Lamp',
             a: '#ff4b1f',
             c1: '#ff5f6d',
             b: '#1fddff',
             c2: '#ffc371',
             c: '#7f00ff',
             c3: '#36d1dc',
             d: '#ffe000'
             c4: '#5b86e5',
            grid: 'rgba(255, 255, 255, 0.04)'
         },
         },
         {
         {
            // Foresty / pastoral prog
             name: 'Acid',
             name: 'Forest Prog',
             a: '#fdfc47',
             c1: '#00c9ff',
             b: '#24fe41',
             c2: '#92fe9d',
             c: '#ff00aa',
             c3: '#f5af19',
             d: '#ff5f6d'
             c4: '#f12711',
            grid: 'rgba(255, 255, 255, 0.05)'
         }
         }
     ];
     ];


     function applyPalette(palette) {
     function applyPalette(p) {
         var root = document.documentElement;
         var root = document.documentElement;
         root.style.setProperty('--psy-color-1', palette.c1);
         root.style.setProperty('--psy70-color-a', p.a);
         root.style.setProperty('--psy-color-2', palette.c2);
         root.style.setProperty('--psy70-color-b', p.b);
         root.style.setProperty('--psy-color-3', palette.c3);
         root.style.setProperty('--psy70-color-c', p.c);
         root.style.setProperty('--psy-color-4', palette.c4);
         root.style.setProperty('--psy70-color-d', p.d);
        root.style.setProperty('--psy-grid-color', palette.grid);
     }
     }


     // Start on a random palette
     // Start with a random palette
     var currentIndex = Math.floor(Math.random() * palettes.length);
     var index = Math.floor(Math.random() * palettes.length);
     applyPalette(palettes[currentIndex]);
     applyPalette(palettes[index]);


     // Slowly cycle palettes (75 seconds per change)
     // Slowly rotate palettes
     window.setInterval(function () {
     window.setInterval(function () {
         currentIndex = (currentIndex + 1) % palettes.length;
         index = (index + 1) % palettes.length;
         applyPalette(palettes[currentIndex]);
         applyPalette(palettes[index]);
     }, 75000);
     }, 70000); // ~70 seconds per switch


     // Optional: toggle button to turn background on/off
     // Toggle button
     var $btn = $('<button>', {
     var $btn = $('<button>', {
         id: 'psy-bg-toggle',
         id: 'psy70-toggle',
         text: 'Psychedelic ↑'
         text: 'Psy Frame: On'
     });
     });


     function updateButtonLabel() {
     function updateButton() {
         if (document.body.classList.contains('psychedelic-wiki-off')) {
         if (body.classList.contains('psy70-off')) {
             $btn.text('Psychedelic ↓');
             $btn.text('Psy Frame: Off');
         } else {
         } else {
             $btn.text('Psychedelic ↑');
             $btn.text('Psy Frame: On');
         }
         }
     }
     }


     $btn.on('click', function () {
     $btn.on('click', function () {
         document.body.classList.toggle('psychedelic-wiki-off');
         body.classList.toggle('psy70-off');
         updateButtonLabel();
 
        // Save new state
        try {
            if (body.classList.contains('psy70-off')) {
                window.localStorage.setItem(STORAGE_KEY, 'off');
            } else {
                window.localStorage.setItem(STORAGE_KEY, 'on');
            }
        } catch (e) {
            // Ignore if localStorage fails
        }
 
         updateButton();
     });
     });


     $('body').append($btn);
     $('body').append($btn);
     updateButtonLabel();
     updateButton();
});
});

Latest revision as of 08:13, 27 November 2025

/* Any JavaScript here will be loaded for all users on every page load. */

// Auto-preload template for Shared_Experiences new story form
mw.hook('wikipage.content').add(function () {
    // Only run on new-section add
    if (
        mw.config.get('wgPageName') === 'Shared_Experiences' &&
        mw.config.get('wgAction') === 'edit' &&
        new URLSearchParams(window.location.search).get('section') === 'new'
    ) {
        var textbox = document.getElementById('wpTextbox1');

        // Only insert if the textbox is empty
        if (textbox && textbox.value.trim() === '') {
            new mw.Api().get({
                action: 'parse',
                page: 'Template:SharedExperience/Preload',
                prop: 'wikitext',
                format: 'json'
            }).done(function (data) {
                // MediaWiki stores wikitext under ['*']
                textbox.value = data.parse.wikitext['*'];
            });
        }
    }
});

// ==========================
// Aesthetic – Psychedelic 70s frame (with saved state)
// ==========================
/* Psychedelic 70s frame – dark mode + white text */
mw.loader.using('jquery', function () {
    var body = document.body;
    var STORAGE_KEY = 'psy70-frame-state'; // 'on' or 'off'

    // Turn on the theme base class
    body.classList.add('psy70');

    // Restore saved on/off state from localStorage (default: ON)
    var storedState = null;
    try {
        storedState = window.localStorage.getItem(STORAGE_KEY);
    } catch (e) {
        // localStorage not available (privacy mode, etc.) – ignore
    }

    if (storedState === 'off') {
        body.classList.add('psy70-off');
    }

    // Grain overlay element
    var grain = document.createElement('div');
    grain.id = 'psy70-grain';
    body.appendChild(grain);

    // Color palettes with 70s prog/psych vibes
    var palettes = [
        {
            name: 'Sunburst',
            a: '#ff9a00',
            b: '#ff005c',
            c: '#7b5cff',
            d: '#00f0ff'
        },
        {
            name: 'Pastoral',
            a: '#ffb347',
            b: '#ff6a88',
            c: '#48c6ef',
            d: '#3fffa8'
        },
        {
            name: 'Cosmic',
            a: '#ff4b1f',
            b: '#1fddff',
            c: '#7f00ff',
            d: '#ffe000'
        },
        {
            name: 'Acid',
            a: '#fdfc47',
            b: '#24fe41',
            c: '#ff00aa',
            d: '#ff5f6d'
        }
    ];

    function applyPalette(p) {
        var root = document.documentElement;
        root.style.setProperty('--psy70-color-a', p.a);
        root.style.setProperty('--psy70-color-b', p.b);
        root.style.setProperty('--psy70-color-c', p.c);
        root.style.setProperty('--psy70-color-d', p.d);
    }

    // Start with a random palette
    var index = Math.floor(Math.random() * palettes.length);
    applyPalette(palettes[index]);

    // Slowly rotate palettes
    window.setInterval(function () {
        index = (index + 1) % palettes.length;
        applyPalette(palettes[index]);
    }, 70000); // ~70 seconds per switch

    // Toggle button
    var $btn = $('<button>', {
        id: 'psy70-toggle',
        text: 'Psy Frame: On'
    });

    function updateButton() {
        if (body.classList.contains('psy70-off')) {
            $btn.text('Psy Frame: Off');
        } else {
            $btn.text('Psy Frame: On');
        }
    }

    $btn.on('click', function () {
        body.classList.toggle('psy70-off');

        // Save new state
        try {
            if (body.classList.contains('psy70-off')) {
                window.localStorage.setItem(STORAGE_KEY, 'off');
            } else {
                window.localStorage.setItem(STORAGE_KEY, 'on');
            }
        } catch (e) {
            // Ignore if localStorage fails
        }

        updateButton();
    });

    $('body').append($btn);
    updateButton();
});