crossbrowdy
Version:
A Multimedia JavaScript framework to create real cross-platform and hybrid game engines, games, emulators, multimedia libraries and apps.
247 lines (241 loc) • 7.43 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Hammer Time</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<style>
.target-wrap {
display: block;
margin: 1em;
}
.target {
height: 250px;
margin: 0;
font-size: .8em;
}
.pass {
background: green ;
}
.hit-target {
display: block;
}
.ui-listview,
.ui-listview > li {
margin: 0;
padding: 0;
list-style: none;
}
.ui-content .ui-listview{
margin: -1em;
}
.ui-listview > li {
display: block;
position: relative;
overflow: visible;
}
.ui-listview > li > a.ui-btn {
margin: 0;
display: block;
position: relative;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.ui-listview > li > a.ui-btn {
border-width: 1px 0 0 0;
border-style: solid;
}
.ui-listview > li h1 {
font-size: 1em;
font-weight: bold;
display: block;
margin: .45em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
body,
.ui-btn {
font-size: 1em;
line-height: 1.3;
font-family: sans-serif;
}
.ui-btn {
font-weight: bold;
border-width: 1px;
border-style: solid;
}
.ui-btn:link {
text-decoration: none ;
}
.ui-page-theme-a .ui-bar-inherit {
background: #e9e9e9;
border-color: #ddd;
color: #333;
text-shadow: 0 1px 0 #eee;
font-weight: bold;
}
.ui-page-theme-a {
background: #f9f9f9;
border-color: #bbb;
color: #333;
text-shadow: 0 1px 0 #f3f3f3;
}
.ui-body-a {
border-width: 1px;
border-style: solid;
}
.ui-page-theme-a a:visited {
color: #3388cc;
}
.ui-page-theme-a {
color: #005599;
}
.ui-page-theme-a a:active {
color: #005599;
}
.ui-page-theme-a .ui-btn,
.ui-page-theme-a .ui-btn:visited{
background: #f6f6f6;
border-color: #ddd;
color: #333 ;
text-shadow: 0 1px 0 #f3f3f3;
}
.ui-header .ui-title{
font-size: 1em;
min-height: 1.1em;
text-align: center;
display: block;
margin: 0 30%;
padding: .7em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0 ;
}
</style>
<script src="hammer-time.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(function(){
var upEvent = window.PointerEvent ? "pointerup" : ( ( 'ontouchstart' in window ) || window.DocumentTouch && document instanceof DocumentTouch ) ? "touchend" : "mouseup";
$( ".target" ).on( upEvent, function( e ) {
this.startTime = Date.now();
$( this ).find( ".output" ).html( e.type + ": " + this.startTime + "<br>");
} );
$( ".target.basic" ).on( "click", function( e ) {
var now = Date.now();
var clickTime = now - this.startTime;
var target = $( this );
var status = clickTime < 100 ? "" : clickTime < 300 ? "warning" : "failure"
target.find( ".click-gauge" )
.attr( "value", clickTime )
.removeClass( "failure success" )
.addClass( status );
target.find( ".click-time-output" ).text( clickTime + "ms" );
target.find( ".output" ).append( "click: " + now + "<br>");
if ( status === "" && !target.hasClass( "expect-fail" ) ) {
$( this ).addClass( "pass" );
} else if ( status === "failure" && target.hasClass( "expect-fail" ) ) {
$( this ).addClass( "pass" );
}
} );
$( "#link-test" ).on( "click", function(){
var that = this;
setTimeout( function(){
if ( window.location.hash === "#pass" ) {
$( that ).parent().addClass( "pass" );
}
}, 100 );
});
$( "#focus-test" ).on( "click", function(){
var that = this;
setTimeout( function(){
if ( $( that ).is( ":focus" ) ) {
$( that ).parent().addClass( "pass" );
}
}, 100 );
});
$( ".ui-btn" ).on( "click", function( e ) {
e.preventDefault();
console.log( "zoom" );
$( this ).addClass( "pass" );
} );
});
</script>
</head>
<body class="ui-page-theme-a">
<h1>Hammer Time - Manual Test Suite</h1>
<h3>Basic Usage with none/auto/manipulation
<div class="target-wrap" id="target">
<div class="target basic" style="touch-action: none;">
<code>style="touch-action: none;"</code><br>
Click Time: <span class="click-time-output">0ms</span>
<progress class="click-gauge" max="500" value="0"></progress>
<span class="output"></span>
<div class="hit-target"></div>
</div>
</div>
<div class="target-wrap">
<div class="target basic" style="touch-action: manipulation;">
<code>style="touch-action: manipulation;"</code><br>
Click Time: <span class="click-time-output">0ms</span>
<progress class="click-gauge" max="500" value="0"></progress>
<span class="output"></span>
<div class="hit-target"></div>
</div>
</div>
<div class="target-wrap">
<div class="target basic expect-fail">
<code>style=""</code><br>
Click Time: <span class="click-time-output">0ms</span>
<progress class="click-gauge" max="500" value="0"></progress>
<span class="output"></span>
<div class="hit-target" style=""></div>
</div>
</div>
<div class="target-wrap">
<div class="target basic expect-fail" style="touch-action: auto;">
<code>style="touch-action: auto"</code><br>
Click Time: <span class="click-time-output">0ms</span>
<progress class="click-gauge" max="500" value="0"></progress>
<span class="output"></span>
<div class="hit-target" style=""></div>
</div>
</div>
<div class="target-wrap">
<div class="target">
<h5>Native link behivor</h5>
<a href="#pass" id="link-test" class="hit-target" style="touch-action:none"></a>
</div>
</div>
</div>
<div class="target-wrap">
<div class="target">
<h5>Keyboard Focus</h5>
<input id="focus-test" style="touch-action:none">
</div>
</div>
<ul class="ui-listview">
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn expect-fail" href="#fail" style="touch-action: None;"><h1>None</h1></a></li>
<li><a class="ui-btn expect-fail" href="#fail" style="touch-action: none;"><h1>None</h1></a></li>
<li><a class="ui-btn expect-fail" href="#fail" style="touch-action: none;"><h1>None</h1></a></li>
<li><a class="ui-btn expect-fail" href="#fail" style="touch-action: none;"><h1>None</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
<li><a class="ui-btn" href="#fail" style="touch-action: manipulation;"><h1>Manipulation</h1></a></li>
</ul>
</body>
</html>