Display the SoundCloud URL when JS is disabled

ldeso · Dec 28, 2023 · ab2eddd · ab2eddd
1 parent d4c383e
commit ab2eddd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/assets/css/soundcloud.css b/assets/css/soundcloud.css
@@ -1,4 +1,5 @@
 .Soundcloud {
+  white-space: nowrap;
   height: 166px;
   display: grid;
 }
@@ -10,22 +11,34 @@
   border-radius: 0.2rem;
 }
 
-.Soundcloud-player {
+.Soundcloud-box {
   font: inherit;
   color: inherit;
   text-decoration: none;
   grid-area: 1/1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   border: 0.1rem solid lightgray;
   border-radius: 0.2rem;
+  padding: 0 2rem;
+}
+
+.Soundcloud-box--button {
   padding-bottom: 1lh;
-  cursor: pointer;
+}
+
+.Soundcloud-box--link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
 }
 
 .Soundcloud-policy {
   grid-area: 1/1;
   place-self: center;
   margin-top: 1lh;
 }
+
+.Soundcloud-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
diff --git a/assets/js/soundcloud.js b/assets/js/soundcloud.js
@@ -1,11 +1,15 @@
 for (const wrapper of document.getElementsByClassName("Soundcloud")) {
-  const link = wrapper.firstElementChild;
+  const url = wrapper.firstElementChild.getAttribute('href');
   const iframe = document.createElement("iframe");
   iframe.className = "Soundcloud-iframe";
-  iframe.setAttribute("src", `https://w.soundcloud.com/player/?url=${link.getAttribute('href')}&show_comments=false`);
+  iframe.setAttribute("src", `https://w.soundcloud.com/player/?url=${url}&show_comments=false`);
   const button = document.createElement("button");
-  button.className = "Soundcloud-player";
-  button.textContent = 'Load SoundCloud player';
+  button.className = "Soundcloud-box Soundcloud-box--button";
+  button.textContent = "Load SoundCloud player";
   button.onclick = () => wrapper.replaceChildren(iframe);
-  wrapper.replaceChild(button, link);
+  const policy = document.createElement("a");
+  policy.className = "Soundcloud-policy";
+  policy.textContent = "(cookie policy)";
+  policy.setAttribute("href", "https://soundcloud.com/pages/cookies");
+  wrapper.replaceChildren(button, policy);
 };
diff --git a/layouts/shortcodes/soundcloud.html b/layouts/shortcodes/soundcloud.html
@@ -2,6 +2,5 @@
 {{ resources.Get "js/soundcloud.js" | minify | fingerprint | .Page.Scratch.SetInMap "js" "soundcloud" }}
 
 <div class="Soundcloud">
-  <a href="{{ .Get 0 }}" target="_blank" class="Soundcloud-player">Open SoundCloud</a>
-  <a href="https://soundcloud.com/pages/cookies" target="_blank" class="Soundcloud-policy">(cookie policy)</a>
+  <a href="{{ .Get 0 }}" target="_blank" class="Soundcloud-box Soundcloud-box--link"><span class="Soundcloud-ellipsis">{{ .Get 0 }}</span></a>
 </div>