mirror of https://github.com/zer0bin-dev/zer0bin
feat: ✨ Share button
This commit is contained in:
parent
4f62e7f4ee
commit
fff67c1a43
|
@ -52,6 +52,7 @@ html(lang='en')
|
||||||
span.viewcounter.noselect#viewcounter-count(style='visibility: hidden; display: none')
|
span.viewcounter.noselect#viewcounter-count(style='visibility: hidden; display: none')
|
||||||
|
|
||||||
.bottom-button-wrapper
|
.bottom-button-wrapper
|
||||||
|
button#share-button.btn(aria-label='Share' style='visibility: hidden')
|
||||||
button#hide-button.btn(aria-label='Hide')
|
button#hide-button.btn(aria-label='Hide')
|
||||||
|
|
||||||
.scrollbar-container
|
.scrollbar-container
|
||||||
|
|
|
@ -10,6 +10,7 @@ import {
|
||||||
EyeInvisibleOutlined,
|
EyeInvisibleOutlined,
|
||||||
FireOutlined,
|
FireOutlined,
|
||||||
FileMarkdownOutlined,
|
FileMarkdownOutlined,
|
||||||
|
ShareAltOutlined,
|
||||||
} from "@ant-design/icons-svg"
|
} from "@ant-design/icons-svg"
|
||||||
import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"
|
import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"
|
||||||
import tippy from "tippy.js"
|
import tippy from "tippy.js"
|
||||||
|
@ -22,9 +23,11 @@ const newButton = <HTMLButtonElement>document.getElementById("new-button")
|
||||||
const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
|
const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
|
||||||
const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
|
const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
|
||||||
const githubButton = <HTMLButtonElement>document.getElementById("github-button")
|
const githubButton = <HTMLButtonElement>document.getElementById("github-button")
|
||||||
|
const shareButton = <HTMLButtonElement>document.getElementById("share-button")
|
||||||
const markdownButton = <HTMLButtonElement>(
|
const markdownButton = <HTMLButtonElement>(
|
||||||
document.getElementById("markdown-button")
|
document.getElementById("markdown-button")
|
||||||
)
|
)
|
||||||
|
|
||||||
const singleViewButton = <HTMLButtonElement>(
|
const singleViewButton = <HTMLButtonElement>(
|
||||||
document.getElementById("single-view-button")
|
document.getElementById("single-view-button")
|
||||||
)
|
)
|
||||||
|
@ -47,6 +50,7 @@ renderIcon(githubButton, GithubOutlined)
|
||||||
renderIcon(hideButton, EyeInvisibleOutlined)
|
renderIcon(hideButton, EyeInvisibleOutlined)
|
||||||
renderIcon(markdownButton, FileMarkdownOutlined)
|
renderIcon(markdownButton, FileMarkdownOutlined)
|
||||||
renderIcon(singleViewButton, FireOutlined)
|
renderIcon(singleViewButton, FireOutlined)
|
||||||
|
renderIcon(shareButton, ShareAltOutlined)
|
||||||
|
|
||||||
tippy("#save-button", {
|
tippy("#save-button", {
|
||||||
content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
|
content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
|
||||||
|
@ -112,6 +116,14 @@ tippy("#hide-button", {
|
||||||
allowHTML: true,
|
allowHTML: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
tippy("#share-button", {
|
||||||
|
content: "Share paste",
|
||||||
|
placement: "top",
|
||||||
|
animation: "scale",
|
||||||
|
theme: "rosepine",
|
||||||
|
allowHTML: true,
|
||||||
|
})
|
||||||
|
|
||||||
const observer = new MutationObserver(callback)
|
const observer = new MutationObserver(callback)
|
||||||
|
|
||||||
function callback() {
|
function callback() {
|
||||||
|
|
|
@ -35,6 +35,7 @@ const saveButton = <HTMLButtonElement>document.getElementById("save-button")
|
||||||
const newButton = <HTMLButtonElement>document.getElementById("new-button")
|
const newButton = <HTMLButtonElement>document.getElementById("new-button")
|
||||||
const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
|
const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
|
||||||
const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
|
const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
|
||||||
|
const shareButton = <HTMLButtonElement>document.getElementById("share-button")
|
||||||
const markdownButton = <HTMLButtonElement>(
|
const markdownButton = <HTMLButtonElement>(
|
||||||
document.getElementById("markdown-button")
|
document.getElementById("markdown-button")
|
||||||
)
|
)
|
||||||
|
@ -127,6 +128,7 @@ function newPaste() {
|
||||||
hide(codeViewPre)
|
hide(codeViewPre)
|
||||||
hide(viewCounterLabel)
|
hide(viewCounterLabel)
|
||||||
hide(viewCounter)
|
hide(viewCounter)
|
||||||
|
hide(shareButton)
|
||||||
viewCounterLabel.style.display = "none"
|
viewCounterLabel.style.display = "none"
|
||||||
viewCounter.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!")
|
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(saveButton)
|
||||||
disable(markdownButton)
|
disable(markdownButton)
|
||||||
enable(newButton)
|
enable(newButton)
|
||||||
|
|
|
@ -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 {
|
.keybind {
|
||||||
color: $subtle;
|
color: $subtle;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|
Loading…
Reference in New Issue