121 lines
3.3 KiB
Vue
121 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
const showSnsList = ref(false)
|
|
|
|
const { tm } = useI18n()
|
|
const gameDataStore = useGameDataStore()
|
|
const modalStore = useModalStore()
|
|
|
|
const { gameData } = storeToRefs(gameDataStore)
|
|
const { handleOpenToast } = modalStore
|
|
|
|
const snsBackgroundColor = computed(() => {
|
|
const colorData = gameData.value?.comm_sns_bg_color_json?.display
|
|
const colorCode = getColorCode({
|
|
colorName: colorData?.color_name,
|
|
colorCode: colorData?.color_code,
|
|
})
|
|
return colorCode
|
|
})
|
|
const snsList = computed(() => {
|
|
return gameData.value?.sns_json
|
|
})
|
|
|
|
const handleMouseEnter = () => {
|
|
showSnsList.value = true
|
|
}
|
|
|
|
const handleForceClose = () => {
|
|
showSnsList.value = false
|
|
}
|
|
|
|
const handleCopy = async () => {
|
|
if (!import.meta.client) return
|
|
|
|
try {
|
|
const url = window.location.href
|
|
await navigator.clipboard.writeText(url)
|
|
handleOpenToast(tm('Alert_Copy_Complete'))
|
|
} catch (error) {
|
|
console.error('[handleCopy] Error:', error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="Object.keys(snsList).length > 0" class="sns-container">
|
|
<AtomsButtonCircle
|
|
class="btn-sns"
|
|
sr-only="sns"
|
|
:style="{ backgroundColor: snsBackgroundColor }"
|
|
@click="handleMouseEnter"
|
|
>
|
|
<AtomsIconsShareLine class="icon-share" />
|
|
</AtomsButtonCircle>
|
|
<transition name="fade">
|
|
<div
|
|
v-if="showSnsList"
|
|
class="sns-list"
|
|
:style="{ backgroundColor: snsBackgroundColor }"
|
|
>
|
|
<template v-for="(item, key) in snsList" :key="key">
|
|
<a
|
|
v-if="item?.url"
|
|
:href="item?.url"
|
|
target="_blank"
|
|
class="sns-item"
|
|
:style="{
|
|
backgroundImage: `url(${getImageHost(`/images/common/ic-v2-logo-${key}-fill.png`, { imageType: 'common' })})`,
|
|
}"
|
|
>
|
|
<span class="sr-only">{{ key }}</span>
|
|
</a>
|
|
</template>
|
|
<button
|
|
type="button"
|
|
class="sns-item"
|
|
:style="{
|
|
backgroundImage: `url(${getImageHost('/images/common/ic-v2-community-link-line.png', { imageType: 'common' })})`,
|
|
}"
|
|
@click="handleCopy"
|
|
>
|
|
<span class="sr-only">copy</span>
|
|
</button>
|
|
<div class="close-container">
|
|
<button
|
|
type="button"
|
|
class="opacity-50 z-[1] hover:opacity-100"
|
|
@click="handleForceClose"
|
|
>
|
|
<span class="sr-only">close</span>
|
|
<AtomsIconsCloseLine size="24" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-sns:hover .icon-share {
|
|
@apply fill-white;
|
|
}
|
|
|
|
.sns-list {
|
|
@apply absolute bottom-0 right-0 flex items-center justify-center gap-4 rounded-full
|
|
h-[40px] md:h-[48px] pl-4 pr-3
|
|
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full;
|
|
}
|
|
.sns-item {
|
|
@apply w-[24px] h-[24px] bg-center bg-cover bg-no-repeat opacity-50 z-[1]
|
|
hover:opacity-100;
|
|
}
|
|
.sns-item:hover {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
.close-container {
|
|
@apply relative flex pl-4
|
|
before:content-[''] before:absolute before:top-1/2 before:left-0 before:w-[1px] before:h-[20px] before:bg-[rgba(255,255,255,0.1)] before:translate-y-[-50%];
|
|
}
|
|
</style>
|