diff --git a/frontend/index.pug b/frontend/index.pug index 8565d75..68f83f5 100755 --- a/frontend/index.pug +++ b/frontend/index.pug @@ -52,6 +52,7 @@ html(lang='en') span.viewcounter.noselect#viewcounter-count(style='visibility: hidden; display: none') .bottom-button-wrapper + button#share-button.btn(aria-label='Share' style='visibility: hidden') button#hide-button.btn(aria-label='Hide') .scrollbar-container diff --git a/frontend/src/icons.ts b/frontend/src/icons.ts index 92c0a2d..c035d1b 100644 --- a/frontend/src/icons.ts +++ b/frontend/src/icons.ts @@ -10,6 +10,7 @@ import { EyeInvisibleOutlined, FireOutlined, FileMarkdownOutlined, + ShareAltOutlined, } from "@ant-design/icons-svg" import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers" import tippy from "tippy.js" @@ -22,9 +23,11 @@ const newButton = document.getElementById("new-button") const copyButton = document.getElementById("copy-button") const hideButton = document.getElementById("hide-button") const githubButton = document.getElementById("github-button") +const shareButton = document.getElementById("share-button") const markdownButton = ( document.getElementById("markdown-button") ) + const singleViewButton = ( document.getElementById("single-view-button") ) @@ -47,6 +50,7 @@ renderIcon(githubButton, GithubOutlined) renderIcon(hideButton, EyeInvisibleOutlined) renderIcon(markdownButton, FileMarkdownOutlined) renderIcon(singleViewButton, FireOutlined) +renderIcon(shareButton, ShareAltOutlined) tippy("#save-button", { content: "Save paste
Ctrl + S", @@ -112,6 +116,14 @@ tippy("#hide-button", { allowHTML: true, }) +tippy("#share-button", { + content: "Share paste", + placement: "top", + animation: "scale", + theme: "rosepine", + allowHTML: true, +}) + const observer = new MutationObserver(callback) function callback() { diff --git a/frontend/src/index.ts b/frontend/src/index.ts index 7318600..2bb1a91 100755 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -35,6 +35,7 @@ const saveButton = document.getElementById("save-button") const newButton = document.getElementById("new-button") const copyButton = document.getElementById("copy-button") const hideButton = document.getElementById("hide-button") +const shareButton = document.getElementById("share-button") const markdownButton = ( document.getElementById("markdown-button") ) @@ -127,6 +128,7 @@ function newPaste() { hide(codeViewPre) hide(viewCounterLabel) hide(viewCounter) + hide(shareButton) viewCounterLabel.style.display = "none" viewCounter.style.display = "none" } @@ -165,6 +167,17 @@ function viewPaste(content: string, views: string, singleView: boolean) { addMessage("This is a single-view paste!") } + if (navigator.canShare) { + show(shareButton) + + shareButton.addEventListener("click", function () { + navigator.share({ + title: "zer0bin paste", + url: window.location.toString(), + }) + }) + } + disable(saveButton) disable(markdownButton) enable(newButton) diff --git a/frontend/style/style.scss b/frontend/style/style.scss index 17f42fc..1bb104e 100755 --- a/frontend/style/style.scss +++ b/frontend/style/style.scss @@ -192,6 +192,17 @@ a { } } } +// #share-button { +// position: fixed !important; +// bottom: 0; +// left: 0; +// z-index: 10; +// color: $muted; +// &:hover { +// color: $rose; +// } +// padding: 10px; +// } .keybind { color: $subtle; font-size: 11px;