MediaWiki:Common.js: mudanças entre as edições

De otPokemon Wiki
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(29 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
/* Códigos JavaScript aqui colocados serão carregados por todos aqueles que acessarem alguma página deste wiki */
/* Códigos JavaScript aqui colocados serão carregados por todos aqueles que acessarem alguma página deste wiki */
var coll = document.getElementsByClassName("collapsi");
var coll = document.getElementsByClassName("collapsible-battle-pass");
var i;
var i;


Linha 15: Linha 15:
}
}


const toggleDarkModeDiv = document.getElementsByClassName('clickable');
var coll = document.getElementsByClassName("collapsible-pokemon");
const content = document.getElementById('content');
var p;


for (i = 0; i < coll.length; i++) {
for (p = 0; p < coll.length; p++) {
   toggleDarkModeDiv[i].addEventListener('click', function () {
   coll[p].addEventListener("click", function() {
        if (content.classList.contains('dark-mode')) {
    this.classList.toggle("active");
            // Desativa o modo escuro se estiver ativado
    var content = this.nextElementSibling;
            disableDarkMode();
    if (content.style.maxHeight){
         } else {
      content.style.maxHeight = null;
            // Ativa o modo escuro se estiver desativado
    } else {
            enableDarkMode();
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
var tUpload = document.getElementById('t-upload');
      var pTb = document.getElementById('p-tb');
 
      if (!tUpload) {
         if (pTb) {
          pTb.style.display = 'none';
         }
         }
    });
      }
}
 
 
/* Teste */
 
function slider(){
  const slider = document.querySelectorAll('.slide');
  const timer = 10000;
  slider[0].style.display = 'block';
  bullets = sliderBulletsCreation(slider);
  sliderLoop(slider, timer, bullets);
};


if (localStorage.getItem('darkMode') === 'enabled') {
function sliderLoop(slider, timer, bullets){
         enableDarkMode();
  var timeoutFunction = [];
     }
  for (var i = 0; slide = slider[i] && (i < slider.length); i++) {
    timeoutFunction.push(setTimeout(sliderAnim.bind(null, slider, i, timer, bullets), i*timer));
  };
  bullets.forEach(function(bullet, index){
    bullet.addEventListener("click", function(event){
      console.log(index);
      timeoutFunction.forEach(function(element){
        clearTimeout(element);
      });
      var t=0;
      for (var i = index; slide = slider[i] && (i < slider.length); i++) {
         timeoutFunction.push(setTimeout(sliderAnim.bind(null, slider, i, timer, bullets), t*timer));
        t++;
      };
     })
  })
};


for (i = 0; i < coll.length; i++) {
function sliderAnim(slider, i, timer, bullets){
   toggleDarkModeDiv[i].addEventListener('click', function () {
   slider.forEach(function(slide){
        if (content.classList.contains('dark-mode')) {
    slide.style.display = 'none';
            // Desativa o modo escuro se estiver ativado
  })
            disableDarkMode();
  bullets.forEach(function(bullet){
        } else {
    bullet.style.backgroundColor = "#e5e5e5";
            // Ativa o modo escuro se estiver desativado
  })
            enableDarkMode();
  slider[i].style.display = 'block';
        }
  bullets[i].style.backgroundColor = "#007ee5";
    });
  if (i == (slider.length - 1)){setTimeout(sliderLoop.bind(null,slider, timer, bullets), timer)};
}
};


    function enableDarkMode() {
function sliderBulletsCreation(slider){
        // Ativa o modo escuro
  const sliderContainer = document.querySelector('.slider2');
        content.classList.add('dark-mode');
  const length = slider.length;
        // Salva o estado no localStorage
  const bullets = [];
        localStorage.setItem('darkMode', 'enabled');
  for (var i = 0; slide = slider[i] && (i < slider.length); i++) {
     }
    var bullet = document.createElement("div");
    bullet.classList.add('slider-bullet');
    bullet.style.right = 20 + (i * 30) + 'px';
    bullet.style.width = "20px";
    bullet.style.height = "20px";
    sliderContainer.appendChild(bullet);
     bullets.push(bullet);
  }
  return bullets;
};


    function disableDarkMode() {
slider();
        // Desativa o modo escuro
        content.classList.remove('dark-mode');
        // Salva o estado no localStorage
        localStorage.setItem('darkMode', null);
    }

Edição atual tal como às 18h40min de 15 de julho de 2024

/* Códigos JavaScript aqui colocados serão carregados por todos aqueles que acessarem alguma página deste wiki */
var coll = document.getElementsByClassName("collapsible-battle-pass");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

var coll = document.getElementsByClassName("collapsible-pokemon");
var p;

for (p = 0; p < coll.length; p++) {
  coll[p].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
var tUpload = document.getElementById('t-upload');
      var pTb = document.getElementById('p-tb');

      if (!tUpload) {
        if (pTb) {
          pTb.style.display = 'none';
        }
      }


/* Teste */

function slider(){
  const slider = document.querySelectorAll('.slide');
  const timer = 10000;
  slider[0].style.display = 'block';
  bullets = sliderBulletsCreation(slider);
  sliderLoop(slider, timer, bullets);
};

function sliderLoop(slider, timer, bullets){
  var timeoutFunction = [];
  for (var i = 0; slide = slider[i] && (i < slider.length); i++) {
    timeoutFunction.push(setTimeout(sliderAnim.bind(null, slider, i, timer, bullets), i*timer));
  };
  bullets.forEach(function(bullet, index){
    bullet.addEventListener("click", function(event){
      console.log(index);
      timeoutFunction.forEach(function(element){
        clearTimeout(element);
      });
      var t=0;
      for (var i = index; slide = slider[i] && (i < slider.length); i++) {
        timeoutFunction.push(setTimeout(sliderAnim.bind(null, slider, i, timer, bullets), t*timer));
        t++;
      };
    })
  })
};

function sliderAnim(slider, i, timer, bullets){
  slider.forEach(function(slide){
    slide.style.display = 'none';
  })
  bullets.forEach(function(bullet){
    bullet.style.backgroundColor = "#e5e5e5";
  })
  slider[i].style.display = 'block';
  bullets[i].style.backgroundColor = "#007ee5";
  if (i == (slider.length - 1)){setTimeout(sliderLoop.bind(null,slider, timer, bullets), timer)};
};

function sliderBulletsCreation(slider){
  const sliderContainer = document.querySelector('.slider2');
  const length = slider.length;
  const bullets = [];
  for (var i = 0; slide = slider[i] && (i < slider.length); i++) {
    var bullet = document.createElement("div");
    bullet.classList.add('slider-bullet');
    bullet.style.right = 20 + (i * 30) + 'px';
    bullet.style.width = "20px";
    bullet.style.height = "20px";
    sliderContainer.appendChild(bullet);
    bullets.push(bullet);
  }
  return bullets;
};

slider();