@ozdao/prometheus-framework 0.2.118 → 0.2.120

package/src/modules/gallery/components/sections/GalleryWithCategories.vue

@@ -1,176 +0,0 @@
-<template>
-  <div>
-    <div class=" pd-medium flex-v-center gap-big flex-nowrap flex pd-t-thin pd-b-thin o-scroll">
-      <a 
-        v-for="category in categories" 
-        :key="category" 
-        @click="filter(category)" 
-        class="h3 uppercase"
-        :class="{ 
-          't-transp': selectedCategory !== category,
-          'pd-thin bg-main radius-small': selectedCategory === category  
-        }"
-      >
-        {{ $t('gallery.categories.' + category) }}
-      </a>
-
-      <button  v-if="isEditablePath" @click="openModal(null)" class="t-black bg-second button-small button">+</button>
-    </div>
-
-    <div ref="grid" class="pd-medium cols-4 gap-thin">
-      <div 
-        v-for="(item, index) in filteredGallery" 
-        :key="item.id" 
-        :data-id="item.id"
-      >
-
-        <transition name="scaleIn" mode="in-out">
-          <img 
-            v-if="!isEditablePath && grid" 
-            :src="'https://thecommunephuket.com/photos/' + item.cover" 
-            class="w-100 h-100 o-hidden radius-big object-fit-cover" 
-            @click="openModal(item.image)"
-          />
-        </transition>
-      </div>
-
-      <!-- Loader -->
-      <!-- <div v-show="loading" class="loader">Loading...</div>   -->
-      <!-- Sentinel -->
-      <div ref="sentinel" class="sentinel"/>
-
-      <div v-show="selectedImage.image !== false && modal === 'modal'" class="modal pd-thin">
-        <div class="modal-content radius-big">
-          <div class="">
-            <span class="close" @click="closeModal">&times;</span>
-            <img :src="'https://thecommunephuket.com/photos/' + selectedImage.image">
-          </div>
-        </div>
-      </div>
-
-
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, reactive, computed } from 'vue'
-import { useRoute } from 'vue-router'
-
-import Field         from '@pf/src/components/Field/Field.vue'
-import Button        from '@pf/src/components/Button/Button.vue'
-import Select        from '@pf/src/components/Select/Select.vue'
-import Upload        from '@pf/src/components/Upload/Upload.vue'
-
-import gallery from '@pf/src/modules/gallery/store/gallery';
-
-
-const route = useRoute()
-
-const isEditablePath = false
-
-// Gallery Grid
-const grid = ref(null)
-
-const categories = ['all', 'place', 'drinks', 'people', 'events']
-
-// Pagination
-let page = 1
-const limit = 10
-
-let sentinel = ref(null)
-let loading = ref(false)
-
-const filteredGallery = computed(() => {
-  if (selectedCategory.value === 'all') {
-    return state.gallery
-  } else {
-    return state.gallery.filter(item => item.categories.includes(selectedCategory.value))
-  }
-})
-
-const loadMore = async () => {
-  loading.value = true
-  await actions.fetchGallery(page, limit)
-  loading.value = false
-}
-
-// Popup
-const modal = ref(null)
-// Popup
-const selectedImage = ref({
-  categories: '',
-  size: '',
-  image: false
-})
-
-const previewImage = ref(null)
-
-const openModal = (image) => {
-  if(isEditablePath.value) {
-    // Если мы находимся на пути /account/gallery, открываем редактирование
-    openEditModal(image)
-  } else {
-    // В противном случае открываем просмотр
-    modal.value = "modal"
-    selectedImage.value.image = image
-    disableScroll()
-  }
-}
-
-const openEditModal = (image) => {
-  modal.value = "edit-modal"
-  selectedImage.value = image || {
-    categories: '',
-    size: '',
-    image: null
-  }
-  disableScroll()
-}
-
-const closeModal = () => {
-  selectedImage.value = {
-    categories: '',
-    size: '',
-    image: false
-  }
-   previewImage.value = null;
-  enableScroll()
-}
-
-const disableScroll = () => {
-  document.body.style.overflow = 'hidden'
-  document.documentElement.style.overflow = 'hidden'
-}
-
-const enableScroll = () => {
-  document.body.style.overflow = ''
-  document.documentElement.style.overflow = ''
-}
-
-
-let selectedCategory = ref('all')
-
-const filter = (category) => {
-  selectedCategory.value = category
-}
-
-onMounted(async () => {
-  await actions.fetchGallery(page, limit)
-
-  if (typeof window !== 'undefined') {
-    const observer = new IntersectionObserver(entries => {
-      if (entries.some(entry => entry.isIntersecting)) {
-        page += 1
-        loadMore()
-      }
-    })
-
-    observer.observe(sentinel.value)
-  }
-})
-
-</script>
-
-<style scoped>
-</style>