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
 
(3 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(){
   // Agora, abrir o conteúdo da div clicada
   const slider = document.querySelectorAll('.slide');
   if (contentToToggle.style.maxHeight) {
  const timer = 10000;
     contentToToggle.style.maxHeight = null; // Fecha se estiver aberto
  slider[0].style.display = 'block';
   } else {
  bullets = sliderBulletsCreation(slider);
     contentToToggle.style.maxHeight = contentToToggle.scrollHeight + "px"; // Abre
  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();
  // Adicionar a classe active ao botão clicado
  clickedButton.classList.add("active");
}


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


// Adicionando o evento de clique na "div botão" 1
for (var i = 0; i < coll2.length; i++) {
btn1.addEventListener("click", function() {
  coll2[i].addEventListener("click", function() {
  content1.classList.add("active");  // Mostra a div 1
    var content = this.nextElementSibling; // Conteúdo relacionado à div de botão
  content2.classList.remove("active"); // Esconde a div 2
    toggleContent(this, content);  // Chama a função para alternar
});
   });
 
}
// Adicionando o evento de clique na "div botão" 2
btn2.addEventListener("click", function() {
  content2.classList.add("active");  // Mostra a div 2
   content1.classList.remove("active"); // Esconde a div 1
});

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
  });
}