smpl/mastodon-interact.js
1
0
Fork 0
Code Releases Activity

Rewrite

Browse source 
By using a lot of CSS ninja, the script has been cut from 292 to
52 lines. The generator script has been updated to use ES6
backtick template strings.
This commit is contained in:
smpl 2022-05-06 03:41:58 +02:00
parent c7b9fc5d7f
commit 1808843e9e
5 changed files with 500 additions and 652 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

655
embed/index.html
View file

@ -11,7 +11,8 @@
<title>Mastodon Interact Widget | Embed</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="">
<script id="icon-follow-template" type="text/plain"><?xml version="1.0" standalone="no"?>
<script type="text/javascript">
const icon_follow_template = color => `<?xml version="1.0" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
@ -24,7 +25,7 @@
x="0.85941321"
y="0.85940945"
ry="6.0133438"
style="fill:${color.0};stroke:${color.1};stroke-width:1.71882558;" />
style="fill:${color[0]};stroke:${color[1]};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;" />
@ -34,8 +35,11 @@
<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></script>
<script id="icon-share-template" type="text/plain"><?xml version="1.0" standalone="no"?>
</svg>`;
</script>
<script type="text/javascript">
const icon_share_template = color => `<?xml version="1.0" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="57.883163mm"
@ -43,7 +47,7 @@
viewBox="0 0 57.883163 45.014904"
version="1.1">
<rect
style="fill:${color.0};stroke:${color.1};stroke-width:1.71882558;"
style="fill:${color[0]};stroke:${color[1]};stroke-width:1.71882558;"
width="56.164337"
height="43.296078"
x="0.85941321"
@ -72,310 +76,251 @@
cy="36.044575"
r="3.5741699" />
</g>
</svg></script>
<script id="embed-follow-template" type="text/plain"><div style="display: inline-block; position: relative;">
<a href="${portal}">
<img id="mastodon-widget-follow" style="height: 32px;" src="mastodon-follow-${theme}.svg"/>
</a>
</div></script>
<script id="embed-share-template" type="text/plain"><div style="display: inline-block; position: relative;">
<a href="#">
<img id="mastodon-widget-share" style="height: 32px;" src="mastodon-share-${theme}.svg"/>
</a>
</div></script>
<script id="script-template" type="text/plain">/* SPDX-License-Identifier: Zlib
</svg>`;
</script>
<script type="text/javascript">
const embed_follow_template = (settings, lang) => `<div class="ma-box">
<label for="ma-flw-toggle">
<img height="32px" src="mastodon-follow-${settings.theme}.svg" />
</label>
<input type="radio" name="ma-flw-control" id="ma-flw-toggle" class="ma-toggle" />
<input type="radio" name="ma-flw-control" class="ma-underlay" checked />
<div class="ma-flw ma-dialog ma-theme-${settings.theme}">
<form id="ma-flw-form">
<p class="ma-title ma-theme-light">${lang.follow.title}</p>
<input type="text" class="ma-input ma-theme-${settings.theme}">
<button class="ma-button">${lang.follow.button}</button>
<div class="ma-create ma-theme-${settings.theme}">
<a href="${lang.common.create_url}">${lang.common.create}</a>
</div>
</form>
</div>
</div>`;
</script>
<script type="text/javascript">
const embed_share_template = (settings, lang) => `<div class="ma-box">
<label for="ma-sha-toggle">
<img height="32px" src="mastodon-share-${settings.theme}.svg" />
</label>
<input type="radio" name="ma-sha-control" id="ma-sha-toggle" class="ma-toggle" />
<input type="radio" name="ma-sha-control" class="ma-underlay" checked />
<div class="ma-sha ma-dialog ma-theme-${settings.theme}">
<form id="ma-sha-form">
<p class="ma-title ma-theme-${settings.theme}">${lang.share.title}</p>
<input type="text" class="ma-input ma-theme-${settings.theme}">
<button class="ma-button" type="submit">${lang.share.button}</button>
<div class="ma-create ma-theme-${settings.theme}">
<a href="${lang.common.create_url}">${lang.common.create}</a>
</div>
</form>
</div>
</div>`;
</script>
<script type="text/javascript">
const script_template = (settings) => `/* SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
const MastodonInteract = function() {
settings = {
"account": "${account}",
"portal": "${portal}",
"width": "${width}",
"theme": "${theme}"
};
strings = {
"share": {
"title": "${share.title}",
"button": "${share.button}",
"text": window.location
},
"follow": {
"title": "${follow.title}",
"button": "${follow.button}"
},
"common": {
"create": "${common.create}",
"create_url": "${common.create_url}",
"error": {
"handle": "${common.error.handle}"
}
}
};
var widget = {
style: null,
dialogs: {
follow: null,
share: null
},
buttons: {
follow: null,
share: null
}
};
var CreateStyle = function() {
widget.style = document.createElement('style');
widget.style.id = "mastodon-widget-style";
widget.style.innerHTML =
".mastodon-widget-container {" +
// "display: block;" +
"z-index: 1;" +
"border: 0;" +
"border-radius: 5px;" +
"position: absolute;" +
"top:110%;" +
"left: 0;" +
"width: " + settings.width + ";" +
'font-family: "Roboto",Roboto,sans-serif;' +
"margin: 0 auto;" +
"padding: 20px;" +
"font-weight: 400;" +
"font-size: 13px;" +
"line-height: 18px;" +
"}" +
".mastodon-widget-container.light {" +
"background: #d9e1e8;" +
"color: #282c37;" +
"}" +
".mastodon-widget-container.dark {" +
"background: #282c37;" +
"color: #9baec8;" +
"}" +
".mastodon-widget-title {" +
"text-align: center;" +
"font-size: 18px;" +
"font-weight: 500;" +
"margin: 0;" +
"}" +
".mastodon-widget-title.light {" +
"color: #282c37;" +
"}" +
".mastodon-widget-title.dark {" +
"color: #fff;" +
"}" +
".mastodon-widget-input {" +
"border: 0;" +
"border-radius: 4px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"width: 100%;" +
"box-sizing: border-box;" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"}" +
".mastodon-widget-input.light {" +
"background: #f9fafb;" +
"color: #000;" +
"}" +
".mastodon-widget-input.dark {" +
"background: #131419;" +
"color: #fff;" +
"}" +
".mastodon-widget-input::placeholder {" +
"color: #c83737;" +
"}" +
".mastodon-widget-button {" +
"display: block;" +
"width: 100%;" +
"border: 0;" +
"border-radius: 4px;" +
"margin-right: 10px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: #2b90d9;" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: #fff;" +
"line-height: inherit;" +
"text-align: center;" +
"text-transform: uppercase;" +
"box-sizing: border-box;" +
"cursor: pointer;" +
"}";
document.head.appendChild(widget.style);
};
var CreateDialog = function(o) {
var t;
if(o === widget.buttons.follow)
t = strings.follow;
else if(o === widget.buttons.share)
t = strings.share;
obj = document.createElement('div');
obj.setAttribute('class', 'mastodon-widget-container ' + settings.theme);
var title = document.createElement('p');
title.setAttribute('class', 'mastodon-widget-title ' + settings.theme);
title.innerHTML = t.title;
var input = document.createElement('input');
input.setAttribute('name', 'mastodon-handle');
input.setAttribute('type', 'text');
input.setAttribute('class', 'mastodon-widget-input ' + settings.theme);
var button = document.createElement('button');
button.innerHTML = t.button;
button.setAttribute('class', 'mastodon-widget-button');
button.onclick = cbAction;
var create_div = document.createElement('div');
create_div.style = "text-align: right;";
var create_a = document.createElement('a');
create_a.setAttribute('href', strings.common.create_url);
create_a.innerHTML = strings.common.create;
create_div.appendChild(create_a);
obj.appendChild(title);
obj.appendChild(input);
obj.appendChild(button);
obj.appendChild(create_div);
return obj;
};
var cbCreateDialog = function(e) {
var dialog;
if(widget.style == null)
CreateStyle();
dialog = CreateDialog(e.target);
e.target.parentElement.appendChild(dialog);
e.target.onclick = cbToggle;
if(widget.buttons.share && e.target === widget.buttons.share) {
widget.dialogs.share = dialog;
} else if(widget.buttons.follow && e.target === widget.buttons.follow) {
widget.dialogs.follow = dialog;
}
window.addEventListener('click', cbHide, true);
};
var cbHide = function(e) {
if(widget.dialogs.follow) {
if( e.target === widget.buttons.follow ||
e.target === widget.dialogs.follow ||
e.target.parentNode === widget.dialogs.follow ) {
return;
}
widget.dialogs.follow.style.display = 'none';
}
if(widget.dialogs.share) {
if( e.target === widget.buttons.share ||
e.target === widget.dialogs.share ||
e.target.parentNode === widget.dialogs.share ) {
return;
}
widget.dialogs.share.style.display = 'none';
}
window.removeEventListener('click', cbHide, true);
}
var cbToggle = function(e) {
if(e.target === widget.buttons.follow) {
if(widget.dialogs.follow.style.display === 'none') {
widget.dialogs.follow.style.display = '';
if(widget.dialogs.share)
widget.dialogs.share.style.display = 'none';
window.addEventListener('click', cbHide, true);
} else {
widget.dialogs.follow.style.display = 'none';
}
} else if(e.target === widget.buttons.share) {
if(widget.dialogs.share.style.display === 'none') {
widget.dialogs.share.style.display = '';
if(widget.dialogs.follow)
widget.dialogs.follow.style.display = 'none';
window.addEventListener('click', cbHide, true);
} else {
widget.dialogs.share.style.display = 'none';
}
}
};
var cbAction = function(e) {
var input = e.target.parentNode.querySelector('input[name="mastodon-handle"]');
let MastodonInteract = {
sharetext: null,
account: null,
dialogs: {
follow: null,
share: null,
},
cbAction: function(e) {
var input = e.target.querySelector('input');
var handle = input.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) {
var parts = handle.split('@');
if(parts.length < 2) {
input.value = '';
input.setAttribute('placeholder', strings.common.error.handle);
input.setAttribute('placeholder', "Invalid handle");
return;
}
if(e.target.parentNode === widget.dialogs.follow) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("loadend", cbQueryResponse);
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
oReq.send();
} else if(e.target.parentNode === widget.dialogs.share) {
window.location = "https://" + uriparts[1] + "/share?text=" + encodeURIComponent(strings.share.text);
if(e.target === this.dialogs.follow) {
window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Ffollow%3Furi%3Dacct%3A" + encodeURIComponent(this.account);
} else if(e.target === this.dialogs.share) {
if(this.sharetext === null)
this.sharetext = window.location;
window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Fshare%3Ftext%3D" + encodeURIComponent(this.sharetext);
}
};
// follow only
var cbQueryResponse = function(e) {
var data;
console.log(e.type);
if (e.readyState === e.DONE) {
if (e.status === 200) {
try {
data = JSON.parse(e.responseText);
} catch {
window.location = settings.portal;
return;
}
},
init: function(account) {
var self = this;
data.links.forEach( function(l) {
if(l.rel === "http://ostatus.org/schema/1.0/subscribe") {
window.location = l.template.replace('{uri}', encodeURIComponent(settings.account));
return;
}
});
window.addEventListener("DOMContentLoaded", function(e) {
self.dialogs.follow = document.getElementById('ma-flw-form');
if(self.dialogs.follow) {
self.dialogs.follow.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
}
}
window.location = settings.portal;
return;
};
widget.buttons.follow = document.getElementById('mastodon-widget-follow');
widget.buttons.share = document.getElementById('mastodon-widget-share');
if(widget.buttons.follow) {
widget.buttons.follow.onclick = cbCreateDialog;
widget.buttons.follow.style.cursor = "pointer";
let a = widget.buttons.follow.parentNode;
let div = a.parentNode;
div.appendChild(widget.buttons.follow);
a.remove();
self.dialogs.share = document.getElementById('ma-sha-form');
if(self.dialogs.share) {
self.dialogs.share.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
}
});
}
if(widget.buttons.share) {
widget.buttons.share.onclick = cbCreateDialog;
widget.buttons.share.style.cursor = "pointer";
let a = widget.buttons.share.parentNode;
let div = a.parentNode;
div.appendChild(widget.buttons.share);
a.remove();
}
return this;
};
var mastodon_widget;
window.addEventListener("load", function(e) {
mastodon_widget = MastodonInteract();
});</script>
MastodonInteract.account = "${settings.account}";
MastodonInteract.init();`;
</script>
<script type="text/javascript">
const style_template = (settings) => `/* ----- DIALOG STYLE BEGIN ----- */
/* position the toggle radio control above the underlay */
.ma-toggle {
position: relative;
z-index: 200;
display: none;
}
/* position dialog above the underlay and don't display it */
.ma-dialog {
z-index: 200;
position: absolute;
display: none;
}
/* position the underlay radio control below the toggle radio
* control and the dialog, make it transparent and fill the
* view */
.ma-underlay {
z-index: 100;
opacity: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
/* when the underlay radio control is selected don't display
* it */
.ma-underlay:checked {
display: none;
}
/* when toggle radio control is selected move it below the
* underlay, so that another click on it will uncheck it */
.ma-toggle:checked {
z-index: 0;
}
.ma-box {
position: relative;
display: inline-block;
}
/* when the toggle radio control is selected display the
* dialog */
#ma-flw-toggle:checked ~ .ma-flw.ma-dialog {
display: block;
}
/* when the toggle radio control is selected display the
* dialog */
#ma-sha-toggle:checked ~ .ma-sha.ma-dialog {
display: block;
}
/* ----- DIALOG STYLE END ----- */
/* ----- VISUAL STYLE START ----- */
.ma-dialog {
border: 0;
border-radius: 5px;
width: ${settings.width};
font-family: "Roboto",Roboto,sans-serif;
margin: 2px auto;
padding: 20px;
font-weight: 400;
font-size: 13px;
line-height: 18px;
}
.ma-dialog.ma-theme-light {
background: #d9e1e8;
color: #282c37;
}
.ma-dialog.ma-theme-dark {
background: #282c37;
color: #9baec8;
}
.ma-title {
text-align: center;
font-size: 18px;
font-weight: 500;
margin: 0;
}
.ma-title.ma-theme-light {
color: #282c37;
}
.ma-title.ma-theme-dark {
color: #fff;
}
.ma-input {
border: 0;
border-radius: 4px;
margin-top: 20px;
padding: 10px;
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-weight: 500;
font-size: 18px;
}
.ma-input.ma-theme-light {
background: #f9fafb;
color: #000;
}
.ma-input.ma-theme-dark {
background: #131419;
color: #fff;
}
.ma-input::placeholder {
color: #c83737;
}
.ma-button {
display: block;
width: 100%;
border: 0;
border-radius: 4px;
margin-right: 10px;
margin-top: 20px;
padding: 10px;
background: #2b90d9;
font-family: inherit;
font-weight: 500;
font-size: 18px;
color: #fff;
line-height: inherit;
text-align: center;
text-transform: uppercase;
box-sizing: border-box;
cursor: pointer;
}
.ma-create {
text-align: right;
}
.ma-create a {
text-decoration: none;
}
.ma-create.ma-theme-light a:link,
.ma-create.ma-theme-light a:active,
.ma-create.ma-theme-light a:visited {
color: #282c37;
}
.ma-create.ma-theme-dark a:link,
.ma-create.ma-theme-dark a:active,
.ma-create.ma-theme-dark a:visited {
color: #9baec8;
}
/* ----- VISUAL STYLE END ----- */
`;
</script>
<style>
body {
max-width: 800px;
@ -438,19 +383,20 @@ window.addEventListener("load", function(e) {
min-width: 200px;
font-family: inherit;
}
#embed-follow-output, #embed-share-output {
height: 200px;
}
#script-output {
height: 256px;
}
#style-output {
height: 256px;
}
</style>
<script>
var defaults = {
settings: {
account: 'user@localhost',
portal: '#',
width: '256px',
theme: 'light'
},
@ -493,63 +439,11 @@ window.addEventListener("load", function(e) {
};
var settings;
var lang;
var elements;
function replacer(match)
{
switch(match) {
case '${account}': {
return settings.account;
}
case '${portal}': {
return settings.portal;
}
case '${width}': {
return settings.width;
}
case '${theme}': {
return settings.theme;
}
case '${share.title}': {
return lang.share.title;
}
case '${share.button}': {
return lang.share.button;
}
case '${follow.title}': {
return lang.follow.title;
}
case '${follow.button}': {
return lang.follow.button;
}
case '${common.create}': {
return lang.common.create;
}
case '${common.create_url}': {
return lang.common.create_url;
}
case '${common.error.handle}': {
return lang.common.error.handle;
}
}
}
function svg_replace(match)
{
var theme = {
dark: ['#282c37', '#1b1e25'],
light: ['#d9e1e8', '#c6d2dc']
};
switch(match) {
case '${color.0}': {
return theme[settings.theme][0];
}
case '${color.1}': {
return theme[settings.theme][1];
}
}
}
var theme = {
dark: ['#282c37', '#1b1e25'],
light: ['#d9e1e8', '#c6d2dc']
};
function generate()
{
@ -599,31 +493,27 @@ window.addEventListener("load", function(e) {
}
}
var tmpl = document.getElementById('script-template');
var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, replacer);
var embed = script_template(settings);
var script_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'}));
document.getElementById('script-download').setAttribute('href', script_file);
document.getElementById('script-download').setAttribute('download', 'mastodon-interact.js');
document.getElementById('script-output').innerHTML = embed;
var tmpl = document.getElementById('embed-follow-template');
var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, replacer);
document.getElementById('embed-follow-output').innerHTML = embed;
var embed = style_template(settings);
var style_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'}));
document.getElementById('style-download').setAttribute('href', style_file);
document.getElementById('style-download').setAttribute('download', 'mastodon-interact.css');
document.getElementById('style-output').innerHTML = embed;
var tmpl = document.getElementById('icon-follow-template');
var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, svg_replace);
var icon_follow_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'}));
document.getElementById('embed-follow-output').innerHTML = embed_follow_template(settings, lang);
var icon_follow_file = URL.createObjectURL(new Blob(Array.from(icon_follow_template(theme[settings.theme])), {type: 'octet/stream'}));
document.getElementById('follow-icon-download').setAttribute('href', icon_follow_file);
document.getElementById('follow-icon-download').setAttribute('download', 'mastodon-follow-' + settings.theme + '.svg');
document.getElementById('embed-share-output').innerHTML = embed_share_template(settings, lang);
var tmpl = document.getElementById('embed-share-template');
var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, replacer);
document.getElementById('embed-share-output').innerHTML = embed;
var tmpl = document.getElementById('icon-share-template');
var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, svg_replace);
var icon_share_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'}));
var icon_share_file = URL.createObjectURL(new Blob(Array.from(icon_share_template(theme[settings.theme])), {type: 'octet/stream'}));
document.getElementById('share-icon-download').setAttribute('href', icon_share_file);
document.getElementById('share-icon-download').setAttribute('download', 'mastodon-share-' + settings.theme + '.svg');
}
@ -657,20 +547,30 @@ window.addEventListener("load", function(e) {
<h1>Mastodon Interact embedding</h1>
<p>Enter your Mastodon account, pick your settings and click on
generate. This page will generate a script to be embedded in
the <tt>&lt;head&gt;</tt> section of your page and two HTML
snippets you can insert where you want each button on your
page. Also remember to download the icon files for the buttons
unless you supply your own.</p>
generate. This page will generate a script and a style sheet
you need to insert in the <tt>&lt;head&gt;</tt> section of your
page.</p>
<p>You can easily tweak the script after download. The settings
and strings are in the beginning of the script. In the HTML
snippets you can modify the size of the button in the
<tt>style</tt> attribute of the <tt>&lt;img&gt;</tt> tag, which
is set to <tt>height: 32px</tt> and change the <tt>src</tt>
attribute to adjust the path to the button image. You can also
adjust the fallback links, but you can't remove the
<tt>&lt;a&gt;</tt> tags.</p>
<pre>&lt;head&gt;
...
&lt;link rel="stylesheet" type="text/css" href="mastodon-interact.css"&gt;
&lt;script type="application/javascript" src="mastodon-interact.js"&gt;&lt;/script&gt;
&lt;/head&gt;</pre>
<p>You need to make sure the paths are correct in the
<tt>href</tt> and <tt>src</tt> attributes. Your account is
embedded in the script and can be changed by assigning a new
account to <tt>MastodonInteract.account</tt>. You can also
change the text for the share button with
<tt>MastodonInteract.sharetext</tt>.</p>
<p>The two HTML snippets need to be copy pasted to the part of
your page where you want to insert the buttons. Make sure that
the paths to the icons are correct and point to where you
uploaded the generated icons.</p>
<p>This generator page is entirely selfcontained and can be
download to you computer.</p>
</div>
<table>
<tr>
@ -739,6 +639,9 @@ window.addEventListener("load", function(e) {
<h2>Script</h2>
<div><a id="script-download" href="#">Download script</a></div>
<textarea id="script-output"></textarea>
<h2>Style</h2>
<div><a id="style-download" href="#">Download style</a></div>
<textarea id="style-output"></textarea>
<h2>Follow Embed</h2>
<div><a id="follow-icon-download" href="#">Download icon</a></div>
<textarea id="embed-follow-output"></textarea>

17
mastodon-follow.html Normal file
View file

@ -0,0 +1,17 @@
<div class="ma-box">
<label for="ma-flw-toggle">
<img height="32px" src="mastodon-follow-light.svg" />
</label>
<input type="radio" name="ma-flw-control" id="ma-flw-toggle" class="ma-toggle" />
<input type="radio" name="ma-flw-control" class="ma-underlay" checked />
<div class="ma-flw ma-dialog ma-theme-light">
<form id="ma-flw-form">
<p class="ma-title ma-theme-light">Enter your Mastodon handle</p>
<input type="text" class="ma-input ma-theme-light">
<button class="ma-button">Follow</button>
<div class="ma-create ma-theme-light">
<a href="https://joinmastodon.org/communities">Create account</a>
</div>
</form>
</div>
</div>

151
mastodon-interact.css Normal file
View file

@ -0,0 +1,151 @@
/* SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
/* ----- DIALOG STYLE BEGIN ----- */
/* position the toggle radio control above the underlay */
.ma-toggle {
position: relative;
z-index: 200;
display: none;
}
/* position dialog above the underlay and don't display it */
.ma-dialog {
z-index: 200;
position: absolute;
display: none;
}
/* position the underlay radio control below the toggle radio
* control and the dialog, make it transparent and fill the
* view */
.ma-underlay {
z-index: 100;
opacity: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
/* when the underlay radio control is selected don't display
* it */
.ma-underlay:checked {
display: none;
}
/* when toggle radio control is selected move it below the
* underlay, so that another click on it will uncheck it */
.ma-toggle:checked {
z-index: 0;
}
.ma-box {
position: relative;
display: inline-block;
}
/* when the toggle radio control is selected display the
* dialog */
#ma-flw-toggle:checked ~ .ma-flw.ma-dialog {
display: block;
}
/* when the toggle radio control is selected display the
* dialog */
#ma-sha-toggle:checked ~ .ma-sha.ma-dialog {
display: block;
}
/* ----- DIALOG STYLE END ----- */
/* ----- VISUAL STYLE START ----- */
.ma-dialog {
border: 0;
border-radius: 5px;
width: 256px;
font-family: "Roboto",Roboto,sans-serif;
margin: 2px auto;
padding: 20px;
font-weight: 400;
font-size: 13px;
line-height: 18px;
}
.ma-dialog.ma-theme-light {
background: #d9e1e8;
color: #282c37;
}
.ma-dialog.ma-theme-dark {
background: #282c37;
color: #9baec8;
}
.ma-title {
text-align: center;
font-size: 18px;
font-weight: 500;
margin: 0;
}
.ma-title.ma-theme-light {
color: #282c37;
}
.ma-title.ma-theme-dark {
color: #fff;
}
.ma-input {
border: 0;
border-radius: 4px;
margin-top: 20px;
padding: 10px;
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-weight: 500;
font-size: 18px;
}
.ma-input.ma-theme-light {
background: #f9fafb;
color: #000;
}
.ma-input.ma-theme-dark {
background: #131419;
color: #fff;
}
.ma-input::placeholder {
color: #c83737;
}
.ma-button {
display: block;
width: 100%;
border: 0;
border-radius: 4px;
margin-right: 10px;
margin-top: 20px;
padding: 10px;
background: #2b90d9;
font-family: inherit;
font-weight: 500;
font-size: 18px;
color: #fff;
line-height: inherit;
text-align: center;
text-transform: uppercase;
box-sizing: border-box;
cursor: pointer;
}
.ma-create {
text-align: right;
}
.ma-create a {
text-decoration: none;
}
.ma-create.ma-theme-light a:link,
.ma-create.ma-theme-light a:active,
.ma-create.ma-theme-light a:visited {
color: #282c37;
}
.ma-create.ma-theme-dark a:link,
.ma-create.ma-theme-dark a:active,
.ma-create.ma-theme-dark a:visited {
color: #9baec8;
}
/* ----- VISUAL STYLE END ----- */

304
mastodon-interact.js
View file

@ -1,292 +1,52 @@
/* SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
const MastodonInteract = function() {
settings = {
"account": "superman@localhost",
"portal": "https://localhost/users/superman/remote_follow",
"width": "256px",
"theme": "light"
};
strings = {
"share": {
"title": "Enter your Mastodon handle",
"button": "Share",
"text": window.location
},
"follow": {
"title": "Enter your Mastodon handle",
"button": "Follow"
},
"common": {
"create": "Create account",
"create_url": "https://joinmastodon.org/communities",
"error": {
"handle": "Invalid handle"
}
}
};
var widget = {
style: null,
dialogs: {
follow: null,
share: null
},
buttons: {
follow: null,
share: null
}
};
var CreateStyle = function() {
widget.style = document.createElement('style');
widget.style.id = "mastodon-widget-style";
widget.style.innerHTML =
".mastodon-widget-container {" +
// "display: block;" +
"z-index: 1;" +
"border: 0;" +
"border-radius: 5px;" +
"position: absolute;" +
"top:110%;" +
"left: 0;" +
"width: " + settings.width + ";" +
'font-family: "Roboto",Roboto,sans-serif;' +
"margin: 0 auto;" +
"padding: 20px;" +
"font-weight: 400;" +
"font-size: 13px;" +
"line-height: 18px;" +
"}" +
".mastodon-widget-container.light {" +
"background: #d9e1e8;" +
"color: #282c37;" +
"}" +
".mastodon-widget-container.dark {" +
"background: #282c37;" +
"color: #9baec8;" +
"}" +
".mastodon-widget-title {" +
"text-align: center;" +
"font-size: 18px;" +
"font-weight: 500;" +
"margin: 0;" +
"}" +
".mastodon-widget-title.light {" +
"color: #282c37;" +
"}" +
".mastodon-widget-title.dark {" +
"color: #fff;" +
"}" +
".mastodon-widget-input {" +
"border: 0;" +
"border-radius: 4px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"width: 100%;" +
"box-sizing: border-box;" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"}" +
".mastodon-widget-input.light {" +
"background: #f9fafb;" +
"color: #000;" +
"}" +
".mastodon-widget-input.dark {" +
"background: #131419;" +
"color: #fff;" +
"}" +
".mastodon-widget-input::placeholder {" +
"color: #c83737;" +
"}" +
".mastodon-widget-button {" +
"display: block;" +
"width: 100%;" +
"border: 0;" +
"border-radius: 4px;" +
"margin-right: 10px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: #2b90d9;" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: #fff;" +
"line-height: inherit;" +
"text-align: center;" +
"text-transform: uppercase;" +
"box-sizing: border-box;" +
"cursor: pointer;" +
"}";
document.head.appendChild(widget.style);
};
var CreateDialog = function(o) {
var t;
if(o === widget.buttons.follow)
t = strings.follow;
else if(o === widget.buttons.share)
t = strings.share;
obj = document.createElement('div');
obj.setAttribute('class', 'mastodon-widget-container ' + settings.theme);
var title = document.createElement('p');
title.setAttribute('class', 'mastodon-widget-title ' + settings.theme);
title.innerHTML = t.title;
var input = document.createElement('input');
input.setAttribute('name', 'mastodon-handle');
input.setAttribute('type', 'text');
input.setAttribute('class', 'mastodon-widget-input ' + settings.theme);
var button = document.createElement('button');
button.innerHTML = t.button;
button.setAttribute('class', 'mastodon-widget-button');
button.onclick = cbAction;
var create_div = document.createElement('div');
create_div.style = "text-align: right;";
var create_a = document.createElement('a');
create_a.setAttribute('href', strings.common.create_url);
create_a.innerHTML = strings.common.create;
create_div.appendChild(create_a);
obj.appendChild(title);
obj.appendChild(input);
obj.appendChild(button);
obj.appendChild(create_div);
return obj;
};
var cbCreateDialog = function(e) {
var dialog;
if(widget.style == null)
CreateStyle();
dialog = CreateDialog(e.target);
e.target.parentElement.appendChild(dialog);
e.target.onclick = cbToggle;
if(widget.buttons.share && e.target === widget.buttons.share) {
widget.dialogs.share = dialog;
} else if(widget.buttons.follow && e.target === widget.buttons.follow) {
widget.dialogs.follow = dialog;
}
window.addEventListener('click', cbHide, true);
};
var cbHide = function(e) {
if(widget.dialogs.follow) {
if( e.target === widget.buttons.follow ||
e.target === widget.dialogs.follow ||
e.target.parentNode === widget.dialogs.follow ) {
return;
}
widget.dialogs.follow.style.display = 'none';
}
if(widget.dialogs.share) {
if( e.target === widget.buttons.share ||
e.target === widget.dialogs.share ||
e.target.parentNode === widget.dialogs.share ) {
return;
}
widget.dialogs.share.style.display = 'none';
}
window.removeEventListener('click', cbHide, true);
}
var cbToggle = function(e) {
if(e.target === widget.buttons.follow) {
if(widget.dialogs.follow.style.display === 'none') {
widget.dialogs.follow.style.display = '';
if(widget.dialogs.share)
widget.dialogs.share.style.display = 'none';
window.addEventListener('click', cbHide, true);
} else {
widget.dialogs.follow.style.display = 'none';
}
} else if(e.target === widget.buttons.share) {
if(widget.dialogs.share.style.display === 'none') {
widget.dialogs.share.style.display = '';
if(widget.dialogs.follow)
widget.dialogs.follow.style.display = 'none';
window.addEventListener('click', cbHide, true);
} else {
widget.dialogs.share.style.display = 'none';
}
}
};
var cbAction = function(e) {
var input = e.target.parentNode.querySelector('input[name="mastodon-handle"]');
let MastodonInteract = {
sharetext: null,
account: null,
dialogs: {
follow: null,
share: null,
},
cbAction: function(e) {
var input = e.target.querySelector('input');
var handle = input.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) {
var parts = handle.split('@');
if(parts.length < 2) {
input.value = '';
input.setAttribute('placeholder', strings.common.error.handle);
input.setAttribute('placeholder', "Invalid handle");
return;
}
if(e.target.parentNode === widget.dialogs.follow) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("loadend", cbQueryResponse);
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
oReq.send();
} else if(e.target.parentNode === widget.dialogs.share) {
window.location = "https://" + uriparts[1] + "/share?text=" + encodeURIComponent(strings.share.text);
if(e.target === this.dialogs.follow) {
window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Ffollow%3Furi%3Dacct%3A" + encodeURIComponent(this.account);
} else if(e.target === this.dialogs.share) {
if(this.sharetext === null)
this.sharetext = window.location;
window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Fshare%3Ftext%3D" + encodeURIComponent(this.sharetext);
}
};
// follow only
var cbQueryResponse = function(e) {
var data;
if (e.readyState === e.DONE) {
if (e.status === 200) {
try {
data = JSON.parse(e.responseText);
} catch {
window.location = settings.portal;
return;
}
},
init: function(account) {
var self = this;
data.links.forEach( function(l) {
if(l.rel === "http://ostatus.org/schema/1.0/subscribe") {
window.location = l.template.replace('{uri}', encodeURIComponent(settings.account));
return;
}
});
window.addEventListener("DOMContentLoaded", function(e) {
self.dialogs.follow = document.getElementById('ma-flw-form');
if(self.dialogs.follow) {
self.dialogs.follow.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
}
}
window.location = settings.portal;
return;
};
widget.buttons.follow = document.getElementById('mastodon-widget-follow');
widget.buttons.share = document.getElementById('mastodon-widget-share');
if(widget.buttons.follow) {
widget.buttons.follow.onclick = cbCreateDialog;
widget.buttons.follow.style.cursor = "pointer";
let a = widget.buttons.follow.parentNode;
let div = a.parentNode;
div.appendChild(widget.buttons.follow);
a.remove();
self.dialogs.share = document.getElementById('ma-sha-form');
if(self.dialogs.share) {
self.dialogs.share.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
}
});
}
if(widget.buttons.share) {
widget.buttons.share.onclick = cbCreateDialog;
widget.buttons.share.style.cursor = "pointer";
let a = widget.buttons.share.parentNode;
let div = a.parentNode;
div.appendChild(widget.buttons.share);
a.remove();
}
return this;
};
var mastodon_widget;
window.addEventListener("load", function(e) {
mastodon_widget = MastodonInteract();
});
MastodonInteract.init();
MastodonInteract.account = "smpl@norrebro.space";

17
mastodon-share.html Normal file
View file

@ -0,0 +1,17 @@
<div class="ma-box">
<label for="ma-sha-toggle">
<img height="32px" src="mastodon-share-light.svg" />
</label>
<input type="radio" name="ma-sha-control" id="ma-sha-toggle" class="ma-toggle" />
<input type="radio" name="ma-sha-control" class="ma-underlay" checked />
<div class="ma-sha ma-dialog ma-theme-light">
<form id="ma-sha-form">
<p class="ma-title ma-theme-light">Enter your Mastodon handle</p>
<input type="text" class="ma-input ma-theme-light">
<button class="ma-button" type="submit">Share</button>
<div class="ma-create ma-theme-light">
<a href="https://joinmastodon.org/communities">Create account</a>
</div>
</form>
</div>
</div>