mirror of
https://github.com/keymanapp/keyman.git
synced 2026-08-10 02:45:32 +00:00
feat(web): initial skeleton for gesture-recognizer host page
This commit is contained in:
Joshua A. Horton
parent
70f6626392
commit
ee63b55740
2 changed files with 217 additions and 0 deletions
101
common/web/gesture-recognizer/samples/gestureHost.css
Normal file
101
common/web/gesture-recognizer/samples/gestureHost.css
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
.bounds-color {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.receiver-color {
|
||||
background-color: beige;
|
||||
}
|
||||
|
||||
.roaming-color {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
#demoContainer {
|
||||
max-width: fit-content;
|
||||
max-height: fit-content;
|
||||
}
|
||||
|
||||
#demoContainer.screen4.bounds1 {
|
||||
padding: 20px 0px 0px 0px;
|
||||
}
|
||||
|
||||
#demoContainer.screen4.bounds2 {
|
||||
padding: 30px 10px 0px 10px;
|
||||
}
|
||||
|
||||
.faux-screen {
|
||||
margin: auto;
|
||||
max-width: fit-content;
|
||||
max-height: fit-content;
|
||||
background-color: black;
|
||||
border: 4px solid black;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.faux-screen-border {
|
||||
border: 4px solid black;
|
||||
position: absolute;
|
||||
margin: -4px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#faux-page {
|
||||
margin: auto;
|
||||
background-color: white;
|
||||
max-width: fit-content;
|
||||
max-height: fit-content;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.screen1 #faux-page {
|
||||
padding: 100px 2px 4px 20px;
|
||||
}
|
||||
|
||||
.screen2 #faux-page {
|
||||
padding: 180px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.screen3 #faux-page {
|
||||
padding: 120px 20px 40px 20px;
|
||||
}
|
||||
|
||||
.screen4 #faux-page {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.main-receiver {
|
||||
margin: auto;
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
background-color: beige;
|
||||
position: relative;
|
||||
z-index: initial; /* resets z-index stacking, allowing the child "roaming-bounds" to be placed behind it */
|
||||
}
|
||||
|
||||
#roaming-bounds {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.bounds1 #roaming-bounds {
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 112.5%;
|
||||
}
|
||||
|
||||
.bounds2 #roaming-bounds {
|
||||
bottom: 0px;
|
||||
left: -10px;
|
||||
width: calc(100% + 20px);
|
||||
height: calc(100% + 30px);
|
||||
}
|
||||
116
common/web/gesture-recognizer/samples/index.html
Normal file
116
common/web/gesture-recognizer/samples/index.html
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
|
||||
<!-- Set the viewport width to match phone and tablet device widths -->
|
||||
<meta name="viewport" content="width=device-width,user-scalable=no" />
|
||||
|
||||
<!-- Allow KeymanWeb to be saved to the iPhone home screen -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
|
||||
<!-- Your page CSS -->
|
||||
<style type='text/css'>
|
||||
body {
|
||||
font-family: Tahoma,helvetica;
|
||||
background-color: dimgray;
|
||||
}
|
||||
/* h3 {font-size: 1em;font-weight:normal;color: darkred; margin-bottom: 4px} */
|
||||
|
||||
.center {
|
||||
margin: auto;
|
||||
min-width: 50%;
|
||||
max-width: 90%;
|
||||
min-height: 90%;
|
||||
background-color: white;
|
||||
border: 2px solid black;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#main-ux {
|
||||
margin: auto;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
#menu-container {
|
||||
padding: 10px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
margin: auto;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
.legend div {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.legend .block {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.legend p {
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
display: inline-block;
|
||||
padding-left: 4px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="gestureHost.css">
|
||||
|
||||
<script src="../build/index.js"></script>
|
||||
|
||||
<title>Gesture Recognizer - Demo Host Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="center">
|
||||
<p>
|
||||
<h2 style="text-align:center">Gesture Recognizer - Demo Host Page</h2>
|
||||
</p>
|
||||
<p>
|
||||
The area below represents a simulated page with its corresponding screen, page, and gesture-reception area.
|
||||
</p><p>
|
||||
Click or touch anywhere within the beige area to test gesture-recognizer behavior.
|
||||
</p>
|
||||
|
||||
<!-- CSS classes for demo configuration should only be applied here, to `demoContainer`. -->
|
||||
<div id="main-ux" class="flex">
|
||||
<div id="demoContainer" class="screen1 bounds2">
|
||||
<div class="faux-screen">
|
||||
<div class="faux-screen-border"></div>
|
||||
<div id="faux-page">
|
||||
<div class="main-receiver">
|
||||
<div id="roaming-bounds"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p></p>
|
||||
<!-- end main demo section, start legend re: demo's coloration -->
|
||||
<div class="legend">
|
||||
<div><div class="block bounds-color"></div><p> - represents screen boundaries</p></div>
|
||||
<div><div class="block receiver-color"></div><p> - the primary gesture receiver</p></div>
|
||||
<div><div class="block roaming-color"></div><p> - permitted "roaming" zone</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end `demoContainer` -->
|
||||
<div id="menu-container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue