window.js

刚开始学习看的

// 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,
      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.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.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;
	},
	
	// initDrag event
	_initDrag: function(event) {
    // Get pointer X,Y
  	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);
  },

  // updateDrag event
	_updateDrag: function(event) {
   	var pointer = [Event.pointerX(event), Event.pointerY(event)];    
		var dx = pointer[0] - this.pointer[0];
		var dy = pointer[1] - this.pointer[1];
		
		// Resize case, update width/height
		if (this.doResize) {
			this.setSize(this.widthOrg + dx , this.heightOrg + dy);
			
      dx = this.width - this.widthOrg
      dy = this.height - this.heightOrg
			
		  // Check if it's a right position, update it to keep upper-left corner at the same position
			if (! this.useLeft) 
				this.element.setStyle({right: (this.rightOrg -dx) + 'px'});
			// Check if it's a bottom position, update it to keep upper-left corner at the same position
			if (! this.useTop) 
				this.element.setStyle({bottom: (this.bottomOrg -dy) + 'px'});
		}
		// Move case, update top/left
		else {
		  this.pointer = pointer;
  		
			if (this.useLeft) 
				this.element.setStyle({left: parseFloat(this.element.getStyle('left')) + dx + 'px'});
			else 
				this.element.setStyle({right: parseFloat(this.element.getStyle('right')) - dx + 'px'});
			
			if (this.useTop) 
				this.element.setStyle({top: parseFloat(this.element.getStyle('top')) + dy + 'px'});
		  else 
				this.element.setStyle({bottom: parseFloat(this.element.getStyle('bottom')) - dy + 'px'});
		}
		if (this.iefix) 
			this._fixIEOverlapping(); 
			
		this._removeStoreLocation();
    Event.stop(event);
	},

	 // endDrag callback
 	_endDrag: function(event) {
		// Remove temporary div over iframes
 	  WindowUtilities.enableScreen('__invisible__');
		
		if (this.doResize)
			Windows.notify("onEndResize", this);
		else
			Windows.notify("onEndMove", this);
		
		// Release event observing
		Event.stopObserving(document, "mouseup", this.eventMouseUp,false);
    Event.stopObserving(document, "mousemove", this.eventMouseMove, false);

		// Store new location/size if need be
		this._saveCookie()

    Event.stop(event);
    
    // Restore selection
    document.body.ondrag = null;
    document.body.onselectstart = null;
  },

	_keyPress: function(event) {
		//Dialog.cancelCallback();
	},
	
	// Creates HTML window code
	_createWindow: function(id) {
	  var className = this.options.className;
		var win = document.createElement("div");
		win.setAttribute('id', id);
		win.className = "dialog";

		var content;
		if (this.options.url)
			content= "<iframe name=\"" + id + "_content\"  id=\"" + id + "_content\" src=\"" + this.options.url + "\"> </iframe>";
		else
			content ="<div id=\"" + id + "_content\" class=\"" +className + "_content\"> </div>";
			
		var closeDiv = this.options.closable ? "<div class='"+ className +"_close' id='"+ id +"_close' onmouseup='Windows.close(\""+ id +"\")'> </div>" : "";
		var minDiv = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onmouseup='Windows.minimize(\""+ id +"\")'> </div>" : "";
		var maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onmouseup='Windows.maximize(\""+ id +"\")'> </div>" : "";
		var seAttributes = this.options.resizable ? "class='" + className + "_sizer' id='" + id + "_sizer'" : "class='"  + className + "_se'";
		
    win.innerHTML = closeDiv + minDiv + maxDiv + "\
      <table id='"+ id +"_row1' class=\"top table_window\">\
        <tr>\
          <td class='"+ className +"_nw'>&nbsp;</td>\
          <td class='"+ className +"_n'><div id='"+ id +"_top' class='"+ className +"_title title_window'>"+ this.options.title +"</div></td>\
          <td class='"+ className +"_ne'>&nbsp;</td>\
        </tr>\
      </table>\
      <table id='"+ id +"_row2' class=\"mid table_window\">\
        <tr>\
          <td class='"+ className +"_w'></td>\
            <td id='"+ id +"_table_content' class='"+ className +"_content' valign='top'>"+ content +"</td>\
          <td class='"+ className +"_e'></td>\
        </tr>\
      </table>\
        <table id='"+ id +"_row3' class=\"bot table_window\">\
        <tr>\