feat(galleryItem): image orientation

src/components/rmrk/Gallery/GalleryItem.vue

@@ -18,7 +18,7 @@
           <div class="image-wrapper">
               <button id="theatre-view" @click="toggleView" v-if="!isLoading && imageVisible">{{ viewMode === 'default' ? $t('theatre') : $t('default') }} {{$t('view')}}</button>
               <div class="column" :class="{ 'is-12 is-theatre': viewMode === 'theatre', 'is-6 is-offset-3': viewMode === 'default'}">
-                <div class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
+                <div v-orientation="viewMode === 'default' && !isFullScreenView" class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
                   <b-image
                     v-if="!isLoading && imageVisible && !meta.animation_url"
                     :src="meta.image || '/placeholder.svg'"
@@ -136,6 +136,7 @@ import { get, set } from 'idb-keyval'
 import { MediaType } from '../types'
 import axios from 'axios'
 import { exist } from './Search/exist'
+import Orientation from '@/directives/DeviceOrientation'
 
 @Component<GalleryItem>({
   metaInfo() {
@@ -170,7 +171,10 @@ import { exist } from './Search/exist'
     // PackSaver: () => import('../Pack/PackSaver.vue'),
     IndexerGuard: () => import('@/components/shared/wrapper/IndexerGuard.vue'),
     VueMarkdown: () => import('vue-markdown-render')
-  }
+  },
+  directives: {
+    orientation: Orientation
+  },
 })
 export default class GalleryItem extends Vue {
   private id = '';

src/directives/DeviceOrientation.ts

@@ -0,0 +1,63 @@
+const onMove = (event: MouseEvent, el: HTMLElement) => {
+  const mouseX = event.clientX
+  const mouseY = event.clientY
+  const halfWidth = window.innerWidth / 2
+  const halfHeight = window.innerHeight / 2
+  const xdeg = (mouseX - halfWidth) / halfWidth
+  const ydeg = (mouseY - halfHeight) / halfHeight
+  el.style.transform = `rotateX(${ydeg * 10}deg) rotateY(${xdeg * 10}deg)`
+}
+
+const onMoveMobile = (event: DeviceMotionEvent, el: HTMLElement) => {
+  const accelerationX = event.accelerationIncludingGravity!.x
+  const accelerationY = event.accelerationIncludingGravity!.y
+  const xdeg = (accelerationX as number) / 10
+  const ydeg = (accelerationY as number) / 10
+  el.style.transform = `rotateX(${ydeg * 20}deg) rotateY(${xdeg * 20}deg)`
+  el.style.removeProperty('transition')
+}
+
+const registerEvents = (el: any) => {
+  window.addEventListener('mousemove', el.onMove)
+  window.addEventListener('mouseleave', el.onLeave)
+  window.addEventListener('devicemotion', el.onMoveMobile)
+}
+
+const unRegisterEvents = (el: any) => {
+  window.removeEventListener('mousemove', el.onMove)
+  window.removeEventListener('mouseleave', el.onLeave)
+  window.removeEventListener('devicemotion', el.onMoveMobile)
+  el.parentElement!.classList.remove('orientation')
+}
+
+export default {
+  bind: (el: any, binding: any) => {
+    el.onMove = (event: MouseEvent) => {
+      onMove(event, el)
+    }
+
+    el.onMoveMobile = (event: DeviceMotionEvent) => {
+      onMoveMobile(event, el)
+    }
+
+    el.onLeave = () => {
+      unRegisterEvents(el)
+      // el.style.removeProperty('transform')
+      // el.style.transition = 'transform 1s'
+    }
+    if (binding.value) {
+      registerEvents(el)
+    }
+  },
+  update: (el: HTMLElement, binding: any) => {
+    el.parentElement!.classList.add('orientation')
+    if (!binding.value) {
+      unRegisterEvents(el)
+    } else {
+      registerEvents(el)
+    }
+  },
+  unbind: (el: HTMLElement) => {
+    unRegisterEvents(el)
+  }
+}

src/styles/global.scss

@@ -119,4 +119,8 @@ body {
         }
     }
 
+    .orientation {
+        perspective: 30em;
+    }
+
 }