ENERGIZE!
This commit is contained in:
commit
4875e09740
18
LICENSE
Normal file
18
LICENSE
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
Copyright (C) 2022 smpl <smpl@slamkode.ml>
|
||||
|
||||
This software is provided 'as-is', without any express or implied
|
||||
warranty. In no event will the authors be held liable for any damages
|
||||
arising from the use of this software.
|
||||
|
||||
Permission is granted to anyone to use this software for any purpose,
|
||||
including commercial applications, and to alter it and redistribute it
|
||||
freely, subject to the following restrictions:
|
||||
|
||||
1. The origin of this software must not be misrepresented; you must not
|
||||
claim that you wrote the original software. If you use this software
|
||||
in a product, an acknowledgment in the product documentation would
|
||||
be appreciated but is not required.
|
||||
2. Altered source versions must be plainly marked as such, and must not
|
||||
be misrepresented as being the original software.
|
||||
3. This notice may not be removed or altered from any source
|
||||
distribution.
|
||||
70
README
Normal file
70
README
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
Preparing the HTML embed
|
||||
------------------------
|
||||
If your handle on mastodon is @superman@fortitude.fortress the remote
|
||||
follow portal page is this:
|
||||
|
||||
https://fortitude.fortress/users/superman/remote_follow
|
||||
|
||||
In the following HTML snippet to embed on your site replace {uri} with
|
||||
your remote_follow link corresponding to what was just explained.
|
||||
|
||||
<div style="display: inline-block; position: relative;">
|
||||
<a href="{uri}">
|
||||
<img id="mastodonfollow" onclick="mastodon_follow_show()" style="height: 32px;" src="{icon}"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Next decide on the icon you want to use:
|
||||
mastodon-follow-dark-da.svg
|
||||
mastodon-follow-dark-en.svg
|
||||
mastodon-follow-dark.svg
|
||||
mastodon-follow-light-da.svg
|
||||
mastodon-follow-light-en.svg
|
||||
mastodon-follow-light.svg
|
||||
|
||||
This is the icon you upload to somewhere on your site. Replace {icon}
|
||||
with the path to your icon in the above HTML snippet.
|
||||
|
||||
You can adjust the image size in the style attribute as appropriate for
|
||||
your site.
|
||||
|
||||
Insert the HTML snippet in the place where you want the button on your
|
||||
page.
|
||||
|
||||
I have prepared variants of the script to match the icons. Pick the
|
||||
appropriate one and upload it to your site. Replace {script} in the
|
||||
snippet below and insert it in the <head></head> of your website.
|
||||
|
||||
<script src="{script}" type="text/javascript"></script>
|
||||
|
||||
IMPORTANT: Remember to change the account and portal settings to point
|
||||
to your mastodon account.
|
||||
|
||||
You can change the link that "Create account" points to in the
|
||||
create_url setting and easily translate the strings to other languages.
|
||||
|
||||
Implementation notes
|
||||
--------------------
|
||||
The script reserves the following globals:
|
||||
|
||||
HTML/CSS:
|
||||
#mastodonfollow
|
||||
input[name="mastodon-handle"]
|
||||
.mastodon-follow-container
|
||||
.mastodon-follow-title
|
||||
.mastodon-follow-input
|
||||
.mastodon-follow-button
|
||||
JS:
|
||||
var mastodon_follow_settings
|
||||
var mastodon_follow_strings
|
||||
var mastodon_follow_container
|
||||
function mastodon_follow_create_style
|
||||
function mastodon_follow_go
|
||||
function mastodon_follow_lookup
|
||||
function mastodon_follow_show
|
||||
|
||||
Bugs
|
||||
----
|
||||
Report bugs to smpl@slamkode.ml
|
||||
|
||||
License: Zlib
|
||||
210
mastodon-follow-dark-da.js
Normal file
210
mastodon-follow-dark-da.js
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
/* SPDX-License-Identifier: Zlib
|
||||
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
|
||||
|
||||
var mastodon_follow_settings = {
|
||||
"account": "superman@fortitude.fortress",
|
||||
"portal": "https://fortitude.fortress/users/superman/remote_follow",
|
||||
"dialog": {
|
||||
"width": "256px",
|
||||
"background": "#282c37",
|
||||
"color": "#9baec8",
|
||||
"title": "#fff",
|
||||
"input": {
|
||||
"bordercolor": "#0a0b0e",
|
||||
"background": "#131419",
|
||||
"color": "#fff",
|
||||
"placeholder": "#c83737"
|
||||
},
|
||||
"button": {
|
||||
"background": "#2b90d9",
|
||||
"color": "#fff"
|
||||
}
|
||||
}
|
||||
};
|
||||
var mastodon_follow_strings =
|
||||
{
|
||||
"title": "Tast dit Mastodon id",
|
||||
"button": "Følg",
|
||||
"create": "Opret konto",
|
||||
"create_url": "https://joinmastodon.org/communities",
|
||||
"error": { "handle": "Forkert id" }
|
||||
};
|
||||
|
||||
var mastodon_follow_container = null;
|
||||
|
||||
/* Remove nojs fallback link, when JS enabled. */
|
||||
window.addEventListener("load", function(e) {
|
||||
mastodonfollow.style.cursor = "pointer";
|
||||
var a = mastodonfollow.parentNode;
|
||||
var c = a.parentNode;
|
||||
c.appendChild(mastodonfollow);
|
||||
a.remove();
|
||||
});
|
||||
|
||||
function mastodon_follow_create_style()
|
||||
{
|
||||
var style = document.createElement('style');
|
||||
var d = mastodon_follow_settings.dialog;
|
||||
style.innerHTML =
|
||||
".mastodon-follow-container {" +
|
||||
"display: block;" +
|
||||
"z-index: 1;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 5px;" +
|
||||
"background: " + d.background + ";" +
|
||||
"position: absolute;" +
|
||||
"top:110%;" +
|
||||
"left: 0;" +
|
||||
"width: " + d.width + ";" +
|
||||
'font-family: "Roboto",Roboto,sans-serif;' +
|
||||
"margin: 0 auto;" +
|
||||
"padding: 20px;" +
|
||||
"font-weight: 400;" +
|
||||
"font-size: 13px;" +
|
||||
"color: " + d.color + ";" +
|
||||
"line-height: 18px;" +
|
||||
"}" +
|
||||
".mastodon-follow-title {" +
|
||||
"text-align: center;" +
|
||||
"font-size: 18px;" +
|
||||
"font-weight: 500;" +
|
||||
"margin: 0;" +
|
||||
"color: " + d.title + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input {" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.input.background + ";" +
|
||||
"width: 100%;" +
|
||||
"box-sizing: border-box;" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.input.color + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input::placeholder {" +
|
||||
"color: " + d.input.placeholder + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-button {" +
|
||||
"display: block;" +
|
||||
"width: 100%;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-right: 10px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.button.background + ";" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.button.color + ";" +
|
||||
"line-height: inherit;" +
|
||||
"text-align: center;" +
|
||||
"text-transform: uppercase;" +
|
||||
"box-sizing: border-box;" +
|
||||
"cursor: pointer;" +
|
||||
"}";
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/* Called when request to instance is complete.
|
||||
* Parse the JSON response and find the subscribe uri.
|
||||
* On error goes to the instances remote_follow url. */
|
||||
function mastodon_follow_go(event)
|
||||
{
|
||||
var data;
|
||||
|
||||
if (this.readyState === this.DONE) {
|
||||
if (this.status === 200) {
|
||||
try {
|
||||
data = JSON.parse(this.responseText);
|
||||
} catch {
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
data.links.forEach( function(e) {
|
||||
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
|
||||
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
/* Called when user click on follow button in dialog.
|
||||
* Grab the mastodon handle from the input field and request the
|
||||
* appropriate webfinger document from the users instance.
|
||||
* Response is handled by mastodon_follow_go(). */
|
||||
function mastodon_follow_lookup(event)
|
||||
{
|
||||
var handle_element = document.querySelector('input[name="mastodon-handle"]');
|
||||
var handle = handle_element.value;
|
||||
|
||||
// remove any initial @
|
||||
if(handle.charAt(0) == '@') {
|
||||
handle = handle.substring(1);
|
||||
}
|
||||
|
||||
// split into nick and host
|
||||
var uriparts = handle.split('@');
|
||||
if(uriparts.length < 2) {
|
||||
handle_element.value = '';
|
||||
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
|
||||
return;
|
||||
}
|
||||
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.addEventListener("load", mastodon_follow_go);
|
||||
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
/* Activated when icon is clicked.
|
||||
* Create the follow dialog on first run, toggle visibility on further
|
||||
* clicks. */
|
||||
function mastodon_follow_show()
|
||||
{
|
||||
if(!mastodon_follow_container) {
|
||||
mastodon_follow_create_style();
|
||||
|
||||
mastodon_follow_container = document.createElement('div');
|
||||
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
|
||||
|
||||
var mastodon_title = document.createElement('p');
|
||||
mastodon_title.setAttribute('class', 'mastodon-follow-title');
|
||||
mastodon_title.innerHTML = mastodon_follow_strings.title;
|
||||
|
||||
var mastodon_follow_handle = document.createElement('input');
|
||||
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
|
||||
mastodon_follow_handle.setAttribute('type', 'text');
|
||||
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
|
||||
|
||||
var mastodon_follow_follow = document.createElement('button');
|
||||
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
|
||||
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
|
||||
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
|
||||
|
||||
var createaccount = document.createElement('div');
|
||||
createaccount.style = "text-align: right;";
|
||||
var createaccount_a = document.createElement('a');
|
||||
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
|
||||
createaccount_a.innerHTML = mastodon_follow_strings.create;
|
||||
createaccount.appendChild(createaccount_a);
|
||||
|
||||
mastodon_follow_container.appendChild(mastodon_title);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_handle);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_follow);
|
||||
mastodon_follow_container.appendChild(createaccount);
|
||||
|
||||
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
|
||||
} else {
|
||||
mastodon_follow_container.style.display =
|
||||
mastodon_follow_container.style.display == "none" ? "block" : "none";
|
||||
}
|
||||
}
|
||||
33
mastodon-follow-dark-da.svg
Normal file
33
mastodon-follow-dark-da.svg
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
height="45.014904mm"
|
||||
width="85.691597mm"
|
||||
viewBox="0 0 85.691597 45.014904">
|
||||
<rect
|
||||
ry="5.9620543"
|
||||
y="1.0440584"
|
||||
x="1.0440561"
|
||||
height="42.926792"
|
||||
width="83.603485"
|
||||
style="fill:#282c37;stroke:#1b1d25;stroke-width:2.08811116;" />
|
||||
<path
|
||||
d="m 36.173854,25.50178 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
|
||||
style="fill:#3088d4;" />
|
||||
<path
|
||||
d="m 31.724706,17.84681 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 h -3.131981 v -7.90543 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
|
||||
style="fill:#ffffff;" />
|
||||
<g style="fill:#3088d4;">
|
||||
<path
|
||||
d="m 69.506087,14.94682 c 2.06847,0 3.74388,-1.67538 3.74388,-3.74388 0,-2.06851 -1.67541,-3.74389 -3.74388,-3.74389 -2.0685,0 -3.74388,1.67538 -3.74388,3.74389 0,2.0685 1.67538,3.74388 3.74388,3.74388 z m -8.42376,-1.87193 v -2.80792 h -1.87197 v 2.80792 h -2.80792 v 1.87193 h 2.80792 v 2.80792 h 1.87197 v -2.80792 h 2.80792 v -1.87193 z m 8.42376,3.74389 c -2.49906,0 -7.48781,1.2542 -7.48781,3.74389 v 1.87196 h 14.97558 v -1.87196 c 0,-2.48969 -4.98874,-3.74389 -7.48777,-3.74389 z" />
|
||||
<path
|
||||
d="M 40.703998,36.83326 V 25.75843 h 7.408579 v 2.06132 h -4.738753 v 2.54812 h 4.305193 v 2.05371 h -4.305193 v 4.41168 z" />
|
||||
<path
|
||||
d="m 53.847757,36.98539 q -1.22462,0 -2.22105,-0.49441 l -0.60851,1.06488 h -1.58212 l 1.0725,-1.86355 q -1.51367,-1.51366 -1.51367,-4.23673 v -0.38032 q 0,-2.54052 1.34633,-4.00094 1.35393,-1.46802 3.49131,-1.46802 1.2018,0 2.19063,0.48681 l 0.46398,-0.80628 h 1.57452 l -0.92037,1.59734 q 1.54408,1.51366 1.54408,4.26715 v 0.37271 q 0,2.54052 -1.36153,4.00094 -1.35393,1.46042 -3.4761,1.46042 z m -2.13738,-5.46136 q 0,1.00404 0.20537,1.71904 l 2.9969,-5.21795 q -0.45638,-0.32708 -1.0801,-0.32708 -1.99286,0 -2.11456,2.96648 z m 4.25955,-0.46398 q 0,-1.01925 -0.22058,-1.74946 l -3.01211,5.25598 q 0.45638,0.33468 1.11052,0.33468 1.01165,0 1.5593,-0.85952 0.55527,-0.86712 0.56287,-2.47206 z" />
|
||||
<path
|
||||
d="m 67.280557,34.77955 v 2.05371 h -7.3173 V 25.75843 h 2.66983 v 9.02112 z" />
|
||||
<path
|
||||
d="m 76.993857,30.91553 v 4.54859 q -0.42595,0.47159 -1.52127,0.99643 -1.09531,0.52484 -2.8828,0.52484 -2.20584,0 -3.54456,-1.39196 -1.33111,-1.39957 -1.33111,-3.98572 v -0.61612 q 0,-2.58616 1.33111,-3.98572 1.33111,-1.40718 3.40004,-1.40718 2.28951,0 3.33158,1.05729 1.04207,1.05728 1.20941,2.71546 h -2.56334 q -0.1217,-0.82148 -0.54005,-1.27026 -0.41835,-0.44877 -1.34632,-0.44877 -0.9584,0 -1.52888,0.81387 -0.57047,0.81388 -0.57808,2.46446 v 0.67697 q 0,1.66578 0.58569,2.49488 0.59329,0.82909 1.76467,0.82909 1.03446,0 1.54409,-0.46399 v -1.71903 h -1.85595 v -1.83313 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
210
mastodon-follow-dark-en.js
Normal file
210
mastodon-follow-dark-en.js
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
/* SPDX-License-Identifier: Zlib
|
||||
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
|
||||
|
||||
var mastodon_follow_settings = {
|
||||
"account": "superman@fortitude.fortress",
|
||||
"portal": "https://fortitude.fortress/users/superman/remote_follow",
|
||||
"dialog": {
|
||||
"width": "256px",
|
||||
"background": "#282c37",
|
||||
"color": "#9baec8",
|
||||
"title": "#fff",
|
||||
"input": {
|
||||
"bordercolor": "#0a0b0e",
|
||||
"background": "#131419",
|
||||
"color": "#fff",
|
||||
"placeholder": "#c83737"
|
||||
},
|
||||
"button": {
|
||||
"background": "#2b90d9",
|
||||
"color": "#fff"
|
||||
}
|
||||
}
|
||||
};
|
||||
var mastodon_follow_strings =
|
||||
{
|
||||
"title": "Enter your Mastodon handle",
|
||||
"button": "Follow",
|
||||
"create": "Create account",
|
||||
"create_url": "https://joinmastodon.org/communities",
|
||||
"error": { "handle": "Invalid handle" }
|
||||
};
|
||||
|
||||
var mastodon_follow_container = null;
|
||||
|
||||
/* Remove nojs fallback link, when JS enabled. */
|
||||
window.addEventListener("load", function(e) {
|
||||
mastodonfollow.style.cursor = "pointer";
|
||||
var a = mastodonfollow.parentNode;
|
||||
var c = a.parentNode;
|
||||
c.appendChild(mastodonfollow);
|
||||
a.remove();
|
||||
});
|
||||
|
||||
function mastodon_follow_create_style()
|
||||
{
|
||||
var style = document.createElement('style');
|
||||
var d = mastodon_follow_settings.dialog;
|
||||
style.innerHTML =
|
||||
".mastodon-follow-container {" +
|
||||
"display: block;" +
|
||||
"z-index: 1;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 5px;" +
|
||||
"background: " + d.background + ";" +
|
||||
"position: absolute;" +
|
||||
"top:110%;" +
|
||||
"left: 0;" +
|
||||
"width: " + d.width + ";" +
|
||||
'font-family: "Roboto",Roboto,sans-serif;' +
|
||||
"margin: 0 auto;" +
|
||||
"padding: 20px;" +
|
||||
"font-weight: 400;" +
|
||||
"font-size: 13px;" +
|
||||
"color: " + d.color + ";" +
|
||||
"line-height: 18px;" +
|
||||
"}" +
|
||||
".mastodon-follow-title {" +
|
||||
"text-align: center;" +
|
||||
"font-size: 18px;" +
|
||||
"font-weight: 500;" +
|
||||
"margin: 0;" +
|
||||
"color: " + d.title + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input {" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.input.background + ";" +
|
||||
"width: 100%;" +
|
||||
"box-sizing: border-box;" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.input.color + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input::placeholder {" +
|
||||
"color: " + d.input.placeholder + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-button {" +
|
||||
"display: block;" +
|
||||
"width: 100%;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-right: 10px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.button.background + ";" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.button.color + ";" +
|
||||
"line-height: inherit;" +
|
||||
"text-align: center;" +
|
||||
"text-transform: uppercase;" +
|
||||
"box-sizing: border-box;" +
|
||||
"cursor: pointer;" +
|
||||
"}";
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/* Called when request to instance is complete.
|
||||
* Parse the JSON response and find the subscribe uri.
|
||||
* On error goes to the instances remote_follow url. */
|
||||
function mastodon_follow_go(event)
|
||||
{
|
||||
var data;
|
||||
|
||||
if (this.readyState === this.DONE) {
|
||||
if (this.status === 200) {
|
||||
try {
|
||||
data = JSON.parse(this.responseText);
|
||||
} catch {
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
data.links.forEach( function(e) {
|
||||
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
|
||||
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
/* Called when user click on follow button in dialog.
|
||||
* Grab the mastodon handle from the input field and request the
|
||||
* appropriate webfinger document from the users instance.
|
||||
* Response is handled by mastodon_follow_go(). */
|
||||
function mastodon_follow_lookup(event)
|
||||
{
|
||||
var handle_element = document.querySelector('input[name="mastodon-handle"]');
|
||||
var handle = handle_element.value;
|
||||
|
||||
// remove any initial @
|
||||
if(handle.charAt(0) == '@') {
|
||||
handle = handle.substring(1);
|
||||
}
|
||||
|
||||
// split into nick and host
|
||||
var uriparts = handle.split('@');
|
||||
if(uriparts.length < 2) {
|
||||
handle_element.value = '';
|
||||
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
|
||||
return;
|
||||
}
|
||||
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.addEventListener("load", mastodon_follow_go);
|
||||
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
/* Activated when icon is clicked.
|
||||
* Create the follow dialog on first run, toggle visibility on further
|
||||
* clicks. */
|
||||
function mastodon_follow_show()
|
||||
{
|
||||
if(!mastodon_follow_container) {
|
||||
mastodon_follow_create_style();
|
||||
|
||||
mastodon_follow_container = document.createElement('div');
|
||||
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
|
||||
|
||||
var mastodon_title = document.createElement('p');
|
||||
mastodon_title.setAttribute('class', 'mastodon-follow-title');
|
||||
mastodon_title.innerHTML = mastodon_follow_strings.title;
|
||||
|
||||
var mastodon_follow_handle = document.createElement('input');
|
||||
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
|
||||
mastodon_follow_handle.setAttribute('type', 'text');
|
||||
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
|
||||
|
||||
var mastodon_follow_follow = document.createElement('button');
|
||||
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
|
||||
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
|
||||
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
|
||||
|
||||
var createaccount = document.createElement('div');
|
||||
createaccount.style = "text-align: right;";
|
||||
var createaccount_a = document.createElement('a');
|
||||
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
|
||||
createaccount_a.innerHTML = mastodon_follow_strings.create;
|
||||
createaccount.appendChild(createaccount_a);
|
||||
|
||||
mastodon_follow_container.appendChild(mastodon_title);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_handle);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_follow);
|
||||
mastodon_follow_container.appendChild(createaccount);
|
||||
|
||||
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
|
||||
} else {
|
||||
mastodon_follow_container.style.display =
|
||||
mastodon_follow_container.style.display == "none" ? "block" : "none";
|
||||
}
|
||||
}
|
||||
37
mastodon-follow-dark-en.svg
Normal file
37
mastodon-follow-dark-en.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
viewBox="0 0 85.691597 45.014904"
|
||||
height="45.014904mm"
|
||||
width="85.691597mm">
|
||||
<rect
|
||||
ry="5.9620543"
|
||||
y="1.0440584"
|
||||
x="1.0440561"
|
||||
height="42.926792"
|
||||
width="83.603485"
|
||||
style="fill:#282c37;stroke:#1b1d25;stroke-width:2.08811116;" />
|
||||
<path
|
||||
d="m 36.173854,25.50178 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
|
||||
style="fill:#3088d4;" />
|
||||
<path
|
||||
d="m 31.724706,17.84681 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 h -3.131981 v -7.90543 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
|
||||
style="fill:#ffffff;" />
|
||||
<g style="fill:#3088d4;">
|
||||
<path
|
||||
d="m 69.506087,14.94682 c 2.06847,0 3.74388,-1.67538 3.74388,-3.74388 0,-2.06851 -1.67541,-3.74389 -3.74388,-3.74389 -2.0685,0 -3.74388,1.67538 -3.74388,3.74389 0,2.0685 1.67538,3.74388 3.74388,3.74388 z m -8.42376,-1.87193 v -2.80792 h -1.87197 v 2.80792 h -2.80792 v 1.87193 h 2.80792 v 2.80792 h 1.87197 v -2.80792 h 2.80792 v -1.87193 z m 8.42376,3.74389 c -2.49906,0 -7.48781,1.2542 -7.48781,3.74389 v 1.87196 h 14.97558 v -1.87196 c 0,-2.48969 -4.98874,-3.74389 -7.48777,-3.74389 z" />
|
||||
<path
|
||||
d="m 38.77358,37.45718 v -7.18419 h 4.805906 v 1.33717 h -3.074004 v 1.65295 h 2.792754 v 1.33224 h -2.792754 v 2.86183 z" />
|
||||
<path
|
||||
d="m 50.378807,34.01311 q 0,1.64802 -0.87829,2.59539 -0.87828,0.94736 -2.25492,0.94736 -1.386512,0 -2.269734,-0.94736 -0.878287,-0.94737 -0.878287,-2.59539 v -0.29112 q 0,-1.64802 0.873353,-2.59538 0.878287,-0.9523 2.264798,-0.9523 1.37664,0 2.25986,0.9523 0.88322,0.94736 0.88322,2.59538 z m -1.75657,-0.30098 q 0,-1.08553 -0.3454,-1.63322 -0.34539,-0.5477 -1.04111,-0.5477 -1.292761,0 -1.371708,1.92434 l -0.0049,0.55756 q 0,1.05592 0.345398,1.62335 0.35032,0.56743 1.04111,0.56743 0.65625,0 1.01151,-0.55756 0.3602,-0.5625 0.36513,-1.60361 z" />
|
||||
<path
|
||||
d="m 56.013657,36.12495 v 1.33223 h -4.74669 v -7.18419 h 1.7319 v 5.85196 z" />
|
||||
<path
|
||||
d="m 61.500487,36.12495 v 1.33223 h -4.7467 v -7.18419 h 1.7319 v 5.85196 z" />
|
||||
<path
|
||||
d="m 68.003757,34.01311 q 0,1.64802 -0.87829,2.59539 -0.87829,0.94736 -2.25493,0.94736 -1.38651,0 -2.26973,-0.94736 -0.87828,-0.94737 -0.87828,-2.59539 v -0.29112 q 0,-1.64802 0.87335,-2.59538 0.87828,-0.9523 2.26479,-0.9523 1.37664,0 2.25987,0.9523 0.88322,0.94736 0.88322,2.59538 z m -1.75658,-0.30098 q 0,-1.08553 -0.34539,-1.63322 -0.34539,-0.5477 -1.04112,-0.5477 -1.29276,0 -1.3717,1.92434 l -0.005,0.55756 q 0,1.05592 0.34539,1.62335 0.35033,0.56743 1.04112,0.56743 0.65625,0 1.01151,-0.55756 0.36019,-0.5625 0.36513,-1.60361 z" />
|
||||
<path
|
||||
d="m 76.993857,30.27299 -1.52466,7.18419 h -1.79112 l -0.96217,-4.09538 -0.94243,4.09538 h -1.79604 l -1.52467,-7.18419 h 1.7171 l 0.82401,4.49505 0.98684,-4.49505 h 1.47039 l 1.00658,4.50986 0.82401,-4.50986 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
24
mastodon-follow-dark.svg
Normal file
24
mastodon-follow-dark.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="57.883163mm"
|
||||
height="45.014904mm"
|
||||
viewBox="0 0 57.883163 45.014904">
|
||||
<rect
|
||||
width="56.164337"
|
||||
height="43.296078"
|
||||
x="0.85941321"
|
||||
y="0.85940945"
|
||||
ry="6.0133438"
|
||||
style="fill:#282c37;stroke:#1b1e25;stroke-width:1.71882558;" />
|
||||
<path
|
||||
d="m 36.173854,25.50177 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
|
||||
style="fill:#3088d4;" />
|
||||
<path
|
||||
d="m 31.724706,17.8468 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 H 13.744559 V 17.8468 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
|
||||
style="fill:#ffffff;" />
|
||||
<path
|
||||
d="m 43.314163,32.1437 c 1.49508,0 2.70606,-1.21095 2.70606,-2.70606 0,-1.4951 -1.21098,-2.70606 -2.70606,-2.70606 -1.495103,0 -2.706063,1.21096 -2.706063,2.70606 0,1.49511 1.21096,2.70606 2.706063,2.70606 z m -6.088655,-1.35302 v -2.02955 h -1.353051 v 2.02955 h -2.02955 v 1.35302 h 2.02955 v 2.02955 h 1.353051 V 32.1437 h 2.029552 v -1.35302 z m 6.088655,2.70607 c -1.806313,0 -5.412155,0.90652 -5.412155,2.70606 v 1.35304 h 10.824279 v -1.35304 c 0,-1.79954 -3.605834,-2.70606 -5.412124,-2.70606 z"
|
||||
style="fill:#3088d4;" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
210
mastodon-follow-light-da.js
Normal file
210
mastodon-follow-light-da.js
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
/* SPDX-License-Identifier: Zlib
|
||||
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
|
||||
|
||||
var mastodon_follow_settings = {
|
||||
"account": "superman@fortitude.fortress",
|
||||
"portal": "https://fortitude.fortress/users/superman/remote_follow",
|
||||
"dialog": {
|
||||
"width": "256px",
|
||||
"background": "#d9e1e8",
|
||||
"color": "#282c37",
|
||||
"title": "#282c37",
|
||||
"input": {
|
||||
"bordercolor": "#b3c3d1",
|
||||
"background": "#f9fafb",
|
||||
"color": "#000",
|
||||
"placeholder": "#c83737"
|
||||
},
|
||||
"button": {
|
||||
"background": "#2b90d9",
|
||||
"color": "#fff"
|
||||
}
|
||||
}
|
||||
};
|
||||
var mastodon_follow_strings =
|
||||
{
|
||||
"title": "Tast dit Mastodon id",
|
||||
"button": "Følg",
|
||||
"create": "Opret konto",
|
||||
"create_url": "https://joinmastodon.org/communities",
|
||||
"error": { "handle": "Forkert id" }
|
||||
};
|
||||
|
||||
var mastodon_follow_container = null;
|
||||
|
||||
/* Remove nojs fallback link, when JS enabled. */
|
||||
window.addEventListener("load", function(e) {
|
||||
mastodonfollow.style.cursor = "pointer";
|
||||
var a = mastodonfollow.parentNode;
|
||||
var c = a.parentNode;
|
||||
c.appendChild(mastodonfollow);
|
||||
a.remove();
|
||||
});
|
||||
|
||||
function mastodon_follow_create_style()
|
||||
{
|
||||
var style = document.createElement('style');
|
||||
var d = mastodon_follow_settings.dialog;
|
||||
style.innerHTML =
|
||||
".mastodon-follow-container {" +
|
||||
"display: block;" +
|
||||
"z-index: 1;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 5px;" +
|
||||
"background: " + d.background + ";" +
|
||||
"position: absolute;" +
|
||||
"top:110%;" +
|
||||
"left: 0;" +
|
||||
"width: " + d.width + ";" +
|
||||
'font-family: "Roboto",Roboto,sans-serif;' +
|
||||
"margin: 0 auto;" +
|
||||
"padding: 20px;" +
|
||||
"font-weight: 400;" +
|
||||
"font-size: 13px;" +
|
||||
"color: " + d.color + ";" +
|
||||
"line-height: 18px;" +
|
||||
"}" +
|
||||
".mastodon-follow-title {" +
|
||||
"text-align: center;" +
|
||||
"font-size: 18px;" +
|
||||
"font-weight: 500;" +
|
||||
"margin: 0;" +
|
||||
"color: " + d.title + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input {" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.input.background + ";" +
|
||||
"width: 100%;" +
|
||||
"box-sizing: border-box;" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.input.color + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input::placeholder {" +
|
||||
"color: " + d.input.placeholder + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-button {" +
|
||||
"display: block;" +
|
||||
"width: 100%;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-right: 10px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.button.background + ";" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.button.color + ";" +
|
||||
"line-height: inherit;" +
|
||||
"text-align: center;" +
|
||||
"text-transform: uppercase;" +
|
||||
"box-sizing: border-box;" +
|
||||
"cursor: pointer;" +
|
||||
"}";
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/* Called when request to instance is complete.
|
||||
* Parse the JSON response and find the subscribe uri.
|
||||
* On error goes to the instances remote_follow url. */
|
||||
function mastodon_follow_go(event)
|
||||
{
|
||||
var data;
|
||||
|
||||
if (this.readyState === this.DONE) {
|
||||
if (this.status === 200) {
|
||||
try {
|
||||
data = JSON.parse(this.responseText);
|
||||
} catch {
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
data.links.forEach( function(e) {
|
||||
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
|
||||
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
/* Called when user click on follow button in dialog.
|
||||
* Grab the mastodon handle from the input field and request the
|
||||
* appropriate webfinger document from the users instance.
|
||||
* Response is handled by mastodon_follow_go(). */
|
||||
function mastodon_follow_lookup(event)
|
||||
{
|
||||
var handle_element = document.querySelector('input[name="mastodon-handle"]');
|
||||
var handle = handle_element.value;
|
||||
|
||||
// remove any initial @
|
||||
if(handle.charAt(0) == '@') {
|
||||
handle = handle.substring(1);
|
||||
}
|
||||
|
||||
// split into nick and host
|
||||
var uriparts = handle.split('@');
|
||||
if(uriparts.length < 2) {
|
||||
handle_element.value = '';
|
||||
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
|
||||
return;
|
||||
}
|
||||
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.addEventListener("load", mastodon_follow_go);
|
||||
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
/* Activated when icon is clicked.
|
||||
* Create the follow dialog on first run, toggle visibility on further
|
||||
* clicks. */
|
||||
function mastodon_follow_show()
|
||||
{
|
||||
if(!mastodon_follow_container) {
|
||||
mastodon_follow_create_style();
|
||||
|
||||
mastodon_follow_container = document.createElement('div');
|
||||
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
|
||||
|
||||
var mastodon_title = document.createElement('p');
|
||||
mastodon_title.setAttribute('class', 'mastodon-follow-title');
|
||||
mastodon_title.innerHTML = mastodon_follow_strings.title;
|
||||
|
||||
var mastodon_follow_handle = document.createElement('input');
|
||||
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
|
||||
mastodon_follow_handle.setAttribute('type', 'text');
|
||||
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
|
||||
|
||||
var mastodon_follow_follow = document.createElement('button');
|
||||
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
|
||||
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
|
||||
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
|
||||
|
||||
var createaccount = document.createElement('div');
|
||||
createaccount.style = "text-align: right;";
|
||||
var createaccount_a = document.createElement('a');
|
||||
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
|
||||
createaccount_a.innerHTML = mastodon_follow_strings.create;
|
||||
createaccount.appendChild(createaccount_a);
|
||||
|
||||
mastodon_follow_container.appendChild(mastodon_title);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_handle);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_follow);
|
||||
mastodon_follow_container.appendChild(createaccount);
|
||||
|
||||
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
|
||||
} else {
|
||||
mastodon_follow_container.style.display =
|
||||
mastodon_follow_container.style.display == "none" ? "block" : "none";
|
||||
}
|
||||
}
|
||||
33
mastodon-follow-light-da.svg
Normal file
33
mastodon-follow-light-da.svg
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
height="45.014904mm"
|
||||
width="85.691597mm"
|
||||
viewBox="0 0 85.691597 45.014904">
|
||||
<rect
|
||||
ry="5.9620543"
|
||||
y="1.0440584"
|
||||
x="1.0440561"
|
||||
height="42.926792"
|
||||
width="83.603485"
|
||||
style="fill:#d9e1e8;stroke:#d1d1d1;stroke-width:2.08811116;" />
|
||||
<path
|
||||
d="m 36.173854,25.50178 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
|
||||
style="fill:#3088d4;" />
|
||||
<path
|
||||
d="m 31.724706,17.84681 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 h -3.131981 v -7.90543 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
|
||||
style="fill:#ffffff;" />
|
||||
<g style="fill:#3088d4;">
|
||||
<path
|
||||
d="m 69.506087,14.94682 c 2.06847,0 3.74388,-1.67538 3.74388,-3.74388 0,-2.06851 -1.67541,-3.74389 -3.74388,-3.74389 -2.0685,0 -3.74388,1.67538 -3.74388,3.74389 0,2.0685 1.67538,3.74388 3.74388,3.74388 z m -8.42376,-1.87193 v -2.80792 h -1.87197 v 2.80792 h -2.80792 v 1.87193 h 2.80792 v 2.80792 h 1.87197 v -2.80792 h 2.80792 v -1.87193 z m 8.42376,3.74389 c -2.49906,0 -7.48781,1.2542 -7.48781,3.74389 v 1.87196 h 14.97558 v -1.87196 c 0,-2.48969 -4.98874,-3.74389 -7.48777,-3.74389 z" />
|
||||
<path
|
||||
d="M 40.703998,36.83326 V 25.75843 h 7.408579 v 2.06132 h -4.738753 v 2.54812 h 4.305193 v 2.05371 h -4.305193 v 4.41168 z" />
|
||||
<path
|
||||
d="m 53.847757,36.98539 q -1.22462,0 -2.22105,-0.49441 l -0.60851,1.06488 h -1.58212 l 1.0725,-1.86355 q -1.51367,-1.51366 -1.51367,-4.23673 v -0.38032 q 0,-2.54052 1.34633,-4.00094 1.35393,-1.46802 3.49131,-1.46802 1.2018,0 2.19063,0.48681 l 0.46398,-0.80628 h 1.57452 l -0.92037,1.59734 q 1.54408,1.51366 1.54408,4.26715 v 0.37271 q 0,2.54052 -1.36153,4.00094 -1.35393,1.46042 -3.4761,1.46042 z m -2.13738,-5.46136 q 0,1.00404 0.20537,1.71904 l 2.9969,-5.21795 q -0.45638,-0.32708 -1.0801,-0.32708 -1.99286,0 -2.11456,2.96648 z m 4.25955,-0.46398 q 0,-1.01925 -0.22058,-1.74946 l -3.01211,5.25598 q 0.45638,0.33468 1.11052,0.33468 1.01165,0 1.5593,-0.85952 0.55527,-0.86712 0.56287,-2.47206 z" />
|
||||
<path
|
||||
d="m 67.280557,34.77955 v 2.05371 h -7.3173 V 25.75843 h 2.66983 v 9.02112 z" />
|
||||
<path
|
||||
d="m 76.993857,30.91553 v 4.54859 q -0.42595,0.47159 -1.52127,0.99643 -1.09531,0.52484 -2.8828,0.52484 -2.20584,0 -3.54456,-1.39196 -1.33111,-1.39957 -1.33111,-3.98572 v -0.61612 q 0,-2.58616 1.33111,-3.98572 1.33111,-1.40718 3.40004,-1.40718 2.28951,0 3.33158,1.05729 1.04207,1.05728 1.20941,2.71546 h -2.56334 q -0.1217,-0.82148 -0.54005,-1.27026 -0.41835,-0.44877 -1.34632,-0.44877 -0.9584,0 -1.52888,0.81387 -0.57047,0.81388 -0.57808,2.46446 v 0.67697 q 0,1.66578 0.58569,2.49488 0.59329,0.82909 1.76467,0.82909 1.03446,0 1.54409,-0.46399 v -1.71903 h -1.85595 v -1.83313 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
210
mastodon-follow-light-en.js
Normal file
210
mastodon-follow-light-en.js
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
/* SPDX-License-Identifier: Zlib
|
||||
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
|
||||
|
||||
var mastodon_follow_settings = {
|
||||
"account": "superman@fortitude.fortress",
|
||||
"portal": "https://fortitude.fortress/users/superman/remote_follow",
|
||||
"dialog": {
|
||||
"width": "256px",
|
||||
"background": "#d9e1e8",
|
||||
"color": "#282c37",
|
||||
"title": "#282c37",
|
||||
"input": {
|
||||
"bordercolor": "#b3c3d1",
|
||||
"background": "#f9fafb",
|
||||
"color": "#000",
|
||||
"placeholder": "#c83737"
|
||||
},
|
||||
"button": {
|
||||
"background": "#2b90d9",
|
||||
"color": "#fff"
|
||||
}
|
||||
}
|
||||
};
|
||||
var mastodon_follow_strings =
|
||||
{
|
||||
"title": "Enter your Mastodon handle",
|
||||
"button": "Follow",
|
||||
"create": "Create account",
|
||||
"create_url": "https://joinmastodon.org/communities",
|
||||
"error": { "handle": "Invalid handle" }
|
||||
};
|
||||
|
||||
var mastodon_follow_container = null;
|
||||
|
||||
/* Remove nojs fallback link, when JS enabled. */
|
||||
window.addEventListener("load", function(e) {
|
||||
mastodonfollow.style.cursor = "pointer";
|
||||
var a = mastodonfollow.parentNode;
|
||||
var c = a.parentNode;
|
||||
c.appendChild(mastodonfollow);
|
||||
a.remove();
|
||||
});
|
||||
|
||||
function mastodon_follow_create_style()
|
||||
{
|
||||
var style = document.createElement('style');
|
||||
var d = mastodon_follow_settings.dialog;
|
||||
style.innerHTML =
|
||||
".mastodon-follow-container {" +
|
||||
"display: block;" +
|
||||
"z-index: 1;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 5px;" +
|
||||
"background: " + d.background + ";" +
|
||||
"position: absolute;" +
|
||||
"top:110%;" +
|
||||
"left: 0;" +
|
||||
"width: " + d.width + ";" +
|
||||
'font-family: "Roboto",Roboto,sans-serif;' +
|
||||
"margin: 0 auto;" +
|
||||
"padding: 20px;" +
|
||||
"font-weight: 400;" +
|
||||
"font-size: 13px;" +
|
||||
"color: " + d.color + ";" +
|
||||
"line-height: 18px;" +
|
||||
"}" +
|
||||
".mastodon-follow-title {" +
|
||||
"text-align: center;" +
|
||||
"font-size: 18px;" +
|
||||
"font-weight: 500;" +
|
||||
"margin: 0;" +
|
||||
"color: " + d.title + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input {" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.input.background + ";" +
|
||||
"width: 100%;" +
|
||||
"box-sizing: border-box;" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.input.color + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input::placeholder {" +
|
||||
"color: " + d.input.placeholder + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-button {" +
|
||||
"display: block;" +
|
||||
"width: 100%;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-right: 10px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.button.background + ";" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.button.color + ";" +
|
||||
"line-height: inherit;" +
|
||||
"text-align: center;" +
|
||||
"text-transform: uppercase;" +
|
||||
"box-sizing: border-box;" +
|
||||
"cursor: pointer;" +
|
||||
"}";
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/* Called when request to instance is complete.
|
||||
* Parse the JSON response and find the subscribe uri.
|
||||
* On error goes to the instances remote_follow url. */
|
||||
function mastodon_follow_go(event)
|
||||
{
|
||||
var data;
|
||||
|
||||
if (this.readyState === this.DONE) {
|
||||
if (this.status === 200) {
|
||||
try {
|
||||
data = JSON.parse(this.responseText);
|
||||
} catch {
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
data.links.forEach( function(e) {
|
||||
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
|
||||
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
/* Called when user click on follow button in dialog.
|
||||
* Grab the mastodon handle from the input field and request the
|
||||
* appropriate webfinger document from the users instance.
|
||||
* Response is handled by mastodon_follow_go(). */
|
||||
function mastodon_follow_lookup(event)
|
||||
{
|
||||
var handle_element = document.querySelector('input[name="mastodon-handle"]');
|
||||
var handle = handle_element.value;
|
||||
|
||||
// remove any initial @
|
||||
if(handle.charAt(0) == '@') {
|
||||
handle = handle.substring(1);
|
||||
}
|
||||
|
||||
// split into nick and host
|
||||
var uriparts = handle.split('@');
|
||||
if(uriparts.length < 2) {
|
||||
handle_element.value = '';
|
||||
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
|
||||
return;
|
||||
}
|
||||
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.addEventListener("load", mastodon_follow_go);
|
||||
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
/* Activated when icon is clicked.
|
||||
* Create the follow dialog on first run, toggle visibility on further
|
||||
* clicks. */
|
||||
function mastodon_follow_show()
|
||||
{
|
||||
if(!mastodon_follow_container) {
|
||||
mastodon_follow_create_style();
|
||||
|
||||
mastodon_follow_container = document.createElement('div');
|
||||
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
|
||||
|
||||
var mastodon_title = document.createElement('p');
|
||||
mastodon_title.setAttribute('class', 'mastodon-follow-title');
|
||||
mastodon_title.innerHTML = mastodon_follow_strings.title;
|
||||
|
||||
var mastodon_follow_handle = document.createElement('input');
|
||||
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
|
||||
mastodon_follow_handle.setAttribute('type', 'text');
|
||||
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
|
||||
|
||||
var mastodon_follow_follow = document.createElement('button');
|
||||
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
|
||||
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
|
||||
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
|
||||
|
||||
var createaccount = document.createElement('div');
|
||||
createaccount.style = "text-align: right;";
|
||||
var createaccount_a = document.createElement('a');
|
||||
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
|
||||
createaccount_a.innerHTML = mastodon_follow_strings.create;
|
||||
createaccount.appendChild(createaccount_a);
|
||||
|
||||
mastodon_follow_container.appendChild(mastodon_title);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_handle);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_follow);
|
||||
mastodon_follow_container.appendChild(createaccount);
|
||||
|
||||
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
|
||||
} else {
|
||||
mastodon_follow_container.style.display =
|
||||
mastodon_follow_container.style.display == "none" ? "block" : "none";
|
||||
}
|
||||
}
|
||||
37
mastodon-follow-light-en.svg
Normal file
37
mastodon-follow-light-en.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
viewBox="0 0 85.691597 45.014904"
|
||||
height="45.014904mm"
|
||||
width="85.691597mm">
|
||||
<rect
|
||||
ry="5.9620543"
|
||||
y="1.0440584"
|
||||
x="1.0440561"
|
||||
height="42.926792"
|
||||
width="83.603485"
|
||||
style="fill:#d9e1e8;stroke:#c6d2dc;stroke-width:2.08811116;" />
|
||||
<path
|
||||
d="m 36.173854,25.50178 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
|
||||
style="fill:#3088d4;" />
|
||||
<path
|
||||
d="m 31.724706,17.84681 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 h -3.131981 v -7.90543 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
|
||||
style="fill:#ffffff;" />
|
||||
<g style="fill:#3088d4;">
|
||||
<path
|
||||
d="m 69.506087,14.94682 c 2.06847,0 3.74388,-1.67538 3.74388,-3.74388 0,-2.06851 -1.67541,-3.74389 -3.74388,-3.74389 -2.0685,0 -3.74388,1.67538 -3.74388,3.74389 0,2.0685 1.67538,3.74388 3.74388,3.74388 z m -8.42376,-1.87193 v -2.80792 h -1.87197 v 2.80792 h -2.80792 v 1.87193 h 2.80792 v 2.80792 h 1.87197 v -2.80792 h 2.80792 v -1.87193 z m 8.42376,3.74389 c -2.49906,0 -7.48781,1.2542 -7.48781,3.74389 v 1.87196 h 14.97558 v -1.87196 c 0,-2.48969 -4.98874,-3.74389 -7.48777,-3.74389 z" />
|
||||
<path
|
||||
d="m 38.77358,37.45718 v -7.18419 h 4.805906 v 1.33717 h -3.074004 v 1.65295 h 2.792754 v 1.33224 h -2.792754 v 2.86183 z" />
|
||||
<path
|
||||
d="m 50.378807,34.01311 q 0,1.64802 -0.87829,2.59539 -0.87828,0.94736 -2.25492,0.94736 -1.386512,0 -2.269734,-0.94736 -0.878287,-0.94737 -0.878287,-2.59539 v -0.29112 q 0,-1.64802 0.873353,-2.59538 0.878287,-0.9523 2.264798,-0.9523 1.37664,0 2.25986,0.9523 0.88322,0.94736 0.88322,2.59538 z m -1.75657,-0.30098 q 0,-1.08553 -0.3454,-1.63322 -0.34539,-0.5477 -1.04111,-0.5477 -1.292761,0 -1.371708,1.92434 l -0.0049,0.55756 q 0,1.05592 0.345398,1.62335 0.35032,0.56743 1.04111,0.56743 0.65625,0 1.01151,-0.55756 0.3602,-0.5625 0.36513,-1.60361 z" />
|
||||
<path
|
||||
d="m 56.013657,36.12495 v 1.33223 h -4.74669 v -7.18419 h 1.7319 v 5.85196 z" />
|
||||
<path
|
||||
d="m 61.500487,36.12495 v 1.33223 h -4.7467 v -7.18419 h 1.7319 v 5.85196 z" />
|
||||
<path
|
||||
d="m 68.003757,34.01311 q 0,1.64802 -0.87829,2.59539 -0.87829,0.94736 -2.25493,0.94736 -1.38651,0 -2.26973,-0.94736 -0.87828,-0.94737 -0.87828,-2.59539 v -0.29112 q 0,-1.64802 0.87335,-2.59538 0.87828,-0.9523 2.26479,-0.9523 1.37664,0 2.25987,0.9523 0.88322,0.94736 0.88322,2.59538 z m -1.75658,-0.30098 q 0,-1.08553 -0.34539,-1.63322 -0.34539,-0.5477 -1.04112,-0.5477 -1.29276,0 -1.3717,1.92434 l -0.005,0.55756 q 0,1.05592 0.34539,1.62335 0.35033,0.56743 1.04112,0.56743 0.65625,0 1.01151,-0.55756 0.36019,-0.5625 0.36513,-1.60361 z" />
|
||||
<path
|
||||
d="m 76.993857,30.27299 -1.52466,7.18419 h -1.79112 l -0.96217,-4.09538 -0.94243,4.09538 h -1.79604 l -1.52467,-7.18419 h 1.7171 l 0.82401,4.49505 0.98684,-4.49505 h 1.47039 l 1.00658,4.50986 0.82401,-4.50986 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
24
mastodon-follow-light.svg
Normal file
24
mastodon-follow-light.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="57.883163mm"
|
||||
height="45.014904mm"
|
||||
viewBox="0 0 57.883163 45.014904">
|
||||
<rect
|
||||
width="56.164337"
|
||||
height="43.296078"
|
||||
x="0.85941321"
|
||||
y="0.85940945"
|
||||
ry="6.0133438"
|
||||
style="fill:#d9e1e8;stroke:#c6d2dc;stroke-width:1.71882558;" />
|
||||
<path
|
||||
d="m 36.173854,25.50177 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
|
||||
style="fill:#3088d4;" />
|
||||
<path
|
||||
d="m 31.724706,17.8468 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 H 13.744559 V 17.8468 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
|
||||
style="fill:#ffffff;" />
|
||||
<path
|
||||
d="m 43.314163,32.1437 c 1.49508,0 2.70606,-1.21095 2.70606,-2.70606 0,-1.4951 -1.21098,-2.70606 -2.70606,-2.70606 -1.495103,0 -2.706063,1.21096 -2.706063,2.70606 0,1.49511 1.21096,2.70606 2.706063,2.70606 z m -6.088655,-1.35302 v -2.02955 h -1.353051 v 2.02955 h -2.02955 v 1.35302 h 2.02955 v 2.02955 h 1.353051 V 32.1437 h 2.029552 v -1.35302 z m 6.088655,2.70607 c -1.806313,0 -5.412155,0.90652 -5.412155,2.70606 v 1.35304 h 10.824279 v -1.35304 c 0,-1.79954 -3.605834,-2.70606 -5.412124,-2.70606 z"
|
||||
style="fill:#3088d4;" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
242
mastodon-follow.js
Normal file
242
mastodon-follow.js
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
/* SPDX-License-Identifier: Zlib
|
||||
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
|
||||
|
||||
///* Light theme matching mastodon-follow-light.svg
|
||||
var mastodon_follow_settings = {
|
||||
"account": "superman@fortitude.fortress",
|
||||
"portal": "https://fortitude.fortress/users/superman/remote_follow",
|
||||
"dialog": {
|
||||
"width": "256px",
|
||||
"background": "#d9e1e8",
|
||||
"color": "#282c37",
|
||||
"title": "#282c37",
|
||||
"input": {
|
||||
"bordercolor": "#b3c3d1",
|
||||
"background": "#f9fafb",
|
||||
"color": "#000",
|
||||
"placeholder": "#c83737"
|
||||
},
|
||||
"button": {
|
||||
"background": "#2b90d9",
|
||||
"color": "#fff"
|
||||
}
|
||||
}
|
||||
};//*/
|
||||
///*
|
||||
var mastodon_follow_strings =
|
||||
{
|
||||
"title": "Enter your Mastodon handle",
|
||||
"button": "Follow",
|
||||
"create": "Create account",
|
||||
"create_url": "https://joinmastodon.org/communities",
|
||||
"error": { "handle": "Invalid handle" }
|
||||
};//*/
|
||||
/* Dark theme matching mastodon-follow-dark.svg
|
||||
var mastodon_follow_settings = {
|
||||
"account": "superman@fortitude.fortress",
|
||||
"portal": "https://fortitude.fortress/users/superman/remote_follow",
|
||||
"dialog": {
|
||||
"width": "256px",
|
||||
"background": "#282c37",
|
||||
"color": "#9baec8",
|
||||
"title": "#fff",
|
||||
"input": {
|
||||
"bordercolor": "#0a0b0e",
|
||||
"background": "#131419",
|
||||
"color": "#fff",
|
||||
"placeholder": "#c83737"
|
||||
},
|
||||
"button": {
|
||||
"background": "#2b90d9",
|
||||
"color": "#fff"
|
||||
}
|
||||
}
|
||||
};//*/
|
||||
/*
|
||||
var mastodon_follow_strings =
|
||||
{
|
||||
"title": "Tast dit Mastodon id",
|
||||
"button": "Følg",
|
||||
"create": "Opret konto",
|
||||
"create_url": "https://joinmastodon.org/communities",
|
||||
"error": { "handle": "Forkert id" }
|
||||
};//*/
|
||||
|
||||
var mastodon_follow_container = null;
|
||||
|
||||
/* Remove nojs fallback link, when JS enabled. */
|
||||
window.addEventListener("load", function(e) {
|
||||
mastodonfollow.style.cursor = "pointer";
|
||||
var a = mastodonfollow.parentNode;
|
||||
var c = a.parentNode;
|
||||
c.appendChild(mastodonfollow);
|
||||
a.remove();
|
||||
});
|
||||
|
||||
function mastodon_follow_create_style()
|
||||
{
|
||||
var style = document.createElement('style');
|
||||
var d = mastodon_follow_settings.dialog;
|
||||
style.innerHTML =
|
||||
".mastodon-follow-container {" +
|
||||
"display: block;" +
|
||||
"z-index: 1;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 5px;" +
|
||||
"background: " + d.background + ";" +
|
||||
"position: absolute;" +
|
||||
"top:110%;" +
|
||||
"left: 0;" +
|
||||
"width: " + d.width + ";" +
|
||||
'font-family: "Roboto",Roboto,sans-serif;' +
|
||||
"margin: 0 auto;" +
|
||||
"padding: 20px;" +
|
||||
"font-weight: 400;" +
|
||||
"font-size: 13px;" +
|
||||
"color: " + d.color + ";" +
|
||||
"line-height: 18px;" +
|
||||
"}" +
|
||||
".mastodon-follow-title {" +
|
||||
"text-align: center;" +
|
||||
"font-size: 18px;" +
|
||||
"font-weight: 500;" +
|
||||
"margin: 0;" +
|
||||
"color: " + d.title + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input {" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.input.background + ";" +
|
||||
"width: 100%;" +
|
||||
"box-sizing: border-box;" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.input.color + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-input::placeholder {" +
|
||||
"color: " + d.input.placeholder + ";" +
|
||||
"}" +
|
||||
".mastodon-follow-button {" +
|
||||
"display: block;" +
|
||||
"width: 100%;" +
|
||||
"border: 0;" +
|
||||
"border-radius: 4px;" +
|
||||
"margin-right: 10px;" +
|
||||
"margin-top: 20px;" +
|
||||
"padding: 10px;" +
|
||||
"background: " + d.button.background + ";" +
|
||||
"font-family: inherit;" +
|
||||
"font-weight: 500;" +
|
||||
"font-size: 18px;" +
|
||||
"color: " + d.button.color + ";" +
|
||||
"line-height: inherit;" +
|
||||
"text-align: center;" +
|
||||
"text-transform: uppercase;" +
|
||||
"box-sizing: border-box;" +
|
||||
"cursor: pointer;" +
|
||||
"}";
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/* Called when request to instance is complete.
|
||||
* Parse the JSON response and find the subscribe uri.
|
||||
* On error goes to the instances remote_follow url. */
|
||||
function mastodon_follow_go(event)
|
||||
{
|
||||
var data;
|
||||
|
||||
if (this.readyState === this.DONE) {
|
||||
if (this.status === 200) {
|
||||
try {
|
||||
data = JSON.parse(this.responseText);
|
||||
} catch {
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
data.links.forEach( function(e) {
|
||||
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
|
||||
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
window.location = mastodon_follow_settings.portal;
|
||||
return;
|
||||
}
|
||||
|
||||
/* Called when user click on follow button in dialog.
|
||||
* Grab the mastodon handle from the input field and request the
|
||||
* appropriate webfinger document from the users instance.
|
||||
* Response is handled by mastodon_follow_go(). */
|
||||
function mastodon_follow_lookup(event)
|
||||
{
|
||||
var handle_element = document.querySelector('input[name="mastodon-handle"]');
|
||||
var handle = handle_element.value;
|
||||
|
||||
// remove any initial @
|
||||
if(handle.charAt(0) == '@') {
|
||||
handle = handle.substring(1);
|
||||
}
|
||||
|
||||
// split into nick and host
|
||||
var uriparts = handle.split('@');
|
||||
if(uriparts.length < 2) {
|
||||
handle_element.value = '';
|
||||
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
|
||||
return;
|
||||
}
|
||||
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.addEventListener("load", mastodon_follow_go);
|
||||
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
/* Activated when icon is clicked.
|
||||
* Create the follow dialog on first run, toggle visibility on further
|
||||
* clicks. */
|
||||
function mastodon_follow_show()
|
||||
{
|
||||
if(!mastodon_follow_container) {
|
||||
mastodon_follow_create_style();
|
||||
|
||||
mastodon_follow_container = document.createElement('div');
|
||||
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
|
||||
|
||||
var mastodon_title = document.createElement('p');
|
||||
mastodon_title.setAttribute('class', 'mastodon-follow-title');
|
||||
mastodon_title.innerHTML = mastodon_follow_strings.title;
|
||||
|
||||
var mastodon_follow_handle = document.createElement('input');
|
||||
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
|
||||
mastodon_follow_handle.setAttribute('type', 'text');
|
||||
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
|
||||
|
||||
var mastodon_follow_follow = document.createElement('button');
|
||||
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
|
||||
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
|
||||
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
|
||||
|
||||
var createaccount = document.createElement('div');
|
||||
createaccount.style = "text-align: right;";
|
||||
var createaccount_a = document.createElement('a');
|
||||
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
|
||||
createaccount_a.innerHTML = mastodon_follow_strings.create;
|
||||
createaccount.appendChild(createaccount_a);
|
||||
|
||||
mastodon_follow_container.appendChild(mastodon_title);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_handle);
|
||||
mastodon_follow_container.appendChild(mastodon_follow_follow);
|
||||
mastodon_follow_container.appendChild(createaccount);
|
||||
|
||||
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
|
||||
} else {
|
||||
mastodon_follow_container.style.display =
|
||||
mastodon_follow_container.style.display == "none" ? "block" : "none";
|
||||
}
|
||||
}
|
||||
Reference in a new issue