Skip to content

Commit

Permalink
feat: 在线分享第一版-优化页面交互
Browse files Browse the repository at this point in the history
  • Loading branch information
terwer committed Jun 20, 2023
1 parent abfb33a commit c731450
Show file tree
Hide file tree
Showing 6 changed files with 159 additions and 65 deletions.
57 changes: 57 additions & 0 deletions composables/useShareOptionToggle.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*
* Copyright (c) 2023, Terwer . All rights reserved.
* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
*
* This code is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License version 2 only, as
* published by the Free Software Foundation. Terwer designates this
* particular file as subject to the "Classpath" exception as provided
* by Terwer in the LICENSE file that accompanied this code.
*
* This code is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
* version 2 for more details (a copy is included in the LICENSE file that
* accompanied this code).
*
* You should have received a copy of the GNU General Public License version
* 2 along with this work; if not, write to the Free Software Foundation,
* Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
*
* Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
* or visit www.terwer.space if you need additional information or have any
* questions.
*/

import { createAppLogger } from "~/common/appLogger"

const logger = createAppLogger("use-share-option")

export const useShareOptionToggle = (initialValue: boolean) => {
const optionState = ref(initialValue)

const optionToggle = () => {
optionState.value = !optionState.value
sendMessageToParent("updateHeight")
}

return {
optionState,
optionToggle,
}
}

const sendMessageToParent = (type: string) => {
const win = window.self as any
if (!win.parent.siyuan) {
logger.info(`Not in siyuan-note plugin iframe environment, ignore message sending`)
return
}

// 获取当前窗口对象
const iframeWindow = window.self

// 向父窗口发送消息
iframeWindow.parent.postMessage({ type: type }, "*")
logger.info(`Sends a message to the parent window, type => ${type}`)
}
1 change: 1 addition & 0 deletions locales/en_US.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,5 @@ export default {
"share.help": "Learn about sharing",
"share.copy.link": "Copy link",
"share.set.home": "Set home",
"share.share": "Share",
}
1 change: 1 addition & 0 deletions locales/zh_CN.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,5 @@ export default {
"share.help": "了解共享",
"share.copy.link": "复制链接",
"share.set.home": "设为主页",
"share.share": "分享",
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"@element-plus/icons-vue": "^2.1.0",
"@pinia/nuxt": "^0.4.11",
"cheerio": "1.0.0-rc.12",
"copy-to-clipboard": "^3.3.3",
"element-plus": "^2.3.6",
"highlight.js": "^11.8.0",
"pinia": "^2.1.4",
Expand Down
151 changes: 86 additions & 65 deletions pages/share.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
import { useSettingStore } from "~/stores/useSettingStore"
import { useRouteQuery } from "@vueuse/router"
import { createAppLogger } from "~/common/appLogger"
import { useShareOptionToggle } from "~/composables/useShareOptionToggle"
import copy from "copy-to-clipboard"
const logger = createAppLogger("share-page")
const { t } = useI18n()
Expand All @@ -11,6 +13,14 @@ const id = useRouteQuery("id", "")
const origin = useRouteQuery("origin", "")
const isSsr = useRouteQuery("isSsr", "")
const basePath = String(isSsr.value) === "true" ? "/plugins/siyuan-blog" : "/plugins/siyuan-blog/#"
// lifecycles
// onBeforeMount(() => {
// const mainEl = document.querySelector(".el-main") as any
// mainEl.style.margin = "0"
// mainEl.style.padding = "0"
// })
const setting = await getSetting()
const title = `${t("blog.share")} - ${t("blog.share.options")}`
const seoMeta = {
Expand All @@ -21,9 +31,11 @@ useSeoMeta(seoMeta)
// datas
const formData = reactive({
shared: false,
shareEnabled: false,
shareLink: `${origin.value}${basePath}/s/${id.value}`,
optionEnabled: false,
})
const { optionState, optionToggle } = useShareOptionToggle(formData.optionEnabled)
// methods
const goSetting = async () => {
Expand All @@ -34,28 +46,26 @@ const goHelp = async () => {
window.open("https://blog.terwer.space/docs")
}
const sendMessageToParent = (type: string) => {
const win = window.self as any
if (!win.parent.siyuan) {
logger.info(`Not in siyuan-note plugin iframe environment, ignore message sending`)
return
}
// 获取当前窗口对象
const iframeWindow = window.self
// 向父窗口发送消息
iframeWindow.parent.postMessage({ type: type }, "*")
logger.info(`Sends a message to the parent window, type => ${type}`)
}
const toggleOption = () => {
sendMessageToParent("updateHeight")
const copyWebLink = () => {
copy(formData.shareLink)
ElMessage.success(t("main.opt.success"))
}
</script>

<template>
<div id="share">
<div class="share-item share-subject">
<div class="item-left">
{{ t("share.share") }}
<el-icon style="vertical-align: middle">
<el-icon-user-filled />
</el-icon>
{{ t("share.share") }}
</div>
<div class="item-right"></div>
</div>
<el-divider class="share-split" />

<div class="el-page-header__content share-item">
<div class="flex items-center">
<span class="share-icon">
Expand All @@ -64,68 +74,75 @@ const toggleOption = () => {
</el-icon>
</span>
<span class="text-large font-600 mr-3 share-title"> {{ t("share.to.web") }} </span>
<span class="text-sm mr-2 share-description" style="color: var(--el-text-color-regular)">
<span class="text-sm mr-2 share-description">
{{ t("share.to.web.before.tip") }}
</span>
<span class="item-right">
<el-switch v-model="formData.shared" />
<el-switch v-model="formData.shareEnabled" />
</span>
</div>
</div>

<div class="share-item">
<div class="item-left item-copy-link">
<el-input v-model="formData.shareLink" />
<el-divider class="share-split" />

<div v-if="formData.shareEnabled">
<div class="share-item">
<div class="item-left item-copy-link">
<el-input v-model="formData.shareLink" />
</div>
<div class="item-right">
<el-button type="default" @click="copyWebLink">{{ t("share.copy.web.link") }}</el-button>
</div>
</div>
<div class="item-right">
<el-button type="default">{{ t("share.copy.web.link") }}</el-button>
<el-divider class="share-split" />

<div class="share-item" @click="optionToggle">
<div class="item-left item-copy-link">
<el-space direction="vertical">
<el-text>
{{ t("share.show.link.option") }}
<el-icon>
<el-icon-arrow-up v-if="optionState" />
<el-icon-arrow-down v-else />
</el-icon>
</el-text>
</el-space>
</div>
<div class="item-right"></div>
</div>
</div>

<div class="share-item" @click="toggleOption">
<div class="item-left item-copy-link">
<el-space direction="vertical">
<el-text>
{{ t("share.show.link.option") }}
<el-icon>
<el-icon-arrow-down />
</el-icon>
</el-text>
</el-space>
<div v-if="optionState" class="share-item">
<div class="expires-link expires-link-label">
{{ t("share.other.option.link.expires") }}
</div>
<div class="expires-link expires-link-input">
<el-input :placeholder="t('share.link.expires.time.placeholder')" />
</div>
<div class="item-right">
<el-switch />
</div>
</div>
<div class="item-right"></div>
</div>
<el-divider class="share-split" />

<div class="share-item">
<div class="expires-link expires-link-label">
{{ t("share.other.option.link.expires") }}
</div>
<div class="expires-link expires-link-input">
<el-input :placeholder="t('share.link.expires.time.placeholder')" />
</div>
<div class="item-right">
<el-switch />
<div class="share-item">
<div class="item-left">
<el-icon>
<el-icon-home-filled />
</el-icon>
{{ t("share.set.home") }}
</div>
<div class="item-right">
<el-switch />
</div>
</div>
</div>
<el-divider class="share-split" />

<div class="share-item">
<div class="item-left">
<el-icon>
<el-icon-home-filled />
</el-icon>
{{ t("share.set.home") }}
</div>
<div class="item-right">
<el-switch />
<!--
<div class="share-item text-center other-setting">
<div class="item-middle" @click="goSetting">{{ t("share.other.option") }}</div>
</div>
-->
</div>

<!--
<div class="share-item text-center other-setting">
<div class="item-middle" @click="goSetting">{{ t("share.other.option") }}</div>
</div>
-->

<div class="share-item">
<div class="item-left">
<el-space direction="vertical">
Expand All @@ -149,6 +166,8 @@ const toggleOption = () => {
<style lang="stylus" scoped>
.text-center
text-align center
.share-split
margin 2px 0
#share
.share-item
Expand Down Expand Up @@ -187,5 +206,7 @@ const toggleOption = () => {
.other-setting
border-radius 4px
background-color var(--b3-list-hover)
//background var(--b3-theme-background)
.share-subject
font-size 14px
font-weight 600
</style>
13 changes: 13 additions & 0 deletions pnpm-lock.yaml

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

0 comments on commit c731450

Please sign in to comment.