Update HomePage to include transitions

Scille · Nov 7, 2024 · cff992d · cff992d
1 parent a9430d2
commit cff992d
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 2 deletions.
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
@@ -1,7 +1,8 @@
 {
   "usage": {
-    "title": "MegaShark library components",
+    "title": "MegaShark UI/UX library",
     "components": {
+      "title": "Graphical components",
       "actionBar": {
         "title": "Action bar (with buttons)",
         "buttons": {
@@ -215,6 +216,14 @@
       "dateTimePicker": {
         "title": "Date Time Picker"
       }
+    },
+    "transitions": {
+      "title": "Transitions",
+      "slideHorizontal": {
+        "title": "SlideHorizontal",
+        "previousButton": "Previous item",
+        "nextButton": "Next item"
+      }
     }
   }
 }
diff --git a/src/locales/fr-FR.json b/src/locales/fr-FR.json
@@ -1,7 +1,8 @@
 {
   "usage": {
-    "title": "Librairie de composants MegaShark",
+    "title": "Bibliothèque UI/UX MegaShark",
     "components": {
+      "title": "Composants graphiques",
       "actionBar": {
         "title": "Action bar (with buttons)",
         "buttons": {
@@ -215,6 +216,14 @@
       "dateTimePicker": {
         "title": "Sélecteur de date et heure"
       }
+    },
+    "transitions": {
+      "title": "Transitions",
+      "slideHorizontal": {
+        "title": "SlideHorizontal",
+        "previousButton": "Élément précédent",
+        "nextButton": "Élément suivant"
+      }
     }
   }
 }
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -3,6 +3,7 @@
     <ion-content :fullscreen="true">
       <div id="container">
         <ion-title class="title-h1-xl main-title">{{ $msTranslate('usage.title') }}</ion-title>
+        <ion-title class="title-h1 main-title">{{ $msTranslate('usage.components.title') }}</ion-title>
         <!-- translation -->
         <div class="example-divider">
           <ion-label class="title-h2">{{ $msTranslate('usage.components.translation.title') }}</ion-label>
@@ -439,6 +440,37 @@
             </div>
           </div>
         </div>
+
+        <!-- transitions -->
+        <ion-title class="title-h1 main-title">{{ $msTranslate('usage.transitions.title') }}</ion-title>
+
+        <!-- slide-horizontal -->
+        <div class="example-divider">
+          <ion-label class="title-h2">{{ $msTranslate('usage.transitions.slideHorizontal.title') }}</ion-label>
+          <div class="example-divider-content">
+            <div class="example-data">
+              <ion-button @click="onPreviousItemSlideHorizontalClick">
+                {{ $msTranslate('usage.transitions.slideHorizontal.previousButton') }}
+              </ion-button>
+              <ion-button @click="onNextItemSlideHorizontalClick">
+                {{ $msTranslate('usage.transitions.slideHorizontal.nextButton') }}
+              </ion-button>
+            </div>
+          </div>
+          <div class="example-divider-content">
+            <div class="example-data">
+              <slide-horizontal
+                :appear-from="slideHorizontalPositions.appearFrom"
+                :disappear-to="slideHorizontalPositions.disappearTo"
+                class="slider-container"
+              >
+                <ion-label v-if="slideHorizontalItem === 0">{{ slideHorizontalItem }}</ion-label>
+                <ion-label v-if="slideHorizontalItem === 1">{{ slideHorizontalItem }}</ion-label>
+                <ion-label v-if="slideHorizontalItem === 2">{{ slideHorizontalItem }}</ion-label>
+              </slide-horizontal>
+            </div>
+          </div>
+        </div>
       </div>
     </ion-content>
   </ion-page>
@@ -506,6 +538,7 @@ import {
   openSpinnerModal as msOpenSpinnerModal,
   MsDatetimePicker,
 } from '@lib/components';
+import { Position, SlideHorizontal } from '@lib/transitions';
 import { DateTime } from 'luxon';
 import { inject, ref, Ref, onMounted } from 'vue';
 import SettingsModal from '@/views/settings/SettingsModal.vue';
@@ -587,6 +620,18 @@ const emailValidator: IValidator = async function (value: string) {
     : { validity: Validity.Invalid, reason: 'usage.components.inputs.msInput.invalidEmail' };
 };
 
+enum SlideHorizontalItem {
+  First,
+  Second,
+  Third,
+}
+
+const slideHorizontalItem = ref(SlideHorizontalItem.First);
+const slideHorizontalPositions = ref({
+  appearFrom: Position.Left,
+  disappearTo: Position.Right,
+});
+
 interface MsSorterExampleData {
   name: string;
   birthDate: DateTime;
@@ -715,6 +760,22 @@ async function createStripeCard(): Promise<void> {
   const result: PaymentMethodResult = await stripeCardForm.value.submit();
   stripeCardDetails.value = result?.paymentMethod?.card;
 }
+
+function onPreviousItemSlideHorizontalClick(): void {
+  slideHorizontalPositions.value = {
+    appearFrom: Position.Right,
+    disappearTo: Position.Left,
+  };
+  slideHorizontalItem.value = (slideHorizontalItem.value - 1 + 3) % 3;
+}
+
+function onNextItemSlideHorizontalClick(): void {
+  slideHorizontalPositions.value = {
+    appearFrom: Position.Left,
+    disappearTo: Position.Right,
+  };
+  slideHorizontalItem.value = (slideHorizontalItem.value + 1) % 3;
+}
 </script>
 
 <style scoped lang="scss">
@@ -791,4 +852,13 @@ async function createStripeCard(): Promise<void> {
 .stripe-card-form {
   width: 50em;
 }
+
+.slider-container ion-label {
+  width: 10em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 5em;
+  background-color: red;
+}
 </style>