Merge branch 'main' into cross-document-view-transitions

mdn · Jun 23, 2024 · cb852ad · cb852ad
2 parents efab7b9 + 98c8bb8
commit cb852ad
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 143 deletions.
diff --git a/channel-messaging-basic/index.html b/channel-messaging-basic/index.html
@@ -5,15 +5,20 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width" />
     <title>Channel messaging demo</title>
+    <style>
+      iframe {
+        border-radius: 1em;
+      }
+    </style>
   </head>
   <body>
     <h1>Channel messaging demo</h1>
-    <p class="output">My body</p>
+    <p class="output">Index.html para (I will be overwritten)</p>
     <iframe src="page2.html" width="480" height="320"></iframe>
     <script>
-     const channel = new MessageChannel();
-     const output = document.querySelector('.output');
-     const iframe = document.querySelector('iframe');
+      const channel = new MessageChannel();
+      const output = document.querySelector(".output");
+      const iframe = document.querySelector("iframe");
 
       // Wait for the iframe to load
       iframe.addEventListener("load", onLoad);
@@ -22,14 +27,16 @@ <h1>Channel messaging demo</h1>
         // Listen for messages on port1
         channel.port1.onmessage = onMessage;
         // Transfer port2 to the iframe
-        iframe.contentWindow.postMessage("Hello from the main page!", "*", [
-          channel.port2,
-        ]);
+        iframe.contentWindow.postMessage(
+          "A message from the index.html page!",
+          "*",
+          [channel.port2]
+        );
       }
 
       // Handle messages received on port1
       function onMessage(e) {
-        output.innerHTML = e.data;
+        output.innerText = e.data;
       }
     </script>
   </body>

diff --git a/channel-messaging-basic/page2.html b/channel-messaging-basic/page2.html
@@ -4,19 +4,27 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width" />
-    <title>My page title</title>
+    <title>Page 2</title>
+    <style>
+      body {
+        background-color: aliceblue;
+        font-family: monospace;
+      }
+    </style>
   </head>
   <body>
-    <p class="output">iFrame body</p>
+    <p class="output">page2.html (iframe body)</p>
     <script>
       const output = document.querySelector(".output");
 
       window.addEventListener("message", onMessage);
 
       function onMessage(e) {
-        output.innerHTML = e.data;
-        // Use the transfered port to post a message back to the main frame
-        e.ports[0].postMessage("Message back from the IFrame");
+        if (!e.ports.length) return;
+
+        output.innerText = e.data;
+        // Use the transferred port to post a message to the main frame
+        e.ports[0].postMessage("A message from the iframe in page2.html");
       }
     </script>
   </body>

diff --git a/channel-messaging-multimessage/page2.html b/channel-messaging-multimessage/page2.html
@@ -24,8 +24,10 @@
 
       // Setup the transfered port
       function initPort(e) {
-        port2 = e.ports[0];
-        port2.onmessage = onMessage;
+        if (e.ports[0]) {
+          port2 = e.ports[0];
+          port2.onmessage = onMessage;
+        }
       }
 
       // Handle messages received on port2

diff --git a/document-picture-in-picture/main.js b/document-picture-in-picture/main.js
@@ -1,84 +1,84 @@
-
 const videoPlayer = document.getElementById("player");
 const playerContainer = document.getElementById("container");
 
 const inPipMessage = document.getElementById("in-pip-message");
 
 if ("documentPictureInPicture" in window) {
+  document.querySelector(".no-picture-in-picture").remove();
 
-	document.querySelector(".no-picture-in-picture").remove();
-
-	const togglePipButton = document.createElement("button");
-	togglePipButton.textContent = "Toggle Picture-in-Picture";
-	togglePipButton.addEventListener("click", togglePictureInPicture, false);
+  const togglePipButton = document.createElement("button");
+  togglePipButton.textContent = "Toggle Picture-in-Picture";
+  togglePipButton.addEventListener("click", togglePictureInPicture, false);
 
-	document.getElementById("controlbar").appendChild(togglePipButton);
+  document.getElementById("controlbar").appendChild(togglePipButton);
 }
 
 async function togglePictureInPicture() {
-	// Returns null if no pip window is currently open
-	if (!window.documentPictureInPicture.window) {
-
-		// Open a Picture-in-Picture window.
-		const pipWindow = await window.documentPictureInPicture.requestWindow({
-			width: videoPlayer.clientWidth,
-			height: videoPlayer.clientHeight + 50,
-		});
-
-		// Add pagehide listener to handle the case of the pip window being closed using the browser X button
-		pipWindow.addEventListener("pagehide", (event) => {
-			inPipMessage.style.display = "none";
-			playerContainer.append(videoPlayer);
-		});
-
-		// Copy style sheets over from the initial document
-		// so that the player looks the same.
-		[...document.styleSheets].forEach((styleSheet) => {
-			try {
-				const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
-				const style = document.createElement('style');
-
-				style.textContent = cssRules;
-				pipWindow.document.head.appendChild(style);
-			} catch (e) {
-				const link = document.createElement('link');
-
-				link.rel = 'stylesheet';
-				link.type = styleSheet.type;
-				link.media = styleSheet.media;
-				link.href = styleSheet.href;
-				pipWindow.document.head.appendChild(link);
-			}
-		})
-
-		// Move the player to the Picture-in-Picture window.
-		pipWindow.document.body.append(videoPlayer);
-
-		// Display a message to say it has been moved
-		inPipMessage.style.display = "block";
-	} else {
-		inPipMessage.style.display = "none";
-		playerContainer.append(videoPlayer);
-		window.documentPictureInPicture.window.close();
-	}
+  // Early return if there's already a Picture-in-Picture window open
+  if (window.documentPictureInPicture.window) {
+    inPipMessage.style.display = "none";
+    playerContainer.append(videoPlayer);
+    window.documentPictureInPicture.window.close();
+    return;
+  }
+
+  // Open a Picture-in-Picture window.
+  const pipWindow = await window.documentPictureInPicture.requestWindow({
+    width: videoPlayer.clientWidth,
+    height: videoPlayer.clientHeight + 50,
+  });
+
+  // Add pagehide listener to handle the case of the pip window being closed using the browser X button
+  pipWindow.addEventListener("pagehide", (event) => {
+    inPipMessage.style.display = "none";
+    playerContainer.append(videoPlayer);
+  });
+
+  // Copy style sheets over from the initial document
+  // so that the player looks the same.
+  [...document.styleSheets].forEach((styleSheet) => {
+    try {
+      const cssRules = [...styleSheet.cssRules]
+        .map((rule) => rule.cssText)
+        .join("");
+      const style = document.createElement("style");
+
+      style.textContent = cssRules;
+      pipWindow.document.head.appendChild(style);
+    } catch (e) {
+      const link = document.createElement("link");
+
+      link.rel = "stylesheet";
+      link.type = styleSheet.type;
+      link.media = styleSheet.media;
+      link.href = styleSheet.href;
+      pipWindow.document.head.appendChild(link);
+    }
+  });
+
+  // Move the player to the Picture-in-Picture window.
+  pipWindow.document.body.append(videoPlayer);
+
+  // Display a message to say it has been moved
+  inPipMessage.style.display = "block";
 }
 
 documentPictureInPicture.addEventListener("enter", (event) => {
-	const pipWindow = event.window;
-	console.log("Video player has entered the pip window");
-
-	const pipMuteButton = pipWindow.document.createElement("button");
-	pipMuteButton.textContent = "Mute";
-	pipMuteButton.addEventListener("click", () => {
-		const pipVideo = pipWindow.document.querySelector("#video");
-		if (!pipVideo.muted) {
-			pipVideo.muted = true;
-			pipMuteButton.textContent = "Unmute";
-		} else {
-			pipVideo.muted = false;
-			pipMuteButton.textContent = "Mute";
-		}
-	});
-
-	pipWindow.document.body.append(pipMuteButton);
+  const pipWindow = event.window;
+  console.log("Video player has entered the pip window");
+
+  const pipMuteButton = pipWindow.document.createElement("button");
+  pipMuteButton.textContent = "Mute";
+  pipMuteButton.addEventListener("click", () => {
+    const pipVideo = pipWindow.document.querySelector("#video");
+    if (!pipVideo.muted) {
+      pipVideo.muted = true;
+      pipMuteButton.textContent = "Unmute";
+    } else {
+      pipVideo.muted = false;
+      pipMuteButton.textContent = "Mute";
+    }
+  });
+
+  pipWindow.document.body.append(pipMuteButton);
 });
diff --git a/fetch/README.md b/fetch/README.md
@@ -12,5 +12,4 @@ See below for links to the live versions of each example:
 - [Basic Fetch example with returned Response properties](https://mdn.github.io/dom-examples/fetch/fetch-response/)
 - [Fetch cloned Response example](https://mdn.github.io/dom-examples/fetch/fetch-response-clone/)
 - [Fetch text example](https://mdn.github.io/dom-examples/fetch/fetch-text/)
-- [Fetch example with Request object and Init object](https://mdn.github.io/dom-examples/fetch/fetch-with-init-then-request/)
 - [object-fit gallery with fetched images](https://mdn.github.io/dom-examples/fetch/object-fit-gallery-fetch/)
diff --git a/fetch/fetch-request-with-init/index.html b/fetch/fetch-request-with-init/index.html
@@ -17,18 +17,19 @@ <h1>Fetch Request with init example</h1>
     <script>
       const myImage = document.querySelector("img");
 
-      const myHeaders = new Headers();
+      const reqHeaders = new Headers();
 
-      const myOptions = {
-        method: "GET",
-        headers: myHeaders,
-        mode: "cors",
-        cache: "default",
+      // a cached response is okay unless it's more than a week old
+      reqHeaders.set("Cache-Control", "max-age=604800");
+
+      const options = {
+        headers: reqHeaders,
       };
 
-      const myRequest = new Request("flowers.jpg", myOptions);
+      // pass init as an "options" object with our headers
+      const req = new Request("flowers.jpg", options);
 
-      fetch(myRequest)
+      fetch(req)
         .then((response) => {
           if (!response.ok) {
             throw new Error(`HTTP error, status = ${response.status}`);

diff --git a/fetch/fetch-with-init-then-request/flowers.jpg b/fetch/fetch-with-init-then-request/flowers.jpg
diff --git a/fetch/fetch-with-init-then-request/index.html b/fetch/fetch-with-init-then-request/index.html