Skip to content

Commit

Permalink
Merge pull request #65 from Disfactory/feature/lightbox
Browse files Browse the repository at this point in the history 
Image lightbox
  • Loading branch information
@Yukaii
Yukaii authored Jan 6, 2021
2 parents 83e2810 + b6429a9 commit 6f5ea8a
Show file tree
Hide file tree
Showing 5 changed files with 144 additions and 95 deletions.
14 changes: 14 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-carousel": "^0.18.0",
"vue-cool-lightbox": "^2.7.0",
"vue-gtag": "^1.1.1",
"vuetify": "^2.3.17"
},
Expand Down
218 changes: 123 additions & 95 deletions src/components/FactoryDetailPage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,124 @@
<template>
<v-card elevation="3" class="factory-container" :class="{ full, desktop: $vuetify.breakpoint.mdAndUp, empty: !appState.factoryData }" v-show="!appState.formPageOpen">
<div class="factory-detail-scroller" ref="factoryDetailScrollerRef" v-show="appState.factoryData">
<v-app-bar fixed color="white" class="d-block d-md-none" v-if="scrollOff">
<v-spacer></v-spacer>
<v-toolbar-title>
<v-icon style="margin-bottom: 5px;" :color="statusColor">mdi-map-marker</v-icon>{{ factoryStatusText }}
</v-toolbar-title>
<v-spacer></v-spacer>
<div class="btn-container">
<v-icon class="float-right" @click="collapseFactoryDetail">mdi-close</v-icon>
<v-icon class="float-right mr-4" @click="copyToClipboard">mdi-share-variant</v-icon>
</div>
<div class="copied-message flex justify-center align-items-center" v-if="showCopiedMessage">
<v-icon color="white" class="mr-1">mdi-content-copy</v-icon>
已複製連結
</div>
</v-app-bar>

<v-card-text>
<div class="d-flex justify-between align-items-center mb-3">
<span class="factory-status-title">工廠狀態</span>
<div>
<v-card elevation="3" class="factory-container" :class="{ full, desktop: $vuetify.breakpoint.mdAndUp, empty: !appState.factoryData }" v-show="!appState.formPageOpen">
<div class="factory-detail-scroller" ref="factoryDetailScrollerRef" v-show="appState.factoryData">
<v-app-bar fixed color="white" class="d-block d-md-none" v-if="scrollOff">
<v-spacer></v-spacer>
<v-toolbar-title>
<v-icon style="margin-bottom: 5px;" :color="statusColor">mdi-map-marker</v-icon>{{ factoryStatusText }}
</v-toolbar-title>
<v-spacer></v-spacer>
<div class="btn-container">
<v-icon class="float-right" @click="collapseFactoryDetail">mdi-close</v-icon>
<v-icon class="float-right mr-4" @click="copyToClipboard">mdi-share-variant</v-icon>
</div>
<div class="copied-message flex justify-center align-items-center" v-if="showCopiedMessage">
<v-icon color="white" class="mr-1">mdi-content-copy</v-icon>
已複製連結
</div>
</v-app-bar>

<v-btn @click="copyToClipboard" rounded v-if="$vuetify.breakpoint.mdAndUp" :outlined="showCopiedMessage" :color="showCopiedMessage ? null : 'white'">
<v-icon class="mr-1">mdi-share-variant</v-icon>
{{ showCopiedMessage ? '已複製連結' : '分享工廠' }}
</v-btn>
<v-card-text>
<div class="d-flex justify-between align-items-center mb-3">
<span class="factory-status-title">工廠狀態</span>

<span v-else>
<v-icon class="mr-4" @click="copyToClipboard">mdi-share-variant</v-icon>
<v-icon @click="collapseFactoryDetail">mdi-close</v-icon>
</span>
</div>
<v-btn @click="copyToClipboard" rounded v-if="$vuetify.breakpoint.mdAndUp" :outlined="showCopiedMessage" :color="showCopiedMessage ? null : 'white'">
<v-icon class="mr-1">mdi-share-variant</v-icon>
{{ showCopiedMessage ? '已複製連結' : '分享工廠' }}
</v-btn>

<p class="factory-status secondary--text mb-2" style="clear: both">
<v-icon style="margin-bottom: 5px;" :color="statusColor">mdi-map-marker</v-icon>{{ factoryStatusText }}
</p>
<span v-else>
<v-icon class="mr-4" @click="copyToClipboard">mdi-share-variant</v-icon>
<v-icon @click="collapseFactoryDetail">mdi-close</v-icon>
</span>
</div>

<p class="caption mb-0" style="color: #A1A1A1;">
工廠編號 {{ factoryId }} <br>
最後更新 2020/4/12
</p>
<p class="factory-status secondary--text mb-2" style="clear: both">
<v-icon style="margin-bottom: 5px;" :color="statusColor">mdi-map-marker</v-icon>{{ factoryStatusText }}
</p>

<div class="copied-message flex justify-center align-items-center" v-if="showCopiedMessage && !scrollOff">
<v-icon color="white" class="mr-1">mdi-content-copy</v-icon>
已複製連結
</div>
</v-card-text>
<p class="caption mb-0" style="color: #A1A1A1;">
工廠編號 {{ factoryId }} <br>
最後更新 2020/4/12
</p>

<v-slide-group :show-arrows="images > 0 ? 'desktop' : false" ref="slideGroup">
<v-slide-item>
<div class='update-image-button d-flex flex-column justify-center align-items-center' @click="pageTransition.startUpdateFactoryImages">
<v-icon color="white" class='mb-1'>mdi-camera-plus</v-icon>
補充照片
<div class="copied-message flex justify-center align-items-center" v-if="showCopiedMessage && !scrollOff">
<v-icon color="white" class="mr-1">mdi-content-copy</v-icon>
已複製連結
</div>
</v-card-text>

<v-slide-group :show-arrows="images > 0 ? 'desktop' : false" ref="slideGroup">
<v-slide-item>
<div class='update-image-button d-flex flex-column justify-center align-items-center' @click="pageTransition.startUpdateFactoryImages">
<v-icon color="white" class='mb-1'>mdi-camera-plus</v-icon>
補充照片
</div>
</v-slide-item>
<v-slide-item v-for="(image, index) in images" class="mr-4" :key="image.id" :class="{ 'ml-4': index === 0 }" @click.native="setLightboxIndex(index)">
<img :src="image.url" class="factory-slide-image" />
</v-slide-item>
</v-slide-group>

<div class="mt-4 mx-3 mb-2">
<h3 class="mb-1">地段 / 地址</h3>
<p class="mb-5" style="line-height: 1.3;">{{ factoryAddressAndLandcode }}</p>

<div v-if="full || $vuetify.breakpoint.mdAndUp" class="mb-5">
<h3 class="mb-1">經緯度</h3>
<p class="mb-1">{{ longitude }}, {{ latitude }}</p>
<p class="text-caption">以上經緯度版本為 WGS84</p>
</div>
</v-slide-item>
<v-slide-item v-for="(image, index) in images" class="mr-4" :key="image.id" :class="{ 'ml-4': index === 0 }">
<img :src="image.url" class="factory-slide-image" />
</v-slide-item>
</v-slide-group>

<div class="mt-4 mx-3 mb-2">
<h3 class="mb-1">地段 / 地址</h3>
<p class="mb-5" style="line-height: 1.3;">{{ factoryAddressAndLandcode }}</p>

<div v-if="full || $vuetify.breakpoint.mdAndUp" class="mb-5">
<h3 class="mb-1">經緯度</h3>
<p class="mb-1">{{ longitude }}, {{ latitude }}</p>
<p class="text-caption">以上經緯度版本為 WGS84</p>
</div>

<hr v-if="full || $vuetify.breakpoint.mdAndUp">
<v-btn text depressed elevation="0" :ripple="false" color="#697F01" class="m-0 mb-0 px-0 v-btn-plain" @click="expandFactoryDetail" v-if="!full && !$vuetify.breakpoint.mdAndUp">
顯示更多資訊
&nbsp;
<v-icon>mdi-menu-down</v-icon>
</v-btn>
<hr v-if="full || $vuetify.breakpoint.mdAndUp">
<v-btn text depressed elevation="0" :ripple="false" color="#697F01" class="m-0 mb-0 px-0 v-btn-plain" @click="expandFactoryDetail" v-if="!full && !$vuetify.breakpoint.mdAndUp">
顯示更多資訊
&nbsp;
<v-icon>mdi-menu-down</v-icon>
</v-btn>

<div v-if="full || $vuetify.breakpoint.mdAndUp" class="mt-4">
<h2 class="mb-5">其他工廠資訊</h2>
<div v-if="full || $vuetify.breakpoint.mdAndUp" class="mt-4">
<h2 class="mb-5">其他工廠資訊</h2>

<h3 class="mb-1">工廠外部文字</h3>
<p class="mb-3" v-if="factoryName">{{ factoryName }}</p>
<v-btn class="d-block mb-5" outlined @click="startUpdateFactoryCommentFor('name')">
{{ factoryName ? '更改外部文字' : '回報外部文字' }}
</v-btn>
<h3 class="mb-1">工廠外部文字</h3>
<p class="mb-3" v-if="factoryName">{{ factoryName }}</p>
<v-btn class="d-block mb-5" outlined @click="startUpdateFactoryCommentFor('name')">
{{ factoryName ? '更改外部文字' : '回報外部文字' }}
</v-btn>

<h3 class="mb-1">工廠類型</h3>
<p class="mb-3" v-if="factoryType">{{ factoryType }}</p>
<v-btn class="d-block mb-5" outlined @click="startUpdateFactoryCommentFor('factory_type')">
{{ factoryType ? '更改工廠類型' : '回報工廠類型' }}
</v-btn>
<h3 class="mb-1">工廠類型</h3>
<p class="mb-3" v-if="factoryType">{{ factoryType }}</p>
<v-btn class="d-block mb-5" outlined @click="startUpdateFactoryCommentFor('factory_type')">
{{ factoryType ? '更改工廠類型' : '回報工廠類型' }}
</v-btn>

<h3 class="mb-1">工廠描述</h3>
<v-btn outlined @click="startUpdateFactoryCommentFor('others')" class="mb-2">補充工廠描述</v-btn>
<h3 class="mb-1">工廠描述</h3>
<v-btn outlined @click="startUpdateFactoryCommentFor('others')" class="mb-2">補充工廠描述</v-btn>

<div v-for="(desc, index) in pastDescriptions" :key="index" class="mt-2" style="font-size: 14px">
<p class="color-gray-light mb-1">{{ desc.date }}</p>
<p style="line-height: 24px;">{{ desc.others }}</p>
<div v-for="(desc, index) in pastDescriptions" :key="index" class="mt-2" style="font-size: 14px">
<p class="color-gray-light mb-1">{{ desc.date }}</p>
<p style="line-height: 24px;">{{ desc.others }}</p>
</div>
</div>
</div>
</div>
</div>

<div class="factory-detail-scroller px-4 py-5" v-show="!appState.factoryData">
<h1 class="secondary--text mb-5">請選擇一個地標</h1>
<p>請選擇一間工廠查看工廠詳細資訊。</p>
</div>
<div class="factory-detail-scroller px-4 py-5" v-show="!appState.factoryData">
<h1 class="secondary--text mb-5">請選擇一個地標</h1>
<p>請選擇一間工廠查看工廠詳細資訊。</p>
</div>

<div class="sidebar-collapse-button d-flex align-items-center justify-center" v-show="$vuetify.breakpoint.mdAndUp" @click="toggleFactoryDetail">
<v-icon color="primary">mdi-menu-left</v-icon>
</div>
</v-card>
<div class="sidebar-collapse-button d-flex align-items-center justify-center" v-show="$vuetify.breakpoint.mdAndUp" @click="toggleFactoryDetail">
<v-icon color="primary">mdi-menu-left</v-icon>
</div>
</v-card>

<CoolLightBox
:items="lightboxItems"
:index="lightboxIndex"
@close="() => setLightboxIndex(null)">
</CoolLightBox>
</div>
</template>

<script lang="ts">
Expand All @@ -137,6 +145,22 @@ export default createComponent({
}
})
const lightboxItems = computed(() => {
if (appState.factoryData) {
return appState.factoryData.images.map(image => ({
title: '',
description: '',
src: image.url
}))
} else {
return []
}
})
const lightboxIndex = ref<number|null>(null)
const setLightboxIndex = (i: number) => {
lightboxIndex.value = i
}
const factoryStatus = computed(() => {
if (appState.factoryData) {
return getFactoryStatus(appState.factoryData)
Expand Down Expand Up @@ -292,7 +316,10 @@ export default createComponent({
showCopiedMessage,
copyToClipboard,
slideGroup,
startUpdateFactoryCommentFor
startUpdateFactoryCommentFor,
lightboxItems,
lightboxIndex,
setLightboxIndex
}
}
})
Expand Down Expand Up @@ -418,6 +445,7 @@ export default createComponent({
height: 68px;
overflow: hidden;
object-fit: cover;
cursor: pointer;
}
.copied-message {
Expand Down
5 changes: 5 additions & 0 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import Vue from 'vue'
import App from './App.vue'
import VueCompositionApi from '@vue/composition-api'
import CoolLightBox from 'vue-cool-lightbox'

import './registerServiceWorker'
import VueGtag from 'vue-gtag'
import vuetify from './plugins/vuetify'

import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

Vue.config.productionTip = false
Vue.use(VueCompositionApi)
Vue.use(CoolLightBox)

Vue.use(VueGtag, {
config: { id: 'UA-154739393-1' },
Expand Down
1 change: 1 addition & 0 deletions src/vue-cool-lightbox.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
declare module 'vue-cool-lightbox'

0 comments on commit 6f5ea8a

Please sign in to comment.