Update the browser.html example to support further testing. patch by cmoullet,
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
@@ -11,6 +11,10 @@
|
||||
.olControlAttribution {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.tester {
|
||||
margin: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function init() {
|
||||
@@ -79,12 +83,15 @@
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Browser detection</h1>
|
||||
|
||||
<div id="tags">
|
||||
browser, vendor, mobile, events, HTML5, gesture, touch
|
||||
browser, vendor, mobile, events, HTML5, gesture, touch
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
The goal of this script is to inform about the capacity of the browser used by the user.
|
||||
</p>
|
||||
|
||||
<div id="docs">
|
||||
<p>
|
||||
See the <a href="browser.js" target="_blank">
|
||||
@@ -95,7 +102,50 @@
|
||||
<h1>Your browser information</h1>
|
||||
|
||||
<div id="result">
|
||||
|
||||
</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>
|
||||
</html>
|
||||
|
||||
@@ -49,4 +49,193 @@ function divResult(category, name, element, div) {
|
||||
);
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user