[Sommaire] [Imprimer]

   1  var Field = {
   2    clear: function() {
   3      for (var i = 0; i < arguments.length; i++)
   4        $(arguments[i]).value = '';
   5    },
   6  
   7    focus: function(element) {
   8      $(element).focus();
   9    },
  10    
  11    present: function() {
  12      for (var i = 0; i < arguments.length; i++)
  13        if ($(arguments[i]).value == '') return false;
  14      return true;
  15    },
  16    
  17    select: function(element) {
  18      $(element).select();
  19    },
  20     
  21    activate: function(element) {
  22      element = $(element);
  23      element.focus();
  24      if (element.select)
  25        element.select();
  26    }
  27  }
  28  
  29  /*--------------------------------------------------------------------------*/
  30  
  31  var Form = {
  32    serialize: function(form) {
  33      var elements = Form.getElements($(form));
  34      var queryComponents = new Array();
  35      
  36      for (var i = 0; i < elements.length; i++) {
  37        var queryComponent = Form.Element.serialize(elements[i]);
  38        if (queryComponent)
  39          queryComponents.push(queryComponent);
  40      }
  41      
  42      return queryComponents.join('&');
  43    },
  44    
  45    getElements: function(form) {
  46      form = $(form);
  47      var elements = new Array();
  48  
  49      for (tagName in Form.Element.Serializers) {
  50        var tagElements = form.getElementsByTagName(tagName);
  51        for (var j = 0; j < tagElements.length; j++)
  52          elements.push(tagElements[j]);
  53      }
  54      return elements;
  55    },
  56    
  57    getInputs: function(form, typeName, name) {
  58      form = $(form);
  59      var inputs = form.getElementsByTagName('input');
  60      
  61      if (!typeName && !name)
  62        return inputs;
  63        
  64      var matchingInputs = new Array();
  65      for (var i = 0; i < inputs.length; i++) {
  66        var input = inputs[i];
  67        if ((typeName && input.type != typeName) ||
  68            (name && input.name != name)) 
  69          continue;
  70        matchingInputs.push(input);
  71      }
  72  
  73      return matchingInputs;
  74    },
  75  
  76    disable: function(form) {
  77      var elements = Form.getElements(form);
  78      for (var i = 0; i < elements.length; i++) {
  79        var element = elements[i];
  80        element.blur();
  81        element.disabled = 'true';
  82      }
  83    },
  84  
  85    enable: function(form) {
  86      var elements = Form.getElements(form);
  87      for (var i = 0; i < elements.length; i++) {
  88        var element = elements[i];
  89        element.disabled = '';
  90      }
  91    },
  92  
  93    findFirstElement: function(form) {
  94      return Form.getElements(form).find(function(element) {
  95        return element.type != 'hidden' && !element.disabled &&
  96          ['input', 'select', 'textarea'].include(element.tagName.toLowerCase());
  97      });
  98    },
  99  
 100    focusFirstElement: function(form) {
 101      Field.activate(Form.findFirstElement(form));
 102    },
 103  
 104    reset: function(form) {
 105      $(form).reset();
 106    }
 107  }
 108  
 109  Form.Element = {
 110    serialize: function(element) {
 111      element = $(element);
 112      var method = element.tagName.toLowerCase();
 113      var parameter = Form.Element.Serializers[method](element);
 114      
 115      if (parameter) {
 116        var key = encodeURIComponent(parameter[0]);
 117        if (key.length == 0) return;
 118        
 119        if (parameter[1].constructor != Array)
 120          parameter[1] = [parameter[1]];
 121        
 122        return parameter[1].map(function(value) {
 123          return key + '=' + encodeURIComponent(value);
 124        }).join('&');
 125      }
 126    },
 127    
 128    getValue: function(element) {
 129      element = $(element);
 130      var method = element.tagName.toLowerCase();
 131      var parameter = Form.Element.Serializers[method](element);
 132      
 133      if (parameter)
 134        return parameter[1];
 135    }
 136  }
 137  
 138  Form.Element.Serializers = {
 139    input: function(element) {
 140      switch (element.type.toLowerCase()) {
 141        case 'submit':
 142        case 'hidden':
 143        case 'password':
 144        case 'text':
 145          return Form.Element.Serializers.textarea(element);
 146        case 'checkbox':  
 147        case 'radio':
 148          return Form.Element.Serializers.inputSelector(element);
 149      }
 150      return false;
 151    },
 152  
 153    inputSelector: function(element) {
 154      if (element.checked)
 155        return [element.name, element.value];
 156    },
 157  
 158    textarea: function(element) {
 159      return [element.name, element.value];
 160    },
 161    
 162    select: function(element) {
 163      return Form.Element.Serializers[element.type == 'select-one' ? 
 164        'selectOne' : 'selectMany'](element);
 165    },
 166    
 167    selectOne: function(element) {
 168      var value = '', opt, index = element.selectedIndex;
 169      if (index >= 0) {
 170        opt = element.options[index];
 171        value = opt.value;
 172        if (!value && !('value' in opt))
 173          value = opt.text;
 174      }
 175      return [element.name, value];
 176    },
 177    
 178    selectMany: function(element) {
 179      var value = new Array();
 180      for (var i = 0; i < element.length; i++) {
 181        var opt = element.options[i];
 182        if (opt.selected) {
 183          var optValue = opt.value;
 184          if (!optValue && !('value' in opt))
 185            optValue = opt.text;
 186          value.push(optValue);
 187        }
 188      }
 189      return [element.name, value];
 190    }
 191  }
 192  
 193  /*--------------------------------------------------------------------------*/
 194  
 195  var $F = Form.Element.getValue;
 196  
 197  /*--------------------------------------------------------------------------*/
 198  
 199  Abstract.TimedObserver = function() {}
 200  Abstract.TimedObserver.prototype = {
 201    initialize: function(element, frequency, callback) {
 202      this.frequency = frequency;
 203      this.element   = $(element);
 204      this.callback  = callback;
 205      
 206      this.lastValue = this.getValue();
 207      this.registerCallback();
 208    },
 209    
 210    registerCallback: function() {
 211      setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
 212    },
 213    
 214    onTimerEvent: function() {
 215      var value = this.getValue();
 216      if (this.lastValue != value) {
 217        this.callback(this.element, value);
 218        this.lastValue = value;
 219      }
 220    }
 221  }
 222  
 223  Form.Element.Observer = Class.create();
 224  Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
 225    getValue: function() {
 226      return Form.Element.getValue(this.element);
 227    }
 228  });
 229  
 230  Form.Observer = Class.create();
 231  Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
 232    getValue: function() {
 233      return Form.serialize(this.element);
 234    }
 235  });
 236  
 237  /*--------------------------------------------------------------------------*/
 238  
 239  Abstract.EventObserver = function() {}
 240  Abstract.EventObserver.prototype = {
 241    initialize: function(element, callback) {
 242      this.element  = $(element);
 243      this.callback = callback;
 244      
 245      this.lastValue = this.getValue();
 246      if (this.element.tagName.toLowerCase() == 'form')
 247        this.registerFormCallbacks();
 248      else
 249        this.registerCallback(this.element);
 250    },
 251    
 252    onElementEvent: function() {
 253      var value = this.getValue();
 254      if (this.lastValue != value) {
 255        this.callback(this.element, value);
 256        this.lastValue = value;
 257      }
 258    },
 259    
 260    registerFormCallbacks: function() {
 261      var elements = Form.getElements(this.element);
 262      for (var i = 0; i < elements.length; i++)
 263        this.registerCallback(elements[i]);
 264    },
 265    
 266    registerCallback: function(element) {
 267      if (element.type) {
 268        switch (element.type.toLowerCase()) {
 269          case 'checkbox':  
 270          case 'radio':
 271            Event.observe(element, 'click', this.onElementEvent.bind(this));
 272            break;
 273          case 'password':
 274          case 'text':
 275          case 'textarea':
 276          case 'select-one':
 277          case 'select-multiple':
 278            Event.observe(element, 'change', this.onElementEvent.bind(this));
 279            break;
 280        }
 281      }    
 282    }
 283  }
 284  
 285  Form.Element.EventObserver = Class.create();
 286  Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
 287    getValue: function() {
 288      return Form.Element.getValue(this.element);
 289    }
 290  });
 291  
 292  Form.EventObserver = Class.create();
 293  Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
 294    getValue: function() {
 295      return Form.serialize(this.element);
 296    }
 297  });
 298