Add Device Posture API demo (#292)

* Add Device Posture API demo * Update README.md Co-authored-by: Brian Smith <[email protected]> --------- Co-authored-by: Brian Smith <[email protected]>
mdn · Feb 3, 2025 · 1f768e7 · 1f768e7
1 parent 085b595
commit 1f768e7
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "css-painting" directory contains examples demonstrating the [CSS Painting API](https://developer.mozilla.org/docs/Web/API/CSS_Painting_API). See the [examples live](https://mdn.github.io/dom-examples/css-painting).
 
+- The "device-posture-api" directory contains an example demonstrating how to use the [Device Posture API](https://developer.mozilla.org/docs/Web/API/Device_Posture_API). [Run the example live](https://mdn.github.io/dom-examples/device-posture-api/).
+
 - The "drag-and-drop" directory is for examples and demos of the [HTML Drag and Drop](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) standard.
 
 - The "document-picture-in-picture" directory contains an example showing usage of the [Document Picture-in-Picture API](http://developer.mozilla.org/docs/Web/API/Document_Picture-in-Picture_API/). [See the example live](https://mdn.github.io/dom-examples/document-picture-in-picture/).

diff --git a/device-posture-api/index.css b/device-posture-api/index.css
@@ -0,0 +1,121 @@
+/* Document styles */
+
+html {
+  font-family: helvetica, arial, sans-serif;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+  background: #ffc8dd;
+}
+
+.wrapper {
+  height: 100%;
+  display: flex;
+}
+
+/* Layout for the two main panes */
+
+.list-view,
+.detail-view {
+  flex: 1;
+  margin: 20px;
+  background: white;
+}
+
+.list-view {
+  overflow: auto;
+  padding: 0 20px;
+  border-bottom: 20px solid white;
+  border-top: 20px solid white;
+}
+
+.detail-view {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ul li {
+  margin-bottom: 20px;
+  list-style-type: none;
+}
+
+a {
+  color: black;
+  display: block;
+  padding: 20px;
+  outline: none;
+  text-decoration: none;
+  border: 1px solid rgb(0 0 0 / 0.3);
+  transition: 0.4s all;
+}
+
+a:hover,
+a:focus {
+  border-left: 20px solid rgb(0 0 0 / 0.3);
+}
+
+ul li:nth-child(odd) {
+  background: #cdb4db;
+}
+
+ul li:nth-child(even) {
+  background: #ffafcc;
+}
+
+/* Heading and paragraph styles */
+
+h1 {
+  margin: 0 0 20px;
+}
+
+.posture-output {
+  background: #cdb4db;
+  padding: 20px;
+  margin: 0;
+  border: 1px solid rgb(0 0 0 / 0.3);
+}
+
+/* Media queries */
+
+@media (orientation: landscape) {
+  .wrapper {
+    flex-direction: row;
+  }
+
+  .detail-view {
+    margin-inline-start: 0;
+  }
+}
+
+@media (device-posture: folded) and (orientation: landscape) {
+  .list-view {
+    margin-inline-end: 60px;
+  }
+}
+
+@media (orientation: portrait) {
+  .wrapper {
+    flex-direction: column;
+  }
+
+  .detail-view {
+    margin-block-start: 0;
+  }
+}
+
+@media (device-posture: folded) and (orientation: portrait) {
+  .list-view {
+    margin-block-end: 60px;
+  }
+}
diff --git a/device-posture-api/index.html b/device-posture-api/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Device Posture API test</title>
+    <link rel="stylesheet" href="index.css" />
+    <script src="index.js" defer></script>
+  </head>
+  <body>
+    <div class="wrapper">
+      <section class="list-view">
+        <div class="list-wrapper">
+          <ul>
+            <li><a href="#">Article one</a></li>
+            <li><a href="#">Article two</a></li>
+            <li><a href="#">Article three</a></li>
+            <li><a href="#">Article four</a></li>
+            <li><a href="#">Article five</a></li>
+            <li><a href="#">Article six</a></li>
+            <li><a href="#">Article seven</a></li>
+            <li><a href="#">Article eight</a></li>
+            <li><a href="#">Article nine</a></li>
+            <li><a href="#">Article ten</a></li>
+            <li><a href="#">Article eleven</a></li>
+            <li><a href="#">Article twelve</a></li>
+            <li><a href="#">Article thirteen</a></li>
+            <li><a href="#">Article fourteen</a></li>
+            <li><a href="#">Article fifteen</a></li>
+            <li><a href="#">Article sixteen</a></li>
+          </ul>
+        </div>
+      </section>
+      <section class="detail-view">
+        <h1>Article one</h1>
+
+        <p class="posture-output">device posture:</p>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/device-posture-api/index.js b/device-posture-api/index.js
@@ -0,0 +1,15 @@
+const list = document.querySelector("ul");
+const detailHeading = document.querySelector(".detail-view h1");
+const postureOutput = document.querySelector(".posture-output");
+
+list.addEventListener("click", (event) => {
+  detailHeading.textContent = event.target.textContent;
+});
+
+function reportPostureOutput() {
+  postureOutput.textContent = `Device posture: ${navigator.devicePosture.type}`;
+  console.log("event fired");
+}
+
+reportPostureOutput();
+navigator.devicePosture.addEventListener("change", reportPostureOutput);