Skip to content

Commit

Permalink
Add test button and social media buttons (#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
@corbindavenport
corbindavenport committed Aug 11, 2023
1 parent c942b4e commit 7a49dff
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 19 deletions.
46 changes: 37 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
<input type="text" class="form-control form-control-lg" id="link-output" readonly autocomplete="off">
<button class="btn btn-outline-secondary" type="button" id="link-startover" aria-label="Clean another link"><i class="bi bi-arrow-counterclockwise"></i></button>
</div>
<!-- Share buttons -->
<!-- Main action buttons -->
<div class="row">
<div class="col-12 col-lg-4">
<button type="button" class="btn btn-primary w-100 mt-3" id="link-share-btn" aria-label="Share">
Expand All @@ -130,32 +130,60 @@
</div>
<div class="col-12 col-lg-4">
<button type="button" class="btn btn-primary w-100 mt-3" id="link-copy-btn" aria-label="Copy to Clipboard">
<i class="bi bi-clipboard"></i>&nbsp;
<i class="bi bi-clipboard me-2"></i>
Copy to Clipboard
</button>
</div>
<div class="col-12 col-lg-4">
<button type="button" class="btn btn-primary w-100 mt-3" id="link-test-btn">
<i class="bi bi-box-arrow-up-right me-2"></i>
Test link
</button>
</div>
<div class="col-12 col-lg-4">
<button type="button" class="btn btn-primary w-100 mt-3" id="link-qr-btn" data-bs-toggle="modal" data-bs-target="#qr-modal" aria-label="Open QR code">
<i class="bi bi-qr-code"></i>&nbsp;
<i class="bi bi-qr-code me-2"></i>
Show QR code
</button>
</div>
<div class="col-12 col-lg-4">
<button type="button" class="btn btn-primary w-100 mt-3" id="email-btn" aria-label="Send in Email">
<i class="bi bi-envelope"></i>&nbsp;
<i class="bi bi-envelope me-2"></i>
Send in Email
</button>
</div>
<div class="col-12 col-lg-4">
<button type="button" class="btn btn-primary w-100 mt-3" id="sms-btn" aria-label="Send in Text">
<i class="bi bi-chat-left-dots-fill"></i>&nbsp;
<i class="bi bi-chat-left-dots-fill me-2"></i>
Send in Text
</button>
</div>
<div class="col-12 col-lg-4">
<button type="button" class="btn btn-primary w-100 mt-3" id="mastodon-btn" aria-label="Share on Mastodon">
<i class="bi bi-mastodon"></i>&nbsp;
Share on Mastodon

</div>
<!-- Social media buttons -->
<div class="row">
<div class="h5 mt-4">Social media</div>
</div>
<div class="row">
<!-- Mastodon -->
<div class="col-12 col-sm-6 col-md-4">
<button type="button" class="btn btn-light w-100 mt-3" id="mastodon-share-btn" aria-label="Share">
<i class="bi bi-mastodon me-2"></i>
Mastodon
</button>
</div>
<!-- Twitter / X-->
<div class="col-12 col-sm-6 col-md-4">
<button type="button" class="btn btn-light w-100 mt-3" id="x-share-btn" aria-label="Share">
<span class="me-2" aria-label="X logo">𝕏</span>
Twitter / X
</button>
</div>
<!-- Telegram -->
<div class="col-12 col-sm-6 col-md-4">
<button type="button" class="btn btn-light w-100 mt-3" id="telegram-share-btn" aria-label="Share">
<i class="bi bi-telegram me-2"></i>
Telegram
</button>
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,12 @@ qrModal.addEventListener('show.bs.modal', function (event) {
}
})

// Test link button
document.getElementById('link-test-btn').addEventListener('click', function () {
var currentLink = document.getElementById('link-output').value
window.open(currentLink, '_blank')
})

// Email button
document.getElementById('email-btn').addEventListener('click', function () {
var currentLink = document.getElementById('link-output').value
Expand All @@ -134,17 +140,29 @@ document.getElementById('sms-btn').addEventListener('click', function () {
})

// Mastodon button
document.getElementById('mastodon-btn').addEventListener('click', function () {
document.getElementById('mastodon-share-btn').addEventListener('click', function () {
var currentLink = document.getElementById('link-output').value
var defaultServer = localStorage['mastodon-server'] || 'mastodon.social'
var server = window.prompt('Which Mastodon server do you want to use?', defaultServer)
if (server) {
localStorage['mastodon-server'] = server
var link = 'https://' + server + '/share?text=' + encodeURIComponent('Type something here\n\n' + currentLink)
popupWindow(link, '_blank', window, 500, 400)
window.open(link, '_blank')
}
})

// Twitter / X button
document.getElementById('x-share-btn').addEventListener('click', function () {
var link = 'https://twitter.com/intent/tweet?url=' + encodeURIComponent(document.getElementById('link-output').value)
window.open(link, '_blank')
})

// Telegram button
document.getElementById('telegram-share-btn').addEventListener('click', function () {
var link = 'https://t.me/share/url?url=' + encodeURIComponent(document.getElementById('link-output').value)
window.open(link, '_blank')
})

// Show Shortcut prompt on iOS
if (ifiOS()) {
document.getElementById('apple-shortcut-btn').style.display = 'block'
Expand Down
8 changes: 0 additions & 8 deletions js/shared.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,14 +98,6 @@ function addToHistory(link) {
}
}

// Function for generating popup window
// Based on: https://stackoverflow.com/a/32261263
function popupWindow(url, windowName, win, w, h) {
const y = win.top.outerHeight / 2 + win.top.screenY - (h / 2)
const x = win.top.outerWidth / 2 + win.top.screenX - (w / 2)
return win.open(url, windowName, `toolbar=no, location=no, directories=no, status=no, menubar=no, resizable=no, copyhistory=no, width=${w}, height=${h}, top=${y}, left=${x}`)
}

// Save settings automatically to localStorage
document.querySelectorAll('input[type="checkbox"]').forEach(function (el) {
el.addEventListener('change', function () {
Expand Down

0 comments on commit 7a49dff

Please sign in to comment.