skins/retractable_menu.js

   1 /*
   2 * © 2007 Benoît PIN – Centre de recherche en informatique – École des mines de Paris
   3 * Licence Creative Commons http://creativecommons.org/licenses/by/2.0/
   4 *
   5 *
   6 *
   7 * element : element représentant le menu
   8 * visibleAtStartup : menu visible au début
   9 * charList : Liste des caractères à intercépter pour ce menu
  10 * step : pas (en pixels) appliqué pour les reductions/affichages du menu
  11 * direction : direction de réduction/affichage du menu = up,down,right ou left
  12 * timeStep : intervalle utilisé pour la réduction/affichage du menu
  13 */
  14
  15 function Menu(element, visibleAtStartup, charList, step, direction, timeStep)
  16 {
  17         this.element = element;
  18         this.charList = charList;
  19         this.step = step;
  20         this.direction = direction;
  21         this.timeStep = timeStep;
  22
  23         this.style = this.element.style;
  24         if (visibleAtStartup) {
  25                 this.style.visibility = 'visible'
  26                 this.visible = true;
  27         }
  28         else {
  29                 this.style.visibility = 'hidden'
  30                 this.visible = false;
  31         }
  32
  33         this.initialWidth = parseInt(this.style.width);
  34         this.initialHeight = parseInt(this.style.height);
  35
  36         if(direction == "up" || direction == "down")
  37         {
  38                 this.toModify = "height";
  39                 this.toCheck = "initialHeight";
  40         }
  41         else
  42         {
  43                 this.toModify = "width";
  44                 this.toCheck = "initialWidth";
  45         }
  46
  47         var thisMenu = this;
  48         addListener(document, 'keypress', function(evt){thisMenu.handleKeyPress(evt);});
  49 }
  50
  51
  52
  53 Menu.prototype.handleKeyPress = function(evt)
  54 {
  55         evt = getEventObject(evt);
  56         var charPress = String.fromCharCode((evt.keyCode) ? evt.keyCode : evt.which);
  57
  58         if(this.charList.indexOf(charPress) != -1)
  59         {
  60                 var thisMenu = this;
  61
  62                 if (!this.visible) {
  63                         this.idAffiche = setInterval(function(){thisMenu.afficheMenu();}, this.timeStep);
  64                         this.visible = true;
  65                 }
  66                 else {
  67                         this.initialHeight = parseInt(this.style.height);
  68                         this.initialWidth = parseInt(this.style.width);
  69                         this.idReduc = setInterval(function(){thisMenu.reducMenu();}, this.timeStep);
  70                         this.visible = false;
  71                 }
  72
  73         }
  74 }
  75
  76
  77
  78 Menu.prototype.reducMenu = function ()
  79 {
  80         var thickness = parseInt(this.style[this.toModify]);
  81
  82         thickness = (thickness-this.step);
  83
  84         if(thickness<0)
  85         {
  86                 thickness = 0;
  87                 this.style.visibility = "hidden";
  88                 clearInterval(this.idReduc);
  89         }
  90         this.style[this.toModify] = thickness+"px";
  91 };
  92
  93
  94
  95 Menu.prototype.afficheMenu = function()
  96 {
  97         this.style.visibility="visible";
  98
  99         var thickness = parseInt(this.style[this.toModify]);
 100
 101         thickness = (thickness+this.step);
 102
 103         if(thickness>this[this.toCheck])
 104         {
 105                 thickness = this[this.toCheck];
 106                 clearInterval(this.idAffiche);
 107         }
 108
 109         this.style[this.toModify] = thickness+"px";
 110 };