[mapguide-commits] r6272 - trunk/MgDev/Web/src/mapadmin
svn_mapguide at osgeo.org
svn_mapguide at osgeo.org
Fri Dec 2 00:48:03 EST 2011
Author: liuar
Date: 2011-12-01 21:48:03 -0800 (Thu, 01 Dec 2011)
New Revision: 6272
Modified:
trunk/MgDev/Web/src/mapadmin/performanceReport.php
Log:
On behalf of Ted Yang.
fix the ticket 1768: http://trac.osgeo.org/mapguide/ticket/1768
This submission is mainly fixed some UI defects:
1. the Center Point/Scale text box doesn't give warning if user cut the text and make it empty or paste the invalid string into it, use the context menu. This is because "onkeyup" event doesn't support the "copy/paste", so we use the "onInput" to instead. Unfortunately, the IE doesn't support "Input", so we use "onpropertychange" event under the IE;
2. the warning icon is too close to the border, so add 2px space and make the error info has a fixed height;
3. in IE, when the exception message is too long, it will exceed the width of the container, so add "word-wrap:break-word;" in the style;
4. when the layer info table is empty, an excption of null reference will be thrown, so catch this exception and return '';
5. fix the tooltip display problem in IE9
Modified: trunk/MgDev/Web/src/mapadmin/performanceReport.php
===================================================================
--- trunk/MgDev/Web/src/mapadmin/performanceReport.php 2011-12-01 14:43:47 UTC (rev 6271)
+++ trunk/MgDev/Web/src/mapadmin/performanceReport.php 2011-12-02 05:48:03 UTC (rev 6272)
@@ -290,6 +290,7 @@
border-left: 1px solid #666666;
z-index: 100;
line-height: 1.0;
+ word-wrap:break-word;
white-space: normal;
font-weight: normal;
}
@@ -352,7 +353,7 @@
#ResultNotMatchWrn
{
border: 2px solid #CCCCCC;
- background: #FFFEBB url('images/warning.png') no-repeat left top;
+ background: #FFFEBB url('images/warning.png') scroll no-repeat 2px 2px;
margin-top: 25px;
padding-left: 30px;
display: none;
@@ -362,7 +363,7 @@
.errorMessage
{
border: 2px solid #CCCCCC;
- background: #FFFEBB url('images/warning.png') no-repeat 1px 1px;
+ background: #FFFEBB url('images/warning.png') scroll no-repeat 2px 2px;
margin-top: 20px;
padding: 4px 5px 5px 32px;
width: auto;
@@ -592,6 +593,13 @@
var settingsBtn = document.getElementById("mapViewerBtn");
var centerPoint = document.getElementById("txtCenterPoint");
var scale = document.getElementById("txtScale");
+
+ //for IE
+ if(centerPoint.detachEvent)
+ {
+ centerPoint.detachEvent("onpropertychange",CenterPointPropertyChange);
+ scale.detachEvent("onpropertychange",ScalePropertyChange);
+ }
//If another map is selected, then the center point and scale should be cleared of values,
//that is return to default values “enter center point” and “enter scale”.
@@ -605,6 +613,13 @@
scale.value = "Enter scale";
}
+ //for IE
+ if(centerPoint.attachEvent)
+ {
+ centerPoint.attachEvent("onpropertychange",CenterPointPropertyChange);
+ scale.attachEvent("onpropertychange",ScalePropertyChange);
+ }
+
//show the map definition ID by the side of the map selector
if(mapDefinitonSelector.selectedIndex >= 0)
{
@@ -645,10 +660,10 @@
function ClearWrnMsg()
{
var scale = document.getElementById("txtScale");
- scale.className="";
+ scale.style.borderColor = "";
var centerPoint = document.getElementById("txtCenterPoint");
- centerPoint.className="";
+ centerPoint.style.borderColor = "";
var scaleWarnMsg = document.getElementById("scaleWarnMessage");
scaleWarnMsg.innerHTML = "";
@@ -666,11 +681,17 @@
var scaleWarnMsg = document.getElementById("scaleWarnMessage");
var scaleValue = RemoveSpace(scale.value);
+ //for IE
+ if(scale.detachEvent)
+ {
+ scale.detachEvent("onpropertychange",ScalePropertyChange);
+ }
+
if("" == scaleValue)
{
result = false;
scaleWarnMsg.innerHTML = "A map scale was not entered.";
- scale.className="warnMsgStyle";
+ scale.style.borderColor = "red";
}
else
{
@@ -692,7 +713,7 @@
if(!result)
{
scaleWarnMsg.innerHTML = "Not a valid map scale.";
- scale.className = "warnMsgStyle";
+ scale.style.borderColor = "red";
}
else
{
@@ -702,9 +723,15 @@
}
scaleWarnMsg.innerHTML = "";
- scale.className="";
+ scale.style.borderColor = "";
}
}
+
+ //for IE
+ if(scale.attachEvent)
+ {
+ scale.attachEvent("onpropertychange",ScalePropertyChange);
+ }
return result;
}
@@ -718,11 +745,17 @@
var centerPointWarnMsg = document.getElementById("centerPointWarnMessage");
var centerPointValue = RemoveSpace(centerPoint.value);
+ //for IE
+ if(centerPoint.detachEvent)
+ {
+ centerPoint.detachEvent("onpropertychange",CenterPointPropertyChange);
+ }
+
if("" == centerPointValue)
{
result = false;
centerPointWarnMsg.innerHTML = "A center point was not entered.";
- centerPoint.className = "warnMsgStyle";
+ centerPoint.style.borderColor = "red";
}
else
{
@@ -733,7 +766,7 @@
{
result = false;
centerPointWarnMsg.innerHTML = "Not a valid center point.";
- centerPoint.className = "warnMsgStyle";
+ centerPoint.style.borderColor = "red";
}
else
{
@@ -745,7 +778,7 @@
if(!result)
{
centerPointWarnMsg.innerHTML = "Not a valid center point.";
- centerPoint.className="warnMsgStyle";
+ centerPoint.style.borderColor = "red";
}
else
{
@@ -755,7 +788,7 @@
}
centerPointWarnMsg.innerHTML = "";
- centerPoint.className = "";
+ centerPoint.style.borderColor = "";
}
}
}
@@ -763,15 +796,65 @@
{
result = false;
centerPointWarnMsg.innerHTML = "Not a valid center point.";
- centerPoint.className = "warnMsgStyle";
+ centerPoint.style.borderColor = "red";
}
}
+ //for IE
+ if(centerPoint.attachEvent)
+ {
+ centerPoint.attachEvent("onpropertychange",CenterPointPropertyChange);
+ }
+
return result;
}
- function ScaleTxtKeyUp()
+ function InitialEvents()
{
+ var centerPointEl = document.getElementById("txtCenterPoint");
+ var scaleEl = document.getElementById("txtScale");
+
+ //for browsers which support addEventListener, add event handler
+ //for input, include the FF, Chrome, Safari
+ if (centerPointEl.addEventListener)
+ {
+ centerPointEl.addEventListener("input", CenterPointTxtChange, false);
+ scaleEl.addEventListener("input", ScaleTxtChange, false);
+ }
+ else if(centerPointEl.attachEvent)
+ {
+ //For IE, use attachEvent to add event hanlder for onpropertychange
+ centerPointEl.attachEvent("onpropertychange",CenterPointPropertyChange);
+ scaleEl.attachEvent("onpropertychange",ScalePropertyChange);
+ }
+ else
+ {
+ //For browers, which don't support both, use onkeup event
+ centerPointEl.onkeyup = CenterPointTxtChange;
+ scaleEl.onkeyup = ScaleTxtChange;
+ }
+ }
+
+ //For IE
+ function ScalePropertyChange(e)
+ {
+ if("value" == e.propertyName)
+ {
+ ScaleTxtChange();
+ }
+ }
+
+ //For IE
+ function CenterPointPropertyChange(e)
+ {
+ if("value" == e.propertyName)
+ {
+ CenterPointTxtChange();
+ }
+ }
+
+ function ScaleTxtChange()
+ {
//when the scale textbox has new input
//get the new value and check if the input is resonable
var visible = ValidateScale(false);
@@ -796,9 +879,11 @@
ShowReportWarningMsg();
}
- function CenterPointTxtKeyUp()
+ function CenterPointTxtChange()
{
- var visible=ValidateCenterPoint(false);
+ //when the center point textbox has new input
+ //get the new value and check if the input is resonable
+ var visible = ValidateCenterPoint(false);
//check other settings to see if it is reasonable
if(visible)
@@ -810,7 +895,7 @@
}
else
{
- visible=false;
+ visible = false;
}
}
@@ -824,20 +909,44 @@
{
var scale = document.getElementById("txtScale");
+ //for IE
+ if(scale.detachEvent)
+ {
+ scale.detachEvent("onpropertychange",ScalePropertyChange);
+ }
+
if( scale.value=="Enter scale")
{
scale.value="";
}
+
+ //for IE
+ if(scale.attachEvent)
+ {
+ scale.attachEvent("onpropertychange",ScalePropertyChange);
+ }
}
function CenterPointFocus()
{
var centerPoint = document.getElementById("txtCenterPoint");
+ //for IE
+ if(centerPoint.detachEvent)
+ {
+ centerPoint.detachEvent("onpropertychange",CenterPointPropertyChange);
+ }
+
if( centerPoint.value=="Enter center point")
{
centerPoint.value="";
}
+
+ //for IE
+ if(centerPoint.attachEvent)
+ {
+ centerPoint.attachEvent("onpropertychange",CenterPointPropertyChange);
+ }
}
var checkMapFrameLoadedInterval = null;
@@ -1050,11 +1159,27 @@
var scale = mapFrame.GetScale();
var centerPoint = document.getElementById("txtCenterPoint");
+ if(centerPoint.detachEvent)
+ {
+ centerPoint.detachEvent("onpropertychange",CenterPointPropertyChange);
+ }
centerPoint.value = center.X + "*" + center.Y;
+ if(centerPoint.attachEvent)
+ {
+ centerPoint.attachEvent("onpropertychange",CenterPointPropertyChange);
+ }
var centerPointValidate = ValidateCenterPoint(true);
var scaleInput = document.getElementById("txtScale");
+ if(scaleInput.detachEvent)
+ {
+ scaleInput.detachEvent("onpropertychange",ScalePropertyChange);
+ }
scaleInput.value = scale;
+ if(scaleInput.attachEvent)
+ {
+ scaleInput.attachEvent("onpropertychange",ScalePropertyChange);
+ }
var scaleValidate = ValidateScale(true);
var visible = centerPointValidate && scaleValidate;
@@ -1316,6 +1441,30 @@
//set tooltip position
toolTip.style.top = elPos.y + linkObj.offsetHeight+ downMouseTop+ "px";
toolTip.style.left = mosPos.x + downMouseLeft + "px";
+
+ var bodyWidth = document.body.clientWidth;
+ //clientWidth is different among different browsers,
+ //The IE is shorter than others, so to avoid the tooltip length exceeds the border
+ //we add a fix here
+ if(window.addEventListener)
+ {
+ bodyWidth -= 12;
+ }
+ var toolTipWidth = Math.abs(bodyWidth - (mosPos.x + downMouseLeft));
+ toolTipWidth = toolTipWidth > 280?280:toolTipWidth;
+
+ //in IE9, if we don't set the width, and the tooltip is near the browser border,
+ //it will break the string to many lines if the string contains white spaces
+ //for example, Library://Samples/Sheboygan/Maps/Test a map with many white space.MapDefinition
+ //this will be display like this:
+ //Library://Samples/Sheboygan/Maps/Test
+ //a
+ //map
+ //with
+ //many
+ //white
+ //space.MapDefinition
+ toolTip.style.width = toolTipWidth + "px";
toolTip.style.display = "block";
toolTip.className = "showTooltip";
@@ -1679,7 +1828,7 @@
//Note: when use document.getElementById, make sure the variable name is not the same with the "ID"
//like this: layerInfoDetail =document.getElementById("layerInfoDetail");
//it will cause problem under IE9 quirks mode, layerInfoDetail is already a built-in object of the document.
- //two way to solve this problem
+ //two ways to solve this problem
//1) make the variable name different with the "ID", layerDetail =document.getElementById("layerInfoDetail");
//2) add "var" before the varibale name, var layerInfoDetail =document.getElementById("layerInfoDetail");
function DisplayLayerDetail(layerDetail)
@@ -1689,7 +1838,7 @@
if( "" != Trim(layerDetail[3]) )
{
- layerDetailContent += '<div style="padding: 10px; background-color:#FFFEBB;">';
+ layerDetailContent += '<div style="padding: 10px; background-color:#FFFEBB;word-wrap:break-word;">';
layerDetailContent += "<span style='font-weight:bold;'>Details</span>";
layerDetailContent += "<br/><br/>";
layerDetailContent += layerDetail[3];
@@ -1711,7 +1860,7 @@
}
layerDetailContent += "</div>";
- layerDetailContent += '<div style=" background-color: #EEEEEE;padding: 10px;">';
+ layerDetailContent += '<div style=" background-color: #EEEEEE;padding: 10px;word-wrap:break-word;">';
layerDetailContent += "<span style='font-weight:bold;'>Scale Range</span>";
layerDetailContent += "<br/><br/>";
layerDetailContent += layerDetail[2];
@@ -1885,43 +2034,49 @@
{
// gets the text we want to use for sorting for a cell.
// strips leading and trailing whitespace.
-
- if (node.getAttribute("sortKey") != null)
+ try
{
- return node.getAttribute("sortKey");
+ if (node.getAttribute("sortKey") != null)
+ {
+ return node.getAttribute("sortKey");
+ }
+ else if (typeof node.textContent != 'undefined')
+ {
+ return node.textContent.replace(/^\s+|\s+$/g, '');
+ }
+ else if (typeof node.innerText != 'undefined')
+ {
+ return node.innerText.replace(/^\s+|\s+$/g, '');
+ }
+ else if (typeof node.text != 'undefined')
+ {
+ return node.text.replace(/^\s+|\s+$/g, '');
+ }
+ else
+ {
+ switch (node.nodeType)
+ {
+ case 4:
+ return node.nodeValue.replace(/^\s+|\s+$/g, '');
+ break;
+ case 1:
+ case 11:
+ var innerText = '';
+ var i = 0;
+ for (; i < node.childNodes.length; i++) {
+ innerText += SortLayers.getInnerText(node.childNodes[i]);
+ }
+ return innerText.replace(/^\s+|\s+$/g, '');
+ break;
+ default:
+ return '';
+ }
+ }
}
- else if (typeof node.textContent != 'undefined')
+ catch(e)
{
- return node.textContent.replace(/^\s+|\s+$/g, '');
+ return '';
}
- else if (typeof node.innerText != 'undefined')
- {
- return node.innerText.replace(/^\s+|\s+$/g, '');
- }
- else if (typeof node.text != 'undefined')
- {
- return node.text.replace(/^\s+|\s+$/g, '');
- }
- else
- {
- switch (node.nodeType)
- {
- case 4:
- return node.nodeValue.replace(/^\s+|\s+$/g, '');
- break;
- case 1:
- case 11:
- var innerText = '';
- var i = 0;
- for (; i < node.childNodes.length; i++) {
- innerText += SortLayers.getInnerText(node.childNodes[i]);
- }
- return innerText.replace(/^\s+|\s+$/g, '');
- break;
- default:
- return '';
- }
- }
},
// sort functions
@@ -1993,6 +2148,9 @@
}
SetSettingsWithCookie();
+ //register the events handler for the center point textbox and scale textbox
+ //input change
+ InitialEvents();
}
function SetSettingsWithCookie()
@@ -2063,11 +2221,29 @@
}
var centerPoint = document.getElementById("txtCenterPoint");
+ if(centerPoint.detachEvent)
+ {
+ centerPoint.detachEvent("onpropertychange",CenterPointPropertyChange);
+ }
centerPoint.value = selectSetting[2];
+ if(centerPoint.attachEvent)
+ {
+ centerPoint.attachEvent("onpropertychange",CenterPointPropertyChange);
+ }
+
ValidateCenterPoint(false);
var scaleInput = document.getElementById("txtScale");
+ if(scaleInput.detachEvent)
+ {
+ scaleInput.detachEvent("onpropertychange",ScalePropertyChange);
+ }
scaleInput.value = FormatNumber(selectSetting[3],4);
+ if(scaleInput.attachEvent)
+ {
+ scaleInput.attachEvent("onpropertychange",ScalePropertyChange);
+ }
+
ValidateScale(false);
var tipDiv = document.getElementById("mapResourceNameTip");
@@ -2228,7 +2404,7 @@
Center Point
</div>
<input type="textbox" name="txtCenterPoint" id="txtCenterPoint" style="width:220px;"
- onFocus="CenterPointFocus();" onKeyUp="CenterPointTxtKeyUp();" value="Enter center point" disabled="disabled"/>
+ onFocus="CenterPointFocus();" value="Enter center point" disabled="disabled"/>
</td>
<td style="padding:5px; width: 60%">
<div style=" margin-bottom: 5px; font-weight: bold;">
@@ -2236,11 +2412,11 @@
</div>
<label for="txtScale">1: </label>
<input type="textbox" name="txtScale" id="txtScale" onFocus="ScaleFocus();"
- onKeyUp="ScaleTxtKeyUp();" value="Enter scale" disabled="disabled"/>
+ value="Enter scale" disabled="disabled"/>
</td>
</tr>
<tr>
- <td>
+ <td style="height:18px;">
<span id="centerPointWarnMessage" style="color: #F03136; padding-left: 5px;">
</span>
</td>
More information about the mapguide-commits
mailing list