New share UI now works

js/background.js

@@ -43,9 +43,8 @@ chrome.runtime.onInstalled.addListener(function (details) {
 })
 
 // Function for creating share popup
-function createPopup(serverDomain, shareLink, shareText, tab) {
+function createPopup(shareLink, shareText, tab) {
-	var test = chrome.runtime.getURL('share.html')
+	var popupPage = chrome.runtime.getURL('share.html') + '?link=' + encodeURIComponent(shareLink) + '&text=' + encodeURIComponent(shareText)
-	var popupPage = test + '?text=' + encodeURIComponent(shareText + '\n\n' + shareLink)
 	var popupWidth = 500
 	var popupHeight = 500
 	var y = Math.round((tab.height / 2) - (popupHeight / 2))
@@ -65,19 +64,6 @@ function createPopup(serverDomain, shareLink, shareText, tab) {
 chrome.contextMenus.onClicked.addListener(async function (info, tab) {
 	console.log(info, tab)
 	if (info.menuItemId == "share-to-mastodon") {
-		/*
-		// Check if there is a saved server
-		var server = await new Promise(function (resolve) {
-			chrome.storage.sync.get(function (data) {
-				resolve(data.userServer)
-			})
-		})
-		// Open settings if needed
-		if (!server) {
-			chrome.runtime.openOptionsPage()
-			return false
-		}
-		*/
 		// Set link and description
 		var shareLink = ''
 		var shareText = ''
@@ -92,25 +78,11 @@ chrome.contextMenus.onClicked.addListener(async function (info, tab) {
 			shareText = 'Type something here'
 		}
 		// Open popup
-		createPopup('temp', shareLink, shareText, tab)
+		createPopup(shareLink, shareText, tab)
 	}
 })
 
 // Function for action button
 chrome.action.onClicked.addListener(async function (tab) {
-	// Check if there is a saved server
+	createPopup(tab.url, tab.title, tab)
-	var server = await new Promise(function (resolve) {
-		chrome.storage.sync.get(function (data) {
-			resolve(data.userServer)
-		})
-	})
-	// Open settings if needed
-	if (!server) {
-		chrome.runtime.openOptionsPage()
-		return false
-	}
-	// Open popup
-	var shareLink = tab.url
-	var shareText = tab.title
-	createPopup(server, shareLink, shareText, tab)
 })

js/share.js

@@ -0,0 +1,55 @@
+/*
+var shareLink = ''
+        var shareText = ''
+        if (info.linkUrl) {
+            shareLink = info.linkUrl
+            shareText = 'Type something here'
+        } else if (info.selectionText) {
+            shareLink = info.pageUrl
+            shareText = '"' + info.selectionText + '"'
+        } else {
+            shareLink = info.pageUrl
+            shareText = 'Type something here'
+        }
+        */
+
+async function init() {
+    // Get data from URL and storage
+    var inputParams = new URL((window.location.href)).searchParams
+    var shareLink = inputParams.get('link')
+    var shareText = inputParams.get('text')
+    var data = await chrome.storage.sync.get()
+    // Show warning if no servers are saved
+    if (!data.serverList) {
+        document.querySelector('#server-warning').classList.remove('d-none')
+        return false
+    }
+    // Create list of servers
+    var serverListEl = document.querySelector('#server-list')
+    for (server in data.serverList) {
+        // Create link list element
+        var serverUrl = data.serverList[server]
+        var linkEl = document.createElement('a')
+        linkEl.classList.add('list-group-item', 'list-group-item', 'list-group-item-action', 'display-6')
+        linkEl.innerText = serverUrl
+        linkEl.href = 'https://' + serverUrl + '/share?text=' + encodeURIComponent(shareText + '\n\n' + shareLink)
+        linkEl.rel = 'preconnect'
+        // Add server icon to list
+        var serverImg = document.createElement('img')
+        serverImg.src = 'https://' + serverUrl + '/favicon.ico'
+        serverImg.alt = serverUrl + ' icon'
+        linkEl.prepend(serverImg)
+        // Inject element
+        serverListEl.appendChild(linkEl)
+    }
+    // Show list
+    serverListEl.classList.remove('d-none')
+}
+
+// Show loading animation when a link is clicked
+window.addEventListener('beforeunload', function() {
+    document.querySelector('#server-list').classList.add('d-none')
+    document.querySelector('#server-loading').classList.remove('d-none')
+})
+
+init()

share.html

@@ -10,39 +10,40 @@
     <link href="css/dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
     <style>
         .list-group-item img {
-            width: 1em;
+            height: 1.3em;
-            height: auto;
+            width: 1.3em;
-            margin-right: 5px;
+            margin: 0.2em 0;
+            margin-right: 0.5em;
         }
     </style>
 </head>
 
 <body>
-    <div class="list-group mb-2 list-group-flush border-bottom">
+    <!-- UI for no servers saved -->
+    <div id="server-warning" class="container text-center p-5 d-none">
+        You don't have any servers saved! Why don't you <a href="#">add some</a>?
+    </div>
+    <!-- Server selection UI -->
+    <div id="server-list" class="list-group mb-2 list-group-flush border-bottom d-none">
         <li class="list-group-item list-group-item-dark">
             Select a server
             <div class="float-end">
                 <a href="#" target="_blank">
-                    Add or remove servers
+                    Edit servers
                 </a>
             </div>
         </li>
-        <a href="#" class="list-group-item list-group-item-action display-6">
+    </div>
-            <img src="https://toot.community/favicon.ico">
+    <!-- Initial loading UI -->
-            toot.community
+    <div id="server-loading" class="text-center p-5 d-none">
-        </a>
+        <div class="spinner-border mb-3" role="status">
-        <a href="#" class="list-group-item list-group-item-action display-6">
+            <span class="visually-hidden">Loading...</span>
-            <img src="https://toot.cafe/favicon.ico">
+        </div>
-            toot.cafe
+        <p>You are being redirected to the selected server, please wait.</p>
-        </a>
-        <a href="#" class="list-group-item list-group-item-action display-6">
-            <img src="https://mastodon.social/favicon.ico">
-            mastodon.social
-        </a>
     </div>
 
     <script src="js/bootstrap.js"></script>
-    <script src="js/settings.js"></script>
+    <script src="js/share.js"></script>
 
 </body>