🎠 Rework carousels

KimlikDAO · Feb 2, 2025 · 21b655b · 21b655b
1 parent 4a2650b
commit 21b655b
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 115 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,6 @@
 <h1><img src="components/icon.svg" align="top" height="44"> KimlikDAO dApp</a></h1>
 
-
-# 👋 Introduction
+## 👋 Introduction
 
 <img align="right" width="280" height="280" src="https://kimlikdao.org/KPASS.svg" style="border-radius:10px;box-shadow:0px 2px 10px rgb(0 0 0 / 15%);">
 

diff --git a/components/kpass/KPass.css b/components/kpass/KPass.css
@@ -13,10 +13,7 @@
   z-index: 4;
 }
 
-/** @export */
-.Flipped {}
-
-#Root.Flipped {
+#Root.InfoSide {
   transform: rotateY(-180deg);
 }
 
@@ -39,6 +36,7 @@
 
 /**
  * KPass info side
+ * @export
  */
 #InfoSide {
   transform: rotateY(180deg);

diff --git a/components/kpass/KPass.jsx b/components/kpass/KPass.jsx
@@ -11,30 +11,6 @@ import dom from "/lib/util/dom";
 
 /** @const {!HTMLDivElement} */
 const Cards = dom.div(Css.Cards);
-/** @const {!HTMLDivElement} */
-const Root = dom.div(Css.Root);
-/** @const {!HTMLButtonElement} */
-const LeftButton = dom.button(Css.LeftButton);
-/** @const {!HTMLButtonElement} */
-const RightButton = dom.button(Css.RightButton);
-/** @const {!HTMLDivElement} */
-const Nav = dom.div(Css.Nav);
-
-/** @type {number} */
-let Kart = 0;
-/** @type {number} */
-let KartSayısı = 3;
-
-/**
- * @param {number} yeniKart
- */
-const kartDeğiştir = (yeniKart) => {
-  /** @const {number} */
-  const width = Cards.children[0].getBoundingClientRect().width;
-  Cards.style.transform = `translate3d(-${yeniKart * width}px,0,0)`;
-  Kart = yeniKart;
-  /** @type {!Text} */(Nav.childNodes[1]).data = `${Kart + 1} / ${KartSayısı}`;
-}
 
 const LeftArrow = () =>
   <svg width="10" height="10" viewBox="0 0 10 10">
@@ -46,63 +22,88 @@ const RightArrow = () =>
     <use href={`#${Css.Arrow}`} width={10} height={10} transform="translate(10,0)scale(-1,1)" />
   </svg>;
 
+const Logo = () => (
+  <svg class={Css.Logo} height={24} width={24}>
+    <defs>
+      <path id={Css.Arrow} d="M6.5 1.5L3 5L6.5 8.5C6.8 8.8 6.8 9.2 6.5 9.5C6.2 9.8 5.8 9.8 5.5 9.5L1.5 5.5C1.2 5.2 1.2 4.8 1.5 4.5L5.5 0.5C5.8 0.2 6.2 0.2 6.5 0.5C6.8 0.8 6.8 1.2 6.5 1.5Z" />
+    </defs>
+    <use href={`#${SharedCss.Header.Logomark}`} width={24} height={24} />
+  </svg>
+);
+
+const Nav = () => {
+  /** @const {!HTMLButtonElement} */
+  const LeftButton = dom.button(Css.LeftButton);
+  /** @const {!HTMLButtonElement} */
+  const RightButton = dom.button(Css.RightButton);
+  /** @type {number} */
+  let currentCard = 0;
+  /** @type {number} */
+  let totalCards = 3;
+
+  const nextCard = () => {
+    currentCard = (currentCard + 1) % totalCards;
+    dom.slideCard(Cards, currentCard);
+    /** @type {!Text} */(LeftButton.nextSibling).data = `${currentCard + 1} / ${totalCards}`;
+  }
+  const prevCard = () => {
+    currentCard += totalCards - 2;
+    nextCard();
+  }
+  return (
+    <div class={Css.Nav}>
+      <LeftButton onClick={prevCard} class={[Css.Button, Css.LeftButton]}>
+        <LeftArrow />
+      </LeftButton>
+      1 / {totalCards}
+      <RightButton onClick={nextCard} class={[Css.Button, Css.RightButton]}>
+        <RightArrow />
+      </RightButton>
+    </div>
+  );
+}
+
 /**
  * @param {{ style: string, piggyback: string }=} props
  * @return {Promise<string>}
  */
-const KPass = ({ style, piggyback }) => (
-  <Root style={style}>
-    <Css />
-    <Cover bundleName="KPASS.svg" id={Css.CoverSide} piggyback={piggyback} />
-    <div id={Css.InfoSide}>
-      <Cards>
-        <PersonInfoCard />
-        <ContactInfoCard />
-        <AddressInfoCard />
-        <FamilyInfoCard />
-        <RegistryInfoCard />
-      </Cards>
-      <svg class={Css.Logo} height={24} width={24}>
-        <defs>
-          <path id={Css.Arrow} d="M6.5 1.5L3 5L6.5 8.5C6.8 8.8 6.8 9.2 6.5 9.5C6.2 9.8 5.8 9.8 5.5 9.5L1.5 5.5C1.2 5.2 1.2 4.8 1.5 4.5L5.5 0.5C5.8 0.2 6.2 0.2 6.5 0.5C6.8 0.8 6.8 1.2 6.5 1.5Z" />
-        </defs>
-        <use href={`#${SharedCss.Header.Logomark}`} width={24} height={24} />
-      </svg>
-      <Nav class={Css.Nav}>
-        <LeftButton
-          onClick={() => kartDeğiştir(Kart == 0 ? KartSayısı - 1 : Kart - 1)}
-          class={[Css.Button, Css.LeftButton]}>
-          <LeftArrow />
-        </LeftButton>
-        1 / {KartSayısı}
-        <RightButton
-          onClick={() => kartDeğiştir(Kart == KartSayısı - 1 ? 0 : Kart + 1)}
-          class={[Css.Button, Css.RightButton]}>
-          <RightArrow />
-        </RightButton>
-      </Nav>
-    </div>
-  </Root>
-);
+const KPass = ({ style, piggyback }) => {
+  /** @const {!HTMLDivElement} */
+  KPass.Root = dom.div(Css.Root);
 
+  return (
+    <KPass.Root style={style}>
+      <Css />
+      <Cover id={Css.CoverSide} bundleName="KPASS.svg" piggyback={piggyback} />
+      <div id={Css.InfoSide}>
+        <Cards>
+          <PersonInfoCard />
+          <ContactInfoCard />
+          <AddressInfoCard />
+          <FamilyInfoCard />
+          <RegistryInfoCard />
+        </Cards>
+        <Logo />
+        <Nav />
+      </div>
+    </KPass.Root>
+  );
+}
 /** @enum {string} */
 KPass.Css = Css;
 
-/** @const {!HTMLDivElement} */
-KPass.Root = Root;
-
 KPass.RightArrow = RightArrow;
 
 KPass.LeftArrow = LeftArrow;
 
 /**
  * @param {boolean} infoSide
  */
-KPass.showSide = (infoSide) => Root.classList.toggle(Css.Flipped, infoSide);
+KPass.showSide = (infoSide) => KPass.Root.classList.toggle(Css.InfoSide, infoSide);
 
 /**
  * @return {boolean}
  */
-KPass.flip = () => Root.classList.toggle(Css.Flipped);
+KPass.flip = () => KPass.Root.classList.toggle(Css.InfoSide);
 
 export default KPass;
diff --git a/components/phone/Phone.css b/components/phone/Phone.css
@@ -120,18 +120,12 @@
 }
 
 /** @export */
-.Göster {}
+.Show {}
 
-#KPassDialogButton.Göster {
-  transform: none;
+#Kutu.Show {
   opacity: 1;
 }
 
-#Kutu.Göster {
-  opacity: 1;
-}
-
-
 /**
  * Bilgi kutusu metni
  */
@@ -191,10 +185,17 @@
   height: 30px;
   justify-content: center;
   left: 15px;
-  opacity: 0;
+  opacity: 1;
   position: absolute;
   transform-style: preserve-3d;
-  transform: scale(0.5) translate3d(80px, 80px, -250px);
   transition: transform 1s ease-in-out, opacity 1s ease-in-out;
   width: 250px;
-}
+}
+
+#KPassDialogButton.Hide {
+  transform: scale(0.5) translate3d(80px, 80px, -250px);
+  opacity: 0;
+}
+
+/** @export */
+.Hide {}
diff --git a/components/phone/Phone.jsx b/components/phone/Phone.jsx
@@ -18,8 +18,8 @@ const Evet = dom.div(Css.Evet);
 
 /** @enum {string} */
 const JointCss = css`
-  /** @export  */ .BüyükGöster {}
-  #${KPass.Css.Root}.BüyükGöster {
+  /** @export  */ .ShowInWallet {}
+  #${KPass.Css.Root}.ShowInWallet {
     transform: translate(65px, 120px) scale(0.5);
   }
   #KPassDialog > #${KPass.Css.Root} {
@@ -58,7 +58,7 @@ const Phone = ({ withKPass = true, noshow }) => (
     </AnaEkran >
     <KPassDialog>
       {withKPass && <KPass />}
-      <KPassDialogButton nodisplay>{{ en: "Hide", tr: "Gizle" }}</KPassDialogButton>
+      <KPassDialogButton>{{ en: "Hide", tr: "Gizle" }}</KPassDialogButton>
     </KPassDialog>
     <Kutu noshow>
       <div id={Css.KutuMetni} />
@@ -84,7 +84,7 @@ Phone.showDialog = (prompt, buttonText) => {
   if (buttonText) Evet.innerText = buttonText;
   Kutu.style.opacity = "";
   Kutu.firstElementChild.innerText = prompt;
-  Kutu.classList.add(Css.Göster);
+  Kutu.classList.add(Css.Show);
   AnaEkran.classList.add(Css.Blurred);
   KPassDialog.classList.add(Css.Blurred);
 }
@@ -93,36 +93,36 @@ Phone.showDialog = (prompt, buttonText) => {
  * Closes the dialog box on the phone.
  */
 Phone.closeDialog = () => {
-  Kutu.classList.remove(Css.Göster);
+  Kutu.classList.remove(Css.Show);
   KPassDialog.classList.remove(Css.Blurred);
   AnaEkran.classList.remove(Css.Blurred);
 }
 
 /**
  * Displays the NFT mock in the phone image.
  *
- * @param {boolean} büyükGöster NFT tek başına kutuda gösterilsin mi.
- * @param {boolean} bilgiYüzü NFT'nin bilgi yüzü gösterilsin.
+ * @param {boolean} showInDialog NFT tek başına kutuda gösterilsin mi.
+ * @param {boolean} infoSide NFT'nin bilgi yüzü gösterilsin.
  */
-Phone.nftGöster = (büyükGöster, bilgiYüzü) => {
-  KPass.showSide(bilgiYüzü);
+Phone.showKPass = (showInDialog, infoSide) => {
+  KPass.showSide(infoSide);
   const showSide = () => {
-    KPass.showSide(bilgiYüzü);
-    KPassDialogButton.innerText = bilgiYüzü
+    KPass.showSide(infoSide);
+    KPassDialogButton.innerText = infoSide
       ? dom.i18n({ tr: "Gizle", en: "Encrypt" })
       : dom.i18n({ tr: "Aç", en: "Decrypt" });
   }
   showSide();
-  if (büyükGöster) {
+  if (showInDialog) {
     KPass.Root.style.opacity = "";
     dom.göster(KPassDialogButton);
     KPassDialogButton.onclick ||= () => {
-      bilgiYüzü = !bilgiYüzü;
+      infoSide = !infoSide;
       showSide();
     }
   }
-  KPass.Root.classList.toggle(JointCss.BüyükGöster, !büyükGöster);
-  KPassDialogButton.classList.toggle(Css.Göster, büyükGöster);
+  KPass.Root.classList.toggle(JointCss.ShowInWallet, !showInDialog);
+  KPassDialogButton.classList.toggle(Css.Hide, !showInDialog);
 }
 
 /** @enum {string} */

diff --git a/components/subscribe/Subscribe.jsx b/components/subscribe/Subscribe.jsx
@@ -7,14 +7,14 @@ import dom from "/lib/util/dom";
  * @return {Promise<string>}
  */
 const Subscribe = ({ id }) => {
-  /** @type {?string} */
-  let subscribeText;
   /** @const {!HTMLFormElement} */
   const Root = dom.form(id);
   /** @const {!HTMLInputElement} */
   const input = /** @type {!HTMLInputElement} */(Root.firstElementChild);
   /** @const {!Element} */
   const button = /** @type {!Element} */(input.nextElementSibling);
+  /** @type {?string} */
+  let subscribeText;
 
   /**
    * @param {boolean} success
@@ -29,8 +29,8 @@ const Subscribe = ({ id }) => {
   }
 
   /**
-   * Email bültene kayıt isteğini gönderir ve sonucu görüntülemek için
-   * {@link update()}'yi çağırır.
+   * Sends the email newsletter registration request and calls
+   * {@link update()} to update the UI.
    *
    * @param {Event=} event
    */

diff --git a/components/wallet/bağlantılar.jsx b/components/wallet/bağlantılar.jsx
@@ -5,8 +5,6 @@ import { ChainId, ChainGroup } from "/lib/crosschain/chains";
 import { Provider } from "/lib/crosschain/provider";
 import { Image } from "/lib/kastro/image";
 
-
-
 /** @const {!Object<string, !Provider>} */
 const Bağlantılar = {
   [BağlantıAdı.Core]: CoreBağlantısı,

diff --git a/landing/hero/Gallery.jsx b/landing/hero/Gallery.jsx
@@ -1,6 +1,6 @@
 import Css from "./Gallery.css";
-import SharedCss from "/components/sharedCss/SharedCss.css";
 import Phone from "/components/phone/Phone";
+import SharedCss from "/components/sharedCss/SharedCss.css";
 import dom from "/lib/util/dom";
 
 /** @const {!HTMLDivElement} */
@@ -19,19 +19,15 @@ let SlideTimer = 0;
  * Slides the cards to the correct position based on the `SelectedCard` value.
  * Uses CSS transform to smoothly animate the horizontal movement.
  */
-const slideCards = () => {
-  /** @const {number} */
-  const width = CardSlider.firstElementChild.getBoundingClientRect().width;
-  CardSlider.style.transform = `translate3d(-${SelectedCard * width}px,0,0)`;
-}
+const slideCards = () => dom.slideCard(CardSlider, SelectedCard);
 
 /**
  * @param {number} newCard
  */
 const selectCard = (newCard) => {
   if (SelectedCard > 2 && newCard == 0) newCard = 4;
   const newCardModulo = newCard % 4;
-  Phone.nftGöster(newCardModulo <= 1, !newCardModulo);
+  Phone.showKPass(newCardModulo <= 1, !newCardModulo);
   newCardModulo === 3
     ? Phone.showDialog(dom.i18n({
       en: "The connected app would like to access your contact info section of your KPass.",
@@ -81,11 +77,13 @@ const Gallery = () => {
       startGalleryTimer();
     }
   }
-  Phone.nftGöster(true, true);
   // Cüzdan.adresDeğişince((adres) => Telefon.adresGir(adres));
   CardSlider.appendChild(CardSlider.firstElementChild.cloneNode(true));
   CardSlider.style.width = "500%";
-  dom.run(startGalleryTimer);
+  dom.schedule(() => {
+    startGalleryTimer();
+    Phone.showKPass(true, true);
+  }, 100);
 
   return (
     <div id={Css.Gallery}>