diff --git a/EssentialCSharp.Web/src/components/PageNavigation.vue b/EssentialCSharp.Web/src/components/PageNavigation.vue index 80053996..54e0e2b8 100644 --- a/EssentialCSharp.Web/src/components/PageNavigation.vue +++ b/EssentialCSharp.Web/src/components/PageNavigation.vue @@ -16,6 +16,16 @@ const shell = inject("shell"); ( or use the key) +
+ + + Share Page +
+ Copies a link to this page +
+
diff --git a/EssentialCSharp.Web/src/composables/useSiteShell.js b/EssentialCSharp.Web/src/composables/useSiteShell.js index bcc87ca7..66fca9c5 100644 --- a/EssentialCSharp.Web/src/composables/useSiteShell.js +++ b/EssentialCSharp.Web/src/composables/useSiteShell.js @@ -89,28 +89,21 @@ export function useSiteShell() { return urlObject.toString(); } - function copyToClipboard(copyText) { - let url; - - if (copyText.includes("#")) { - url = `${window.location.origin}/${copyText}`; - } - else { - const currentUrl = window.location.href.split("#")[0]; - url = `${currentUrl}#${copyText}`; - } - + function addReferralIdToUrl(url) { const referralId = window.REFERRAL_ID; if (typeof referralId === "string" && referralId.trim().length > 0) { - url = addQueryParam(url, "rid", referralId); + return addQueryParam(url, "rid", referralId); } + return url; + } + function writeToClipboard(url, successMessage = "Copied to clipboard!") { navigator.clipboard .writeText(url) .then( () => { snackbarColor.value = "white"; - snackbarMessage.value = "Copied url to clipboard!"; + snackbarMessage.value = successMessage; }, (error) => { console.error("Could not copy text to clipboard: ", error); @@ -129,6 +122,25 @@ export function useSiteShell() { }, 3000); } + function copyToClipboard(copyText) { + let url; + + if (copyText.includes("#")) { + url = `${window.location.origin}/${copyText}`; + } + else { + const currentUrl = window.location.href.split("#")[0]; + url = `${currentUrl}#${copyText}`; + } + + writeToClipboard(addReferralIdToUrl(url), "Copied url to clipboard!"); + } + + function shareCurrentPage() { + const url = window.location.href.split("#")[0]; + writeToClipboard(addReferralIdToUrl(url), "Copied page url to clipboard!"); + } + function goToPrevious() { if (window.PREVIOUS_PAGE !== null) { window.location.href = `/${window.PREVIOUS_PAGE}`; @@ -276,6 +288,7 @@ export function useSiteShell() { isContentPage, filteredTocData, copyToClipboard, + shareCurrentPage, goToPrevious, goToNext, openSearch, diff --git a/EssentialCSharp.Web/wwwroot/css/styles.css b/EssentialCSharp.Web/wwwroot/css/styles.css index 886b6dd9..505454b0 100644 --- a/EssentialCSharp.Web/wwwroot/css/styles.css +++ b/EssentialCSharp.Web/wwwroot/css/styles.css @@ -437,6 +437,17 @@ a:hover { right: 3rem; } +.turn-page-tooltip .tooltip-center { + left: 50%; + transform: translateX(-50%); +} + +/* Share button reset */ +.turn-page button.arrow-btn { + border: none; + padding: 0; +} + /* Chapter Navigation Sidebar Styles */ .sidebar {