esri_toolbar.js

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

  this.setToolItemActive = function(toolId) {
    var el = document.getElementById(this.getToolItemContainerId(toolId));
    var tool = this.toolItems[toolId];
    tool.isDisabled = false;
    if(tool.selectedImage) {
      el.src = tool.selectedImage;
      el.className = "esriImageToolbarDefault";
    }
    else {
      el.src = tool.defaultImage;
      el.className = "esriImageToolbarSelected";
    }
  }

  this.setToolItemDisabled = function(toolId) {
    var el = document.getElementById(this.getToolItemContainerId(toolId));
    var tool = this.toolItems[toolId];
    tool.isDisabled = true;
    if(tool.disabledImage) {
      el.src = tool.disabledImage;
      el.className = "esriImageToolbarDefault";
    }
    else el.className = "esriImageToolbarDisabled";
  }

  this.processMouseClick = function(event) {
    var el = EsriUtils.getEventSource(event);
    var tool = self.toolItems[self.getToolId(el.id)];
    if(tool && !tool.isDisabled) {
      toolId = self.getToolId(el.id);
      if (self.mapId) EsriControls.maps[self.mapId].setCurrentToolItem(self.toolItems[toolId], self.id);
      else tool.activate();
    }
  }

  this.processMouseOver = function(event) {
    var el = EsriUtils.getEventSource(event);
    var tool = self.toolItems[self.getToolId(el.id)];
    if(tool && !(EsriControls.maps[self.mapId].currentTool == tool) && !tool.isDisabled) {
      if(tool.hoverImage) el.src = tool.hoverImage;
      else el.className = "esriImageToolbarHover";;
    }
  }

  this.processMouseOut = function(event) {
    var el = EsriUtils.getEventSource(event);
    var tool = self.toolItems[self.getToolId(el.id)];
    if(tool && !(EsriControls.maps[self.mapId].currentTool == tool) && !tool.isDisabled) {
      el.src = tool.defaultImage;
      el.className = "esriImageToolbarDefault";
    }
  }

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

function EsriImageAndTextToolbar(id, container, mapId) {
  this.inheritsFrom(new EsriToolbar(id, container, mapId, "IMAGE_AND_TEXT"));
  var self = this;

  this.textPos = "RIGHT";
  this.imgAlign = "CENTER";
  this.textAlign = "CENTER";
  this.divAlign = "CENTER";

  var tableStyle = "border:NONE; margin:0px; padding:0px;";

  this.addToolItem = function(toolItem) {
    this.toolItems[this.getToolId(this.getToolItemContainerId(toolItem.id))] = toolItem;
    if (this.toolItemNames.indexOf(name) == -1) {
      var parentCell = this.getNextToolbarCell();
      var div = document.createElement("div");
      var image = document.createElement("img");
      var label = document.createTextNode(toolItem.name);
      var imgCell = document.createElement("td");
      var txtCell = document.createElement("td");

      div.id = this.getToolItemContainerId(toolItem.id);
      div.align = this.divAlign;
      txtCell.id = this.getToolItemContainerId(toolItem.id) + "_txtc";
      txtCell.align = this.textAlign;
      txtCell.width = "100%";
      imgCell.id = this.getToolItemContainerId(toolItem.id) + "_imgc";
      imgCell.align = this.imgAlign;
      image.src = toolItem.defaultImage;
      image.id = this.getToolItemContainerId(toolItem.id) + "_img";
      imgCell.appendChild(image);
      txtCell.appendChild(label);
      var table = div.appendChild(addToTable(imgCell, txtCell));
      table.id = this.getToolItemContainerId(toolItem.id) + "_tbl";
      parentCell.appendChild(div);
      this.toolItemNames.push(toolItem.id);
      if(toolItem.isDisabled) {
        div.className = txtCell.className = "esriImageAndTextToolbarDisabled";
        this.setToolItemDisabled(toolItem.id);
      }
      else div.className = txtCell.className = "esriImageAndTextToolbarDefault";

      if(toolItem.toolTip) {
        image.alt = toolItem.toolTip;
        image.title = toolItem.toolTip;
      }
    }
  }

  function addToTable(imgCell, txtCell) {
    var table = document.createElement("table");
    table.width = "100%";
    table.border = 0;
    table.margin = 0;
    table.cellSpacing = 0;
    table.cellPadding = 1;
    EsriUtils.setElementStyle(table, tableStyle);
    var body = document.createElement("tbody");
    table.appendChild(body);
    if (self.textPos.toUpperCase() == "RIGHT" || self.textPos.toUpperCase() == "LEFT") {
      var row = body.appendChild(document.createElement("tr"));
      row.appendChild(imgCell);
      if (self.textPos.toUpperCase() == "RIGHT") row.appendChild(txtCell);
      else row.insertBefore(txtCell, imgCell);
    }
    else {
      var imgRow = document.createElement("tr");
      var txtRow = document.createElement("tr");
      imgRow.appendChild(imgCell);
      txtRow.appendChild(txtCell);
      body.appendChild(imgRow);
      if (self.textPos.toUpperCase() == "TOP") body.insertBefore(txtRow, imgRow);
      else body.appendChild(txtRow);
    }
    return table;
  }

  this.setToolItemInactive = function(toolId) {
    var el = document.getElementById(this.getToolItemContainerId(toolId));
    var tool = this.toolItems[toolId];
    tool.isDisabled = false;
    el.src = tool.defaultImage;
    el.className = getTextCellElement(el).className = "esriImageAndTextToolbarDefault";
  }

  this.setToolItemActive = function(toolId) {
    var el = document.getElementById(this.getToolItemContainerId(toolId));
    var tool = this.toolItems[toolId];
    tool.isDisabled = false;
    el.className = getTextCellElement(el).className = "esriImageAndTextToolbarSelected";
  }

  this.setToolItemDisabled = function(toolId) {
    var el = document.getElementById(this.getToolItemContainerId(toolId));
    var tool = this.toolItems[toolId];
    tool.isDisabled = true;
    el.className = getTextCellElement(el).className = "esriImageAndTextToolbarDisabled";
  }

  this.processMouseClick = function(event) {
    var el = EsriUtils.getEventSource(event);
    var tool = self.toolItems[self.getToolId(el.id)];
    if(!tool && isToolImage(el.id)) {
      el = getToolDivElementFromImage(el.id);
      tool = self.toolItems[self.getToolId(el.id)];
    }

    if(tool && !tool.isDisabled) {
      toolId = self.getToolId(el.id);
      if (self.mapId) EsriControls.maps[self.mapId].setCurrentToolItem(self.toolItems[toolId], self.id);
      else tool.activate();
    }
  }

  this.processMouseOver = function(event) {
    var el = EsriUtils.getEventSource(event);
    var tool = self.toolItems[self.getToolId(el.id)];
    if(!tool && isToolImage(el.id)) {
      el = getToolDivElementFromImage(el.id);
      tool = self.toolItems[self.getToolId(el.id)];
    }

    if(tool && !(EsriControls.maps[self.mapId].currentTool == tool) && !tool.isDisabled) el.className = getTextCellElement(el).className = "esriImageAndTextToolbarHover";
  }

  this.processMouseOut = function(event) {
    var el = EsriUtils.getEventSource(event);
    var tool = self.toolItems[self.getToolId(el.id)];
    if(!tool && isToolImage(el.id)) {
      el = getToolDivElementFromImage(el.id);
      tool = self.toolItems[self.getToolId(el.id)];
    }

    if(tool && !(EsriControls.maps[self.mapId].currentTool == tool) && !tool.isDisabled) el.className = getTextCellElement(el).className = "esriImageAndTextToolbarDefault";
  }

  function isToolImage(imageId) { return imageId.lastIndexOf("_img") == (imageId.length - 4) || imageId.lastIndexOf("_tbl") == (imageId.length - 4) || imageId.lastIndexOf("_imgc") == (imageId.length - 5) || imageId.lastIndexOf("_txtc") == (imageId.length - 5); }
  function getTextCellElement(divEl) { return document.getElementById(divEl.id + "_txtc"); }

  function getToolDivElementFromImage(imageId) {
    var parentId = imageId.substring(0, imageId.lastIndexOf("_"));
    return document.getElementById(parentId);
  }

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