938 lines
33 KiB
JavaScript
938 lines
33 KiB
JavaScript
/* Custom control derived from the LayerSwitcher
|
|
|
|
/**
|
|
* @requires OpenLayers/Control.js
|
|
*/
|
|
|
|
// Global function to determine the number of elements in a non-nested array
|
|
function array_size(arr) {
|
|
var length = 0;
|
|
for(val in arr) {
|
|
length++;
|
|
}
|
|
return length;
|
|
}
|
|
|
|
/**
|
|
* Class: OpenLayers.Control.Mapview_control
|
|
*
|
|
* Inherits from:
|
|
* - <OpenLayers.Control>
|
|
*/
|
|
OpenLayers.Control.Mapview_Control =
|
|
OpenLayers.Class(OpenLayers.Control, {
|
|
|
|
/**
|
|
* Property: activeColor
|
|
* {String}
|
|
*/
|
|
activeColor: mapviewcontrol_color,
|
|
|
|
/**
|
|
* Property: layerStates
|
|
* {Array(Object)} Basically a copy of the "state" of the map's layers
|
|
* the last time the control was drawn. We have this in order to avoid
|
|
* unnecessarily redrawing the control.
|
|
*/
|
|
layerStates: null,
|
|
|
|
/*
|
|
* Offset used by up/down control (when needed)
|
|
*/
|
|
devIndex: 0,
|
|
|
|
/*
|
|
* Maximum index used by up/down control (when needed)
|
|
*/
|
|
devMaxIndex: 0,
|
|
|
|
/*
|
|
* Maximum index used by up/down control (when needed)
|
|
*/
|
|
devVisible: 0,
|
|
|
|
// DOM Elements
|
|
|
|
/**
|
|
* Property: layersDiv
|
|
* {DOMElement}
|
|
*/
|
|
layersDiv: null,
|
|
|
|
/**
|
|
* Property: baseLayersDiv
|
|
* {DOMElement}
|
|
*/
|
|
baseLayersDiv: null,
|
|
|
|
/**
|
|
* Property: baseLayers
|
|
* {Array(<OpenLayers.Layer>)}
|
|
*/
|
|
baseLayers: null,
|
|
|
|
|
|
/**
|
|
* Property: dataLbl
|
|
* {DOMElement}
|
|
*/
|
|
dataLbl: null,
|
|
|
|
/**
|
|
* Property: dataLayersDiv
|
|
* {DOMElement}
|
|
*/
|
|
dataLayersDiv: null,
|
|
|
|
/**
|
|
* Property: dataLayers
|
|
* {Array(<OpenLayers.Layer>)}
|
|
*/
|
|
dataLayers: null,
|
|
|
|
|
|
/**
|
|
* Property: minimizeDiv
|
|
* {DOMElement}
|
|
*/
|
|
minimizeDiv: null,
|
|
|
|
/**
|
|
* Property: maximizeDiv
|
|
* {DOMElement}
|
|
*/
|
|
maximizeDiv: null,
|
|
|
|
/**
|
|
* APIProperty: ascending
|
|
* {Boolean}
|
|
*/
|
|
ascending: true,
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Parameters:
|
|
* options - {Object}
|
|
*/
|
|
initialize: function(options) {
|
|
OpenLayers.Control.prototype.initialize.apply(this, arguments);
|
|
this.layerStates = [];
|
|
},
|
|
|
|
/**
|
|
* APIMethod: destroy
|
|
*/
|
|
destroy: function() {
|
|
|
|
OpenLayers.Event.stopObservingElement(this.div);
|
|
|
|
OpenLayers.Event.stopObservingElement(this.minimizeDiv);
|
|
OpenLayers.Event.stopObservingElement(this.maximizeDiv);
|
|
|
|
//clear out layers info and unregister their events
|
|
this.clearLayersArray("base");
|
|
this.clearLayersArray("data");
|
|
|
|
this.map.events.un({
|
|
"addlayer": this.redraw,
|
|
"changelayer": this.redraw,
|
|
"removelayer": this.redraw,
|
|
"changebaselayer": this.redraw,
|
|
scope: this
|
|
});
|
|
|
|
OpenLayers.Control.prototype.destroy.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Method: setMap
|
|
*
|
|
* Properties:
|
|
* map - {<OpenLayers.Map>}
|
|
*/
|
|
setMap: function(map) {
|
|
OpenLayers.Control.prototype.setMap.apply(this, arguments);
|
|
|
|
this.map.events.on({
|
|
"addlayer": this.redraw,
|
|
"changelayer": this.redraw,
|
|
"removelayer": this.redraw,
|
|
"changebaselayer": this.redraw,
|
|
scope: this
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Method: draw
|
|
*
|
|
* Returns:
|
|
* {DOMElement} A reference to the DIV DOMElement containing the
|
|
* switcher tabs.
|
|
*/
|
|
draw: function() {
|
|
OpenLayers.Control.prototype.draw.apply(this);
|
|
|
|
// create layout divs
|
|
this.loadContents();
|
|
|
|
// set mode to minimize
|
|
if(!this.outsideViewport) {
|
|
this.minimizeControl();
|
|
}
|
|
|
|
// populate div with current info
|
|
this.redraw();
|
|
|
|
return this.div;
|
|
},
|
|
|
|
/**
|
|
* Method: clearLayersArray
|
|
* User specifies either "base" or "data". we then clear all the
|
|
* corresponding listeners, the div, and reinitialize a new array.
|
|
*
|
|
* Parameters:
|
|
* layersType - {String}
|
|
*/
|
|
clearLayersArray: function(layersType) {
|
|
var layers = this[layersType + "Layers"];
|
|
if (layers) {
|
|
for(var i=0, len=layers.length; i<len ; i++) {
|
|
var layer = layers[i];
|
|
OpenLayers.Event.stopObservingElement(layer.inputElem);
|
|
OpenLayers.Event.stopObservingElement(layer.labelSpan);
|
|
}
|
|
}
|
|
try {
|
|
this[layersType + "LayersDiv"].innerHTML = "";
|
|
this[layersType + "Layers"] = [];
|
|
}
|
|
catch(err) {}
|
|
},
|
|
|
|
|
|
/**
|
|
* Method: checkRedraw
|
|
* Checks if the layer state has changed since the last redraw() call.
|
|
*
|
|
* Returns:
|
|
* {Boolean} The layer state changed since the last redraw() call.
|
|
*/
|
|
checkRedraw: function() {
|
|
var redraw = false;
|
|
if (this.NeedRedrawAnyway) {
|
|
redraw = true;
|
|
} else if ( !this.layerStates.length ||
|
|
(this.map.layers.length != this.layerStates.length) ) {
|
|
redraw = true;
|
|
} else {
|
|
for (var i=0, len=this.layerStates.length; i<len; i++) {
|
|
var layerState = this.layerStates[i];
|
|
var layer = this.map.layers[i];
|
|
if ( (layerState.name != layer.name) ||
|
|
(layerState.inRange != layer.inRange) ||
|
|
(layerState.id != layer.id) ||
|
|
(layerState.visibility != layer.visibility) ) {
|
|
redraw = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (this.DeviceTypesVisibleLen != array_size(DeviceTypesVisible) ||
|
|
this.NrOfMarkers != array_size(ZKL_Markers)) {
|
|
redraw = true;
|
|
}
|
|
return redraw;
|
|
},
|
|
|
|
/**
|
|
* Method: redraw
|
|
* Goes through and takes the current state of the Map and rebuilds the
|
|
* control to display that state. Groups base layers into a
|
|
* radio-button group and lists each data layer with a checkbox.
|
|
*
|
|
* Returns:
|
|
* {DOMElement} A reference to the DIV DOMElement containing the control
|
|
*/
|
|
redraw: function() {
|
|
//if the state hasn't changed since last redraw, no need
|
|
// to do anything. Just return the existing div.
|
|
if (!this.checkRedraw()) {
|
|
return this.div;
|
|
}
|
|
|
|
//clear out previous layers
|
|
this.clearLayersArray("base");
|
|
this.clearLayersArray("showndevices");
|
|
this.clearLayersArray("devicefinder");
|
|
|
|
var containsOverlays = false;
|
|
var containsBaseLayers = false;
|
|
var Items = 0;
|
|
var Devices = 0;
|
|
|
|
// Save state -- for checking layer if the map state changed.
|
|
// We save this before redrawing, because in the process of redrawing
|
|
// we will trigger more visibility changes, and we want to not redraw
|
|
// and enter an infinite loop.
|
|
var len = this.map.layers.length;
|
|
this.layerStates = new Array(len);
|
|
for (var i=0; i <len; i++) {
|
|
var layer = this.map.layers[i];
|
|
this.layerStates[i] = {
|
|
'name': layer.name,
|
|
'visibility': layer.visibility,
|
|
'inRange': layer.inRange,
|
|
'id': layer.id
|
|
};
|
|
}
|
|
this.DeviceTypesVisibleLen = array_size(DeviceTypesVisible);
|
|
this.NrOfMarkers = array_size(ZKL_Markers);
|
|
this.NeedRedrawAnyway = false;
|
|
|
|
var layers = this.map.layers.slice();
|
|
if (!this.ascending) { layers.reverse(); }
|
|
for(var i=0, len=layers.length; i<len; i++) {
|
|
var layer = layers[i];
|
|
|
|
// Parse base layers only
|
|
if (layer.displayInLayerSwitcher && layer.isBaseLayer) {
|
|
// only check a baselayer if it is *the* baselayer, check data
|
|
// layers if they are visible
|
|
var checked = (layer == this.map.baseLayer);
|
|
|
|
// create input element
|
|
var inputElem = document.createElement("input");
|
|
inputElem.id = this.id + "_input_" + layer.name;
|
|
inputElem.className = 'radio_element';
|
|
inputElem.name = "baseLayers";
|
|
inputElem.type = "radio";
|
|
inputElem.value = layer.name;
|
|
inputElem.checked = checked;
|
|
inputElem.defaultChecked = checked;
|
|
|
|
var context = {
|
|
'inputElem': inputElem,
|
|
'layer': layer,
|
|
'layerSwitcher': this
|
|
};
|
|
OpenLayers.Event.observe(inputElem, "mouseup",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context)
|
|
);
|
|
|
|
// create span
|
|
var labelSpan = document.createElement("span");
|
|
labelSpan.innerHTML = ' <span class="control_span" style="cursor:pointer;">'+layer.name+"</span>";
|
|
labelSpan.style.verticalAlign = "baseline";
|
|
OpenLayers.Event.observe(labelSpan, "click",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context)
|
|
);
|
|
// create line break
|
|
var br = document.createElement("br");
|
|
|
|
|
|
this.baseLayers.push({
|
|
'layer': layer,
|
|
'inputElem': inputElem,
|
|
'labelSpan': labelSpan
|
|
});
|
|
|
|
this.baseLayersDiv.appendChild(inputElem);
|
|
this.baseLayersDiv.appendChild(labelSpan);
|
|
this.baseLayersDiv.appendChild(br);
|
|
Items++;
|
|
}
|
|
}
|
|
|
|
// Parse device type visibility (defined in mapview.js)
|
|
var bHaveDevTypes = false;
|
|
for (x in DeviceTypesVisible) {
|
|
bHaveDevTypes = true;
|
|
// create input element
|
|
var inputElem = document.createElement("input");
|
|
inputElem.id = this.id + "_input_" + x;
|
|
inputElem.className = 'checkbox_element';
|
|
inputElem.name = "devTypeVisibility_"+x;
|
|
inputElem.type = "checkbox";
|
|
inputElem.value = x;
|
|
inputElem.checked = DeviceTypesVisible[x];
|
|
inputElem.defaultChecked = DeviceTypesVisible[x];
|
|
|
|
var context = {
|
|
'inputElem': inputElem,
|
|
'layer': layer,
|
|
'layerSwitcher': this
|
|
};
|
|
OpenLayers.Event.observe(inputElem, "mouseup",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context)
|
|
);
|
|
// create span
|
|
if (typeof(DevTypesToNames_transtbl[x]) != 'undefined') {
|
|
var labelSpan = document.createElement("span");
|
|
labelSpan.innerHTML = ' <span class="control_span" style="cursor:pointer;">'+DevTypesToNames_transtbl[x]+"</span>";
|
|
labelSpan.style.verticalAlign = "baseline";
|
|
OpenLayers.Event.observe(labelSpan, "click",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context)
|
|
);
|
|
// create line break
|
|
var br = document.createElement("br");
|
|
this.showndevicesLayers.push({
|
|
'layer': layer,
|
|
'inputElem': inputElem,
|
|
'labelSpan': labelSpan
|
|
});
|
|
|
|
this.showndevicesLayersDiv.appendChild(inputElem);
|
|
this.showndevicesLayersDiv.appendChild(labelSpan);
|
|
this.showndevicesLayersDiv.appendChild(br);
|
|
Items++;
|
|
}
|
|
}
|
|
|
|
// Parse devices for device finder
|
|
|
|
// Detect number of visible devices
|
|
for (x in ZKL_Markers) {
|
|
if (typeof (ZKL_Markers[x]) != 'undefined') {
|
|
if (DeviceTypesVisible[ZKL_Markers[x].s_devtype] == true || ZKL_Markers[x].s_icon == "nok") {
|
|
Items++;
|
|
Devices++;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add header labels to visible items
|
|
Items += 3;
|
|
|
|
// Get map height
|
|
var VisibleItems = parseInt((getElement('map').offsetHeight/22));
|
|
|
|
// Store values
|
|
this.devMaxIndex = Devices;
|
|
this.devVisible = (Items <= VisibleItems) ? Devices : (VisibleItems - (Items - Devices)) - 2;
|
|
|
|
// Add up button (when needed)
|
|
if (Items > VisibleItems) {
|
|
var inputElem = document.createElement("div");
|
|
inputElem.innerHTML = '<center><img id="' + this.id + '_arrow_up_image" src=\"html/images/arrow_up.gif\" style="margin-top:1px"></img></center>';
|
|
inputElem.id = this.id + "_arrow_up";
|
|
inputElem.className = 'mapviewcontrol_arrow';
|
|
|
|
var context = {
|
|
'inputElem': inputElem,
|
|
'layer': layer,
|
|
'layerSwitcher': this
|
|
};
|
|
|
|
// Add event listeners
|
|
OpenLayers.Event.observe(inputElem, "mouseup",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context));
|
|
|
|
OpenLayers.Event.observe(inputElem, "mousedown",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context));
|
|
|
|
OpenLayers.Event.observe(inputElem, "mouseout",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context));
|
|
|
|
// Add element
|
|
this.devicefinderLayersDiv.appendChild(inputElem);
|
|
}
|
|
|
|
// Add 'view all'
|
|
var bHaveDevices = false;
|
|
var index = 0;
|
|
var counter = 0;
|
|
for (x in ZKL_Markers) {
|
|
if (typeof (ZKL_Markers[x]) != 'undefined') {
|
|
if (DeviceTypesVisible[ZKL_Markers[x].s_devtype] == true || ZKL_Markers[x].s_icon == "nok") {
|
|
// All items visible?
|
|
if ((Items <= VisibleItems) || ((index >= this.devIndex) && (counter < this.devVisible))) {
|
|
bHaveDevices = true;
|
|
// create input element
|
|
var inputElem = document.createElement("input");
|
|
inputElem.id = this.id + "_input_" + x;
|
|
inputElem.className = 'checkbox_element';
|
|
inputElem.name = "devTrack_" + x;
|
|
inputElem.type = "checkbox";
|
|
inputElem.value = x;
|
|
inputElem.checked = ZKL_Markers[x].ip_bTracking;
|
|
inputElem.defaultChecked = ZKL_Markers[x].ip_bTracking;
|
|
|
|
var context = {
|
|
'inputElem': inputElem,
|
|
'layer': layer,
|
|
'layerSwitcher': this
|
|
};
|
|
OpenLayers.Event.observe(inputElem, "mouseup",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context)
|
|
);
|
|
|
|
// Add visible/invisible image
|
|
var inputElemVisible = document.createElement("span");
|
|
var image = (ZKL_Markers[x].bHidden) ? 'html/images/invisible.gif' : 'html/images/visible.gif';
|
|
inputElemVisible.innerHTML = ' <span onclick="ol_HideItem('+x+');"><img id="'+x+'_visible_image" src='+image+'></img></span> ';
|
|
inputElemVisible.style.height = '10px';
|
|
inputElemVisible.style.width = '20px';
|
|
|
|
var context = {
|
|
'inputElemVisible': inputElemVisible,
|
|
'layer': layer,
|
|
'layerSwitcher': this
|
|
};
|
|
|
|
// create span
|
|
var labelSpan = document.createElement("span");
|
|
labelSpan.id = this.id + "_input_" + x + "_label";
|
|
labelSpan.innerHTML = '<span class="control_span" onclick="ol_CenterItem('+x+')" style="cursor:pointer;">'+ZKL_Markers[x].s_idcode+"</span>";
|
|
labelSpan.style.verticalAlign = "baseline";
|
|
if (ZKL_Markers[x].s_icon == "nok") {
|
|
labelSpan.style.background = "red";
|
|
}
|
|
else if ((typeof(ZKL_Markers[x].s_active) != 'undefined') && (ZKL_Markers[x].s_active.toLowerCase() == "active") && (ZKL_Markers[x].s_icon == "ok")) {
|
|
labelSpan.style.background = "green";
|
|
}
|
|
else if ((ZKL_Markers[x].s_icon == "error") && (ZKL_Markers[x].s_icon_info.toLowerCase().search("sleepmode") != -1)) {
|
|
labelSpan.style.background = "yellow";
|
|
}
|
|
|
|
this.devicefinderLayersDiv.appendChild(inputElem);
|
|
this.devicefinderLayersDiv.appendChild(inputElemVisible);
|
|
this.devicefinderLayersDiv.appendChild(labelSpan);
|
|
|
|
// create line break
|
|
var br = document.createElement("br");
|
|
this.devicefinderLayersDiv.appendChild(br);
|
|
|
|
// Update counter
|
|
counter++;
|
|
}
|
|
|
|
// Update index
|
|
index++;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add down button (when needed)
|
|
if (Items > VisibleItems) {
|
|
var inputElem = document.createElement("div");
|
|
inputElem.innerHTML = '<center><img id="' + this.id + 'arrow_down_image" src=\"html/images/arrow_down.gif\" style="margin-top:2px"></img></center>';
|
|
inputElem.id = this.id + "_arrow_down";
|
|
inputElem.className = 'mapviewcontrol_arrow';
|
|
|
|
var context = {
|
|
'inputElem': inputElem,
|
|
'layer': layer,
|
|
'layerSwitcher': this
|
|
};
|
|
|
|
// Add event listeners
|
|
OpenLayers.Event.observe(inputElem, "mouseup",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context));
|
|
|
|
OpenLayers.Event.observe(inputElem, "mousedown",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context));
|
|
|
|
OpenLayers.Event.observe(inputElem, "mouseout",
|
|
OpenLayers.Function.bindAsEventListener(this.onInputClick,
|
|
context));
|
|
|
|
// Add element
|
|
this.devicefinderLayersDiv.appendChild(inputElem);
|
|
}
|
|
|
|
// display device finder only if we have devices on the map
|
|
this.devicefinderLbl.style.height = (bHaveDevices) ? 'auto' : '0px';
|
|
this.devicefinderLbl.style.visibility = (bHaveDevices) ? 'visible' : 'hidden';
|
|
this.devicefinderLayersDiv.style.height = (bHaveDevices) ? 'auto' : '0px';
|
|
|
|
return this.div;
|
|
},
|
|
|
|
/**
|
|
* Method:
|
|
* A label has been clicked, check or uncheck its corresponding input
|
|
*
|
|
* Parameters:
|
|
* e - {Event}
|
|
*
|
|
* Context:
|
|
* - {DOMElement} inputElem
|
|
* - {<OpenLayers.Control.LayerSwitcher>} layerSwitcher
|
|
* - {<OpenLayers.Layer>} layer
|
|
*/
|
|
onInputClick: function(e) {
|
|
if (!this.inputElem.disabled) {
|
|
// Up/down control handler
|
|
if ((this.inputElem.id.search("_arrow_up") != -1) ||
|
|
(this.inputElem.id.search("_arrow_down") != -1)) {
|
|
if (e.type == "mousedown") {
|
|
getElement(this.inputElem.id).style.borderStyle = 'inset';
|
|
|
|
if (this.inputElem.id.search("_arrow_up") != -1) {
|
|
if (this.layerSwitcher.devIndex > 0) {
|
|
this.layerSwitcher.devIndex--;
|
|
this.layerSwitcher.NeedRedrawAnyway = true;
|
|
}
|
|
}
|
|
else {
|
|
if (this.layerSwitcher.devIndex < this.layerSwitcher.devMaxIndex) {
|
|
if ((this.layerSwitcher.devMaxIndex - this.layerSwitcher.devIndex) > this.layerSwitcher.devVisible) {
|
|
this.layerSwitcher.devIndex++;
|
|
this.layerSwitcher.NeedRedrawAnyway = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
// Button pushed?
|
|
if (this.layerSwitcher.NeedRedrawAnyway) {
|
|
getElement(this.inputElem.id).style.borderStyle = 'outset';
|
|
this.layerSwitcher.forceRedraw();
|
|
}
|
|
}
|
|
}
|
|
// Map control handler
|
|
else if (this.inputElem.type == "radio") {
|
|
this.inputElem.checked = true;
|
|
this.layer.map.setBaseLayer(this.layer);
|
|
}
|
|
// Device control handler
|
|
else {
|
|
this.inputElem.checked = !this.inputElem.checked;
|
|
// Is this a device-type checkbox?
|
|
if (this.inputElem.name.substr(0,17) == "devTypeVisibility") {
|
|
DeviceTypesVisible[this.inputElem.value] = this.inputElem.checked;
|
|
this.layerSwitcher.forceRedraw();
|
|
}
|
|
// Is this a device track checkbox?
|
|
else if (this.inputElem.name.substr(0,9) == "devTrack_") {
|
|
ZKL_Markers[this.inputElem.value].ip_bTracking = this.inputElem.checked;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Reinit zoom control (only needed when map is changed!)
|
|
if ((ExtendedMenu) && (this.inputElem.type == "radio")) {
|
|
Extend_Zoom(ExtendedMenu);
|
|
}
|
|
|
|
OpenLayers.Event.stop(e);
|
|
},
|
|
|
|
/**
|
|
* Method: onLayerClick
|
|
* Need to update the map accordingly whenever user clicks in either of
|
|
* the layers.
|
|
*
|
|
* Parameters:
|
|
* e - {Event}
|
|
*/
|
|
onLayerClick: function(e) {
|
|
this.updateMap();
|
|
},
|
|
|
|
/**
|
|
* Method: updateMap
|
|
* Cycles through the loaded data and base layer input arrays and makes
|
|
* the necessary calls to the Map object such that that the map's
|
|
* visual state corresponds to what the user has selected in
|
|
* the control.
|
|
*/
|
|
updateMap: function() {
|
|
// set the newly selected base layer
|
|
for(var i=0, len=this.baseLayers.length; i<len; i++) {
|
|
var layerEntry = this.baseLayers[i];
|
|
if (layerEntry.inputElem.checked) {
|
|
this.map.setBaseLayer(layerEntry.layer, false);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: updateDevices
|
|
* Update the tracking values and label background of the devices
|
|
*/
|
|
updateDevices: function() {
|
|
for (x in ZKL_Markers) {
|
|
if (typeof (ZKL_Markers[x]) != 'undefined') {
|
|
// update visibility
|
|
try {
|
|
getElement(this.id + "_input_" + x).checked = ZKL_Markers[x].ip_bTracking;
|
|
}
|
|
catch(err) { /* Silent exception */ }
|
|
|
|
// update label background
|
|
try {
|
|
if (ZKL_Markers[x].s_icon == "nok") {
|
|
getElement(this.id + "_input_" + x + "_label").style.background = "red";
|
|
}
|
|
else if ((typeof(ZKL_Markers[x].s_active) != 'undefined') && (ZKL_Markers[x].s_active.toLowerCase() == "active") && (ZKL_Markers[x].s_icon == "ok")) {
|
|
getElement(this.id + "_input_" + x + "_label").style.background = "green";
|
|
}
|
|
else if ((ZKL_Markers[x].s_icon == "error") && (ZKL_Markers[x].s_icon_info.toLowerCase().search("sleepmode") != -1)) {
|
|
getElement(this.id + "_input_" + x + "_label").style.background = "yellow";
|
|
}
|
|
else {
|
|
getElement(this.id + "_input_" + x + "_label").style.background = "";
|
|
}
|
|
}
|
|
catch(err) { /* Silent exception */ }
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: maximizeControl
|
|
* Set up the labels and divs for the control
|
|
*
|
|
* Parameters:
|
|
* e - {Event}
|
|
*/
|
|
maximizeControl: function(e) {
|
|
// HACK HACK => TBD autosizing
|
|
this.div.style.width = "27em";
|
|
this.div.style.height = "auto";
|
|
this.showControls(false);
|
|
|
|
if (e != null) {
|
|
OpenLayers.Event.stop(e);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: minimizeControl
|
|
* Hide all the contents of the control, shrink the size,
|
|
* add the maximize icon
|
|
*
|
|
* Parameters:
|
|
* e - {Event}
|
|
*/
|
|
minimizeControl: function(e) {
|
|
|
|
this.div.style.width = "0px";
|
|
this.div.style.height = "0px";
|
|
this.showControls(true);
|
|
|
|
if (e != null) {
|
|
OpenLayers.Event.stop(e);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: showControls
|
|
* Hide/Show all LayerSwitcher controls depending on whether we are
|
|
* minimized or not
|
|
*
|
|
* Parameters:
|
|
* minimize - {Boolean}
|
|
*/
|
|
showControls: function(minimize) {
|
|
this.maximizeDiv.style.display = minimize ? "" : "none";
|
|
this.minimizeDiv.style.display = minimize ? "none" : "";
|
|
this.layersDiv.style.display = minimize ? "none" : "";
|
|
},
|
|
|
|
/**
|
|
* Method: loadContents
|
|
* Set up the labels and divs for the control
|
|
*/
|
|
loadContents: function() {
|
|
//configure main div
|
|
this.div.style.position = "absolute";
|
|
this.div.style.top = "5px";
|
|
this.div.style.right = "0px";
|
|
this.div.style.left = "";
|
|
this.div.style.fontFamily = "sans-serif";
|
|
this.div.style.fontWeight = "bold";
|
|
this.div.style.marginTop = "3px";
|
|
this.div.style.marginLeft = "3px";
|
|
this.div.style.marginBottom = "3px";
|
|
this.div.style.fontSize = "smaller";
|
|
this.div.style.color = "white";
|
|
this.div.style.backgroundColor = "transparent";
|
|
|
|
OpenLayers.Event.observe(this.div, "mouseup", OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
|
|
OpenLayers.Event.observe(this.div, "click", this.ignoreEvent);
|
|
OpenLayers.Event.observe(this.div, "mousedown", OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
|
|
OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
|
|
|
|
// div containing sub layers
|
|
this.layersDiv = document.createElement("div");
|
|
this.layersDiv.id = this.id + "_layersDiv";
|
|
this.layersDiv.style.paddingTop = "5px";
|
|
this.layersDiv.style.paddingLeft = "10px";
|
|
this.layersDiv.style.paddingBottom = "5px";
|
|
this.layersDiv.style.paddingRight = "75px";
|
|
this.layersDiv.style.backgroundColor = this.activeColor;
|
|
this.layersDiv.style.width = "100%";
|
|
// HACK HACK (IE6 support)
|
|
try {
|
|
if (typeof(is_IE6) != "undefined") {
|
|
this.layersDiv.style.width = "auto";
|
|
}
|
|
}
|
|
catch (err) { /* Silent Exception */ };
|
|
this.layersDiv.style.height = "100%";
|
|
|
|
// the basemap label
|
|
this.baseLbl = document.createElement("div");
|
|
this.baseLbl.innerHTML = '<span class="control_span">'+StatusTranslationTable['baseMap']+'</span>';
|
|
this.baseLbl.style.marginTop = "1px";
|
|
this.baseLbl.style.marginLeft = "3px";
|
|
this.baseLbl.style.marginBottom = "1px";
|
|
this.baseLbl.style.fontSize = "120%";
|
|
|
|
// The basemap choices
|
|
this.baseLayersDiv = document.createElement("div");
|
|
this.baseLayersDiv.style.paddingLeft = "15px";
|
|
this.baseLayersDiv.style.marginBottom = "0px";
|
|
this.baseLayersDiv.style.marginTop = "5px";
|
|
|
|
// The device types visibility label
|
|
this.showndevicesLbl = document.createElement("div");
|
|
this.showndevicesLbl.innerHTML = '<span class="control_span">'+StatusTranslationTable['devTypes']+'</span>';
|
|
this.showndevicesLbl.style.marginTop = "5px";
|
|
this.showndevicesLbl.style.marginLeft = "3px";
|
|
this.showndevicesLbl.style.marginBottom = "1px";
|
|
this.showndevicesLbl.style.fontSize = "120%";
|
|
|
|
// The device types visibility control
|
|
this.showndevicesLayersDiv = document.createElement("div");
|
|
this.showndevicesLayersDiv.style.paddingLeft = "15px";
|
|
this.showndevicesLayersDiv.style.marginTop = "5px";
|
|
|
|
// The device finder label
|
|
this.devicefinderLbl = document.createElement("div");
|
|
this.devicefinderLbl.innerHTML = '<span class="control_span" onclick="ol_RecenterMap()" style="cursor:pointer;">'+StatusTranslationTable['devFinder']+'</span>';
|
|
this.devicefinderLbl.style.marginTop = "5px";
|
|
this.devicefinderLbl.style.marginLeft = "3px";
|
|
this.devicefinderLbl.style.marginBottom = "1px";
|
|
|
|
// The device finder control
|
|
this.devicefinderLayersDiv = document.createElement("div");
|
|
this.devicefinderLayersDiv.style.paddingLeft = "15px";
|
|
this.devicefinderLayersDiv.style.marginTop = "5px";
|
|
|
|
// Merge DIV's
|
|
this.layersDiv.appendChild(this.baseLbl);
|
|
this.layersDiv.appendChild(this.baseLayersDiv);
|
|
this.layersDiv.appendChild(this.showndevicesLbl);
|
|
this.layersDiv.appendChild(this.showndevicesLayersDiv);
|
|
this.layersDiv.appendChild(this.devicefinderLbl);
|
|
this.layersDiv.appendChild(this.devicefinderLayersDiv);
|
|
|
|
this.div.appendChild(this.layersDiv);
|
|
|
|
OpenLayers.Rico.Corner.round(this.div, {corners: "tl bl",
|
|
bgColor: "transparent",
|
|
color: this.activeColor,
|
|
blend: false});
|
|
|
|
OpenLayers.Rico.Corner.changeOpacity(this.layersDiv, 1.0);
|
|
|
|
var imgLocation = OpenLayers.Util.getImagesLocation();
|
|
var sz = new OpenLayers.Size(18,18);
|
|
|
|
// maximize button div
|
|
var img = imgLocation + 'layer-switcher-maximize.png';
|
|
this.maximizeDiv = OpenLayers.Util.createAlphaImageDiv(
|
|
"OpenLayers_Control_MaximizeDiv",
|
|
null,
|
|
sz,
|
|
img,
|
|
"absolute");
|
|
this.maximizeDiv.style.top = "5px";
|
|
this.maximizeDiv.style.right = "0px";
|
|
this.maximizeDiv.style.left = "";
|
|
this.maximizeDiv.style.display = "none";
|
|
OpenLayers.Event.observe(this.maximizeDiv, "click",
|
|
OpenLayers.Function.bindAsEventListener(this.maximizeControl, this)
|
|
);
|
|
|
|
this.div.appendChild(this.maximizeDiv);
|
|
|
|
// minimize button div
|
|
var img = imgLocation + 'layer-switcher-minimize.png';
|
|
var sz = new OpenLayers.Size(18,18);
|
|
this.minimizeDiv = OpenLayers.Util.createAlphaImageDiv(
|
|
"OpenLayers_Control_MinimizeDiv",
|
|
null,
|
|
sz,
|
|
img,
|
|
"absolute");
|
|
this.minimizeDiv.style.top = "5px";
|
|
this.minimizeDiv.style.right = "0px";
|
|
this.minimizeDiv.style.left = "";
|
|
this.minimizeDiv.style.display = "none";
|
|
OpenLayers.Event.observe(this.minimizeDiv, "click",
|
|
OpenLayers.Function.bindAsEventListener(this.minimizeControl, this)
|
|
);
|
|
|
|
this.div.appendChild(this.minimizeDiv);
|
|
},
|
|
|
|
/**
|
|
* Method: ignoreEvent
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
ignoreEvent: function(evt) {
|
|
OpenLayers.Event.stop(evt);
|
|
},
|
|
|
|
/**
|
|
* Method: forceRedraw
|
|
* Force a redraw of the control div
|
|
*
|
|
* Parameters
|
|
* none
|
|
*/
|
|
forceRedraw: function() {
|
|
this.NeedRedrawAnyway = true;
|
|
this.redraw();
|
|
},
|
|
/**
|
|
* Method: mouseDown
|
|
* Register a local 'mouseDown' flag so that we'll know whether or not
|
|
* to ignore a mouseUp event
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
mouseDown: function(evt) {
|
|
this.isMouseDown = true;
|
|
this.ignoreEvent(evt);
|
|
},
|
|
|
|
/**
|
|
* Method: mouseUp
|
|
* If the 'isMouseDown' flag has been set, that means that the drag was
|
|
* started from within the LayerSwitcher control, and thus we can
|
|
* ignore the mouseup. Otherwise, let the Event continue.
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
mouseUp: function(evt) {
|
|
if (this.isMouseDown) {
|
|
this.isMouseDown = false;
|
|
this.ignoreEvent(evt);
|
|
}
|
|
},
|
|
|
|
CLASS_NAME: "OpenLayers.Control.BvH_Control"
|
|
});
|