feat: mobile swip

slidevjs · Apr 29, 2021 · 90c962a · 90c962a
1 parent 91ce84c
commit 90c962a
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 37 deletions.
diff --git a/packages/client/internals/Play.vue b/packages/client/internals/Play.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { SwipeDirection, useSwipe } from '@vueuse/core'
+import { ref } from 'vue'
 import { isPrintMode, showEditor, windowSize } from '../state'
-import { next, prev, currentRoute, tab, tabElements } from '../logic/nav'
+import { next, prev, currentRoute, tab, tabElements, prevSlide, nextSlide } from '../logic/nav'
 import Controls from './Controls.vue'
 import SlideContainer from './SlideContainer.vue'
 import Editor from './Editor.vue'
 import NavControls from './NavControls.vue'
 
+const root = ref<HTMLDivElement>()
 function onClick(e: MouseEvent) {
   if ((e.target as HTMLElement)?.id === 'slide-container') {
     // click right to next, left to previouse
@@ -15,10 +18,29 @@ function onClick(e: MouseEvent) {
       prev()
   }
 }
+
+const { direction, lengthX, lengthY } = useSwipe(root, {
+  onSwipeEnd() {
+    const x = Math.abs(lengthX.value)
+    const y = Math.abs(lengthY.value)
+    if (x / window.innerWidth > 0.3 || x > 200) {
+      if (direction.value === SwipeDirection.LEFT)
+        next()
+      else
+        prev()
+    }
+    else if (y / window.innerHeight > 0.4 || y > 200) {
+      if (direction.value === SwipeDirection.DOWN)
+        prevSlide()
+      else
+        nextSlide()
+    }
+  },
+})
 </script>
 
 <template>
-  <div id="page-root" class="grid grid-cols-[1fr,max-content]">
+  <div id="page-root" ref="root" class="grid grid-cols-[1fr,max-content]">
     <SlideContainer
       v-model:tab="tab"
       v-model:tab-elements="tabElements"
@@ -30,7 +52,7 @@ function onClick(e: MouseEvent) {
     >
       <template #controls>
         <div class="absolute bottom-0 left-0 p-2 transition duration-300 opacity-0 hover:opacity-100">
-          <NavControls class="rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)"/>
+          <NavControls class="rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)" />
         </div>
       </template>
     </SlideContainer>

diff --git a/packages/client/setup/main.ts b/packages/client/setup/main.ts
@@ -1,5 +1,13 @@
 /* __imports__ */
 
 export default function setupMain() {
+  function setMaxHeight() {
+    // disable the mobile navbar scroll
+    // see https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+    document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
+  }
+  setMaxHeight()
+  window.addEventListener('resize', setMaxHeight)
+
   /* __injections__ */
 }
diff --git a/packages/client/style/index.css b/packages/client/style/index.css
@@ -5,7 +5,8 @@ body,
   padding: 0;
   margin: 0;
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
   @apply bg-main;
 }

diff --git a/packages/create-theme/template/styles/main.css b/packages/create-theme/template/styles/main.css
@@ -1,14 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700');
-
-html,
-body,
-#app {
-  height: 100vh;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-}
-
 html {
   @apply bg-main;
 }
diff --git a/packages/theme-default/styles/main.css b/packages/theme-default/styles/main.css
@@ -1,14 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700');
-
-html,
-body,
-#app {
-  height: 100vh;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-}
-
 html {
   @apply bg-main;
 }
diff --git a/packages/theme-seriph/styles/main.css b/packages/theme-seriph/styles/main.css
@@ -1,14 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700');
-
-html,
-body,
-#app {
-  height: 100vh;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-}
-
 html {
   @apply bg-main;
 }