Обновлено: Галерея #81

OlegShchavelev · Feb 24, 2024 · 5f284ca · 5f284ca
1 parent 542e767
commit 5f284ca
Show file tree

Hide file tree

Showing 6 changed files with 490 additions and 45 deletions.
diff --git a/.vitepress/theme/components/AGWAppsMetaWidget.vue b/.vitepress/theme/components/AGWAppsMetaWidget.vue
@@ -125,7 +125,7 @@ import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
     padding-top: 24px;
 }
 
-.figure> :deep(.VPImage) {
+.figure > :deep(.VPImage) {
     filter: grayscale(1);
     transition: filter 0.25s;
 }

diff --git a/.vitepress/theme/components/AGWGallery.vue b/.vitepress/theme/components/AGWGallery.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { type Ref, computed } from 'vue'
-import { DefaultTheme, useData } from 'vitepress'
+import { type Ref, computed, onMounted } from 'vue'
+import { DefaultTheme, useData, useRoute } from 'vitepress'
 
 import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue';
 
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Pagination } from 'swiper/modules';
+import setViewer from 'vitepress-plugin-image-viewer/lib/viewer';
 
 const { theme, frontmatter } = useData();
 const galleries = frontmatter.value.gallery ?? theme.value.gallery ?? [];
 
-
 const onSwiper = (swiper: any) => console.log(swiper);
 const onSlideChange = () => console.log('slide change');
 
@@ -23,19 +23,17 @@ import 'swiper/css/pagination';
 <template>
     <div class="galleries">
         <h3 v-html="'Галерея ' + frontmatter.title"></h3>
-        <swiper :slides-per-view="1" :breakpoints="{ 767: { slidesPerView: 2 }, 1024: { slidesPerView: 4 } }"
-            :space-between="20"
-            @swiper="onSwiper" @slideChange="onSlideChange">
+        <swiper :slides-per-view="1.1" :breakpoints="{ 767: { slidesPerView: 2 }, 1024: { slidesPerView: 4 } }"
+            :space-between="20" @swiper="onSwiper" @slideChange="onSlideChange">
             <swiper-slide v-for="file in galleries.items" :key="galleries.items.src" class="item">
                 <figure class="figure">
-                    <VPImage :image="file.src" :alt="frontmatter.title" />
+                    <VPImage :image="file.src" :alt="frontmatter.title" class="gallery"/>
                 </figure>
             </swiper-slide>
         </swiper>
     </div>
 </template>
 
-
 <style scoped>
 .swiper {
     margin-top: 24px;
@@ -61,13 +59,14 @@ import 'swiper/css/pagination';
     object-fit: cover;
 }
 
-.figure > :deep(.VPImage) {
+.figure> :deep(.VPImage) {
     border-radius: 8px;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     object-fit: cover;
+    cursor: zoom-in;
 }
 
 </style> 
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
@@ -211,36 +211,4 @@ figure>figcaption {
 
 :root {
   --swiper-theme-color: var(--vp-c-brand-1);
-}
-
-/**
- * ViewerJS
- * -------------------------------------------------------------------------- */
-.viewer-canvas {
-  backdrop-filter: blur(20px);
-}
-
-html:not(.dark) .viewer-canvas {
-  background: rgba(0, 0, 0, .25);
-  backdrop-filter: blur(15px);
-}
-
-.viewer-toolbar {
-  text-align: right;
-}
-
-.viewer-toolbar>ul>li {
-  padding: 8px;
-  border-radius: 0px !important;
-  height: unset !important;
-  width: unset !important;
-}
-
-.viewer-button {
-  border-radius: 0px !important;
-}
-
-.viewer-button:before {
-  bottom: 10px !important;
-  left: 12px !important;
 }
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -21,7 +21,7 @@ import { yandexMetrika } from '@hywax/vitepress-yandex-metrika'
 
 import './style.css'
 import './custom.css'
-import 'viewerjs/dist/viewer.min.css';
+import './viewerjs/dist/viewer.css'
 import '@nolebase/vitepress-plugin-enhanced-readabilities/dist/style.css'
 import "vitepress-markdown-timeline/dist/theme/index.css";
 
@@ -56,6 +56,27 @@ export default {
     // Get route
     const route = useRoute();
     // Using
-    imageViewer(route);
+    imageViewer(route, '.vp-doc img:not(.gallery)', {
+      title: true,
+      toolbar: {
+        zoomIn: 4,
+        zoomOut: 4,
+        oneToOne: 4,
+        reset: 4,
+        prev: false,
+        next: false
+      }
+    });
+    imageViewer(route, '.galleries', {
+      title: true,
+      toolbar: {
+        zoomIn: 4,
+        zoomOut: 4,
+        oneToOne: true,
+        reset: true,
+        prev: true,
+        next: true
+      }
+    });
   }
 } satisfies Theme