SVGAnimation.js

   1
   2 // === Fonctions d'appui -------------------------------------------------------
   3 function addListener(e,b,h) {
   4   if (e.addEventListener)
   5     e.addEventListener(b,h,false);
   6   else if (e.attachEvent)
   7     e.attachEvent('on' + b, h);
   8 }
   9
  10 function padNombre(n, l) {
  11   var str = n.toString();
  12   while (str.length < l) { str = '0' + str; }
  13   return str;
  14 }
  15
  16 // -----------------------------------------------------------------------------
  17 // === Prototype Animation -----------------------------------------------------
  18 // -----------------------------------------------------------------------------
  19                         // Constructeur //
  20 function Animation(id, prefixe, min, max) {
  21   this.me = this;
  22
  23   // --- Propriétés à fixer à l'initialisation ---------------------------------
  24   this.id = id;            // id de l'animation dans le corps du document
  25   this.prefixe = prefixe;  // préfixe des fichiers de l'animation (hors indice)
  26   this.imin = min;         // index minimal des images
  27   this.imax = max;         // index maximal des images
  28
  29   // --- Propriétés à modifier éventuellement ----------------------------------
  30   this.pad = 0;            // padding éventuel des indices
  31   this.delai = 50;         // delai entre deux images
  32
  33   // --- Propriétés d'usage ----------------------------------------------------
  34   this.images = [];        // Stockage des images de l'animation
  35   this.container = "";     // Le container de l'animation, identifié par son id
  36   this.image = "";         // Le container de l'image courante de l'animation
  37   this.message = "";       // Le container du message
  38   this.boutons = "";       // Le container des boutons
  39   this.action = false;     // L'état de l'animation
  40   this.index = 0;          // Index courant de l'image de l'animation
  41   this.imgload = 0;        // Compteur d'images téléchargées
  42   this.ready = false;      // Animation prête ou non
  43 }
  44
  45 // --------------------------- Méthodes additionnelles -------------------------
  46 Animation.prototype.setImage = function(i) {
  47   this.image.setAttribute('src', this.images[i].src);
  48 }
  49
  50 Animation.prototype.click = function(e) {
  51   var self = this.me;
  52   self.action = !self.action;
  53   self.rotate();
  54 }
  55
  56 Animation.prototype.next = function() {
  57  if (this.index < this.imax) {
  58    this.setImage(++this.index);
  59  } else this.first();
  60 }
  61
  62 Animation.prototype.previous = function() {
  63   if (this.index > this.imin) {
  64     this.setImage(--this.index);
  65   } else this.last();
  66 }
  67
  68 Animation.prototype.first = function() {
  69   this.setImage(this.index = this.imin);
  70 }
  71
  72 Animation.prototype.last = function() {
  73   this.setImage(this.index = this.imax);
  74 }
  75
  76 Animation.prototype.rotate = function() {
  77   var self = this.me;
  78   if (self.action) {
  79     self.next();
  80     window.setTimeout(self.rotate.bind(self),self.delai);
  81   }
  82 }
  83
  84 Animation.prototype.setOnload = function() {
  85   this.imgload++;
  86   if (this.imgload == this.imax) { this.ready = true;}
  87 }
  88
  89 Animation.prototype.preloader = function() {
  90   var self = this.me;
  91   for(var i = this.imin; i <= this.imax; i++) {
  92     this.images[i]        = new Image();
  93     this.images[i].src    = this.prefixe + padNombre(i,this.pad) + '.svg';
  94     this.images[i].onload = self.setOnload(this);
  95   }
  96 }
  97
  98 Animation.prototype.loopOnload = function() {
  99   var self = this.me;
 100   this.imgload    = document.all ? 1 : 0;
 101   this.container = document.getElementById(this.id);
 102   this.image     = this.container.childNodes[0];
 103   if (!this.image.getAttribute) this.image = this.container.childNodes[1];
 104   this.message  = document.getElementById(this.id + '_message');
 105   this.boutons  = document.getElementById(this.id + '_boutons');
 106   this.boutons.innerHTML = "";
 107   this.message.innerHTML = "Chargement...";
 108   this.image.style.display = "none";
 109   this.width  = this.image.style.width;
 110   this.height = this.image.style.height;
 111   this.preloader();
 112 }
 113
 114 // -----------------------------------------------------------------------------
 115 // === Prototype(s) Controle ---------------------------------------------------
 116 // -----------------------------------------------------------------------------
 117 // Prototype générique
 118 // Il met en place le contrôle simple de l'animation par click sur l'image, les
 119 // autres s'obtiendront par surcharge de la méthode [Initialisation]
 120 function Controle(a) {
 121   this.me = this;
 122   this.a = a;           // Animation contrôlée
 123 }
 124 Controle.prototype = {
 125   Initialisation: function() {
 126       var anim = this.a;
 127       anim.image.style.display = 'inline';
 128       anim.message.innerHTML = "Cliquez sur l'image pour lancer/stopper l'animation.";
 129       anim.boutons = "";
 130       addListener(anim.image, 'click', anim.click.bind(anim));
 131     },
 132   connect: function() {
 133       var self = this.me;
 134       if (this.a.ready) {
 135         this.Initialisation();
 136       } else {
 137         setTimeout(self.connect,100);
 138       }
 139     }
 140 };