Add Context menu

nathangathright · Mar 5, 2023 · 6b2f716 · 6b2f716
1 parent e02cbe7
commit 6b2f716
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -17,7 +17,6 @@
         <span class="handle">@[email protected]</span>
       </div>
     </a>
-    <span aria-hidden="true">·</span>
     <a href="https://podcastindex.social/@dave/109683341113064081" class="permalink">
       <relative-time format="micro" datetime="2023-01-13T12:36:00">Jan 13, 2023, 12:36</relative-time>
     </a>
@@ -38,7 +37,6 @@
           <span class="handle">@[email protected]</span>
         </div>
       </a>
-      <span aria-hidden="true">·</span>
       <a href="https://podcastindex.social/@mikeneumann/109683392658321928" class="permalink">
         <relative-time format="micro" datetime="2023-01-13T12:36:00">Jan 13, 2023, 12:36</relative-time>
       </a>
@@ -60,7 +58,6 @@
           <span class="handle">@[email protected]</span>
         </div>
       </a>
-      <span aria-hidden="true">·</span>
       <a href="https://podcastindex.social/@[email protected]/109683418204293960" class="permalink">
         <relative-time format="micro" datetime="2023-01-13T12:36:00">Jan 13, 2023, 12:36</relative-time>
       </a>
@@ -82,7 +79,6 @@
           <span class="handle">@[email protected]</span>
         </div>
       </a>
-      <span aria-hidden="true">·</span>
       <a href="https://podcastindex.social/@Drebscott/109684005862281746" class="permalink">
         <relative-time format="micro" datetime="2023-01-13T12:36:00">Jan 13, 2023, 12:36</relative-time>
       </a>
@@ -99,7 +95,6 @@
             <span class="handle">@[email protected]</span>
           </div>
         </a>
-        <span aria-hidden="true">·</span>
         <a href="https://social.medusmedia.com/@medus/109684086654638288" class="permalink">
           <relative-time format="micro" datetime="2023-01-13T12:36:00">Jan 13, 2023, 12:36</relative-time>
         </a>
@@ -116,7 +111,6 @@
               <span class="handle">@[email protected]</span>
             </div>
           </a>
-          <span aria-hidden="true">·</span>
           <a href="#" class="permalink">
             <relative-time format="micro" datetime="2023-01-13T12:36:00">Jan 13, 2023, 12:36</relative-time>
           </a>
@@ -133,7 +127,6 @@
                 <span class="handle">@[email protected]</span>
               </div>
             </a>
-            <span aria-hidden="true">·</span>
             <a href="#" class="permalink">
               <relative-time format="micro" datetime="2023-01-13T12:36:00">Jan 13, 2023, 12:36</relative-time>
             </a>
@@ -156,7 +149,6 @@
             <span class="handle">@[email protected]</span>
           </div>
         </a>
-        <span aria-hidden="true">·</span>
         <a href="#" class="permalink">
           <relative-time format="micro" datetime="2023-01-13T12:36:00">Jan 13, 2023, 12:36</relative-time>
         </a>
@@ -171,4 +163,5 @@
   <!-- replies go here -->
 </details>
 <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
+<script src="script.js"></script>
 </body>
diff --git a/script.js b/script.js
@@ -0,0 +1,90 @@
+const comments = document.querySelectorAll('details:not(.content-warning)');
+comments.forEach(comment => {
+  const summary = comment.querySelector('summary');
+  const permalink = comment.querySelector('a.permalink').href;
+  const handleLong = comment.querySelector('span.handle').innerText;
+  const handleShort = handleLong.substring(0, handleLong.indexOf('@', 1));
+
+  const profile = comment.querySelector('a.profile').href;
+
+  summary.insertAdjacentHTML('beforeend', `
+    <button class="context-menu" aria-label="More">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+      </svg>
+    </button>
+  `);
+
+  const button = comment.querySelector('button[aria-label="More"]');
+  button.insertAdjacentHTML('beforeend', `
+    <menu>
+      <a href="${permalink}" data-mastodon>Reply to this post</a>
+      <a href="${permalink}" data-copy>Copy link to this post</a>
+      <a href="${permalink}">Open in original site</a>
+      <a href="${profile}" data-mastodon>Follow ${handleShort}</a>
+    </menu>
+  `);
+  button.addEventListener('click', () => {
+    const menu = button.querySelector('menu');
+    menu.classList.toggle('show');
+  });
+
+  // Add a listener to the copy link button
+  const copyButton = comment.querySelector('a[data-copy]');
+  copyButton.addEventListener('click', () => {
+    const link = copyButton.href;
+    navigator.clipboard.writeText(link);
+  });
+});
+
+document.querySelectorAll('a[data-mastodon]').forEach(function(link) {
+  link.addEventListener('click', function(e) {
+    e.preventDefault();
+    const url = new URL(e.target.href);
+    const origin = url.origin;
+    const username = url.pathname.split('/')[1].slice(1) + '@' + url.hostname;
+    const isFollow = Boolean(url.pathname.split('/')[2]==undefined);
+    let homeInstance = localStorage.getItem('homeInstance');
+
+    if (!homeInstance) {
+      // create a dialog
+      const dialog = document.createElement('dialog');
+      dialog.classList.add('dialog-homeinstance');
+      dialog.innerHTML = `
+        <form method="dialog">
+          <label for="homeInstance">Enter your home instance URL:</label>
+          <input type="url" name="homeInstance" list="homeInstance" value="https://">
+          <datalist id="homeInstance">
+            <option>${origin}</option>
+          </datalist>
+          <menu>
+            <button type="reset" value="cancel">Cancel</button>
+            <button type="submit" value="ok">OK</button>
+          </menu>
+        </form>
+      `;
+      document.body.appendChild(dialog);
+      dialog.showModal();
+      const input = dialog.querySelector('input')
+      input.focus();
+      input.selectionStart = input.selectionEnd = input.value.length;
+
+      dialog.querySelector('form').addEventListener('reset', function(e) {
+        dialog.close();
+      });
+
+      dialog.querySelector('form').addEventListener('submit', function(e) {
+        e.preventDefault();
+        dialog.close();
+        dialog.removeAttribute('open');
+        let instance = new URL(input.value);
+        localStorage.setItem('homeInstance', instance);
+        window.open(isFollow ? `https://${instance.hostname}/authorize_interaction?acct=${username}` : `https://${instance.hostname}/authorize_interaction?uri=${url}`);
+      });
+    }
+    else {
+      let instance = new URL(homeInstance);
+      window.open(isFollow ? `https://${instance.hostname}/authorize_interaction?acct=${username}` : `https://${instance.hostname}/authorize_interaction?uri=${url}`);
+    }
+  });
+});
diff --git a/style.css b/style.css
@@ -23,8 +23,6 @@ summary {
   font-size: .75rem;
   line-height: 1rem;
   width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
 }
 
 details > summary::-webkit-details-marker {
@@ -60,6 +58,7 @@ details[open]:not(.content-warning) > summary::before {
 
 .profile {
   display: flex;
+  flex: 1;
   gap: .5rem;
   place-items: center;
   text-decoration: none;
@@ -88,6 +87,95 @@ details[open]:not(.content-warning) > summary::before {
   color: rgba(0,0,0,.6);
 }
 
+.context-menu {
+  all: unset;
+  position: relative;
+}
+
+.context-menu svg {
+  display: block;
+}
+
+.context-menu menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  display: none;
+  flex-direction: column;
+  background: #FFF;
+  margin: 0;
+  padding: .75rem;
+  z-index: 1;
+  border-radius: .25rem;
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}
+
+.context-menu menu.show {
+  display: flex;
+}
+
+.context-menu menu a {
+  white-space: nowrap;
+  text-decoration: none; 
+  line-height: 2;
+}
+
+.dialog-homeinstance {
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  width: calc((100% - 6px) - 2em);
+  max-width: 28rem;
+}
+
+.dialog-homeinstance form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.dialog-homeinstance input {
+  padding: 0.5rem;
+}
+
+.dialog-homeinstance menu {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: .5rem;
+  margin: 1.5rem 0 0 0;
+}
+
+.dialog-homeinstance button {
+  border: none;
+  padding: .5rem;
+  border-radius: 4px;
+  min-width: 4.5rem;
+  background-color: #2962ff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: .25px;
+  line-height: 1rem;
+  outline: none;
+  color:#FFF;
+}
+
+.dialog-homeinstance button:hover {
+  background-color: #2F7DE2;
+}
+
+.dialog-homeinstance button[type="reset"] {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px #DADCE0;
+  color: #2962ff;
+}
+
+.dialog-homeinstance button[type="reset"]:hover {
+  background-color: #EAF2FD;
+}
+
 .contents {
   padding-left: calc(var(--thread) + .5rem);
   font-size: 0.875rem;
@@ -134,10 +222,6 @@ details.content-warning[open] > summary::after {
     display: block;
   }
 
-  .profile {
-    flex: 1;
-  }
-
   .profile + span {
     display: none;
   }