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
 
(5 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 */
var coll1 = document.getElementsByClassName("collapsible-battle-pass");
var coll = document.getElementsByClassName("collapsible-battle-pass");
var coll2 = document.getElementsByClassName("collapsible-pokemon");
var i;


for (i = 0; i < coll.length; i++) {
function toggleContent(clickedButton, contentToToggle) {
   coll[i].addEventListener("click", function() {
   // Fechar todos os conteúdos
    this.classList.toggle("active");
  var allContents = document.getElementsByClassName("content");
    var content = this.nextElementSibling;
  for (var j = 0; j < allContents.length; j++) {
    if (content.style.maxHeight){
    allContents[j].style.maxHeight = null; // Fecha todas as divs
      content.style.maxHeight = null;
   }
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
   });
}


var coll = document.getElementsByClassName("collapsible-pokemon");
   // Fechar todos os botões (remover a classe "active")
var p;
   var allButtons = document.getElementsByClassName("collapsible-battle-pass");
 
   for (var k = 0; k < allButtons.length; k++) {
for (p = 0; p < coll.length; p++) {
     allButtons[k].classList.remove("active");
   coll[p].addEventListener("click", function() {
   }
    this.classList.toggle("active");
   allButtons = document.getElementsByClassName("collapsible-pokemon");
    var content = this.nextElementSibling;
   for (var k = 0; k < allButtons.length; k++) {
    if (content.style.maxHeight){
     allButtons[k].classList.remove("active");
      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();
/* Teste Menu */


   var div1Button = document.getElementById("div1Button");
   // Agora, abrir o conteúdo da div clicada
   var div2Button = document.getElementById("div2Button");
   if (contentToToggle.style.maxHeight) {
  var div1 = document.getElementById("div1");
    contentToToggle.style.maxHeight = null; // Fecha se estiver aberto
  var div2 = document.getElementById("div2");
   } else {
 
     contentToToggle.style.maxHeight = contentToToggle.scrollHeight + "px"; // Abre
  // Função para mostrar a div1 e esconder a div2
   function showDiv1() {
     div1.classList.add("active"); // Exibe div1
    div2.classList.remove("active"); // Esconde div2
   }
   }


   // Função para mostrar a div2 e esconder a div1
   // Adicionar a classe active ao botão clicado
   function showDiv2() {
   clickedButton.classList.add("active");
    div1.classList.remove("active"); // Esconde div1
}
    div2.classList.add("active"); // Exibe div2
  }


   // Inicialmente, mostrar a div1
// Adiciona eventos de clique aos botões
   showDiv1();
for (var i = 0; i < coll1.length; i++) {
   coll1[i].addEventListener("click", function() {
    var content = this.nextElementSibling; // Conteúdo relacionado à div de botão
    toggleContent(this, content);  // Chama a função para alternar
   });
}


  // Atribuindo eventos de clique às divs de controle
for (var i = 0; i < coll2.length; i++) {
   div1Button.addEventListener("click", showDiv1);
   coll2[i].addEventListener("click", function() {
  div2Button.addEventListener("click", showDiv2);
    var content = this.nextElementSibling; // Conteúdo relacionado à div de botão
    toggleContent(this, content); // Chama a função para alternar
  });
}

Edição atual tal como às 01h32min de 25 de dezembro de 2024

var coll1 = document.getElementsByClassName("collapsible-battle-pass");
var coll2 = document.getElementsByClassName("collapsible-pokemon");

function toggleContent(clickedButton, contentToToggle) {
  // Fechar todos os conteúdos
  var allContents = document.getElementsByClassName("content");
  for (var j = 0; j < allContents.length; j++) {
    allContents[j].style.maxHeight = null; // Fecha todas as divs
  }

  // Fechar todos os botões (remover a classe "active")
  var allButtons = document.getElementsByClassName("collapsible-battle-pass");
  for (var k = 0; k < allButtons.length; k++) {
    allButtons[k].classList.remove("active");
  }
  allButtons = document.getElementsByClassName("collapsible-pokemon");
  for (var k = 0; k < allButtons.length; k++) {
    allButtons[k].classList.remove("active");
  }

  // Agora, abrir o conteúdo da div clicada
  if (contentToToggle.style.maxHeight) {
    contentToToggle.style.maxHeight = null; // Fecha se estiver aberto
  } else {
    contentToToggle.style.maxHeight = contentToToggle.scrollHeight + "px"; // Abre
  }

  // Adicionar a classe active ao botão clicado
  clickedButton.classList.add("active");
}

// Adiciona eventos de clique aos botões
for (var i = 0; i < coll1.length; i++) {
  coll1[i].addEventListener("click", function() {
    var content = this.nextElementSibling; // Conteúdo relacionado à div de botão
    toggleContent(this, content);  // Chama a função para alternar
  });
}

for (var i = 0; i < coll2.length; i++) {
  coll2[i].addEventListener("click", function() {
    var content = this.nextElementSibling; // Conteúdo relacionado à div de botão
    toggleContent(this, content);  // Chama a função para alternar
  });
}