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

Au fil de ce tutoriel, nous avons utilisé un certain nombre de fonctions utilitaires, spécifiques à notre implémentation, qu'on ne veut pas exhiber dans l'interface de notre contrôle. Nous les avons regroupés dans l'objet HtmlEditTableHelper. Nous les avons déjà explicitées, aussi voici uniquement pour rappel la version finale de cet objet.

var HtmlEditTableHelper = {
  CellInitialize: function (cell, value){
    if (cell){
      cell.ondblclick = HtmlEditTableHelper.DblClickHandler;
      if (typeof value != "undefined"){
        cell.appendChild(document.createTextNode(value));
      }
    }
  },
    
  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;
  }
};

Au fil de ce tutoriel nous avons utilisé un certain nombre de fonctions utilitaires génériques et compatibles avec tous les navigateurs récents. Elles ont été regroupées dans l'objet Tools que voici :

var Tools = {
  Purge: function(node){
    while (node && node.hasChildNodes()){
      var child = node.firstChild;
      Tools.Purge(child);
      var attr = child.attributes;
      if (attr) {
          var n;
        var l = attr.length;
        for (var i=0; i<l; i++){
          n = attr[i].name;
          if (typeof child[n] === 'function') {
            child[n] = null;
          }
        }
      }
      child = null;
      node.removeChild(node.firstChild);
    }
  },

  Node: function(o, nodeName){
    while(o && o.nodeName != nodeName.toUpperCase()){
      o = o.parentNode;
    }
    if (o){
      return o; 
    }
    return undefined;       
  },

  Event: function(e){
    return window.event || e;
  },

  Target: function(e){
    e = Tools.Event(e);
    return e.srcElement || e.target;
  },

  KeyCode: function(e){
    e = Tools.Event(e);
    return e.keyCode || e.which;
  },

  IndexOf: function(array, value){
    for (var i=0, imax=array.length; i<imax; i++){
      if (i in array && array[i] === value){
        return i;
      }
    }
    return -1;
  }
};

• La fonction Tools.Purge() supprime tous les nœuds enfants du nœud passé en paramètre. Cette suppression est précédée de la mise à NULL de toutes les propriétés de type fonction de ces nœuds pour éviter des fuites de mémoire (principalement sous Internet Explorer).
• La fonction Tools.Node() permet de parcourir l'arborescence du nœud passé en paramètre jusqu'au premier élément parent de type nodeName.
• La fonction Tools.Event() assure la compatibilité entre les principaux navigateurs quant à la récupération de l'événement déclenché.
• La fonction Tools.Target() assure la compatibilité entre les navigateurs quant à la récupération de la cible de l'événement déclenché.
• La fonction Tools.KeyCode() assure la compatibilité entre les navigateurs quant à la récupération du code de la touche pressée lors d'un événement.
• La fonction Tools.IndexOf() renvoie l'index de la valeur value dans le tableau array, ou -1 si value n'est pas contenue par array.