Skip to content

Commit 20fcbce

Browse files
chrisdavidmillspepelsbey
chrisdavidmills
and
pepelsbey
authored
Add viewport segments api demo (#325)
* Add viewport segments api demo * Bugfixes * Remove unneeded div * remove unnecessary MQ conditions * Add listeners to update segment report on posture and orientation change * remove console.log * Simply vertical segments layout; flex not needed * Fix element reference * Get rid of unneeded screen orientation handler * Update viewport-segments-api/index.js Co-authored-by: Vadim Makeev <[email protected]> * Update viewport-segments-api/index.css Co-authored-by: Vadim Makeev <[email protected]> --------- Co-authored-by: Vadim Makeev <[email protected]>
1 parent 8c3d2a9 commit 20fcbce

File tree

4 files changed

+292
-0
lines changed

4 files changed

+292
-0
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
9090

9191
- The "touchevents" directory is for examples and demos of the [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) standard.
9292

93+
- 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/).
94+
9395
- 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/).
9496

9597
- 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

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
/* Document styles */
2+
3+
html {
4+
font-family: helvetica, arial, sans-serif;
5+
height: 100%;
6+
}
7+
8+
body {
9+
margin: 0;
10+
height: 100%;
11+
background: #ffc8dd;
12+
}
13+
14+
.wrapper {
15+
height: 100%;
16+
display: flex;
17+
}
18+
19+
.fold {
20+
background-color: #999;
21+
}
22+
23+
/* Layout for the two main panes */
24+
25+
.wrapper,
26+
.list-view,
27+
.detail-view {
28+
position: relative;
29+
}
30+
31+
.list-view,
32+
.detail-view {
33+
margin: 20px;
34+
background: white;
35+
}
36+
37+
.list-view {
38+
overflow: auto;
39+
padding: 0 20px;
40+
border-bottom: 20px solid white;
41+
border-top: 20px solid white;
42+
}
43+
44+
.detail-view {
45+
display: flex;
46+
flex-direction: column;
47+
justify-content: space-between;
48+
padding: 20px;
49+
}
50+
51+
ul {
52+
margin: 0;
53+
padding: 0;
54+
}
55+
56+
ul li {
57+
margin-bottom: 20px;
58+
list-style-type: none;
59+
}
60+
61+
a {
62+
color: black;
63+
display: block;
64+
padding: 20px;
65+
outline: none;
66+
text-decoration: none;
67+
border: 1px solid rgb(0 0 0 / 0.3);
68+
transition: 0.4s all;
69+
}
70+
71+
a:hover,
72+
a:focus {
73+
border-left: 20px solid rgb(0 0 0 / 0.3);
74+
}
75+
76+
ul li:nth-child(odd) {
77+
background: #cdb4db;
78+
}
79+
80+
ul li:nth-child(even) {
81+
background: #ffafcc;
82+
}
83+
84+
/* Heading and paragraph styles */
85+
86+
h1 {
87+
margin: 0 0 20px;
88+
}
89+
90+
.posture-output {
91+
background: #cdb4db;
92+
padding: 20px;
93+
margin: 0;
94+
border: 1px solid rgb(0 0 0 / 0.3);
95+
}
96+
97+
.segment-output {
98+
position: absolute;
99+
top: 0px;
100+
right: 0px;
101+
background: #663880;
102+
color: white;
103+
padding: 10px;
104+
border: 1px solid rgb(0 0 0 / 0.3);
105+
}
106+
107+
.segment-output h2 {
108+
margin: 0;
109+
font-size: 1.4rem;
110+
}
111+
112+
.segment-output p {
113+
margin: 10px 0 0 0;
114+
}
115+
116+
/* Media queries */
117+
118+
@media (orientation: landscape) {
119+
.wrapper {
120+
flex-direction: row;
121+
}
122+
123+
.list-view,
124+
.detail-view {
125+
flex: 1;
126+
}
127+
128+
.fold {
129+
height: 100%;
130+
width: 20px;
131+
}
132+
}
133+
134+
@media (orientation: portrait) {
135+
.wrapper {
136+
flex-direction: column;
137+
}
138+
139+
.list-view,
140+
.detail-view {
141+
flex: 1;
142+
}
143+
144+
.fold {
145+
height: 20px;
146+
}
147+
}
148+
149+
/* Segments are laid out horizontally. */
150+
@media (horizontal-viewport-segments: 2) {
151+
.wrapper {
152+
flex-direction: row;
153+
}
154+
155+
.list-view {
156+
width: env(viewport-segment-width 0 0);
157+
}
158+
159+
.fold {
160+
width: calc(
161+
env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)
162+
);
163+
background-color: black;
164+
height: 100%;
165+
}
166+
167+
.detail-view {
168+
width: env(viewport-segment-width 1 0);
169+
}
170+
}
171+
172+
/* Segments are laid out vertically. */
173+
@media (vertical-viewport-segments: 2) {
174+
.wrapper {
175+
flex-direction: column;
176+
}
177+
178+
.list-view {
179+
height: env(viewport-segment-height 0 0);
180+
}
181+
182+
.fold {
183+
width: 100%;
184+
height: calc(
185+
env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)
186+
);
187+
background-color: black;
188+
}
189+
190+
.detail-view {
191+
height: env(viewport-segment-height 0 1);
192+
}
193+
}

‎viewport-segments-api/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Viewport segments API demo</title>
7+
<link rel="stylesheet" href="index.css" />
8+
<script src="index.js" defer></script>
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<section class="list-view">
13+
<ul>
14+
<li><a href="#">Article one</a></li>
15+
<li><a href="#">Article two</a></li>
16+
<li><a href="#">Article three</a></li>
17+
<li><a href="#">Article four</a></li>
18+
<li><a href="#">Article five</a></li>
19+
<li><a href="#">Article six</a></li>
20+
<li><a href="#">Article seven</a></li>
21+
<li><a href="#">Article eight</a></li>
22+
<li><a href="#">Article nine</a></li>
23+
<li><a href="#">Article ten</a></li>
24+
<li><a href="#">Article eleven</a></li>
25+
<li><a href="#">Article twelve</a></li>
26+
<li><a href="#">Article thirteen</a></li>
27+
<li><a href="#">Article fourteen</a></li>
28+
<li><a href="#">Article fifteen</a></li>
29+
<li><a href="#">Article sixteen</a></li>
30+
</ul>
31+
</section>
32+
<div class="fold"></div>
33+
<section class="detail-view">
34+
<h1>Article one</h1>
35+
36+
<p class="posture-output">device posture:</p>
37+
</section>
38+
</div>
39+
</body>
40+
</html>

‎viewport-segments-api/index.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const listLinks = document.querySelectorAll("ul a");
2+
const detailHeading = document.querySelector(".detail-view h1");
3+
const postureOutput = document.querySelector(".posture-output");
4+
5+
// Update detail view when list item is clicked on
6+
7+
listLinks.forEach(item => {
8+
item.addEventListener("click", (event) => {
9+
event.preventDefault();
10+
detailHeading.textContent = event.target.textContent;
11+
});
12+
});
13+
14+
// Output device posture when the posture changes
15+
16+
function reportPostureOutput() {
17+
postureOutput.textContent = `Device posture: ${navigator.devicePosture.type}`;
18+
}
19+
20+
reportPostureOutput();
21+
navigator.devicePosture.addEventListener("change", reportPostureOutput);
22+
23+
// Output viewport segment details to each segment
24+
25+
const wrapperElem = document.querySelector(".wrapper");
26+
const listViewElem = document.querySelector(".list-view");
27+
const detailViewElem = document.querySelector(".detail-view");
28+
29+
function addSegmentOutput(segments, i, elem) {
30+
const segment = segments[i];
31+
32+
const divElem = document.createElement("div");
33+
divElem.className = "segment-output";
34+
35+
elem.appendChild(divElem);
36+
37+
divElem.innerHTML = `<h2>Viewport segment ${i + 1}</h2>
38+
<p>${segment.width}px x ${segment.height}px</p>`;
39+
}
40+
41+
function reportSegments() {
42+
// Remove all previous segment output elements before adding more
43+
document.querySelectorAll(".segment-output").forEach((elem) => elem.remove());
44+
45+
const segments = window.viewport.segments;
46+
47+
if (segments.length === 1) {
48+
addSegmentOutput(segments, 0, wrapperElem);
49+
} else {
50+
addSegmentOutput(segments, 0, listViewElem);
51+
addSegmentOutput(segments, 1, detailViewElem);
52+
}
53+
}
54+
55+
reportSegments();
56+
window.addEventListener("resize", reportSegments);
57+
navigator.devicePosture.addEventListener("change", reportSegments);

0 commit comments

Comments
 (0)