Erkennen das Fenstergröße geändert wird

[molily]

Und jetzt von dir die fortgeschrittene OOP- Version? Her damit!

Okay, es wird immer funktional bleiben:

/* Helferfunktionen und prototypische Erweiterungen */  
Array.convert = function (obj) {  
   return Array.prototype.slice.apply(obj);  
};  
  
// Diese funktion spart uns function () { bla("blub"); } und lässt uns stattdessen bla.curry("blub") schreiben  
Function.prototype.curry =  function() {  
   if (!arguments.length) return this;  
   var method = this, args = Array.convert(arguments);  
   return function () {  
      return method.apply(this, args.concat(arguments));  
   }  
};  
  
// bind mal ohne Parameterweitergabe, dafür haben wir curry  
Function.prototype.bind = function () {  
   var method = this, object = arguments[0];  
   return function () {  
      return method.apply(object);  
   };  
};  
  
if (!Array.prototype.each) {  
   Array.prototype.each = function (func) {  
      var length = this.length, context = arguments[1] || this;  
      for (var i = 0; i < length; i++) {  
         if (i in this) {  
  func.call(context, this[i], i, this);  
         }  
      }  
   };  
}  
  
/* Resize-Logik */  
  
var Resize = {  
   handlers : [],  
   timeout : 0,  
   addHandler : function (f) {  
      this.handlers.push(f);  
   },  
   resizeHandler : function () {  
      if (this.timeout) {  
         window.clearTimeout(this.timeout);  
      }  
      this.timeout = window.setTimeout(this.fireHandlers.bind(this), 500);  
   },  
   fireHandlers : function () {  
      this.handlers.each(function (f) {  
         f();  
      });  
   },  
   init : function () {  
      window.onresize = this.resizeHandler.bind(this);  
   }  
};  
Resize.init();  
  
/* Anwendung */  
  
Resize.add( sizeBar.curry('p121_bar', 'p121_table', 'p121_table_kopie') );  
...

(Konzept, ungetestet)

Jetzt könnte man das ganze natürlich noch weiter abstrahieren, schließlich ist dieses »Überwache Event x und führe nur alle 500ms nach dem letzten x-Event einen Handler aus« auf keinen Event begrenzt. Die API könnte so aussehen:

DelayedHandler.addEvent(element, "event-type", function () { alert("Hallo Welt"); }, 1234);

Im Beispiel dann so:

DelayedHandler.addEvent(window, "resize", sizeBar.curry('p121_bar', 'p121_table', 'p121_table_kopie'), 500);

Das bedarf nur minimaler Umstellungen. Besser wäre dann natürlich, ein vernünftiges addEvent zu verwenden, bei dem sich mehrere Handler nicht in die Quere kommen. So kommt man dann schon - man siehts bereits an den obigen prototypischen Erweiterungen - schnell zu einem eigenen Mini-Framework.

Mathias