Skip to content

Commit e8ca2c4

Browse files
keuneskeunes
authored
Fix Copy Link button (#233)
1 parent fe22f90 commit e8ca2c4

File tree

8 files changed

+84
-188
lines changed

8 files changed

+84
-188
lines changed

‎_i18n/en.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ generic:
2828
page-not-found-long: "The requested page could not be found."
2929
accessibility:
3030
lang-menu: "Language switcher"
31-
copy: "Copy to clipboard"
31+
copy: "Copy link"
3232
copied: "Link copied!"
3333
share-fb: "Share on Facebook"
3434
share-md: "Share on Mastodon"

‎_includes/ICS-modal.html

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
<script type="text/javascript">
2-
$(function () {
3-
$('[data-toggle="tooltip"]').tooltip()
4-
})
5-
$(function () {
6-
$(document).on('shown.bs.tooltip', function (e) {
7-
setTimeout(function () {
8-
$(e.target).tooltip('hide');
9-
}, 1000);
10-
});
11-
});
12-
</script>
13-
141
<div class="modal fade" id="icsModal" tabindex="-1" role="dialog" aria-labelledby="icsModalLabel" aria-hidden="true">
152
<div class="modal-dialog modal-dialog-centered" role="document">
163
<div class="modal-content">

‎_includes/head.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,6 @@
6262
<script src="/assets/js/jquery.min.js"></script>
6363
<script src="/assets/js/bootstrap.bundle.min.js"></script>
6464
<script defer src="/assets/js/search.min.js"></script>
65+
<script defer src="/assets/js/tooltip.js"></script>
6566
<script defer src="/assets/js/copy-url.js"></script>
67+
<script defer src="/assets/js/mastodon-share.js"></script>

‎_includes/share.html

Lines changed: 19 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,21 @@
11
<div class="inline-flex">
2-
3-
{% assign author = site.data.authors[page.author] %}
4-
5-
<p class="size-14 color-gray-900 mb-0 mr-2">{% t generic.share %}</p>
6-
<button class="copy-link" aria-label="{% t generic.accessibility.copy %}" onclick="copyUrl();" title="{% t generic.accessibility.copy %}"><span data-tooltip="{% t generic.accessibility.copied %}" data-flow="top">
7-
<i class="fas fa-link color-gray-600 size-20 mr-2"></i></button>
8-
<a aria-label="{% t generic.accessibility.share-fb %}" href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url | replace: '.html', '' }}"
9-
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;" title="{% t generic.accessibility.share-fb %}">
10-
<i class="fab fa-facebook color-gray-600 size-20 mr-2"></i>
11-
</a>
12-
<a aria-label="{% t generic.accessibility.share-md %}" href="#" onclick="share_on_mastodon();" title="{% t generic.accessibility.share-md %}">
13-
<i class="fab fa-mastodon size-20 color-gray-600 mr-2"></i>
14-
</a>
15-
<a aria-label="{% t generic.accessibility.share-tw %}" href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url | replace: '.html', '' }}&hashtags={% for tag in page.tags %}{{tag}},{% endfor %}"
16-
onclick="window.open(this.href, 'twitter-share', 'width=550,height=350');return false;" title="{% t generic.accessibility.share-tw %}">
17-
<i class="fab fa-twitter size-20 color-gray-600 mr-2"></i>
18-
</a>
19-
<a aria-label="{% t generic.accessibility.share-eml %}" href="mailto:?subject={% t generic.eml-share.subject %}&amp;body={% t generic.eml-share.subject %} {{ site.url }}{{ page.url | replace: '.html', '' }}" title="{% t generic.accessibility.share-eml %}">
20-
<i class="fas fa-envelope size-20 color-gray-600"></i>
21-
</a>
2+
{%- assign author = site.data.authors[page.author] %}
3+
<p class="size-14 color-gray-900 mb-0 mr-2">{% t generic.share %}</p>
4+
<button title="{% t generic.accessibility.copy %}" class="copy-link" onclick="copyUrl();" data-toggle="tooltip" data-trigger="click" data-selector="true" data-title="{% t generic.accessibility.copied %}" value="{{ site.url }}{{ page.url | replace: '.html', '' }}">
5+
<i class="fas fa-link color-gray-600 size-20 mr-2"></i>
6+
</button>
7+
<a title="{% t generic.accessibility.share-fb %}" href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url | replace: '.html', '' }}"
8+
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
9+
<i class="fab fa-facebook color-gray-600 size-20 mr-2"></i>
10+
</a>
11+
<a title="{% t generic.accessibility.share-md %}" href="#" onclick="share_on_mastodon();">
12+
<i class="fab fa-mastodon size-20 color-gray-600 mr-2"></i>
13+
</a>
14+
<a title="{% t generic.accessibility.share-tw %}" href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url | replace: '.html', '' }}&hashtags={% for tag in page.tags %}{{tag}},{% endfor %}&via=AntennaPod"
15+
onclick="window.open(this.href, 'twitter-share', 'width=550,height=350');return false;">
16+
<i class="fab fa-twitter size-20 color-gray-600 mr-2"></i>
17+
</a>
18+
<a title="{% t generic.accessibility.share-eml %}" href="mailto:?subject={% t generic.eml-share.subject %}&amp;body={% t generic.eml-share.subject %} {{ site.url }}{{ page.url | replace: '.html', '' }}">
19+
<i class="fas fa-envelope size-20 color-gray-600"></i>
20+
</a>
2221
</div>
23-
24-
<script>
25-
// The actual function. Set this as an onclick function for your "Share on Mastodon" button
26-
function share_on_mastodon() {
27-
// Prefill the form with the user's previously-specified Mastodon instance, if applicable
28-
var default_url = localStorage['mastodon_instance'];
29-
30-
// If there is no cached instance/domain, then insert a "https://" with no domain at the start of the prompt.
31-
if (!default_url)
32-
default_url = "https://";
33-
34-
var instance = prompt("{% t generic.masto-share.server %}", default_url);
35-
if (instance) {
36-
// Handle URL formats
37-
if ( !instance.startsWith("https://") && !instance.startsWith("http://") )
38-
instance = "https://" + instance;
39-
40-
// Get the current page's URL
41-
var url = window.location.href;
42-
43-
// Get the page title from the og:title meta tag, if it exists.
44-
var title = document.querySelectorAll('meta[property="og:title"]')[0].getAttribute("content");
45-
46-
// Otherwise, use the <title> tag as the title
47-
if (!title) var title = document.getElementsByTagName("title")[0].innerHTML;
48-
49-
// Handle slash
50-
if ( !instance.endsWith("/") )
51-
instance = instance + "/";
52-
53-
// Cache the instance/domain for future requests
54-
localStorage['mastodon_instance'] = instance;
55-
56-
// Hashtags
57-
hashtags = "{{ page.tags }}";
58-
59-
// Tagging users, such as offical accounts or the author of the post
60-
var author = "{{ author.name }}";
61-
62-
// Create the Share URL
63-
// https://someinstance.tld/share?text=URL%20encoded%20text
64-
mastodon_url = instance + "share?text=" + encodeURIComponent(title + "\n\n" + url + "\n\n" + hashtags + " " + author);
65-
66-
// Open a new window at the share location
67-
window.open(mastodon_url, '_blank');
68-
}
69-
}
70-
</script>

‎_sass/_custom.scss

Lines changed: 0 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1061,111 +1061,6 @@ footer {
10611061
}
10621062
}
10631063

1064-
// Tooltip
1065-
1066-
[data-tooltip] {
1067-
position: relative;
1068-
cursor: pointer;
1069-
}
1070-
[data-tooltip]:before,
1071-
[data-tooltip]:after {
1072-
line-height: 1;
1073-
font-size: 0.9em;
1074-
pointer-events: none;
1075-
position: absolute;
1076-
box-sizing: border-box;
1077-
display: none;
1078-
opacity: 0;
1079-
}
1080-
[data-tooltip]:before {
1081-
content: "";
1082-
border: 5px solid transparent;
1083-
z-index: 100;
1084-
}
1085-
[data-tooltip]:after {
1086-
content: attr(data-tooltip);
1087-
text-align: center;
1088-
min-width: 3em;
1089-
max-width: 21em;
1090-
white-space: nowrap;
1091-
overflow: hidden;
1092-
text-overflow: ellipsis;
1093-
padding: 6px 7px;
1094-
border-radius: 5px;
1095-
background: #5646ea;
1096-
color: #ffffff;
1097-
z-index: 99;
1098-
}
1099-
[data-tooltip]:hover:before,
1100-
[data-tooltip]:hover:after {
1101-
display: block;
1102-
opacity: 1;
1103-
}
1104-
[data-tooltip]:not([data-flow])::before,
1105-
[data-tooltip][data-flow="top"]::before {
1106-
bottom: 100%;
1107-
border-bottom-width: 0;
1108-
border-top-color: #5646ea;
1109-
}
1110-
[data-tooltip]:not([data-flow])::after,
1111-
[data-tooltip][data-flow="top"]::after {
1112-
bottom: calc(100% + 5px);
1113-
}
1114-
[data-tooltip]:not([data-flow])::before,
1115-
[tooltip]:not([data-flow])::after,
1116-
[data-tooltip][data-flow="top"]::before,
1117-
[data-tooltip][data-flow="top"]::after {
1118-
left: 50%;
1119-
-webkit-transform: translate(-50%, -4px);
1120-
transform: translate(-50%, -4px);
1121-
}
1122-
[data-tooltip][data-flow="bottom"]::before {
1123-
top: 100%;
1124-
border-top-width: 0;
1125-
border-bottom-color: #5646ea;
1126-
}
1127-
[data-tooltip][data-flow="bottom"]::after {
1128-
top: calc(100% + 5px);
1129-
}
1130-
[data-tooltip][data-flow="bottom"]::before,
1131-
[data-tooltip][data-flow="bottom"]::after {
1132-
left: 50%;
1133-
-webkit-transform: translate(-50%, 8px);
1134-
transform: translate(-50%, 8px);
1135-
}
1136-
[data-tooltip][data-flow="left"]::before {
1137-
top: 50%;
1138-
border-right-width: 0;
1139-
border-left-color: #5646ea;
1140-
left: calc(0em - 5px);
1141-
-webkit-transform: translate(-8px, -50%);
1142-
transform: translate(-8px, -50%);
1143-
}
1144-
[data-tooltip][data-flow="left"]::after {
1145-
top: 50%;
1146-
right: calc(100% + 5px);
1147-
-webkit-transform: translate(-8px, -50%);
1148-
transform: translate(-8px, -50%);
1149-
}
1150-
[data-tooltip][data-flow="right"]::before {
1151-
top: 50%;
1152-
border-left-width: 0;
1153-
border-right-color: #5646ea;
1154-
right: calc(0em - 5px);
1155-
-webkit-transform: translate(8px, -50%);
1156-
transform: translate(8px, -50%);
1157-
}
1158-
[data-tooltip][data-flow="right"]::after {
1159-
top: 50%;
1160-
left: calc(100% + 5px);
1161-
-webkit-transform: translate(8px, -50%);
1162-
transform: translate(8px, -50%);
1163-
}
1164-
[data-tooltip=""]::after,
1165-
[data-tooltip=""]::before {
1166-
display: none !important;
1167-
}
1168-
11691064
// Misc
11701065

11711066
.weight-500 {

‎_sass/bootstrap/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -851,7 +851,7 @@ $card-columns-margin: $card-spacer-y !default;
851851
$tooltip-font-size: $font-size-sm !default;
852852
$tooltip-max-width: 200px !default;
853853
$tooltip-color: $white !default;
854-
$tooltip-bg: $black !default;
854+
$tooltip-bg: $brand-primary;
855855
$tooltip-border-radius: $border-radius !default;
856856
$tooltip-opacity: .9 !default;
857857
$tooltip-padding-y: .25rem !default;

‎assets/js/mastodon-share.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// The actual function. Set this as an onclick function for your "Share on Mastodon" button
2+
function share_on_mastodon() {
3+
4+
// Prefill the form with the user's previously-specified Mastodon instance, if applicable
5+
var default_url = localStorage['mastodon_instance'];
6+
7+
// If there is no cached instance/domain, then insert a "https://" with no domain at the start of the prompt.
8+
if (!default_url)
9+
default_url = "https://";
10+
11+
var instance = prompt("{% t generic.masto-share.server %}", default_url);
12+
if (instance) {
13+
// Handle URL formats
14+
if ( !instance.startsWith("https://") && !instance.startsWith("http://") )
15+
instance = "https://" + instance;
16+
17+
// Get the current page's URL
18+
var url = window.location.href;
19+
20+
// Get the page title from the og:title meta tag, if it exists.
21+
var title = document.querySelectorAll('meta[property="og:title"]')[0].getAttribute("content");
22+
23+
// Otherwise, use the <title> tag as the title
24+
if (!title)
25+
var title = document.getElementsByTagName("title")[0].innerHTML;
26+
27+
// Handle slash
28+
if ( !instance.endsWith("/") )
29+
instance = instance + "/";
30+
31+
// Cache the instance/domain for future requests
32+
localStorage['mastodon_instance'] = instance;
33+
34+
// Hashtags
35+
hashtags = "{{ page.tags }}";
36+
37+
// Tagging users, such as offical accounts or the author of the post
38+
var author = "{{ author.name }}";
39+
40+
// Create the Share URL
41+
// https://someinstance.tld/share?text=URL%20encoded%20text
42+
mastodon_url = instance + "share?text=" + encodeURIComponent(title + "\n\n" + url + "\n\n" + hashtags + " " + author);
43+
44+
// Open a new window at the share location
45+
window.open(mastodon_url, '_blank');
46+
}
47+
}

‎assets/js/tooltip.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
$(function () {
2+
$('[data-toggle="tooltip"]').tooltip()
3+
})
4+
$(function () {
5+
$(document).on('shown.bs.tooltip', function (e) {
6+
setTimeout(function () {
7+
$(e.target).tooltip('hide');
8+
}, 1000);
9+
});
10+
});
11+
12+
// For buttons, make sure to add the data-selector="true" property. See
13+
// https://github.com/twbs/bootstrap/issues/15359
14+
// https://stackoverflow.com/a/27237034

0 commit comments

Comments
 (0)