Add viewport segments api demo

README.md

@@ -90,6 +90,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "touchevents" directory is for examples and demos of the [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) standard.
 
+- The "viewport-segments-api" directory contains an example demonstrating how to use the [Viewport Segments API](https://developer.mozilla.org/docs/Web/API/Viewport_Segments_API). [Run the example live](https://mdn.github.io/dom-examples/viewport-segments-api/).
+
 - The "visual-viewport-api" directory contains a basic demo to show usage of the Visual Viewport API. For more details on how it works, read [Visual Viewport API](https://developer.mozilla.org/docs/Web/API/Visual_Viewport_API). [View the demo live](https://mdn.github.io/dom-examples/visual-viewport-api/).
 
 - The "web-animations-api" directory contains [Web Animation API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) demos. See the [web animations README](web-animations-api/README.md) for more information.

viewport-segments-api/index.css

@@ -0,0 +1,193 @@
+/* Document styles */
+
+html {
+  font-family: helvetica, arial, sans-serif;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+  background: #ffc8dd;
+}
+
+.wrapper {
+  height: 100%;
+  display: flex;
+}
+
+.fold {
+  background-color: #999;
+}
+
+/* Layout for the two main panes */
+
+.wrapper,
+.list-view,
+.detail-view {
+  position: relative;
+}
+
+.list-view,
+.detail-view {
+  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);
+}
+
+.segment-output {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: #663880;
+  color: white;
+  padding: 10px;
+  border: 1px solid rgb(0 0 0 / 0.3);
+}
+
+.segment-output h2 {
+  margin: 0;
+  font-size: 1.4rem;
+}
+
+.segment-output p {
+  margin: 10px 0 0 0;
+}
+
+/* Media queries */
+
+@media (orientation: landscape) {
+  .wrapper {
+    flex-direction: row;
+  }
+
+  .list-view,
+  .detail-view {
+    flex: 1;
+  }
+
+  .fold {
+    height: 100%;
+    width: 20px;
+  }
+}
+
+@media (orientation: portrait) {
+  .wrapper {
+    flex-direction: column;
+  }
+
+  .list-view,
+  .detail-view {
+    flex: 1;
+  }
+
+  .fold {
+    height: 20px;
+  }
+}
+
+/* Segments are laid out horizontally. */
+@media (horizontal-viewport-segments: 2) {
+  .wrapper {
+    flex-direction: row;
+  }
+
+  .list-view {
+    width: env(viewport-segment-width 0 0);
+  }
+
+  .fold {
+    width: calc(
+      env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)
+    );
+    background-color: black;
+    height: 100%;
+  }
+
+  .detail-view {
+    width: env(viewport-segment-width 1 0);
+  }
+}
+
+/* Segments are laid out vertically. */
+@media (vertical-viewport-segments: 2) {
+  .wrapper {
+    flex-direction: column;
+  }
+
+  .list-view {
+    height: env(viewport-segment-height 0 0);
+  }
+
+  .fold {
+    width: 100%;
+    height: calc(
+      env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)
+    );
+    background-color: black;
+  }
+
+  .detail-view {
+    height: env(viewport-segment-height 0 1);
+  }
+}

viewport-segments-api/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Viewport segments API demo</title>
+    <link rel="stylesheet" href="index.css" />
+    <script src="index.js" defer></script>
+  </head>
+  <body>
+    <div class="wrapper">
+      <section class="list-view">
+        <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>
+      </section>
+      <div class="fold"></div>
+      <section class="detail-view">
+        <h1>Article one</h1>
+
+        <p class="posture-output">device posture:</p>
+      </section>
+    </div>
+  </body>
+</html>

viewport-segments-api/index.js

@@ -0,0 +1,57 @@
+const listLinks = document.querySelectorAll("ul a");
+const detailHeading = document.querySelector(".detail-view h1");
+const postureOutput = document.querySelector(".posture-output");
+
+// Update detail view when list item is clicked on
+
+listLinks.forEach(item => {
+  item.addEventListener("click", (event) => {
+    event.preventDefault();
+    detailHeading.textContent = event.target.textContent;
+  });
+});
+
+// Output device posture when the posture changes
+
+function reportPostureOutput() {
+  postureOutput.textContent = `Device posture: ${navigator.devicePosture.type}`;
+}
+
+reportPostureOutput();
+navigator.devicePosture.addEventListener("change", reportPostureOutput);
+
+// Output viewport segment details to each segment
+
+const wrapperElem = document.querySelector(".wrapper");
+const listViewElem = document.querySelector(".list-view");
+const detailViewElem = document.querySelector(".detail-view");
+
+function addSegmentOutput(segments, i, elem) {
+  const segment = segments[i];
+
+  const divElem = document.createElement("div");
+  divElem.className = "segment-output";
+
+  elem.appendChild(divElem);
+
+  divElem.innerHTML = `<h2>Viewport segment ${i + 1}</h2>
+  <p>${segment.width}px x ${segment.height}px</p>`;
+}
+
+function reportSegments() {
+  // Remove all previous segment output elements before adding more
+  document.querySelectorAll(".segment-output").forEach((elem) => elem.remove());
+
+  const segments = window.viewport.segments;
+
+  if (segments.length === 1) {
+    addSegmentOutput(segments, 0, wrapperElem);
+  } else {
+    addSegmentOutput(segments, 0, listViewElem);
+    addSegmentOutput(segments, 1, detailViewElem);
+  }
+}
+
+reportSegments();
+window.addEventListener("resize", reportSegments);
+navigator.devicePosture.addEventListener("change", reportSegments);