Conception de contrôles Web JavaScript avancés : Créer une table HTML éditable - HtmlEditTable v2.0

Un nœud table possède une collection tBodies (1) de tous les objets tbody qu'il contient (une table pouvant avoir plus d'un tbody…). De fait on peut remplacer les

getElementsByTagName("tbody")[0]

par

tBodies[0]

Afin que le texte de la zone de texte soit sélectionné au moment de l'édition, modifions le constructeur de la classe HtmlEdit et la fonction HtmlEdit.AppendTo() :

var HtmlEdit = function(value){
  [...]
  this.control.select();
};

HtmlEdit.prototype = {
  AppendTo: function(parent){
    [...]
    this.control.select();
    this.control.focus();
  }
}

Lorsqu'une cellule entre en édition, i.e. quand son contenu textuel est remplacé par une zone de texte, les événements gérés au niveau de la cellule n'ont plus lieu d'être. Au contraire, ils parasiteront ceux gérés au niveau de la zone de texte. On va donc les supprimer à l'édition (sachant qu'à la fin de l'édition ils sont de toute façon repositionnés par la fonction HtmlEditTableHelper.CellInitialize()).

La suppression des gestionnaires d'événement au niveau de la cellule sera effectuée par la fonction HtmlEditTableHelper.CellNeutralizeEvents() :

CellNeutralizeEvents: function(cell){
  if (cell){
    cell.onclick = null;
    cell.ondblclick = null;
  }    
}

Cette fonction est appelée au moment de l'ajout de la zone de texte dans la cellule :

AppendTo: function(parent){
  if (document.all){
    this.control.style.height = parent.clientHeight - 2*parent.clientTop + "px";
    this.control.style.width = parent.clientWidth - 2*parent.clientLeft + "px";
  }
  else{
    this.control.style.height = parent.offsetHeight - 2*parent.clientTop + "px";
    this.control.style.width = parent.offsetWidth - 2*parent.clientLeft + "px";
  }
  Tools.Purge(parent);
  HtmlEditTableHelper.CellNeutralizeEvents(parent);
  parent.appendChild(this.control);

  this.control.select();
  this.control.focus();
}

Auparavant on supprimait le gestionnaire d'événement ondblclick après l'appel à HtmlEdit.AppendTo(). Dorénavant cela n'est plus nécessaire.

DblClickHandler: function(e){
  var src = Tools.Node(Tools.Target(e), "TD");
  if (!src){
    Tools.Event(e).returnValue = false;
    return false;
  }
  var htmlEdit = new HtmlEdit(src.firstChild.data);
  htmlEdit.AppendTo(src);
  // src.ondblclick = null;
  src.grid.ActiveCellChange(src, false);
}

Pour une meilleure compréhension du code dès la première lecture, il est préférable d'utiliser des constantes aux noms explicites plutôt que des valeurs dont on ne sait pas toujours ce qu'elles représentent. En ce qui concerne la gestion des événements clavier, une classe de constantes de codes de touche serait utile même si pour l'instant le seul code utilisé est celui de la touche Entrée (13). Voici l'implémentation de la classe KeyCodes (qui pourra toujours être enrichi au fur et à mesure des besoins) :

var KeyCodes = {
  BACKSPACE: 8,
  TAB: 9,
  RETURN: 13,
  PAUSE: 19,
  CAPS_LOCK: 20,
  ESCAPE: 27,
  PAGE_UP: 33,
  PAGE_DOWN: 34,
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
  INSERT: 45,
  DELETE: 46
};

Pour l'instant la classe Tools nous est utile comme fourre-tout pour nos fonctions utilitaires. À l'avenir il sera sûrement bon de la splitter en classes utilitaires plus spécifiques regroupant des fonctionnalités ayant un rapport entre elles. Mais bon, passons cette problématique dans l'immédiat…

La classe KeyCodes associe un nom explicite aux codes de certaines touches du clavier. Ce code est obtenu par la lecture de l'attribut keyCode de l'événement déclenché. Cependant, cette méthode de détermination de la touche pressée n'est pas valable pour les touches spéciales suivantes : Alt, Ctrl, Shift. En effet, ces touches sont utilisées pour réaliser des combinaisons de touches, donc comme information supplémentaire au keyCode des touches classiques (la pression des touches Alt, Ctrl ou Shift ne suffit pas à déclencher un événement clavier). Voici l'implémentation de la fonction Tools.SpecialKeys() qui renvoie pour chacune des touches spéciales un booléen spécifiant si la touche est pressée ou non :

SpecialKeys: function(e){
  if (e.modifiers){
    var mString =(e.modifiers+32).toString(2).substring(3,6);
    return { 
      "ShiftKey": mString.charAt(0)=="1",
      "CtrlKey": mString.charAt(1)=="1",
      "AltKey": mString.charAt(2)=="1"
    };
  }
  else{ 
    return { 
      "ShiftKey": e.shiftKey,
      "CtrlKey": e.ctrlKey,
      "AltKey": e.altKey
    };
  }
}

// exemple d'utilisation dans un gestionnaire d'événement :
function myKeydownHandlerEvent(e){
  alert(Tools.SpecialKeys(e).ShiftKey); // true si la touche SHIFT est pressée, false sinon
  alert(Tools.SpecialKeys(e).CtrlKey); // true si la touche CTRL est pressée, false sinon
  alert(Tools.SpecialKeys(e).AltKey); // true si la touche ALT est pressée, false sinon    
  alert(Tools.KeyCode(e)); // code de la touche pressée ayant déclenché l'événement clavier
}