[Sommaire] [Imprimer]

   1  /**
   2   * HTML_AJAX_Serialize_HA  - custom serialization
   3   *
   4   * This class is used with the JSON serializer and the HTML_AJAX_Action php class
   5   * to allow users to easily write data handling and dom manipulation related to
   6   * ajax actions directly from their php code
   7   *
   8   * See Main.js for Author/license details
   9   */
  10  function HTML_AJAX_Serialize_HA() { }
  11  HTML_AJAX_Serialize_HA.prototype =
  12  {
  13      /**
  14       *  Takes data from JSON - which should be parseable into a nice array
  15       *  reads the action to take and pipes it to the right method
  16       *
  17       *  @param    string payload incoming data from php
  18       *  @return   true on success, false on failure
  19       */
  20      unserialize: function(payload)
  21      {
  22          var actions = eval(payload);
  23          for(var i = 0; i < actions.length; i++)
  24          {
  25              var action = actions[i];
  26              switch(action.action)
  27              {
  28                  case 'prepend':
  29                      this._prependAttr(action.id, action.attributes);
  30                      break;
  31                  case 'append':
  32                      this._appendAttr(action.id, action.attributes);
  33                      break;
  34                  case 'assign':
  35                      this._assignAttr(action.id, action.attributes);
  36                      break;
  37                  case 'clear':
  38                      this._clearAttr(action.id, action.attributes);
  39                      break;
  40                  case 'create':
  41                      this._createNode(action.id, action.tag, action.attributes, action.type);
  42                      break;
  43                  case 'replace':
  44                      this._replaceNode(action.id, action.tag, action.attributes);
  45                      break;
  46                  case 'remove':
  47                      this._removeNode(action.id);
  48                      break;
  49                  case 'script':
  50                      this._insertScript(action.data);
  51                      break;
  52                  case 'alert':
  53                      this._insertAlert(action.data);
  54                      break;
  55              }
  56          }
  57      },
  58      _prependAttr: function(id, attributes)
  59      {
  60          var node = document.getElementById(id);
  61          for (var i in attributes)
  62          {
  63              //innerHTML hack bailout
  64              if(i == 'innerHTML')
  65              {
  66                  HTML_AJAX_Util.setInnerHTML(node, attributes[i], 'prepend');
  67              }
  68              //value hack
  69              else if(i == 'value')
  70              {
  71                  node.value = attributes[i];
  72              }
  73              //I'd use hasAttribute but IE is stupid stupid stupid
  74              else
  75              {
  76                  var value = node.getAttribute(i);
  77                  if(value)
  78                  {
  79                      node.setAttribute(i, attributes[i] + value);
  80                  }
  81                  else
  82                  {
  83                      node.setAttribute(i, attributes[i]);
  84                  }
  85              }
  86          }
  87      },
  88      _appendAttr: function(id, attributes)
  89      {
  90          var node = document.getElementById(id);
  91          for (var i in attributes)
  92          {
  93              //innerHTML hack bailout
  94              if(i == 'innerHTML')
  95              {
  96                  HTML_AJAX_Util.setInnerHTML(node, attributes[i], 'append');
  97              }
  98              //value hack
  99              else if(i == 'value')
 100              {
 101                  node.value = attributes[i];
 102              }
 103              //I'd use hasAttribute but IE is stupid stupid stupid
 104              else
 105              {
 106                  var value = node.getAttribute(i);
 107                  if(value)
 108                  {
 109                      node.setAttribute(i, value + attributes[i]);
 110                  }
 111                  else
 112                  {
 113                      node.setAttribute(i, attributes[i]);
 114                  }
 115              }
 116          }
 117      },
 118      _assignAttr: function(id, attributes)
 119      {
 120          var node = document.getElementById(id);
 121          for (var i in attributes)
 122          {
 123              //innerHTML hack bailout
 124              if(i == 'innerHTML')
 125              {
 126                  HTML_AJAX_Util.setInnerHTML(node,attributes[i]);
 127              }
 128              //value hack
 129              else if(i == 'value')
 130              {
 131                  node.value = attributes[i];
 132              }
 133              //IE doesn't support setAttribute on style so we need to break it out and set each property individually
 134              else if(i == 'style')
 135              {
 136                  var styles = [];
 137                  if (attributes[i].indexOf(';')) {
 138                      styles = attributes[i].split(';');
 139                  }
 140                  else {
 141                      styles.push(attributes[i]);
 142                  }
 143                  for(var i = 0; i < styles.length; i++) {
 144                      var r = styles[i].match(/^\s*(.+)\s*:\s*(.+)\s*$/);
 145                      if(r) {
 146                          node.style[this._camelize(r[1])] = r[2];
 147                      }
 148                  }
 149              }
 150              //no special rules know for this node so lets try our best
 151              else
 152              {
 153                  try {
 154                      node[i] = attributes[i];
 155                  } catch(e) {
 156                  }
 157              node.setAttribute(i, attributes[i]);
 158              }
 159          }
 160      },
 161      // should we move this to HTML_AJAX_Util???, just does the - case which we need for style
 162      _camelize: function(instr)
 163      {
 164          var p = instr.split('-');
 165          var out = p[0];
 166          for(var i = 1; i < p.length; i++) {
 167              out += p[i].charAt(0).toUpperCase()+p[i].substring(1);
 168          }
 169          return out;
 170      },
 171      _clearAttr: function(id, attributes)
 172      {
 173          var node = document.getElementById(id);
 174          for(var i = 0; i < attributes.length; i++)
 175          {
 176              //innerHTML hack bailout
 177              if(attributes[i] == 'innerHTML')
 178              {
 179                  node.innerHTML = '';
 180              }
 181              //value hack
 182              else if(attributes[i] == 'value')
 183              {
 184                  node.value = '';
 185              }
 186              //I'd use hasAttribute but IE is stupid stupid stupid
 187              else
 188              {
 189                  node.removeAttribute(attributes[i]);
 190              }
 191          }
 192      },
 193      _createNode: function(id, tag, attributes, type)
 194      {
 195          var newnode = document.createElement(tag);
 196          for (var i in attributes)
 197          {
 198              //innerHTML hack bailout
 199              if(i == 'innerHTML')
 200              {
 201                  newnode.innerHTML = attributes[i];
 202              }
 203              //value hack
 204              else if(i == 'value')
 205              {
 206                  newnode.value = attributes[i];
 207              }
 208              //I'd use hasAttribute but IE is stupid stupid stupid
 209              else
 210              {
 211                  newnode.setAttribute(i, attributes[i]);
 212              }
 213          }
 214          switch(type)
 215          {
 216              case 'append':
 217                  document.getElementById(id).appendChild(newnode);
 218                  break
 219              case 'prepend':
 220                  var parent = document.getElementById(id);
 221                  var sibling = parent.firstChild;
 222                  parent.insertBefore(newnode, sibling);
 223                  break;
 224              case 'insertBefore':
 225                  var sibling = document.getElementById(id);
 226                  var parent = sibling.parentNode;
 227                  parent.insertBefore(newnode, sibling);
 228                  break;
 229              //this one is tricky, if it's the last one we use append child...ewww
 230              case 'insertAfter':
 231                  var sibling = document.getElementById(id);
 232                  var parent = sibling.parentNode;
 233                  var next = sibling.nextSibling;
 234                  if(next == null)
 235                  {
 236                      parent.appendChild(newnode);
 237                  }
 238                  else
 239                  {
 240                      parent.insertBefore(newnode, next);
 241                  }
 242                  break;
 243          }
 244      },
 245      _replaceNode: function(id, tag, attributes)
 246      {
 247          var node = document.getElementById(id);
 248          var parent = node.parentNode;
 249          var newnode = document.createElement(tag);
 250          for (var i in attributes)
 251          {
 252              //innerHTML hack bailout
 253              if(i == 'innerHTML')
 254              {
 255                  newnode.innerHTML = attributes[i];
 256              }
 257              //value hack
 258              else if(i == 'value')
 259              {
 260                  newnode.value = attributes[i];
 261              }
 262          }
 263          parent.replaceChild(newnode, node);
 264      },
 265      _removeNode: function(id)
 266      {
 267          var node = document.getElementById(id);
 268          if(node)
 269          {
 270              var parent = node.parentNode;
 271              parent.removeChild(node);
 272          }
 273      },
 274      _insertScript: function(data)
 275      {
 276          eval(data);
 277      },
 278      _insertAlert: function(data)
 279      {
 280          alert(data);
 281      }
 282  }