Merge pull request #265 from a0eoc/style-share-js

Style sharing updates
userstyles-world · Sep 16, 2023 · 7244490 · 7244490
2 parents c704560 + 1cd0096
commit 7244490
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/handlers/style/view.go b/handlers/style/view.go
@@ -50,7 +50,7 @@ func GetStylePage(c *fiber.Ctx) error {
 		"User":       u,
 		"Title":      data.Name,
 		"Style":      data,
-		"URL":        c.BaseURL() + c.Path(),
+		"URL":        c.BaseURL() + "/style/" + id,
 		"Slug":       slug,
 		"Canonical":  "style/" + id + "/" + slug,
 		"RenderMeta": true,

diff --git a/web/typescript/page/view-style.ts b/web/typescript/page/view-style.ts
@@ -3,16 +3,19 @@ import {doDomOperation} from 'utils/dom';
 export const initViewStyle = () => doDomOperation(() => {
     shareButton();
     checkIfStyleInstalled();
+    removeStylusTooltip();
 });
 
 function shareButton() {
-    const urlValue = document.getElementById('share').textContent;
+    const urlBar = document.getElementById('share');
     const shareButton = document.getElementById('btn-share') as HTMLButtonElement;
     if (!shareButton) {
         return;
     }
+    urlBar.textContent += urlBar.getAttribute("slug");
+    shareButton.removeAttribute("hidden");
     shareButton.addEventListener('click', () => {
-        navigator.clipboard.writeText(urlValue).then(() => {
+        navigator.clipboard.writeText(urlBar.textContent).then(() => {
             shareButton.classList.add('copied');
         }, () => {
             shareButton.classList.add('copied-failed');
@@ -45,3 +48,8 @@ function checkIfStyleInstalled() {
         origin: 'https://userstyles.world'
     }));
 }
+
+function removeStylusTooltip() {
+    const Stylus = document.querySelector('a#stylus');
+    Stylus.removeAttribute("data-tooltip");
+}
diff --git a/web/views/style/view.tmpl b/web/views/style/view.tmpl
@@ -46,11 +46,11 @@
 
 <section class="header flex mt:m ai:c">
 	<div class="share flex ai:c mr:m">
-		<span id="share" class="bg:2 input-like">{{ .URL }}</span>
+		<span id="share" class="bg:2 input-like" slug="/{{ .Slug }}">{{ .URL }}</span>
 		<button
 			aria-label="Copy Style URL to clipboard"
 			data-tooltip="Style URL has been copied to your clipboard."
-			id="btn-share" class="btn icon iflex ai:c">
+			id="btn-share" class="btn icon iflex ai:c" hidden>
 			{{ template "icons/copy" }} Copy
 		</button>
 	</div>
@@ -133,6 +133,7 @@
 			target="_blank"
 			rel="noopener"
 			href="https://github.com/openstyles/stylus/#readme"
+			data-tooltip="Stylus detection only works with JS enabled"
 			id="stylus" class="btn icon stylus"
 		>{{ template "icons/brush" }} Get Stylus</a>
 	</div>