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
 
(25 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){
  // Agora, abrir o conteúdo da div clicada
   const sliderContainer = document.querySelector('.slider2');
   if (contentToToggle.style.maxHeight) {
  const length = slider.length;
     contentToToggle.style.maxHeight = null; // Fecha se estiver aberto
  const bullets = [];
  } else {
  for (var i = 0; slide = slider[i] && (i < slider.length); i++) {
     contentToToggle.style.maxHeight = contentToToggle.scrollHeight + "px"; // Abre
     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
function showTab(tabNumber) {
for (var i = 0; i < coll1.length; i++) {
    // Esconde todas as partes
  coll1[i].addEventListener("click", function() {
    var contents = document.querySelectorAll('.tab-content');
    var content = this.nextElementSibling; // Conteúdo relacionado à div de botão
    contents.forEach(function(content) {
    toggleContent(this, content); // Chama a função para alternar
      content.classList.remove('active');
  });
    });
}


    // Remove a classe 'active' dos "botões"
for (var i = 0; i < coll2.length; i++) {
    var buttons = document.querySelectorAll('.tab-button');
  coll2[i].addEventListener("click", function() {
    buttons.forEach(function(button) {
    var content = this.nextElementSibling; // Conteúdo relacionado à div de botão
      button.classList.remove('active');
     toggleContent(this, content); // Chama a função para alternar
    });
  });
 
}
    // Mostra a parte selecionada
     document.getElementById('tab' + tabNumber).classList.add('active');
 
    // Marca o "botão" como ativo
    buttons[tabNumber - 1].classList.add('active');
  }

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