esri_window.js

ARCGIS程序,可以实现查、缩放等功能

/*
COPYRIGHT 1995-2005 ESRI

TRADE SECRETS: ESRI PROPRIETARY AND CONFIDENTIAL
Unpublished material - all rights reserved under the
Copyright Laws of the United States.

For additional information, contact:
Environmental Systems Research Institute, Inc.
Attn: Contracts Dept
380 New York Street
Redlands, California, USA 92373

email: [e-mail]
*/

function EsriWindow(id, titleText, pageElement, container) {
  this.inheritsFrom(new EsriPageElement(id));
  this.divId = "WindowDiv_" + id;
  this.pageElement = pageElement;

  this.collapsable = this.closable = this.resizable = this.movable = this.fittable = true;
  this.collapsed = this.closed = false;
  this.windowMgr = null;

  this.closeImgUrl = "images/window/close.gif";
  this.collapseImgUrl = "images/window/collapse.gif";
  this.expandImgUrl = "images/window/expand.gif";
  this.resizeImgUrl = "images/window/resize.gif";

  this.minWidth = 200;
  this.minHeight = 25;
  this.maxWidth = 600;
  this.maxHeight = 600;

  this.resizeLabel = "Resize Window";
  this.collapseLabel = "Collapse/Expand";
  this.closeLabel = "Close";

  this.updateListeners = [];
  this.updateListenerNames = [];

  var titleTxt = titleText;
  var title, content, mvAct, rzAct, resImg, colImg, clsImg, expWdSet, expWd, expHtSet, expHt;
  var resizing = moving = false;
  var scrSz = 20;
  var self = this;

  this.init = function(container) {
    if (! container) container = document.body;
    var b;
    if (this.bounds.left && this.bounds.top && this.bounds.width && this.bounds.height) b = this.bounds;
    else b = EsriUtils.getElementPageBounds(this.pageElement.divObject);
    EsriUtils.removeElementStyle(this.pageElement.divObject, "position; left; top;");

    this.divObject = container.appendChild(document.createElement("table"));
    this.divObject.id = this.divId;
    this.divObject.className = "esriWindow";
    EsriUtils.setElementStyle(this.divObject, "position:absolute; left:" + b.left + "px; top:" + b.top + "px;");

    var tbody = this.divObject.appendChild(document.createElement("tbody"));
    EsriUtils.setElementStyle(tbody, "border:0px; margin:0px; padding:0px;");

    var titleRow = tbody.appendChild(document.createElement("tr"));
    titleRow.vAlign = "top";
    var titleCell = titleRow.appendChild(document.createElement("td"));

    title = titleCell.appendChild(document.createElement("table"));
    title.className = "esriWindowTitleBar";
    title.onclick = function(e) { EsriUtils.stopEvent(e); (self.windowMgr) ? self.windowMgr.toFront(self.id) : self.toFront(); return false; }
    if (this.fittable) title.ondblclick = function(e) { EsriUtils.stopEvent(e); self.fit(); return false; }
    var tr = title.appendChild(document.createElement("tbody")).appendChild(document.createElement("tr"));
    var titleTd = tr.appendChild(document.createElement("td"));
    titleTd.vAlign = "middle";
    titleTd.width = "100%";
    titleTd.noWrap = true;
    var titleSpan = titleTd.appendChild(document.createElement("span"));
    titleSpan.className = "esriWindowTitleText";
    titleSpan.appendChild(document.createTextNode(titleTxt));

    var contentRow = tbody.appendChild(document.createElement("tr"));
    var contentCell = contentRow.appendChild(document.createElement("td"));
    contentCell.vAlign = "top";
    EsriUtils.setElementStyle(contentCell, "position:relative;");
    content = contentCell.appendChild(this.pageElement.divObject);
    content.className = "esriWindowContent";

    if (this.resizable) {
      rzAct = new EsriResizeElementAction(true, this.minWidth, this.minHeight, this.maxWidth, this.maxHeight);
      resImg = tr.appendChild(document.createElement("td")).appendChild(document.createElement("img"));
      resImg.src = this.resizeImgUrl;
      resImg.onmouseover = function(e) { resImg.style.cursor = "pointer"; }
      resImg.onclick = function(e) { EsriUtils.stopEvent(e); rzAct.activate(self.divObject, processResizeEnd, processResize); return false; }
      resImg.onmouseout = function(e) { resImg.style.cursor = "default"; }
      resImg.setAttribute("title", this.resizeLabel);
    }
    if (this.collapsable) {
      colImg = tr.appendChild(document.createElement("td")).appendChild(document.createElement("img"));
      colImg.src = this.collapseImgUrl;
      colImg.onmouseover = function(e) { colImg.style.cursor = "pointer"; }
      colImg.onclick = function(e) { (self.collapsed) ? self.expand(): self.collapse(); return false; }
      colImg.onmouseout = function(e) { colImg.style.cursor = "default"; }
      colImg.setAttribute("title", this.collapseLabel);
    }
    if (this.closable) {
      clsImg = tr.appendChild(document.createElement("td")).appendChild(document.createElement("img"));
      clsImg.src = this.closeImgUrl;
      clsImg.onmouseover = function(e) { clsImg.style.cursor =  "pointer"; }
      clsImg.onclick = function(e) { (self.closed) ? self.show() : self.hide(); return false; }
      clsImg.onmouseout = function(e) { clsImg.style.cursor = "default"; }
      clsImg.setAttribute("title", this.closeLabel);
    }

    if (this.movable) {
      mvAct = new EsriDragElementAction(true);
      mvAct.activate(title, processMoveEnd, processMove);
    }

    if (this.collapsed) this.collapse(true);
    if (this.closed) this.hide(true);
    normalize();
  }

  function processMove(x, y) {
    if (! moving) {
      EsriUtils.setElementOpacity(self.divObject, 0.75);
      moving = true;
    }
    var wl = self.bounds.left + x;
    var wt = self.bounds.top + y;
    var l = (wl < 0) ? 0 : wl;
    var t = (wt < 0) ? 0 : wt;
    EsriUtils.setElementStyle(self.divObject, "left:" + l + "px; top:" + t + "px;");
  }

  function processMoveEnd(x, y) {
    processMove(x, y);
    EsriUtils.setElementOpacity(self.divObject, 1);
    moving = false;
    updateBounds();
    saveState();
  }

  function processResize(rect) {
    if (! resizing) {
      updateBounds();
      resizing = true;
    }
    var dx = self.bounds.width - self.pageElement.bounds.width;
    var dy = self.bounds.height - self.pageElement.bounds.height;
    EsriUtils.setElementStyle(self.divObject, "width:" + rect.width + "px; height:" + rect.height + "px;");
    EsriUtils.setElementStyle(content, "width:" + (rect.width - dx) + "px; height:" + (rect.height - dy) + "px;");
  }

  function processResizeEnd(rect) {
    processResize(rect);
    updateBounds();
    resizing = false;
    rzAct.deactivate();
    saveState();
  }

  function updateBounds() {
    if (! self.closed) {
      self.bounds = EsriUtils.getElementPageBounds(self.divObject);
      if (! self.collapsed) self.pageElement.bounds = EsriUtils.getElementPageBounds(content);
    }
    for (var i=0;i<self.updateListenerNames.length;i++) self.updateListeners[self.updateListenerNames[i]](self);
  }

  function setZ(z) { EsriUtils.setElementStyle(self.divObject, "z-index:" + z + ";"); }
  function saveState() { if (self.windowMgr) self.windowMgr.saveProperties(); }

  function normalize() {
    var b = EsriUtils.getElementPageBounds(self.divObject);

    if ((self.minWidth && self.maxWidth) && (b.width < self.minWidth || b.width > self.maxWidth)) {
      var w = (b.width < self.minWidth) ? self.minWidth : self.maxWidth;
      EsriUtils.setElementStyle(content, "width:" + w + "px;");
    }

    if ((self.minHeight && self.maxHeight) && (b.height < self.minHeight || b.height > self.maxHeight)) {
      var h = (b.height < self.minHeight) ? self.minHeight : self.maxHeight;
      EsriUtils.setElementStyle(content, "height:" + h + "px;");
    }

    b = EsriUtils.getElementPageBounds(self.divObject);
    var pb = EsriUtils.getPageBounds();
    if (b.left > pb.width || b.top > pb.height) self.moveTo(b.left, b.top);
    b = EsriUtils.getElementPageBounds(self.divObject);

    if ((b.left + b.width) > pb.width || (b.top + b.height) > pb.height) {
      var w = ((b.left + b.width) > pb.width) ? pb.width - b.left : b.width;
      var h = ((b.top + b.height) > pb.height) ? pb.height - b.top : b.height;
      self.resize(w, h);
    }
    else if (b.width > pb.width || b.height > pb.height) self.resize((b.width > pb.width) ? pb.width : b.width, (b.height > pb.height) ? pb.height : b.height);
    else updateBounds();
  }

  this.collapse = function(override, skipSave) {
    if ((self.collapsed || self.closed) && ! override) return;
    var b = EsriUtils.getElementPageBounds(title);
    var bd = EsriUtils.getElementPageBounds(content);
    EsriUtils.hideElement(content);

    expWd = b.width;
    EsriUtils.setElementStyle(title, "width:" + expWd + "px;");

    expHtSet = content.style.height == null;
    expHt = bd.height;
    var h = self.bounds.height - expHt;
    EsriUtils.setElementStyle(self.divObject, "height:" + ((h < 0 && EsriUtils.isIE) ? 0 : h) + "px;");

    colImg.src = self.expandImgUrl;
    self.collapsed = true;
    updateBounds();
    if (! skipSave) saveState();
  }

  this.expand = function(override, skipSave) {
    if ((! self.collapsed || self.closed) && ! override) return;
    EsriUtils.showElement(content);

    EsriUtils.removeElementStyle(title, "width;");
    if (expHtSet) EsriUtils.setElementStyle(self.divObject, "height:" + (self.bounds.height + expHt) + "px;");
    else EsriUtils.removeElementStyle(self.divObject, "height;");

    colImg.src = self.collapseImgUrl;
    self.collapsed = false;
    updateBounds();
    if (! skipSave) saveState();
  }

  this.show = function(override, skipSave) {
    if (! self.closed && ! override) return;
    EsriUtils.showElement(self.divObject);
    self.closed = false;
    updateBounds();
    if (! skipSave) saveState();
  }

  this.hide = function(override, skipSave) {
    if (self.closed && ! override) return;
    EsriUtils.hideElement(self.divObject);
    self.closed = true;
    updateBounds();
    if (! skipSave) saveState();
  }

  this.toFront = function(zi) { setZ((zi) ? zi : 111); }
  this.toBack = function(zi) { setZ((zi) ? zi : 110); }

  this.moveTo = function(x, y) {
    if (! self.movable) return;
    var pb = EsriUtils.getPageBounds();
    EsriUtils.setElementStyle(self.divObject, "left:" + ((x < 0 || x > pb.width) ? 0 : x) + "px; top:" + ((y < 0 || y > pb.height) ? 0 : y) + "px;");
    updateBounds();
    saveState();
  }

  this.resize = function(w, h) {
    if (! self.resizable) return;
    var b = EsriUtils.getElementPageBounds(self.divObject);
    var peBd = EsriUtils.getElementPageBounds(content);
    EsriUtils.setElementStyle(self.divObject, "width:" + w + "px; height:" + h + "px;");
    var dx = b.width - w;
    var dy = b.height - h;
    if (dx != 0 && (peBd.width - dx) > 0) EsriUtils.setElementStyle(content, "width:" + (peBd.width - dx) + "px;");
    if (dy != 0 && (peBd.height - dy) > 0) EsriUtils.setElementStyle(content, "height:" + (peBd.height - dy) + "px;");
    updateBounds();
    saveState();
  }

  this.fit = function() {
    if (! self.fittable) return;
    var cl = self.closed;
    var co = self.collapsed;
    if (cl) self.show(true, true);
    if (co) self.expand(true, true);
    EsriUtils.removeElementStyle(self.divObject, "width; height;");
    EsriUtils.removeElementStyle(content, "width; height;");
    if (EsriUtils.isIE) {
      var b = EsriUtils.getElementPageBounds(content);
      EsriUtils.setElementStyle(content, "width:" + (b.width + scrSz) + "px;");
    }
    normalize();
    if (co) self.collapse(true, true);
    if (cl) self.hide(true, true);
    saveState();
  }

  this.update = function() {
    if (! self.bounds.left && ! self.bounds.top && ! self.bounds.width && ! self.bounds.height) return;
    var peBd = self.pageElement.bounds.offset(0, 0);

    content = self.pageElement.divObject;
    EsriUtils.removeElementStyle(content, "position; left; top;");
    content.className = "esriWindowContent";

    EsriUtils.showElement(content);
    EsriUtils.showElement(self.divObject);
    EsriUtils.setElementStyle(self.divObject, "left:" + self.bounds.left + "px; top:" + self.bounds.top + "px;");
    var b = EsriUtils.getElementPageBounds(self.divObject);
    EsriUtils.setElementStyle(self.divObject, "width:" + self.bounds.width + "px; height:" + self.bounds.height + "px;");
    var dx = b.width - self.bounds.width;
    var dy = b.height - self.bounds.height;
    if (dx != 0 && (peBd.width - dx) > 0) EsriUtils.setElementStyle(content, "width:" + (peBd.width - dx) + "px;");
    if (dy != 0 && (peBd.height - dy) > 0) EsriUtils.setElementStyle(content, "height:" + (peBd.height - dy) + "px;");
    normalize();

    self.collapsed ? self.collapse(true, true) : self.expand(true, true);
    self.closed ? self.hide(true, true) : self.show(true, true);
    for (var i=0;i<self.updateListenerNames.length;i++) self.updateListeners[self.updateListenerNames[i]](self);
  }

  this.setWindowManager = function(wm) {
    this.windowMgr = wm;
    self = this;
  }

  if (container) this.init(container);
}

EsriWindow.prototype.center = function() {
  var page = EsriUtils.getPageBounds();
  var wW = page.width;
  var wH = page.height;
  this.moveTo(Math.round(wW / 2) - Math.round(this.bounds.width / 2), Math.round(wH / 2) - Math.round(this.bounds.height / 2));
}

EsriWindow.prototype.addUpdateListener = function(name, listener) {
  if (this.updateListenerNames.indexOf(name) == -1) this.updateListenerNames.push(name);
  this.updateListeners[name] = listener;
}

EsriWindow.prototype.removeUpdateListener = function(name) {
  var index = this.updateListenerNames.indexOf(name);
  if (index != -1) {
    this.updateListenerNames.splice(index, 1);
    this.updateListeners[name] = null;
  }
}

EsriWindow.prototype.toggleVisibility = function() { this.closed ? this.show() : this.hide(); }
EsriWindow.prototype.toggleCollapse = function() { this.collapsed ? this.expand() : this.collapse(); }