[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 (var 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 || opt.text;
 172      }
 173      return [element.name, value];
 174    },
 175    
 176    selectMany: function(element) {
 177      var value = [];
 178      for (var i = 0; i < element.length; i++) {
 179        var opt = element.options[i];
 180        if (opt.selected)
 181          value.push(opt.value || opt.text);
 182      }
 183      return [element.name, value];
 184    }
 185  }
 186  
 187  /*--------------------------------------------------------------------------*/
 188  
 189  var $F = Form.Element.getValue;
 190  
 191  /*--------------------------------------------------------------------------*/
 192  
 193  Abstract.TimedObserver = function() {}
 194  Abstract.TimedObserver.prototype = {
 195    initialize: function(element, frequency, callback) {
 196      this.frequency = frequency;
 197      this.element   = $(element);
 198      this.callback  = callback;
 199      
 200      this.lastValue = this.getValue();
 201      this.registerCallback();
 202    },
 203    
 204    registerCallback: function() {
 205      setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
 206    },
 207    
 208    onTimerEvent: function() {
 209      var value = this.getValue();
 210      if (this.lastValue != value) {
 211        this.callback(this.element, value);
 212        this.lastValue = value;
 213      }
 214    }
 215  }
 216  
 217  Form.Element.Observer = Class.create();
 218  Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
 219    getValue: function() {
 220      return Form.Element.getValue(this.element);
 221    }
 222  });
 223  
 224  Form.Observer = Class.create();
 225  Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
 226    getValue: function() {
 227      return Form.serialize(this.element);
 228    }
 229  });
 230  
 231  /*--------------------------------------------------------------------------*/
 232  
 233  Abstract.EventObserver = function() {}
 234  Abstract.EventObserver.prototype = {
 235    initialize: function(element, callback) {
 236      this.element  = $(element);
 237      this.callback = callback;
 238      
 239      this.lastValue = this.getValue();
 240      if (this.element.tagName.toLowerCase() == 'form')
 241        this.registerFormCallbacks();
 242      else
 243        this.registerCallback(this.element);
 244    },
 245    
 246    onElementEvent: function() {
 247      var value = this.getValue();
 248      if (this.lastValue != value) {
 249        this.callback(this.element, value);
 250        this.lastValue = value;
 251      }
 252    },
 253    
 254    registerFormCallbacks: function() {
 255      var elements = Form.getElements(this.element);
 256      for (var i = 0; i < elements.length; i++)
 257        this.registerCallback(elements[i]);
 258    },
 259    
 260    registerCallback: function(element) {
 261      if (element.type) {
 262        switch (element.type.toLowerCase()) {
 263          case 'checkbox':  
 264          case 'radio':
 265            Event.observe(element, 'click', this.onElementEvent.bind(this));
 266            break;
 267          case 'password':
 268          case 'text':
 269          case 'textarea':
 270          case 'select-one':
 271          case 'select-multiple':
 272            Event.observe(element, 'change', this.onElementEvent.bind(this));
 273            break;
 274        }
 275      }    
 276    }
 277  }
 278  
 279  Form.Element.EventObserver = Class.create();
 280  Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
 281    getValue: function() {
 282      return Form.Element.getValue(this.element);
 283    }
 284  });
 285  
 286  Form.EventObserver = Class.create();
 287  Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
 288    getValue: function() {
 289      return Form.serialize(this.element);
 290    }
 291  });
 292