window.js

ajax 聊天室,实现多人聊天,无刷新!

// Copyright (c) 2006 Sébastien Gruhier (http://xilinus.com, http://itseb.com)
// 
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// 
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// VERSION 0.96.2

var Window = Class.create();
Window.prototype = {
   // Constructor
   // Available parameters : className, title, minWidth, minHeight, maxWidth, maxHeight, width, height, top, left, bottom, right, resizable, zIndex, opacity, 
   //                        hideEffect, showEffect, showEffectOptions, hideEffectOptions, effectOptions, url, draggable, closable, minimizable, maximizable, parent, onload
   initialize: function(id) {
     //if ($(id))
       //alert("Window " + id + " is already register is the DOM!!, be sure to use setDestroyOnClose()")
       
      this.hasEffectLib = String.prototype.parseColor != null;
      this.options = Object.extend({
        className:         "dialog",
      minWidth:          100,
      minHeight:         20,
      resizable:         true,
      closable:          true,
      minimizable:       true,
      detachable:        true,
      maximizable:       true,
      draggable:         true,
      userData:          null,
      showEffect:        (this.hasEffectLib ? Effect.Appear : Element.show),
      hideEffect:        (this.hasEffectLib ? Effect.Fade : Element.hide),
      showEffectOptions: {},
      hideEffectOptions: {},
      effectOptions:     null,
      parent:            document.getElementsByTagName("body").item(0),
      title:             " ",
      url:               null,
      onload:            Prototype.emptyFunction,
      width:             200,
      height:            300,
      opacity:           1
    }, arguments[1] || {});
          
     if (this.options.effectOptions) {
       Object.extend(this.options.hideEffectOptions, this.options.effectOptions);
       Object.extend(this.options.showEffectOptions, this.options.effectOptions);
     }
      if (this.options.hideEffect == Element.hide)
        this.options.hideEffect = function(){ Element.hide(this.element); if (this.destroyOnClose) this.destroy(); }.bind(this)
        
      this.element = this._createWindow(id);
      
      // Bind event listener
      this.eventMouseDown = this._initDrag.bindAsEventListener(this);
      this.eventMouseUp   = this._endDrag.bindAsEventListener(this);
      this.eventMouseMove = this._updateDrag.bindAsEventListener(this);
      this.eventDblClick  = this._dblClick.bindAsEventListener(this);
      this.eventKeyPress  = this._keyPress.bindAsEventListener(this);
      this.eventOnLoad    = this._getWindowBorderSize.bindAsEventListener(this);
      this.eventMouseDownContent = this.toFront.bindAsEventListener(this);
      this.eventResize = this._recenter.bindAsEventListener(this);
 
      this.topbar = $(this.element.id + "_top");
      this.bottombar = $(this.element.id + "_bottom");
      this.content = $(this.element.id + "_content");
      
      Event.observe(this.topbar, "mousedown", this.eventMouseDown);
      Event.observe(this.topbar, "dblclick", this.eventDblClick);
      //Event.observe(this.bottombar, "mousedown", this.eventMouseDown);
      Event.observe(this.content, "mousedown", this.eventMouseDownContent);
      Event.observe(window, "load", this.eventOnLoad);
      Event.observe(window, "resize", this.eventResize);
      Event.observe(window, "scroll", this.eventResize);
     
      if (this.options.draggable)  {
         //this.bottombar.addClassName("bottom_draggable");
         this.topbar.addClassName("top_draggable");
      }      
    
      if (this.options.resizable) {
         this.sizer = $(this.element.id + "_sizer");
         Event.observe(this.sizer, "mousedown", this.eventMouseDown);
      }   
    
      this.useLeft = null;
      this.useTop = null;
      if (arguments[1].left != null) {
         this.element.setStyle({left: parseFloat(arguments[1].left) + 'px'});
         this.useLeft = true;
      }
      if (arguments[1].right != null) {
         this.element.setStyle({right: parseFloat(arguments[1].right) + 'px'});
         this.useLeft = false;
      }
      if (this.useLeft == null) {
         this.element.setStyle({left: "0px"});
         this.useLeft = true;
      }
    
      if (arguments[1].top != null) {
         this.element.setStyle({top: parseFloat(arguments[1].top) + 'px'});
         this.useTop = true;
      }
      if (arguments[1].bottom != null) {
         this.element.setStyle({bottom: parseFloat(arguments[1].bottom) + 'px'});         
         this.useTop = false;
      }
    if (this.useTop == null) {
         this.element.setStyle({top: "0px"});
         this.useTop = true;
    }

    this.storedLocation = null;
    
      this.setOpacity(this.options.opacity);
      if (this.options.zIndex)
         this.setZIndex(this.options.zIndex)

      this.destroyOnClose = false;

    this._getWindowBorderSize();
    this.width = this.options.width;
    this.height = this.options.height;
    
    if (this.width && this.height)
        this.setSize(this.options.width, this.options.height);
      this.setTitle(this.options.title)
      Windows.register(this);       
  },
  
   // Destructor
    destroy: function() {
      Windows.notify("onDestroy", this);
      
     Event.stopObserving(this.topbar, "mousedown", this.eventMouseDown);
     //Event.stopObserving(this.bottombar, "mousedown", this.eventMouseDown);
     Event.stopObserving(this.content, "mousedown", this.eventMouseDownContent);
    
      Event.stopObserving(window, "load", this.eventOnLoad);
      Event.stopObserving(window, "resize", this.eventResize);
     Event.stopObserving(window, "scroll", this.eventResize);
      
      Event.stopObserving(this.content, "load", this.options.onload);

      if (this.sizer)
          Event.stopObserving(this.sizer, "mousedown", this.eventMouseDown);

      if (this.options.url)
        this.content.src = null

       if(this.iefix) 
         Element.remove(this.iefix);

    Element.remove(this.element);
      Windows.unregister(this);       
   },
     
   // Sets window deleagte, should have functions: "canClose(window)" 
   setDelegate: function(delegate) {
      this.delegate = delegate
   },
   
   // Gets current window delegate
   getDelegate: function() {
      return this.delegate;
   },
   
   // Gets window content
   getContent: function () {
      return this.content;
   },
   
   // Sets the content with an element id
   setContent: function(id, autoresize, autoposition) {
      var d = null;
      var p = null;

      if (autoresize) 
         d = Element.getDimensions(id);
      if (autoposition) 
         p = Position.cumulativeOffset($(id));

      var content = this.getContent()
      content.appendChild($(id));
      $(id).show();
      if (autoresize) 
         this.setSize(d.width, d.height);
      if (autoposition) 
        this.setLocation(p[1] - this.heightN, p[0] - this.widthW);     
   },
   
   setAjaxContent: function(url, options, showCentered, showModal) {
     this.showFunction = showCentered ? "showCenter" : "show";
     this.showModal = showModal || false;
   
     if (options == null)
       options = {}  
     this.onComplete = options.onComplete;
     options.onComplete = this._setAjaxContent.bind(this);
     
     new Ajax.Request(url, options);
   },
   
   _setAjaxContent: function(originalRequest) {
     this.getContent().innerHTML = originalRequest.responseText;
     if (this.onComplete)
       this.onComplete(originalRequest);
     this[this.showFunction](this.showModal)
   },
   
   // Stores position/size in a cookie, by default named with window id
   setCookie: function(name, expires, path, domain, secure) {
      name = name || this.element.id;
      this.cookie = [name, expires, path, domain, secure];
      
      // Get cookie
      var value = WindowUtilities.getCookie(name)
      // If exists
      if (value) {
         var values = value.split(',');
         var x = values[0].split(':');
         var y = values[1].split(':');

         var w = parseFloat(values[2]), h = parseFloat(values[3]);
         var mini = values[4];
         var maxi = values[5];

        this.setSize(w, h);
         if (mini == "true")
          this.doMinimize = true; // Minimize will be done at onload window event
         else if (maxi == "true")
           this.doMaximize = true; // Maximize will be done at onload window event

         this.useLeft = x[0] == "l";
         this.useTop = y[0] == "t";

         this.element.setStyle(this.useLeft ? {left: x[1]} : {right: x[1]});
         this.element.setStyle(this.useTop ? {top: y[1]} : {bottom: y[1]});
      }
   },
   
   // Gets window ID
   getId: function() {
      return this.element.id;
   },
   
   // Detroys itself when closing 
   setDestroyOnClose: function() {
     Object.extend(this.options.hideEffectOptions, {afterFinish:  this.destroy.bind(this)});
      this.destroyOnClose = true;
   },
   
   _dblClick: function(event) {
      Windows.maximize(this.element.id);
      Event.stop(event);
   },
   
   // initDrag event
   _initDrag: function(event) {
    showHide(event);
    // Get pointer X,Y
    if(this.isMaximized())
      return;
     this.pointer = [Event.pointerX(event), Event.pointerY(event)];

    // Resize
      if (Event.element(event) == this.sizer) {
         this.doResize = true;
       this.widthOrg = this.width;
       this.heightOrg = this.height;
       this.bottomOrg = parseFloat(this.element.getStyle('bottom'));
       this.rightOrg = parseFloat(this.element.getStyle('right'));
         Windows.notify("onStartResize", this);
      }
    else {
        this.doResize = false;

        // Check if click on close button, 
        var closeButton = $(this.getId() + '_close');
        if (closeButton && Position.within(closeButton, this.pointer[0], this.pointer[1])) 
           return;

        this.toFront();

        if (! this.options.draggable) 
          return;
        Windows.notify("onStartMove", this);
    }     
     // Register global event to capture mouseUp and mouseMove
     Event.observe(document, "mouseup", this.eventMouseUp, false);
    Event.observe(document, "mousemove", this.eventMouseMove, false);
      
     // Add an invisible div to keep catching mouse event over iframes
     WindowUtilities.disableScreen('__invisible__', '__invisible__');

    // Stop selection while dragging
    document.body.ondrag = function () { return false; };
    document.body.onselectstart = function () { return false; };
    
    Event.stop(event);
    return false;
  },