feat(websites): complete ScreenOrientation docs on Platform website #…

…6974 (#6997)

src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil18ScreenOrientationPage.razor

@@ -31,6 +31,29 @@
         <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
         <div class="section-card-txt">
             <br />
+            <b>GetOrientationType</b>: <br />
+            Returns the document's current orientation type.
+            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/type" target="_blank">MDN</a>).
+            <br /><br />
+            <BitAccordion Title="Sample">
+                <BitPivot>
+                    <BitPivotItem HeaderText="Code">
+                        <pre class="code-box">
+                            @getOrientationTypeExampleCode
+                        </pre>
+                    </BitPivotItem>
+                    <BitPivotItem HeaderText="Result">
+                        <br />
+                        <BitButton OnClick="@GetOrientationType">GetOrientationType</BitButton>
+                        <br />
+                        <br />
+                        <div>Orientation type: @orientationType</div>
+                        <br />
+                    </BitPivotItem>
+                </BitPivot>
+            </BitAccordion>
+            <br /><br />
+
             <b>GetAngle</b>: <br />
             Returns the document's current orientation angle.
             (<a href="https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/angle" target="_blank">MDN</a>).
@@ -53,6 +76,22 @@
                 </BitPivot>
             </BitAccordion>
             <br /><br />
+
+            <b>Lock</b>: <br />
+            Locks the orientation of the containing document to the specified orientation.
+            Typically orientation locking is only enabled on mobile devices, and when the browser context is full screen.
+            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock" target="_blank">MDN</a>).
+            <br /><br /><br />
+
+            <b>Unlock</b>: <br />
+            Unlocks the orientation of the containing document from its default orientation.
+            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/unlock" target="_blank">MDN</a>).
+            <br /><br /><br />
+
+            <b>AddChange</b>, <b>RemoveChange</b>: <br />
+            The change event of the ScreenOrientation interface fires when the orientation of the
+            screen has changed, for example when a user rotates their mobile phone.
+            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event" target="_blank">MDN</a>).
         </div>
     </section>
 </div>

src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil18ScreenOrientationPage.razor.cs

@@ -3,13 +3,37 @@
 public partial class Butil18ScreenOrientationPage
 {
     private ushort angle;
+
+    private string? orientationType;
+
+    private async Task GetOrientationType()
+    {
+        var result = await screenOrientation.GetOrientationType();
+        orientationType = result.ToString();
+    }
 
     private async Task GetAngle()
     {
         angle = await screenOrientation.GetAngle();
     }
 
 
+    private string getOrientationTypeExampleCode =
+@"@inject Bit.Butil.ScreenOrientation screenOrientation
+
+<BitButton OnClick=""@GetOrientationType"">GetOrientationType</BitButton>
+
+<div>Orientation type: @orientationType</div>
+
+@code {
+    private string? orientationType;
+
+    private async Task GetOrientationType()
+    {
+        var result = await screenOrientation.GetOrientationType();
+        orientationType = result.ToString();
+    }
+}";
     private string getAngleExampleCode =
 @"@inject Bit.Butil.ScreenOrientation screenOrientation