Add $landscape and $portrait stores to trackScreenOrientation i…

…ntegration (#70)

.changeset/clean-geese-cheat.md

@@ -0,0 +1,5 @@
+---
+'@withease/web-api': minor
+---
+
+Add `$landscape` and `$portrait` stores to `trackScreenOrientation` integration

apps/web-api-demo/screen-orientation.html

@@ -13,6 +13,8 @@
       <h2>Screen orientation</h2>
       <p>Type: <span id="type" /></p>
       <p>Angle: <span id="angle" /></p>
+      <p>Portrait: <span id="portrait" /></p>
+      <p>Landscape: <span id="landscape" /></p>
     </main>
 
     <script type="module" src="/src/screen-orientation.ts"></script>

apps/web-api-demo/src/screen-orientation.ts

@@ -5,8 +5,12 @@ const appStarted = createEvent();
 
 const typeElement = document.querySelector('#type')!;
 const angleElement = document.querySelector('#angle')!;
+const portraitElement = document.querySelector('#portrait')!;
+const landscapeElement = document.querySelector('#landscape')!;
 
-const { $type, $angle } = trackScreenOrientation({ setup: appStarted });
+const { $type, $angle, $landscape, $portrait } = trackScreenOrientation({
+  setup: appStarted,
+});
 
 $type.watch((type) => {
   console.log('type', type);
@@ -16,5 +20,13 @@ $angle.watch((angle) => {
   console.log('angle', angle);
   angleElement.textContent = JSON.stringify(angle);
 });
+$landscape.watch((landscape) => {
+  console.log('landscape', landscape);
+  landscapeElement.textContent = JSON.stringify(landscape);
+});
+$portrait.watch((portrait) => {
+  console.log('portrait', portrait);
+  portraitElement.textContent = JSON.stringify(portrait);
+});
 
 appStarted();

apps/website/docs/web-api/screen_orientation.live.vue

@@ -6,9 +6,16 @@ import { onMounted } from 'vue';
 
 const appStarted = createEvent();
 
-const { $type, $angle } = trackScreenOrientation({ setup: appStarted });
+const { $type, $angle, $portrait, $landscape } = trackScreenOrientation({
+  setup: appStarted,
+});
 
-const [type, angle] = useUnit([$type, $angle]);
+const [type, angle, portrait, landscape] = useUnit([
+  $type,
+  $angle,
+  $portrait,
+  $landscape,
+]);
 
 onMounted(appStarted);
 </script>
@@ -20,4 +27,10 @@ onMounted(appStarted);
   <p>
     Screen orientation angle: <strong>{{ angle }}</strong>
   </p>
+  <p>
+    Is device in portait orientation: <strong>{{ portrait }}</strong>
+  </p>
+  <p>
+    Is device in landscape orientation: <strong>{{ landscape }}</strong>
+  </p>
 </template>

apps/website/docs/web-api/screen_orientation.md

@@ -22,7 +22,7 @@ All you need to do is to create an integration by calling `trackScreenOrientatio
 ```ts
 import { trackScreenOrientation } from '@withease/web-api';
 
-const { $type, $angle } = trackScreenOrientation({
+const { $type, $angle, $portrait, $landscape } = trackScreenOrientation({
   setup: appStarted,
 });
 ```
@@ -31,6 +31,8 @@ Returns an object with:
 
 - `$type`: [_Store_](https://effector.dev/docs/api/effector/store) with current orientation type, one of "portrait-primary", "portrait-secondary", "landscape-primary", or "landscape-secondary"
 - `$angle`: [_Store_](https://effector.dev/docs/api/effector/store) with a `number` which represents the current orientation angle in degrees
+- `$portrait`: [_Store_](https://effector.dev/docs/api/effector/store) with a `boolean` which states if device is in portrait orientation
+- `$landscape`: [_Store_](https://effector.dev/docs/api/effector/store) with a `boolean` which states if device is in landscape orientation
 
 ::: tip
 It supports [`@@trigger` protocol](/protocols/trigger). Since it allows firing only one [_Event_](https://effector.dev/en/api/effector/event/) `trackScreenOrientation` triggers any updates of `$type` as a `fired` in case of [`@@trigger` protocol](/protocols/trigger).
@@ -45,7 +47,7 @@ somethingExpectsTrigger(trackScreenOrientation);
 
 ## Live demo
 
-Let us show you a live demo of how it works. The following demo displays `$type` and `$angle` values of the current screen orientation. _Rotate your device to see how it works._
+Let us show you a live demo of how it works. The following demo displays `$type`, `$angle`, `$portrait` and `$landscape` values of the current screen orientation. _Rotate your device to see how it works._
 
 <script setup lang="ts">
 import demoFile from './screen_orientation.live.vue?raw';

packages/web-api/src/screen_orientation.ts

@@ -22,6 +22,20 @@ const trackScreenOrientation: ScreenOrientation & TriggerProtocol = (
     { serialize: 'ignore' }
   );
 
+  /**
+   * States if device is in landscape orientation
+   */
+  const $landscape = $type.map((type) => {
+    return type === 'landscape-primary' || type === 'landscape-secondary';
+  });
+
+  /**
+   * States if device is in portrait orientation
+   */
+  const $portrait = $type.map((type) => {
+    return type === 'portrait-primary' || type === 'portrait-secondary';
+  });
+
   const orientationChanged = setupListener(
     {
       add: (listener) =>
@@ -45,7 +59,7 @@ const trackScreenOrientation: ScreenOrientation & TriggerProtocol = (
     target: $angle,
   });
 
-  return { $type, $angle };
+  return { $type, $angle, $portrait, $landscape };
 };
 
 trackScreenOrientation['@@trigger'] = () => {