New share UI now works
This commit is contained in:
Corbin Davenport
parent
4615dec4fb
commit
15b00bde2a
|
|
@ -43,9 +43,8 @@ chrome.runtime.onInstalled.addListener(function (details) {
|
|||
})
|
||||
|
||||
// Function for creating share popup
|
||||
function createPopup(serverDomain, shareLink, shareText, tab) {
|
||||
var test = chrome.runtime.getURL('share.html')
|
||||
var popupPage = test + '?text=' + encodeURIComponent(shareText + '\n\n' + shareLink)
|
||||
function createPopup(shareLink, shareText, tab) {
|
||||
var popupPage = chrome.runtime.getURL('share.html') + '?link=' + encodeURIComponent(shareLink) + '&text=' + encodeURIComponent(shareText)
|
||||
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
|
||||
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)
|
||||
createPopup(tab.url, tab.title, tab)
|
||||
})
|
||||
|
|
@ -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()
|
||||
37
share.html
37
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: auto;
|
||||
margin-right: 5px;
|
||||
height: 1.3em;
|
||||
width: 1.3em;
|
||||
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">
|
||||
<img src="https://toot.community/favicon.ico">
|
||||
toot.community
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action display-6">
|
||||
<img src="https://toot.cafe/favicon.ico">
|
||||
toot.cafe
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action display-6">
|
||||
<img src="https://mastodon.social/favicon.ico">
|
||||
mastodon.social
|
||||
</a>
|
||||
</div>
|
||||
<!-- Initial loading UI -->
|
||||
<div id="server-loading" class="text-center p-5 d-none">
|
||||
<div class="spinner-border mb-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p>You are being redirected to the selected server, please wait.</p>
|
||||
</div>
|
||||
|
||||
<script src="js/bootstrap.js"></script>
|
||||
<script src="js/settings.js"></script>
|
||||
<script src="js/share.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue