MediaWiki:Common.js: Difference between revisions

From Essence of Flow Wiki
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */


function setupLevelSliders() {
function setupLevelSliderSpan(wrapperSelector, min, max) {
  // find all slider wrappers
    const wrapper = document.querySelector(wrapperSelector);
  const wrappers = document.querySelectorAll('.level-slider-wrapper');
    if (!wrapper) return;


  wrappers.forEach(wrapper => {
    const slider = wrapper.querySelector('input[type="range"]');
     const valueDisplay = wrapper.querySelector('.levelValue');
     const valueDisplay = wrapper.querySelector('.levelValue');
     const increase = wrapper.querySelector('.increase');
     const increase = wrapper.querySelector('.increase');
     const decrease = wrapper.querySelector('.decrease');
     const decrease = wrapper.querySelector('.decrease');


     if (!slider || !valueDisplay || !increase || !decrease) return;
     if (!valueDisplay || !increase || !decrease) return;


     slider.addEventListener('input', () => {
     const updateDisplay = () => {
      valueDisplay.textContent = slider.value;
        valueDisplay.textContent = valueDisplay.dataset.value;
     });
     };


     increase.addEventListener('click', () => {
     increase.addEventListener('click', () => {
      if (slider.value < parseInt(slider.max)) slider.value = parseInt(slider.value) + 1;
        let current = parseInt(valueDisplay.dataset.value);
      valueDisplay.textContent = slider.value;
        if (current < max) valueDisplay.dataset.value = current + 1;
        updateDisplay();
     });
     });


     decrease.addEventListener('click', () => {
     decrease.addEventListener('click', () => {
      if (slider.value > parseInt(slider.min)) slider.value = parseInt(slider.value) - 1;
        let current = parseInt(valueDisplay.dataset.value);
      valueDisplay.textContent = slider.value;
        if (current > min) valueDisplay.dataset.value = current - 1;
        updateDisplay();
     });
     });


     // initialize display
     // initialize display
     valueDisplay.textContent = slider.value;
     updateDisplay();
  });
}
}


document.addEventListener('DOMContentLoaded', setupLevelSliders);
// On page load
document.addEventListener('DOMContentLoaded', () => {
    setupLevelSliderSpan('.level-slider-wrapper', 1, 10);
});

Revision as of 21:54, 18 December 2025

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

function setupLevelSliderSpan(wrapperSelector, min, max) {
    const wrapper = document.querySelector(wrapperSelector);
    if (!wrapper) return;

    const valueDisplay = wrapper.querySelector('.levelValue');
    const increase = wrapper.querySelector('.increase');
    const decrease = wrapper.querySelector('.decrease');

    if (!valueDisplay || !increase || !decrease) return;

    const updateDisplay = () => {
        valueDisplay.textContent = valueDisplay.dataset.value;
    };

    increase.addEventListener('click', () => {
        let current = parseInt(valueDisplay.dataset.value);
        if (current < max) valueDisplay.dataset.value = current + 1;
        updateDisplay();
    });

    decrease.addEventListener('click', () => {
        let current = parseInt(valueDisplay.dataset.value);
        if (current > min) valueDisplay.dataset.value = current - 1;
        updateDisplay();
    });

    // initialize display
    updateDisplay();
}

// On page load
document.addEventListener('DOMContentLoaded', () => {
    setupLevelSliderSpan('.level-slider-wrapper', 1, 10);
});