Userscript Gallerie d'images

// ==UserScript==
// @name           Galerie d'images
// @namespace      fr.kergoz-panic.watilin
// @description    Génère une galerie dynamique à partir de liens d'images
// @version        1.0
// @include        *
// @exclude        https://www.facebook.com/*
// @grant          none
// ==/UserScript==

// si pas de liens d'images dans la page, le script s'arrête
if (!document.querySelectorAll(
  'a[href$=".jpg"], a[href$=".png"], a[href$=".gif"], a[href$=".bmp"]'
).length) return;

{///////////////// styles //////////////////////////////////////////////
GM_addStyle(
'#GMU-diapo-shader\
{\
  background: black;\
  opacity: 0.4;\
  position: fixed;\
  z-index: 1000;\
  top: 0;\
  left: 0;\
}\
#GMU-diapo-wrapper\
{\
  position: absolute;\
  background: black;\
  color: white;\
  text-align: center;\
  font-family: sans-serif;\
  z-index: 1001;\
  top: 1em;\
  margin: 0;\
  padding: 1ex;\
}\
#GMU-diapo-launch\
{\
  position: fixed;\
  bottom: 0;\
  right: 0;\
  z-index: 1000;\
  opacity: 0.67;\
  display: block;\
  background: black;\
  color: white;\
  font-size: small;\
  padding: 0.4ex 1ex 0.4ex 2ex;\
  font-family: sans-serif;\
  text-decoration: none;\
  -moz-border-radius: 2ex 0 0 0;\
}\
.GMU-padded { margin: 0.4em 1em }\
#GMU-diapo-controls a\
{\
  position: absolute;\
  background: black;\
  color: white;\
  opacity: 0.5;\
  display: block;\
  width: 40px;\
  height: 40px;\
  font-family: consolas, "courier new", monospace;\
  font-size: 30px;\
  text-align: center;\
  cursor: pointer;\
}\
#GMU-diapo-controls a:hover\
{\
  opacity: 0.75;\
}\
#GMU-diapo-debug\
{\
  display: block;\
  position: fixed;\
  z-index: 1002;\
  top: 1em;\
  right: 1em;\
  padding: 1ex;\
  min-width: 20em;\
  max-height: 10em;\
  font: 0.6em "courier new";\
  background: white;\
  color: gray;\
  border: solid medium gray;\
  text-align: right;\
  overflow: hidden;\
}\
'
);

}
{///////////// variables et fonctions //////////////////////////////////
var Globals = {
  $launch: null,
  $wrapper: null,
  $shader: null,
  $pic: null,
  $controls: null,
  $swap: null,
  $prev: null,
  $next: null,
  $play: null,
  $stop: null,
  $close: null,
  $debug: null,
}

var Controls = {
  DELTA: 0.1,
  FRAME: 15,

  $: null,
  shown: false,
  hideTimer: 0,
  animTimer: 0,

  show: function show() {
    var $style = Controls.$.style;
    $style.display = '';
    // l'opacité n'est pas remise à 0
    function anim() {
      var opacity = $style.opacity * 1;
      if (opacity + Controls.DELTA > 1) {
        $style.opacity = '1';
      } else {
        $style.opacity = opacity + Controls.DELTA;
        Controls.animTimer = setTimeout(anim, Controls.FRAME);
      }
    }
    anim();
  }, // show

  hide: function hide() {
    var $style = Controls.$.style;
    function anim() {
      var opacity = $style.opacity * 1;
      if (opacity - Controls.DELTA < 0) {
        $style.opacity = '0';
        $style.display = 'none';
      } else {
        $style.opacity = opacity - Controls.DELTA;
        Controls.animTimer = setTimeout(anim, Controls.FRAME);
      }
    }
    anim();
  }, // hide

  mousemove: function mousemove( e ) {
    if (!Controls.shown) {
      clearTimeout(Controls.animTimer);
      Controls.show();
      Controls.shown = true;
    } else {
      clearTimeout(Controls.hideTimer);
      if ('A' != e.target.tagName) {
        // les contrôles ne sont pas masqués si le curseur en survole un
        Controls.hideTimer = setTimeout(function() {
          Controls.hide();
          Controls.shown = false;
        }, 1500);
      }
    }
  }, // mousemove

  mouseout: function mouseout() {
    clearTimeout(Controls.animTimer);
    clearTimeout(Controls.hideTimer);
    Controls.hide();
    Controls.shown = false;
  }, // mouseout

  keyup: function keyup( e ) {
    if (17 == e.keyCode) {
      Diapo.removeMovable();
    }
  }, // keyup

  keydown: function keydown( e ) {
    var actions = {
      17: 'setMovable',    // ctrl
      27: 'close',         // echap
      32: 'togglePlaying', // espace
      37: 'prev',          // gauche
      39: 'next',          // droite
    };
    var k = e.keyCode;
    if (k in actions) {
      e.preventDefault();
      Diapo[actions[k]]();
    }
  }, // keydown

  rearrange: function rearrange() {
    var mx = Globals.$wrapper.offsetWidth / 2;
    var my = Globals.$wrapper.offsetHeight / 2;
    var px = mx - 20;
    var py = my - 20;
    Globals.$prev.style.left = px - 55 + 'px';
    Globals.$prev.style.top = py + 'px';
    Globals.$next.style.left = px + 55 + 'px';
    Globals.$next.style.top = py + 'px';
    Globals.$stop.style.left = px + 'px';
    Globals.$stop.style.top = py + 'px';
    Globals.$play.style.left = px + 'px';
    Globals.$play.style.top = py + 'px';
  }, // rearrange

  set: function set( $ ) {
    Controls.$ = $;
  }
} // Controls

var Diapo = {

  hrefs: [],
  index: 0,
  period: 6500,
  timer: 0,
  playing: false,

  prev: function prev() {
    Diapo.index = Diapo.index > 0
      ? Diapo.index - 1
      : Diapo.hrefs.length - 1;
    Globals.$pic.src = Diapo.hrefs[Diapo.index];
    centerWrapper();
    Controls.rearrange();
  }, // prev

  next: function next() {
    Diapo.index = Diapo.index < Diapo.hrefs.length - 1
      ? Diapo.index + 1
      : 0;
    Globals.$pic.src = Diapo.hrefs[Diapo.index];
    centerWrapper();
    Controls.rearrange();
  }, // next

  play: function play() {
    Diapo.timer = setInterval(Diapo.next, Diapo.period);
    Globals.$play.style.display = 'none';
    Globals.$stop.style.display = '';
    Diapo.playing = true;
  }, // play

  stop: function stop() {
    clearInterval(Diapo.timer);
    Globals.$stop.style.display = 'none';
    Globals.$play.style.display = '';
    Diapo.playing = false;
  }, // stop

  togglePlaying: function togglePlaying() {
    if (Diapo.playing) {
      Diapo.stop();
    } else {
      Diapo.play();
    }
  }, // togglePlaying

  close: function close() {
    window.removeEventListener('keydown', Controls.keydown, false);
    Globals.$wrapper.style.display = 'none';
    Globals.$shader.style.display = 'none';
    $launch.style.display = '';
  }, // close

  setMovable: function setMovable() {
    Globals.$wrapper.style.cursor = 'move';
  }, // setMovable

  removeMovable: function removeMovable() {
    Globals.$wrapper.style.cursor = 'default';
  }, // removeMovable

  load: function load() {
    // recherche des liens
    Diapo.hrefs = Array.map(
      document.querySelectorAll('a[href$=".jpg"]'),
      function($) $.href
    );

    // mise en cache des images
    var $pic = Globals.$pic,
      $wrapper = Globals.$wrapper;
    function start() {
      $pic.removeEventListener('load', start, false);
      Diapo.play();
    }
    $pic.addEventListener('load', start, false);
    $pic.addEventListener('load', function() {
      $wrapper.replaceChild($pic, $wrapper.firstChild);
      centerWrapper();
      Controls.rearrange();
    }, false);
    $pic.src = Diapo.hrefs[0];
    for (var i = 1, src; src = Diapo.hrefs[i++];) {
      new Image().src = src;
    }
  }, // load

  debug: function debug( text ) {
    var $debug = Globals.$debug;
    $debug.style.display = '';
    if ($debug.firstChild) {
      $debug.insertBefore(document.createTextNode(text + '\n'), $debug.firstChild);
    } else {
      $debug.appendChild(document.createTextNode(text + '\n'));
    }
  } // debug

} // Diapo

function resizeShader() {
  var $style = Globals.$shader.style;
  $style.width = window.innerWidth + 'px';
  $style.height = window.innerHeight + 'px';
} // resizeShader

function centerWrapper() {
  var $wrapper = Globals.$wrapper;
  var width = $wrapper.offsetWidth;
  if (width >= window.innerWidth) {
    $wrapper.style.left = 0;
  } else {
    $wrapper.style.left = (window.innerWidth - width) / 2 + 'px';
  }
  var height = $wrapper.offsetHeight;
  if (height >= window.innerHeight) {
    $wrapper.style.top = 0;
  } else {
    $wrapper.style.top = (window.innerHeight - height) / 3 + 'px';
  }
} // centerWrapper

}
{/////////////// initialisation ////////////////////////////////////////

var launched = false;

function launchDiapo( e ) {
  e.preventDefault();
  $launch.style.display = 'none';
  window.addEventListener('keyup', Controls.keyup, false);
  window.addEventListener('keydown', Controls.keydown, false);

  if (!launched) {/////////////////////////////////////////////

  // créations du shader, l'ombre qui couvre toute la page
  var $shader = Globals.$shader = document.createElement('div');
  $shader.id = 'GMU-diapo-shader';
  resizeShader();
  document.body.appendChild($shader);

  // création de l'image principale
  var $pic = Globals.$pic = new Image();
  $pic.id = 'GMU-pic';

  // création du bloc central
  var $wrapper = Globals.$wrapper = document.createElement('div');
  $wrapper.id = 'GMU-diapo-wrapper';
  var $span = document.createElement('span');
  $span.className = 'GMU-padded';
  $span.appendChild(document.createTextNode('Veuillez patienter\u2026'));
  $wrapper.appendChild($span);
  var $img = new Image();
  $img.src = 'spinner.gif';
  setTimeout(centerWrapper, 10); // différation (si ça se dit) nécessaire pour prendre en compte la nouvelle largeur

  // création du calque de contrôles
  var $controls = Globals.$controls = document.createElement('div');
  $controls.id = 'GMU-diapo-controls';
  $controls.style.display = 'none';

  // création des contrôles
  var $prev = Globals.$prev = document.createElement('a');
  $prev.title = 'image précédente';
  $prev.appendChild(document.createTextNode('←'));
  $controls.appendChild($prev);

  var $next = Globals.$next = document.createElement('a');
  $next.title = 'image suivante';
  $next.appendChild(document.createTextNode('→'));
  $controls.appendChild($next);

  var $stop = Globals.$stop = document.createElement('a');
  $stop.title = 'arrêter le diaporama';
  $stop.appendChild(document.createTextNode('■'));
  $controls.appendChild($stop);

  var $play = Globals.$play = document.createElement('a');
  $play.title = 'lancer le diaporama';
  $play.appendChild(document.createTextNode('►')); // ▸
  $controls.appendChild($play);

  var $close = Globals.$close = document.createElement('a');
  $close.title = 'fermer';
  $close.appendChild(document.createTextNode('✕'));
  $close.style.top = '0';
  $close.style.right = '0';
  $controls.appendChild($close);

  Controls.set($controls);
  $wrapper.appendChild($controls);
  setTimeout(Controls.rearrange, 10);

  // création de la boîte d'infos de débogage
  var $debug = Globals.$debug = document.createElement('pre');
  $debug.id = 'GMU-diapo-debug';
  $debug.style.display = 'none';
  document.body.appendChild($debug);

  // insertion des éléments dans la page
  document.body.appendChild($wrapper);
  window.addEventListener('resize', function() {
    resizeShader();
    centerWrapper();
  }, false);

  Diapo.load();

  // interaction avec les contrôles
  $prev.addEventListener('click', Diapo.prev, false);
  $next.addEventListener('click', Diapo.next, false);
  $play.addEventListener('click', Diapo.play, false);
  $stop.addEventListener('click', Diapo.stop, false);
  $close.addEventListener('click', Diapo.close, false);
  $wrapper.addEventListener('mousemove', Controls.mousemove, false);
  $wrapper.addEventListener('mouseout', Controls.mouseout, false);

  launched = true;

  } else {/////////////////////////////////////////////////////

  Globals.$shader.style.display = '';
  Globals.$wrapper.style.display = '';

  }
} // launchDiapo

// création du bouton de lancement
$launch = document.createElement('a');
$launch.id = 'GMU-diapo-launch';
$launch.href = '#';
$launch.appendChild(document.createTextNode('Diaporama'));
$launch.addEventListener('click', launchDiapo, false);
document.body.appendChild($launch);

}