Skip to content

Commit 9990fba

Browse files
committed
[web] update mouse interaction page
1 parent bc1b4f0 commit 9990fba

File tree

1 file changed

+34
-20
lines changed

1 file changed

+34
-20
lines changed

common/src/web/mouse_interaction.html

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@
33
<title>BasicMouseInterfaceTest</title>
44

55
<style>
6-
div.solidborder { border-style:solid; border-width:1px;}
6+
div.solidborder { border-style:solid; border-width:1px; margin: 10px;}
77
#draggable { width: 60px; height: 60px; padding: 0.5em; margin: 10px; }
88
#droppable { width: 75px; height: 75px; padding: 0.5em; margin: 10px; }
99
</style>
1010

11-
<link type="text/css" href="css/ui-lightness/jquery-ui-1.12.1.min.css" rel="stylesheet" />
12-
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
13-
<script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"></script>
11+
<link type="text/css" href="https://selenium.dev/selenium/web/css/ui-lightness/jquery-ui-1.12.1.min.css" rel="stylesheet" />
12+
<script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-3.5.1.min.js"></script>
13+
<script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-ui-1.12.1.min.js"></script>
1414
<script type="text/javascript">
1515
jQuery(document).ready(function(){
16-
$('#mousetracker').mousemove(function(e){
16+
$('#mouse-tracker').mousemove(function(e){
1717
xPos = e.pageX - this.offsetLeft;
1818
yPos = e.pageY - this.offsetTop;
19-
$('#status').html(xPos + ', ' + yPos);
19+
$('#relative-location').html(xPos + ', ' + yPos);
2020
});
2121
})
2222

@@ -29,14 +29,28 @@
2929
document.getElementById('move-status').innerHTML = message;
3030
}
3131
function dropStatus(message) {
32-
document.getElementById('drop-status').innerHTML = message;
32+
document.getElementById('drop-status').innerHTML = message;
3333
}
34+
function relativeStatus(message) {
35+
document.getElementById('relative-location').innerHTML = message;
36+
}
37+
function absoluteStatus(message) {
38+
document.getElementById('absolute-location').innerHTML = message;
39+
}
40+
function tellPos(p){
41+
document.getElementById('absolute-location').innerHTML = p.pageX + ', ' + p.pageY;
42+
}
43+
function clearAbsolute(p){
44+
document.getElementById('absolute-location').innerHTML = '';
45+
}
46+
addEventListener('mousemove', tellPos, false);
47+
document.documentElement.addEventListener('mouseleave', clearAbsolute, false);
3448
</script>
3549
<script type="text/javascript">
3650
$(function () {
3751
$("#draggable").draggable();
3852
$("#droppable").droppable({
39-
drop: function (event, ui) { dropStatus("Dropped!") }
53+
drop: function (event, ui) { dropStatus("dropped") }
4054
});
4155
});
4256
</script>
@@ -48,33 +62,33 @@ <h2>Mouse Clicks</h2>
4862
<p><a href="resultPage.html" id="click">Click for Results Page</a></p>
4963

5064
<div>
51-
<input type="text" id="presses"
52-
onfocus="clickStatus('focus')"
53-
oncontextmenu="clickStatus('contextClick')"
54-
ondblclick="clickStatus('doubleClick')"
55-
placeholder="Click"/>&nbsp;&nbsp;
65+
<input type="text" id="clickable"
66+
onfocus="clickStatus('focused')"
67+
oncontextmenu="clickStatus('context-clicked')"
68+
ondblclick="clickStatus('double-clicked')"
69+
placeholder="Clickable"/>&nbsp;&nbsp;
5670

5771
<strong id="click-status">&nbsp;</strong>
5872
</div>
5973

6074
<h2>Drag & Drop</h2>
6175

6276
<strong id="drop-status">&nbsp;</strong>
63-
<div id="draggable" class="ui-widget-content">Drag this</div>
77+
<div id="draggable" class="ui-widget-content">Draggable</div>
6478

65-
<div id="droppable" class="ui-widget-header">Drop here</div>
79+
<div id="droppable" class="ui-widget-header">Droppable</div>
6680

6781
<h2>Mouse Position</h2>
6882

6983
<div>
70-
<input type="button" id="hover" onmouseleave="moveStatus('')" onmouseover="moveStatus('hovered')" value="Hover"/>
71-
<strong id="move-status">&nbsp;</strong>
84+
<input type="button" id="hover" onmouseleave="moveStatus('')" onmouseover="moveStatus('hovered')" value="Hoverable"/>
85+
<strong id="move-status">&nbsp</strong>
7286
</div>
7387

74-
<p><strong id="status">0, 0</strong></p>
75-
<div id="mousetracker" class="solidborder" style="position: absolute; height: 200px; width: 200px;">
88+
<p><strong>Absolute Location: <span id="absolute-location" onmouseleave="absoluteStatus('')"></span></strong></p>
89+
<p><strong>Relative Location in Box: <span id="relative-location"></span></strong></p>
90+
<div id="mouse-tracker" onmouseleave="relativeStatus('')" class="solidborder" style="position: absolute; height: 200px; width: 200px;">
7691
Move mouse here.
7792
</div>
78-
7993
</body>
8094
</html>

0 commit comments

Comments
 (0)