From ee63b55740e4e7e632697caeeffb0af9c2162d7e Mon Sep 17 00:00:00 2001 From: "Joshua A. Horton" Date: Thu, 30 Jun 2022 12:55:16 +0700 Subject: [PATCH] feat(web): initial skeleton for gesture-recognizer host page --- .../samples/gestureHost.css | 101 +++++++++++++++ .../web/gesture-recognizer/samples/index.html | 116 ++++++++++++++++++ 2 files changed, 217 insertions(+) create mode 100644 common/web/gesture-recognizer/samples/gestureHost.css create mode 100644 common/web/gesture-recognizer/samples/index.html diff --git a/common/web/gesture-recognizer/samples/gestureHost.css b/common/web/gesture-recognizer/samples/gestureHost.css new file mode 100644 index 0000000000..0792a0cbba --- /dev/null +++ b/common/web/gesture-recognizer/samples/gestureHost.css @@ -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); +} \ No newline at end of file diff --git a/common/web/gesture-recognizer/samples/index.html b/common/web/gesture-recognizer/samples/index.html new file mode 100644 index 0000000000..18f4c85efe --- /dev/null +++ b/common/web/gesture-recognizer/samples/index.html @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + Gesture Recognizer - Demo Host Page + + +
+

+

Gesture Recognizer - Demo Host Page

+

+

+ The area below represents a simulated page with its corresponding screen, page, and gesture-reception area. +

+ Click or touch anywhere within the beige area to test gesture-recognizer behavior. +

+ + +
+
+
+
+
+
+
+
+
+
+

+ +
+

- represents screen boundaries

+

- the primary gesture receiver

+

- permitted "roaming" zone

+
+
+ + +
+
+ + \ No newline at end of file