From 3dbc1d7d9a6bbd049dd870fff6a8f58791fad8fd Mon Sep 17 00:00:00 2001 From: wbamberg Date: Tue, 22 Nov 2022 09:05:22 -0800 Subject: [PATCH] Fix API overview sidebars (#22468) --- files/en-us/web/api/keyboard_api/index.md | 7 +- .../media_capture_and_streams_api/index.md | 2 +- files/en-us/web/api/push_api/index.md | 2 +- files/en-us/web/api/reporting_api/index.md | 18 ++--- files/en-us/web/api/sensor_apis/index.md | 69 +++++++++---------- files/en-us/web/api/web_locks_api/index.md | 10 +-- files/jsondata/GroupData.json | 12 ++++ 7 files changed, 62 insertions(+), 58 deletions(-) diff --git a/files/en-us/web/api/keyboard_api/index.md b/files/en-us/web/api/keyboard_api/index.md index d6fdec8b1890371..0fa06f40637044b 100644 --- a/files/en-us/web/api/keyboard_api/index.md +++ b/files/en-us/web/api/keyboard_api/index.md @@ -15,7 +15,7 @@ browser-compat: - api.KeyboardLayoutMap --- -{{SeeCompatTable}}{{APIRef("Keyboard API")}} +{{SeeCompatTable}}{{DefaultAPISidebar("Keyboard API")}} The Keyboard API provides methods for working with a physical keyboard that is attached to a device running a browser. @@ -34,9 +34,8 @@ The following example demonstrates how to get the location-specific or layout-sp ```js if (navigator.keyboard) { const keyboard = navigator.keyboard; - keyboard.getLayoutMap() - .then((keyboardLayoutMap) => { - const upKey = keyboardLayoutMap.get('KeyW'); + keyboard.getLayoutMap().then((keyboardLayoutMap) => { + const upKey = keyboardLayoutMap.get("KeyW"); window.alert(`Press ${upKey} to move up.`); }); } else { diff --git a/files/en-us/web/api/media_capture_and_streams_api/index.md b/files/en-us/web/api/media_capture_and_streams_api/index.md index f228dcea9ef2e83..3f97503be109501 100644 --- a/files/en-us/web/api/media_capture_and_streams_api/index.md +++ b/files/en-us/web/api/media_capture_and_streams_api/index.md @@ -13,7 +13,7 @@ browser-compat: api.MediaStream page-type: web-api-overview --- -{{APIRef("Media Capture and Streams")}} +{{DefaultAPISidebar("Media Capture and Streams")}} The **Media Capture and Streams** API, often called the **Media Streams API** or **MediaStream API**, is an API related to [WebRTC](/en-US/docs/Web/API/WebRTC_API) which provides support for streaming audio and video data. diff --git a/files/en-us/web/api/push_api/index.md b/files/en-us/web/api/push_api/index.md index f035df2ce615b55..9b69c5e7b2fd2a0 100644 --- a/files/en-us/web/api/push_api/index.md +++ b/files/en-us/web/api/push_api/index.md @@ -15,7 +15,7 @@ browser-compat: - api.PushMessageData --- -{{ApiRef("Push API")}} +{{DefaultAPISidebar("Push API")}} The **Push API** gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content. diff --git a/files/en-us/web/api/reporting_api/index.md b/files/en-us/web/api/reporting_api/index.md index e225172a2496b59..5565dee958fff09 100644 --- a/files/en-us/web/api/reporting_api/index.md +++ b/files/en-us/web/api/reporting_api/index.md @@ -12,7 +12,7 @@ tags: spec-urls: https://w3c.github.io/reporting/#intro --- -{{SeeCompatTable}}{{APIRef("Reporting API")}} +{{SeeCompatTable}}{{DefaultAPISidebar("Reporting API")}} The Reporting API provides a generic reporting mechanism for web applications to use to make reports available based on various platform features (for example [Content Security Policy](/en-US/docs/Web/HTTP/CSP), [Feature-Policy](/en-US/docs/Web/HTTP/Headers/Feature-Policy), or feature deprecation reports) in a consistent manner. @@ -84,9 +84,9 @@ In our [deprecation_report.html](https://mdn.github.io/dom-examples/reporting-ap ```js const options = { - types: ['deprecation'], - buffered: true -} + types: ["deprecation"], + buffered: true, +}; const observer = new ReportingObserver((reports, observer) => { reportBtn.onclick = () => displayReports(reports); @@ -103,15 +103,9 @@ Later on in the example we deliberately use the deprecated version of {{domxref( ```js if (navigator.mozGetUserMedia) { - navigator.mozGetUserMedia( - constraints, - success, - failure); + navigator.mozGetUserMedia(constraints, success, failure); } else { - navigator.getUserMedia( - constraints, - success, - failure); + navigator.getUserMedia(constraints, success, failure); } ``` diff --git a/files/en-us/web/api/sensor_apis/index.md b/files/en-us/web/api/sensor_apis/index.md index aa784342a975e03..3880b61da4b7134 100644 --- a/files/en-us/web/api/sensor_apis/index.md +++ b/files/en-us/web/api/sensor_apis/index.md @@ -13,7 +13,7 @@ tags: browser-compat: api.Sensor --- -{{APIRef("Sensor API")}} +{{DefaultAPISidebar("Sensor API")}} The **Sensor APIs** are a set of interfaces built to a common design that expose device sensors in a consistent way to the web platform. @@ -33,15 +33,15 @@ The examples below show three methods for detecting sensor APIs. Additionally yo ```js if (typeof Gyroscope === "function") { - // run in circles… + // run in circles… } if ("ProximitySensor" in window) { - // watch out! + // watch out! } if (window.AmbientLightSensor) { - // go dark… + // go dark… } ``` @@ -60,27 +60,27 @@ The code example below illustrates these principles. The {{jsxref('statements/tr ```js let accelerometer = null; try { - accelerometer = new Accelerometer({ referenceFrame: 'device' }); - accelerometer.addEventListener('error', (event) => { - // Handle runtime errors. - if (event.error.name === 'NotAllowedError') { - // Branch to code for requesting permission. - } else if (event.error.name === 'NotReadableError' ) { - console.log('Cannot connect to the sensor.'); - } - }); - accelerometer.addEventListener('reading', () => reloadOnShake(accelerometer)); - accelerometer.start(); -} catch (error) { - // Handle construction errors. - if (error.name === 'SecurityError') { - // See the note above about feature policy. - console.log('Sensor construction was blocked by a feature policy.'); - } else if (error.name === 'ReferenceError') { - console.log('Sensor is not supported by the User Agent.'); - } else { - throw error; + accelerometer = new Accelerometer({ referenceFrame: "device" }); + accelerometer.addEventListener("error", (event) => { + // Handle runtime errors. + if (event.error.name === "NotAllowedError") { + // Branch to code for requesting permission. + } else if (event.error.name === "NotReadableError") { + console.log("Cannot connect to the sensor."); } + }); + accelerometer.addEventListener("reading", () => reloadOnShake(accelerometer)); + accelerometer.start(); +} catch (error) { + // Handle construction errors. + if (error.name === "SecurityError") { + // See the note above about feature policy. + console.log("Sensor construction was blocked by a feature policy."); + } else if (error.name === "ReferenceError") { + console.log("Sensor is not supported by the User Agent."); + } else { + throw error; + } } ``` @@ -89,10 +89,9 @@ try { Sensor readings may not be taken unless the user grants permission to a specific sensor type. Do this using the [Permissions API](/en-US/docs/Web/API/Permissions_API). A brief example, shown below, requests permission before attempting to use the sensor. ```js -navigator.permissions.query({ name: 'accelerometer' }) -.then((result) => { - if (result.state === 'denied') { - console.log('Permission to use accelerometer sensor is denied.'); +navigator.permissions.query({ name: "accelerometer" }).then((result) => { + if (result.state === "denied") { + console.log("Permission to use accelerometer sensor is denied."); return; } // Use the sensor. @@ -104,8 +103,8 @@ An alternative approach is to attempt to use the sensor and listen for the `Secu ```js const sensor = new AbsoluteOrientationSensor(); sensor.start(); -sensor.addEventListener('error', (error) => { - if (event.error.name === 'SecurityError') +sensor.addEventListener("error", (error) => { + if (event.error.name === "SecurityError") console.log("No permissions to use AbsoluteOrientationSensor."); }); ``` @@ -130,16 +129,16 @@ Sensor readings are received through the {{domxref('Sensor.reading_event', 'read The following example illustrates this using the {{domxref('Magnetometer')}} sensor. ```js -let magSensor = new Magnetometer({frequency: 60}); +let magSensor = new Magnetometer({ frequency: 60 }); -magSensor.addEventListener('reading', (e) => { +magSensor.addEventListener("reading", (e) => { console.log(`Magnetic field along the X-axis ${magSensor.x}`); console.log(`Magnetic field along the Y-axis ${magSensor.y}`); console.log(`Magnetic field along the Z-axis ${magSensor.z}`); -}) -magSensor.addEventListener('error', (event) => { +}); +magSensor.addEventListener("error", (event) => { console.log(event.error.name, event.error.message); -}) +}); magSensor.start(); ``` diff --git a/files/en-us/web/api/web_locks_api/index.md b/files/en-us/web/api/web_locks_api/index.md index fee4e0ede710f20..54abf36ee2a1790 100644 --- a/files/en-us/web/api/web_locks_api/index.md +++ b/files/en-us/web/api/web_locks_api/index.md @@ -15,7 +15,7 @@ browser-compat: - api.Lock --- -{{SeeCompatTable}}{{APIRef("Web Locks")}}{{DefaultAPISidebar}}{{securecontext_header}} +{{SeeCompatTable}}{{DefaultAPISidebar("Web Locks API")}}{{securecontext_header}} The Web Locks API allows scripts running in one tab or worker to asynchronously acquire a lock, hold it while work is performed, then release it. While held, no other script executing in the same origin can acquire the same lock, which allows a web app running in multiple tabs or workers to coordinate work and the use of resources. @@ -30,7 +30,7 @@ The API is used as follows: 3. The lock is automatically released when the task completes. ```js -navigator.locks.request('my_resource', async (lock) => { +navigator.locks.request("my_resource", async (lock) => { // The lock has been acquired. await do_something(); await do_something_else(); @@ -60,7 +60,7 @@ For example: await do_something_without_lock(); // Request the lock. -await navigator.locks.request('my_resource', async (lock) => { +await navigator.locks.request("my_resource", async (lock) => { // The lock has been acquired. await do_something_with_lock(); await do_something_else_with_lock(); @@ -97,9 +97,9 @@ const p = new Promise((res, rej) => { // Request the lock: navigator.locks.request( - 'my_resource', + "my_resource", // Lock is acquired. - (lock) => p, // Now lock will be held until either resolve() or reject() is called. + (lock) => p // Now lock will be held until either resolve() or reject() is called. ); ``` diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json index 37f41a7cbe29f63..97b8526c47745a5 100644 --- a/files/jsondata/GroupData.json +++ b/files/jsondata/GroupData.json @@ -747,6 +747,11 @@ "properties": [], "events": [] }, + "Keyboard API": { + "overview": ["Keyboard API"], + "interfaces": ["Keyboard", "KeyboardLayoutMap"], + "methods": ["Navigator.keyboard"] + }, "Layout Instability API": { "overview": ["Layout Instability API"], "interfaces: ": ["LayoutShift", "LayoutShiftAttribution"], @@ -1766,6 +1771,13 @@ "properties": ["Navigator.hid"], "events": [] }, + "Web Locks API": { + "overview": ["Web Locks API"], + "interfaces": ["Lock", "LockManager"], + "methods": [], + "properties": [], + "events": [] + }, "Web MIDI API": { "overview": ["Web MIDI API"], "interfaces": [