Initial work on multi-server support

This commit is contained in:
Corbin Davenport 2023-02-10 01:30:26 -05:00
parent f17e523497
commit ca12dbf5ba
6 changed files with 5895 additions and 448 deletions

1735
css/bootstrap.css vendored

File diff suppressed because it is too large Load Diff

View File

@ -44,7 +44,8 @@ chrome.runtime.onInstalled.addListener(function (details) {
// Function for creating share popup
function createPopup(serverDomain, shareLink, shareText, tab) {
var popupPage = 'https://' + serverDomain + '/share?text=' + encodeURIComponent(shareText + '\n\n' + shareLink)
var test = chrome.runtime.getURL('share.html')
var popupPage = test + '?text=' + encodeURIComponent(shareText + '\n\n' + shareLink)
var popupWidth = 500
var popupHeight = 500
var y = Math.round((tab.height / 2) - (popupHeight / 2))
@ -64,6 +65,7 @@ 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) {
@ -75,6 +77,7 @@ chrome.contextMenus.onClicked.addListener(async function (info, tab) {
chrome.runtime.openOptionsPage()
return false
}
*/
// Set link and description
var shareLink = ''
var shareText = ''
@ -89,7 +92,7 @@ chrome.contextMenus.onClicked.addListener(async function (info, tab) {
shareText = 'Type something here'
}
// Open popup
createPopup(server, shareLink, shareText, tab)
createPopup('temp', shareLink, shareText, tab)
}
})

4468
js/bootstrap.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,37 +1,55 @@
// Function for populating settings
async function loadSettings() {
// Retrieve settings from storage
const server = document.getElementById('mastodon-server')
new Promise(function (resolve) {
chrome.storage.sync.get(function (data) {
console.log(data)
// Server setting
if (data.userServer) {
server.value = data.userServer
} else {
document.querySelector('#mastodon-server-alert').classList.remove('d-none')
}
resolve()
})
}).then(function () {
// Allow interaction on settings
server.removeAttribute('disabled')
const serverList = document.querySelector('#mastodon-server-list')
// Function to load settings from storage
function loadSettings() {
chrome.storage.sync.get(function (data) {
for (const i of data.serverList) {
var el = document.createElement('option')
el.value = i
el.innerText = i
serverList.appendChild(el)
}
})
}
// Save settings after any input change
document.querySelectorAll('input,select').forEach(function (el) {
el.addEventListener('change', function () {
chrome.storage.sync.set({
userServer: document.querySelector('#mastodon-server').value,
}, function() {
console.log('Settings saved')
})
// Function to save settings to storage
function saveSettings() {
// Get list of servers
var array = []
document.querySelectorAll('#mastodon-server-list option').forEach(function (el) {
array.push(el.value)
})
console.log(array)
// Save to storage
chrome.storage.sync.set({
serverList: array
}, function () {
console.log('Settings saved')
})
}
// Add server to list
document.querySelector('#server-add-btn').addEventListener('click', function () {
var domain = document.querySelector('#mastodon-server-text').value.replace(' ', '')
if (domain) {
var el = document.createElement('option')
el.value = domain
el.innerText = domain
serverList.appendChild(el)
serverList.value = domain
saveSettings()
}
})
// Remove button
document.querySelector('#server-remove-btn').addEventListener('click', function () {
var selectedOption = serverList.querySelector('option[value="' + serverList.value + '"]')
serverList.removeChild(selectedOption)
saveSettings()
})
// Open keyboard shortcut
document.querySelector('#mastodon-keyboard-shortcut').addEventListener('click', function() {
document.querySelector('#mastodon-keyboard-shortcut').addEventListener('click', function () {
chrome.tabs.create({ url: 'chrome://extensions/shortcuts#:~:text=Share%20to%20Mastodon' })
})

View File

@ -21,10 +21,15 @@
You have to enter a server before you can share links!
</div>
<!-- Server select -->
<div class="mb-3">
<label for="mastodon-server" class="form-label">Mastodon server</label>
<input type="text" class="form-control" id="mastodon-server" placeholder="yourserver.social" disabled>
<div class="mb-1">
<label for="mastodon-server-list" class="form-label">Mastodon servers</label>
<select id="mastodon-server-list" class="form-select" size="5" aria-label="Mastodon server list"></select>
</div>
<div class="input-group input-group-sm mb-1">
<input type="text" class="form-control" id="mastodon-server-text" placeholder="yourserver.social" aria-label="Server domain" aria-describedby="server-add-btn">
<button class="btn btn-outline-secondary" type="button" id="server-add-btn">Add</button>
</div>
<button class="btn btn-sm btn-outline-secondary w-100 mb-3" type="button" id="server-remove-btn">Remove selected</button>
<!-- Link to keyboard shortcut -->
<div class="mb-3">
<button type="button" class="btn btn-sm btn-primary w-100" id="mastodon-keyboard-shortcut">Change keyboard shortcut</button>
@ -55,8 +60,9 @@
</a>
</div>
<script src="js/bootstrap.js"></script>
<script src="js/settings.js"></script>
</body>
</html>
</html>

47
share.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Share to Mastodon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
<style>
.list-group-item img {
width: 20px;
height: auto;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="mt-2 mb-2 text-muted">Select a server</div>
<div class="list-group mb-2">
<a href="#" class="list-group-item list-group-item-action">
<img src="https://toot.community/favicon.ico">
toot.community
</a>
<a href="#" class="list-group-item list-group-item-action">
<img src="https://toot.cafe/favicon.ico">
toot.cafe
</a>
<a href="#" class="list-group-item list-group-item-action">
<img src="https://mastodon.social/favicon.ico">
mastodon.social
</a>
</div>
<a href="#" target="_blank">
<button type="button" class="btn btn-sm btn-outline-secondary w-100 mb-2">Add or remove servers</button>
</a>
</div>
<script src="js/bootstrap.js"></script>
<script src="js/settings.js"></script>
</body>
</html>