Update Device Orientation Events | Add {{securecontext_header}} and o…

…ther adjust (#31029) * create separate Device orientation events section * fix style * fix apiref macros * specific spec-urls front matter key * style fix * update api ladning page * add securecontext_header header * update description * update description
mdn · Dec 15, 2023 · 6d4f585 · 6d4f585
1 parent caeb305
commit 6d4f585
Show file tree

Hide file tree

Showing 28 changed files with 64 additions and 59 deletions.
diff --git a/...s/en-us/web/api/device_orientation_events/detecting_device_orientation/index.md b/...s/en-us/web/api/device_orientation_events/detecting_device_orientation/index.md
@@ -7,7 +7,7 @@ browser-compat:
   - api.DeviceOrientationEvent
 ---
 
-{{DefaultAPISidebar("Device Orientation Events")}} {{securecontext_header}}
+{{DefaultAPISidebar("Device Orientation Events")}}{{securecontext_header}}
 
 Increasingly, web-enabled devices are capable of determining their **orientation**; that is, they can report data indicating changes to their orientation with relation to the pull of gravity. In particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.
 

diff --git a/files/en-us/web/api/device_orientation_events/index.md b/files/en-us/web/api/device_orientation_events/index.md
@@ -10,9 +10,10 @@ browser-compat:
   - api.DeviceMotionEvent
   - api.DeviceMotionEventAcceleration
   - api.DeviceMotionEventRotationRate
+spec-urls: https://w3c.github.io/deviceorientation/
 ---
 
-{{DefaultAPISidebar("Device Orientation Events")}}
+{{DefaultAPISidebar("Device Orientation Events")}}{{securecontext_header}}
 
 Device orientation events are events that allow you to [detect a device's physical orientation](/en-US/docs/Web/API/Device_orientation_events/Detecting_device_orientation#processing_orientation_events), as well as allowing you to [detect the device's motion](/en-US/docs/Web/API/Device_orientation_events/Detecting_device_orientation#processing_motion_events).
 
@@ -34,22 +35,22 @@ Some typical features for which you might want to use the device orientation eve
 
 ## Interfaces
 
-- {{domxref("DeviceOrientationEvent")}}
-  - : Represents changes in the physical orientation of a device.
 - {{domxref("DeviceMotionEvent")}}
   - : Represents changes in the acceleration of a device, as well as the rotation rate.
 - {{domxref("DeviceMotionEventAcceleration")}}
   - : Represents the amount of acceleration the device is experiencing along all three axes
 - {{domxref("DeviceMotionEventRotationRate")}}
   - : Represents the rate at which the device is rotating around all three axes.
+- {{domxref("DeviceOrientationEvent")}}
+  - : Represents changes in the physical orientation of a device.
 
-## Events
+### Extensions to other interfaces
 
-- {{domxref("Window.deviceorientation_event", "deviceorientation")}}
-  - : Fired when fresh data is available from the device about the current orientation of the device as compared to the Earth coordinate frame.
-- {{domxref("Window.devicemotion_event", "devicemotion")}}
+- {{domxref("Window.devicemotion_event", "devicemotion")}} event
   - : Fired at a regular interval to indicate the amount of physical force of acceleration the device is receiving at that time, and the rate of rotation of the device.
-- {{domxref("Window.deviceorientationabsolute_event", "deviceorientationabsolute")}}
+- {{domxref("Window.deviceorientation_event", "deviceorientation")}} event
+  - : Fired when fresh data is available from the device about the current orientation of the device as compared to the Earth coordinate frame.
+- {{domxref("Window.deviceorientationabsolute_event", "deviceorientationabsolute")}} event
   - : Fired when absolute device orientation changes.
 
 ## Specifications

diff --git a/...eb/api/device_orientation_events/orientation_and_motion_data_explained/index.md b/...eb/api/device_orientation_events/orientation_and_motion_data_explained/index.md
@@ -4,7 +4,7 @@ slug: Web/API/Device_orientation_events/Orientation_and_motion_data_explained
 page-type: guide
 ---
 
-{{DefaultAPISidebar("Device Orientation Events")}}
+{{DefaultAPISidebar("Device Orientation Events")}}{{securecontext_header}}
 
 When using orientation and motion events, it's important to understand what the values you're given by the browser mean. This article provides details about the coordinate systems at play and how you use them.
 

diff --git a/.../device_orientation_events/using_device_orientation_with_3d_transforms/index.md b/.../device_orientation_events/using_device_orientation_with_3d_transforms/index.md
@@ -4,7 +4,8 @@ slug: Web/API/Device_orientation_events/Using_device_orientation_with_3D_transfo
 page-type: guide
 ---
 
-{{DefaultAPISidebar("Device Orientation Events")}}
+{{DefaultAPISidebar("Device Orientation Events")}}{{securecontext_header}}
+
 This article provides tips on how to use device orientation information in tandem with CSS 3D transforms.
 
 ## Using orientation to rotate an element

diff --git a/files/en-us/web/api/devicemotionevent/acceleration/index.md b/files/en-us/web/api/devicemotionevent/acceleration/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEvent.acceleration
 ---
 
-{{APIRef("Device Orientation Events")}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`acceleration`** property returns the amount of acceleration recorded by
+The **`acceleration`** read-only property of the {{domxref("DeviceMotionEvent")}} interface returns the amount of acceleration recorded by
 the device, in [meters per second squared (m/s²)](https://en.wikipedia.org/wiki/Meter_per_second_squared).
 The acceleration value does not include the effect of
 the gravity force, in contrast to {{DOMxRef("DeviceMotionEvent.accelerationIncludingGravity")}}.

diff --git a/files/en-us/web/api/devicemotionevent/accelerationincludinggravity/index.md b/files/en-us/web/api/devicemotionevent/accelerationincludinggravity/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEvent.accelerationIncludingGravity
 ---
 
-{{APIRef("Device Orientation Events")}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`accelerationIncludingGravity`** property returns the
+The **`accelerationIncludingGravity`** read-only property of the {{domxref("DeviceMotionEvent")}} interface returns the
 amount of acceleration recorded by the device, in [meters per second squared (m/s²)](https://en.wikipedia.org/wiki/Meter_per_second_squared). Unlike {{DOMxRef("DeviceMotionEvent.acceleration")}}
 which compensates for the influence of gravity, its value is the sum of the acceleration
 of the device as induced by the user and an acceleration equal and opposite to that

diff --git a/files/en-us/web/api/devicemotionevent/devicemotionevent/index.md b/files/en-us/web/api/devicemotionevent/devicemotionevent/index.md
@@ -6,7 +6,7 @@ page-type: web-api-constructor
 browser-compat: api.DeviceMotionEvent.DeviceMotionEvent
 ---
 
-{{APIRef("Device Orientation Events")}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
 The **`DeviceMotionEvent()`** constructor creates a new {{DOMxRef("DeviceMotionEvent")}} object.
 

diff --git a/files/en-us/web/api/devicemotionevent/index.md b/files/en-us/web/api/devicemotionevent/index.md
@@ -5,9 +5,9 @@ page-type: web-api-interface
 browser-compat: api.DeviceMotionEvent
 ---
 
-{{APIRef("Device Orientation Events")}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceMotionEvent`** interface provides web developers with information about the speed of changes for the device's position and orientation.
+The **`DeviceMotionEvent`** interface of the {{domxref("Device Orientation Events", "", "", "nocode")}} provides web developers with information about the speed of changes for the device's position and orientation.
 
 > **Warning:** Currently, Firefox and Chrome do not handle the coordinates the same way. Take care about this while using them.
 

diff --git a/files/en-us/web/api/devicemotionevent/interval/index.md b/files/en-us/web/api/devicemotionevent/interval/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEvent.interval
 ---
 
-{{APIRef("Device Orientation Events")}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceMotionEvent.interval`** property returns the interval, in milliseconds, at which data is obtained from the underlying
+The **`interval`** read-only property of the {{domxref("DeviceMotionEvent")}} interface returns the interval, in milliseconds, at which data is obtained from the underlying
 hardware. You can use this to determine the granularity of motion events.
 
 ## Value

diff --git a/files/en-us/web/api/devicemotionevent/rotationrate/index.md b/files/en-us/web/api/devicemotionevent/rotationrate/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEvent.rotationRate
 ---
 
-{{APIRef("Device Orientation Events")}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceMotionEvent.rotationRate`** read-only property returns the rate at which the device is rotating around each of its axes in degrees per
+The **`rotationRate`** read-only property of the {{domxref("DeviceMotionEvent")}} interface returns the rate at which the device is rotating around each of its axes in degrees per
 second.
 
 > **Note:** If the hardware isn't capable of providing this

diff --git a/files/en-us/web/api/devicemotioneventacceleration/index.md b/files/en-us/web/api/devicemotioneventacceleration/index.md
@@ -5,9 +5,9 @@ page-type: web-api-interface
 browser-compat: api.DeviceMotionEventAcceleration
 ---
 
-{{securecontext_header}}{{ ApiRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceMotionEventAcceleration`** object provides information about the amount of acceleration the device is experiencing along all three axes.
+The **`DeviceMotionEventAcceleration`** interface of the {{domxref("Device Orientation Events", "", "", "nocode")}} provides information about the amount of acceleration the device is experiencing along all three axes.
 
 ## Instance properties
 

diff --git a/files/en-us/web/api/devicemotioneventacceleration/x/index.md b/files/en-us/web/api/devicemotioneventacceleration/x/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEventAcceleration.x
 ---
 
-{{ APIRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceMotionEventAcceleration.x`** read-only property indicates the amount of acceleration that occurred along the X
+The **`x`** read-only property of the {{domxref("DeviceMotionEventAcceleration")}} interface indicates the amount of acceleration that occurred along the X
 axis in a [`DeviceMotionEventAcceleration`](/en-US/docs/Web/API/DeviceMotionEventAcceleration)
 object.
 

diff --git a/files/en-us/web/api/devicemotioneventacceleration/y/index.md b/files/en-us/web/api/devicemotioneventacceleration/y/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEventAcceleration.y
 ---
 
-{{ APIRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceMotionEventAcceleration.x`** read-only property indicates the amount of acceleration that occurred along the Y
+The **`y`** read-only property of the {{domxref("DeviceMotionEventAcceleration")}} interface indicates the amount of acceleration that occurred along the Y
 axis in a [`DeviceMotionEventAcceleration`](/en-US/docs/Web/API/DeviceMotionEventAcceleration)
 object.
 

diff --git a/files/en-us/web/api/devicemotioneventacceleration/z/index.md b/files/en-us/web/api/devicemotioneventacceleration/z/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEventAcceleration.z
 ---
 
-{{ APIRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceMotionEventAcceleration.x`** read-only property indicates the amount of acceleration that occurred along the Z
+The **`z`** read-only property of the {{domxref("DeviceMotionEventAcceleration")}} interface indicates the amount of acceleration that occurred along the Z
 axis in a [`DeviceMotionEventAcceleration`](/en-US/docs/Web/API/DeviceMotionEventAcceleration)
 object.
 

diff --git a/files/en-us/web/api/devicemotioneventrotationrate/alpha/index.md b/files/en-us/web/api/devicemotioneventrotationrate/alpha/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEventRotationRate.alpha
 ---
 
-{{ ApiRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceMotionEventRotationRate.alpha`** read-only property indicates the rate of rotation around the Z axis, in degrees per second.
+The **`alpha`** read-only property of the {{domxref("DeviceMotionEventRotationRate")}} interface indicates the rate of rotation around the Z axis, in degrees per second.
 
 ## Value
 

diff --git a/files/en-us/web/api/devicemotioneventrotationrate/beta/index.md b/files/en-us/web/api/devicemotioneventrotationrate/beta/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEventRotationRate.beta
 ---
 
-{{ ApiRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceMotionEventRotationRate.alpha`** read-only property indicates the rate of rotation around the X axis, in degrees per second.
+The **`beta`** read-only property of the {{domxref("DeviceMotionEventRotationRate")}} interface indicates the rate of rotation around the X axis, in degrees per second.
 
 ## Value
 

diff --git a/files/en-us/web/api/devicemotioneventrotationrate/gamma/index.md b/files/en-us/web/api/devicemotioneventrotationrate/gamma/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceMotionEventRotationRate.gamma
 ---
 
-{{ ApiRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-This property indicates the rate of rotation around the Y axis, in degrees per second.
+The **`gamma`** read-only property of the {{domxref("DeviceMotionEventRotationRate")}} interface indicates the rate of rotation around the Y axis, in degrees per second.
 
 ## Value
 

diff --git a/files/en-us/web/api/devicemotioneventrotationrate/index.md b/files/en-us/web/api/devicemotioneventrotationrate/index.md
@@ -5,9 +5,9 @@ page-type: web-api-interface
 browser-compat: api.DeviceMotionEventRotationRate
 ---
 
-{{securecontext_header}}{{ ApiRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-A `DeviceMotionEventRotationRate` object provides information about the rate at which the device is rotating around all three axes.
+A **`DeviceMotionEventRotationRate`** interface of the {{domxref("Device Orientation Events", "", "", "nocode")}} provides information about the rate at which the device is rotating around all three axes.
 
 ## Instance properties
 

diff --git a/files/en-us/web/api/deviceorientationevent/absolute/index.md b/files/en-us/web/api/deviceorientationevent/absolute/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceOrientationEvent.absolute
 ---
 
-{{ apiref("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-Indicates whether or not the device is providing orientation data absolutely (that is,
+The **`absolute`** read-only property of the {{domxref("DeviceOrientationEvent")}} interface indicates whether or not the device is providing orientation data absolutely (that is,
 in reference to the Earth's coordinate frame) or using some arbitrary frame determined
 by the device.
 See [Orientation and motion data explained](/en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained) for details.

diff --git a/files/en-us/web/api/deviceorientationevent/alpha/index.md b/files/en-us/web/api/deviceorientationevent/alpha/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceOrientationEvent.alpha
 ---
 
-{{ ApiRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-Returns the rotation of the device around the Z axis; that is, the number of degrees by
+The **`alpha`** read-only property of the {{domxref("DeviceOrientationEvent")}} interface returns the rotation of the device around the Z axis; that is, the number of degrees by
 which the device is being twisted around the center of the screen.
 See [Orientation and motion data explained](/en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained) for details.
 

diff --git a/files/en-us/web/api/deviceorientationevent/beta/index.md b/files/en-us/web/api/deviceorientationevent/beta/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceOrientationEvent.beta
 ---
 
-{{ ApiRef("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-Returns the rotation of the device around the X axis; that is, the number of degrees,
+The **`beta`** read-only property of the {{domxref("DeviceOrientationEvent")}} interface returns the rotation of the device around the X axis; that is, the number of degrees,
 ranged between -180 and 180, by which the device is tipped forward or backward.
 See [Orientation and motion data explained](/en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained) for details.
 

diff --git a/files/en-us/web/api/deviceorientationevent/deviceorientationevent/index.md b/files/en-us/web/api/deviceorientationevent/deviceorientationevent/index.md
@@ -6,7 +6,7 @@ page-type: web-api-constructor
 browser-compat: api.DeviceOrientationEvent.DeviceOrientationEvent
 ---
 
-{{APIRef("Device Orientation Events")}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
 The **`DeviceOrientationEvent()`** constructor creates a new {{domxref("DeviceOrientationEvent")}} object.
 

diff --git a/files/en-us/web/api/deviceorientationevent/gamma/index.md b/files/en-us/web/api/deviceorientationevent/gamma/index.md
@@ -6,9 +6,9 @@ page-type: web-api-instance-property
 browser-compat: api.DeviceOrientationEvent.gamma
 ---
 
-{{ apiref("Device Orientation Events") }}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-Returns the rotation of the device around the Y axis; that is, the number of degrees,
+The **`gamma`** read-only property of the {{domxref("DeviceOrientationEvent")}} interface returns the rotation of the device around the Y axis; that is, the number of degrees,
 ranged between `-90` and `90`, by which the device is tilted left
 or right.
 See [Orientation and motion data explained](/en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained) for details.

diff --git a/files/en-us/web/api/deviceorientationevent/index.md b/files/en-us/web/api/deviceorientationevent/index.md
@@ -5,9 +5,9 @@ page-type: web-api-interface
 browser-compat: api.DeviceOrientationEvent
 ---
 
-{{apiref("Device Orientation Events")}}
+{{apiref("Device Orientation Events")}}{{securecontext_header}}
 
-The **`DeviceOrientationEvent`** object provides web developers with information from the physical orientation of the device running the web page.
+The **`DeviceOrientationEvent`** interface of the {{domxref("Device Orientation Events", "", "", "nocode")}} provides web developers with information from the physical orientation of the device running the web page.
 
 {{InheritanceDiagram}}
 

diff --git a/files/en-us/web/api/window/devicemotion_event/index.md b/files/en-us/web/api/window/devicemotion_event/index.md
@@ -6,9 +6,9 @@ page-type: web-api-event
 browser-compat: api.Window.devicemotion_event
 ---
 
-{{APIRef}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
-The `devicemotion` event is fired at a regular interval and indicates the amount of physical force of acceleration the device is receiving at that time. It also provides information about the rate of rotation, if available.
+The **`devicemotion`** event is fired at a regular interval and indicates the amount of physical force of acceleration the device is receiving at that time. It also provides information about the rate of rotation, if available.
 
 This event is not cancelable and does not bubble.
 

diff --git a/files/en-us/web/api/window/deviceorientation_event/index.md b/files/en-us/web/api/window/deviceorientation_event/index.md
@@ -6,7 +6,7 @@ page-type: web-api-event
 browser-compat: api.Window.deviceorientation_event
 ---
 
-{{APIRef}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
 The **`deviceorientation`** event is fired when fresh data is available from an orientation sensor about the current orientation of the device as compared to the Earth coordinate frame. This data is gathered from a magnetometer inside the device.
 

diff --git a/files/en-us/web/api/window/deviceorientationabsolute_event/index.md b/files/en-us/web/api/window/deviceorientationabsolute_event/index.md
@@ -6,7 +6,7 @@ page-type: web-api-event
 browser-compat: api.Window.deviceorientationabsolute_event
 ---
 
-{{ApiRef}}
+{{APIRef("Device Orientation Events")}}{{securecontext_header}}
 
 The **`deviceorientationabsolute`** event is fired when absolute device orientation changes.
 

diff --git a/files/en-us/web/api/window/index.md b/files/en-us/web/api/window/index.md
@@ -289,12 +289,6 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._
 
 Listen to these events using [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) or by assigning an event listener to the `oneventname` property of this interface. In addition to the events listed below, many events can bubble from the {{domxref("Document")}} contained in the window object.
 
-- {{domxref("Window.devicemotion_event", "devicemotion")}}
-  - : Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.
-- {{domxref("Window.deviceorientation_event", "deviceorientation")}}
-  - : Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.
-- {{domxref("Window.deviceorientationabsolute_event", "deviceorientationabsolute")}}
-  - : Fired when fresh data is available from the magnetometer orientation sensor about the current absolute orientation of the device as compared to the Earth coordinate frame.
 - {{domxref("Window/error_event", "error")}}
   - : Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
 - {{domxref("Window/languagechange_event", "languagechange")}}
@@ -323,6 +317,15 @@ Listen to these events using [`addEventListener()`](/en-US/docs/Web/API/EventTar
 - {{domxref("Window/online_event", "online")}}
   - : Fired when the browser has gained access to the network and the value of `navigator.onLine` has switched to `true`.
 
+### Device orientation events
+
+- {{domxref("Window.devicemotion_event", "devicemotion")}}
+  - : Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.
+- {{domxref("Window.deviceorientation_event", "deviceorientation")}}
+  - : Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.
+- {{domxref("Window.deviceorientationabsolute_event", "deviceorientationabsolute")}}
+  - : Fired when fresh data is available from the magnetometer orientation sensor about the current absolute orientation of the device as compared to the Earth coordinate frame.
+
 ### Focus events
 
 - {{domxref("Window/blur_event", "blur")}}