MediaWiki:Common.js: Unterschied zwischen den Versionen

Aktuelle Version vom 7. November 2022, 22:40 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */

var lastTouchTime = 0;
var isTouched = false;
var isTouchDevice = false;
var timer = null;;
var touchduration = 500;

/* Fügt Hover-Klassen und Events hinzu, wenn eine Maus am Gerät vorhanden ist*/
function addHover() {
  /* Hover-Klasse hasHover für Objekte mit Klasse touch-dev hinzufügen */
  var touch_div = document.getElementsByClassName("touch-dev");
  for(var i = 0; i < touch_div.length; i++)
  {
    touch_div[i].classList.add('hasHover');
  }
  /* Popover Funktion für Hover-getriggerte Popover-Elemente hinzufügen */
  $('[data-toggle="popover"][data-trigger="hover"]').popover();
}

/* Entfernt Hover-Klassen und Events, wenn es ein Touch-Device ist */
function removeHover() {
  /* Hover-Klasse hasHover für Objekte mit Klasse touch-dev löschen */
  var touch_div = document.getElementsByClassName("touch-dev");
  for(var i = 0; i < touch_div.length; i++)
  {
    touch_div[i].classList.remove('hasHover');
  }
  /* Popover Funktion für Hover-getriggerte Popover-Elemente löschen */
  $('[data-toggle="popover"][data-trigger="hover"]').popover('dispose');
}

/* Wenn ein Mouse-Move-Event erkannt wird und kein Touch seit 500ms, dann ist es KEIN TouchDevice */
function mousemove_event() {
  if (isTouched || (new Date() - lastTouchTime < 500)) return
  addHover();
  isTouchDevice = false;
}

/* Wenn ein Touch-Start-Event erkannt wird, dann ist es einTouchDevice */
function touchstart_event() {
  if (!isTouchDevice) removeHover();
  isTouched = true;
  isTouchDevice = true;
}

/* Touch-Ende-Event merken und Timer setzen */
function touchend_event() {
  isTouched = false;
  lastTouchTime = new Date();
}

/* Events zur Erkennung eines Touch-Devices mit Funktionen hinterlegen */
document.addEventListener('touchstart', touchstart_event, true);
document.addEventListener('touchend', touchend_event, true);
document.addEventListener('mousemove', mousemove_event, true);

/* Hover Funktionen per Default einschalten */
addHover();

/* Wenn Touch-Start-Event erkannt wird, dann Klasse touchDevice-hovered hinzufügen und Timer für longpress starten */
function touchstart_element_event() {
  this.classList.add('touchDevice-hovered');
  if (!timer) {
    timer = setTimeout(onlongtouch.bind(this), touchduration);
  }
}

/* Wenn Touch-End-Event erkannt wird, dann touchDevice-Klassen löschen und Timer abbrechen */
function touchend_element_event() {
  this.classList.remove('touchDevice-hovered');
  this.classList.remove('touchDevice-longpress')
  cancel_timer();
}

/* Timer löschen */
function cancel_timer() {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
}

/* Nach Timerablauf ist es ein Longpress und daher Klasse touchDevice-longpress hinzufügen */
function onlongtouch() { 
  timer = null;
  this.classList.add('touchDevice-longpress');
}

/* Suche alle Elemente mit Klasse touch-dev und hinterlege Listener */
var touch_div = document.getElementsByClassName("touch-dev");
for(var i = 0; i < touch_div.length; i++)
{
  touch_div[i].addEventListener('touchstart', touchstart_element_event, true);

  touch_div[i].addEventListener('touchend', touchend_element_event, true);
  touch_div[i].addEventListener('touchmove', cancel_timer, true);

  touch_div[i].addEventListener('touchcancel', cancel_timer, true);
  
  touch_div[i].addEventListener("contextmenu", function(event) {
    if (isTouchDevice) {
      event.preventDefault();
      event.stopPropagation();
      return false;
    }
  });
  
}

/* Schalte Popover Funktion auf allen Seiten ein */
$(function () {
  $('[data-toggle="popover"]').popover();
  $('[data-toggle="popover"] > a').removeAttr("title");
})