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
 
(84 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 slideIndex = 0;
var coll = document.getElementsByClassName("collapsible-battle-pass");
showSlides();
var i;
//add the global timer variable
var slides,dots,timer;


function showSlides() {
for (i = 0; i < coll.length; i++) {
    var i;
  coll[i].addEventListener("click", function() {
    slides = document.getElementsByClassName("mySlides");
    this.classList.toggle("active");
    dots = document.getElementsByClassName("dot");
     var content = this.nextElementSibling;
    for (i = 0; i < slides.length; i++) {
     if (content.style.maxHeight){
      slides[i].style.display = "none";
      content.style.maxHeight = null;
     }
     } else {
    slideIndex++;
      content.style.maxHeight = content.scrollHeight + "px";
     if (slideIndex> slides.length) {slideIndex = 1}   
     }
    for (i = 0; i < dots.length; i++) {
  });
        dots[i].className = dots[i].className.replace(" active", "");
     }
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active";
     //put the timeout in the timer variable
    timer = setTimeout(showSlides, 4000); // Change image every 8 seconds
}
}


function plusSlides(position) {
var coll = document.getElementsByClassName("collapsible-pokemon");
    //clear/stop the timer
var p;
    clearTimeout(timer);
 
    slideIndex +=position;
for (p = 0; p < coll.length; p++) {
    if (slideIndex> slides.length) {slideIndex = 1}
  coll[p].addEventListener("click", function() {
    else if(slideIndex<1){slideIndex = slides.length}
    this.classList.toggle("active");
    for (i = 0; i < slides.length; i++) {
     var content = this.nextElementSibling;
      slides[i].style.display = "none"
     if (content.style.maxHeight){
    }
      content.style.maxHeight = null;
    for (i = 0; i < dots.length; i++) {
     } else {
        dots[i].className = dots[i].className.replace(" active", "");
      content.style.maxHeight = content.scrollHeight + "px";
     }
     }
     slides[slideIndex-1].style.display = "block";
  });
     dots[slideIndex-1].className += " active";
     //create a new timer
    timer = setTimeout(showSlides, 4000);
}
}
var tUpload = document.getElementById('t-upload');
      var pTb = document.getElementById('p-tb');


function currentSlide(index) {
      if (!tUpload) {
    //clear/stop the timer
        if (pTb) {
    clearTimeout(timer);
          pTb.style.display = 'none';
    if (index> slides.length) {index = 1}
        }
    else if(index<1){index = slides.length}
      }
    //set the slideIndex with the index of the function
 
    slideIndex = index;
 
    for (i = 0; i < slides.length; i++) {
/* Teste */
      slides[i].style.display = "none";
 
    }
function slider(){
    for (i = 0; i < dots.length; i++) {
  const slider = document.querySelectorAll('.slide');
        dots[i].className = dots[i].className.replace(" active", "");
  const timer = 10000;
     }
  slider[0].style.display = 'block';
     slides[index-1].style.display = "block";
  bullets = sliderBulletsCreation(slider);
     dots[index-1].className += " active";
  sliderLoop(slider, timer, bullets);
     //create a new timer
};
     timer = setTimeout(showSlides, 4000);
 
}
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();

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