UNPKG

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
<!DOCTYPE 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 !important; } .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 !important; } .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 !important; } </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>