ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update the browser.html example to support further testing. patch by cmoullet,

Browse Source 
simple example change, (Closes #3108)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@11539 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
2011-02-25 19:20:19 +00:00
parent b0b297bccd
commit 6486043716
2 changed files with 242 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/browser.html
+53 -3
View File
@@ -11,6 +11,10 @@
.olControlAttribution { .olControlAttribution {
bottom: 5px; bottom: 5px;
} }
.tester {
margin: 3px;
}
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
function init() { function init() {
@@ -79,12 +83,15 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Browser detection</h1> <h1 id="title">Browser detection</h1>
<div id="tags"> <div id="tags">
browser, vendor, mobile, events, HTML5, gesture, touch browser, vendor, mobile, events, HTML5, gesture, touch
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
The goal of this script is to inform about the capacity of the browser used by the user. The goal of this script is to inform about the capacity of the browser used by the user.
</p> </p>
<div id="docs"> <div id="docs">
<p> <p>
See the <a href="browser.js" target="_blank"> See the <a href="browser.js" target="_blank">
@@ -95,7 +102,50 @@
<h1>Your browser information</h1> <h1>Your browser information</h1>
<div id="result"> <div id="result">
</div> </div>
<h1>Click or touch the red square to get information about the selected events</h1>
<div>
<div class="tester">
<INPUT TYPE=CHECKBOX ID="clickID" checked>click<BR>
<INPUT TYPE=CHECKBOX ID="dblclickID">dblclick<BR>
<INPUT TYPE=CHECKBOX ID="mousedownID">mousedown<BR>
<INPUT TYPE=CHECKBOX ID="mouseupID">mouseup<BR>
<INPUT TYPE=CHECKBOX ID="mouseoverID">mouseover<BR>
<INPUT TYPE=CHECKBOX ID="mousemoveID">mousemove<BR>
<INPUT TYPE=CHECKBOX ID="mouseoutID">mouseout<BR>
<INPUT TYPE=CHECKBOX ID="touchstartID">touchstart<BR>
<INPUT TYPE=CHECKBOX ID="touchendID">touchend<BR>
<INPUT TYPE=CHECKBOX ID="touchmoveID">touchmove<BR>
<INPUT TYPE=CHECKBOX ID="touchcancelID">touchcancel<BR>
<INPUT TYPE=CHECKBOX ID="gesturestartID">gesturestart<BR>
<INPUT TYPE=CHECKBOX ID="gesturechangeID">gesturechange<BR>
<INPUT TYPE=CHECKBOX ID="gestureendID">gestureend<BR>
</div>
<div style="height: 200px;width: 200px;" class="tester">
<div id="box" style="height: 200px; width: 200px; background: none repeat scroll 0% 0% red; "
onclick="click(event)"
ondblclick="dblclick(event)"
onmousedown="mousedown(event)"
onmouseup="mouseup(event)"
onmouseover="mouseover(event)"
onmousemove="mousemove(event)"
onmouseout="mouseout(event)"
ontouchstart="touchstart(event)"
ontouchend="touchend(event)"
ontouchmove="touchmove(event)"
ontouchcancel="touchcancel(event)"
ongesturestart="gesturestart(event)"
ongesturechange="gesturechange(event)"
ongestureend="gestureend(event)">
</div>
</div>
<div id="log" class="tester"></div>
</div>
</body> </body>
</html> </html>
examples/browser.js
+189
View File
@@ -49,4 +49,193 @@ function divResult(category, name, element, div) {
); );
div.innerHTML = div.innerHTML + "<br>"; div.innerHTML = div.innerHTML + "<br>";
} }
var counter = 1;
function log(title, detail) {
var logDiv = document.getElementById("log");
idString = "'id" + counter + "'";
var newlink = document.createElement('a');
newlink.setAttribute('href', "javascript:toggle_visibility(" + idString + ")");
newlink.innerHTML = counter + ". " + title;
var br1 = document.createElement('br');
logDiv.appendChild(newlink);
logDiv.appendChild(br1);
var childDiv = document.createElement('div');
childDiv.setAttribute("id", idString.replace("'", "").replace("'", ""));
childDiv.setAttribute("style", 'display: none; margin-left : 5px;');
childDiv.innerHTML = detail;
var br2 = document.createElement('br');
logDiv.appendChild(childDiv);
counter = counter + 1;
}
function inspect(obj) {
if (typeof obj === "undefined") {
return "undefined";
}
var _props = [];
for (var i in obj) {
_props.push(i + " : " + obj[i]);
}
return " {" + _props.join(",<br>") + "} ";
}
function click(e) {
if (document.getElementById("clickID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function dblclick(e) {
if (document.getElementById("dblclickID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function mousedown(e) {
if (document.getElementById("mousedownID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function mouseup(e) {
if (document.getElementById("mouseupID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function mouseover(e) {
if (document.getElementById("mouseoverID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function mousemove(e) {
if (document.getElementById("mousemoveID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function mouseout(e) {
if (document.getElementById("mouseoutID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function touchstart(e) {
if (document.getElementById("touchstartID").checked) {
var box = document.getElementById("box");
var result = inspect(e);
for (var i = 0; i < e.touches.length; i++) {
result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
}
log(e.type, result);
if (e.preventDefault) e.preventDefault();
}
return false;
}
function touchend(e) {
if (document.getElementById("touchendID").checked) {
var box = document.getElementById("box");
var result = inspect(e);
for (var i = 0; i < e.touches.length; i++) {
result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
}
log(e.type, result);
if (e.preventDefault) e.preventDefault();
}
return false;
}
function touchmove(e) {
if (document.getElementById("touchmoveID").checked) {
var targetEvent = e.touches.item(0);
var box = document.getElementById("box");
box.style.left = targetEvent.clientX + "px";
box.style.top = targetEvent.clientY + "px";
var result = inspect(e);
for (var i = 0; i < e.touches.length; i++) {
result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
}
log(e.type, result);
if (e.preventDefault) e.preventDefault();
}
return false;
}
function touchcancel(e) {
if (document.getElementById("touchcancelID").checked) {
var box = document.getElementById("box");
var result = inspect(e);
for (var i = 0; i < e.touches.length; i++) {
result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
}
log(e.type, result);
if (e.preventDefault) e.preventDefault();
}
return false;
}
function gesturestart(e) {
if (document.getElementById("gesturestartID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function gesturechange(e) {
if (document.getElementById("gesturechangeID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function gestureend(e) {
if (document.getElementById("gestureendID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
}
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}