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

633
embed/index.html
View file

@ -11,7 +11,8 @@
<title>Mastodon Interact Widget | Embed</title> <title>Mastodon Interact Widget | Embed</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href=""> <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
version="1.1" version="1.1"
@ -24,7 +25,7 @@
x="0.85941321" x="0.85941321"
y="0.85940945" y="0.85940945"
ry="6.0133438" 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 <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" 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;" /> style="fill:#3088d4;" />
@ -34,8 +35,11 @@
<path <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" 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;" /> style="fill:#3088d4;" />
</svg></script> </svg>`;
<script id="icon-share-template" type="text/plain"><?xml version="1.0" standalone="no"?> </script>
<script type="text/javascript">
const icon_share_template = color => `<?xml version="1.0" standalone="no"?>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="57.883163mm" width="57.883163mm"
@ -43,7 +47,7 @@
viewBox="0 0 57.883163 45.014904" viewBox="0 0 57.883163 45.014904"
version="1.1"> version="1.1">
<rect <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" width="56.164337"
height="43.296078" height="43.296078"
x="0.85941321" x="0.85941321"
@ -72,310 +76,251 @@
cy="36.044575" cy="36.044575"
r="3.5741699" /> r="3.5741699" />
</g> </g>
</svg></script> </svg>`;
<script id="embed-follow-template" type="text/plain"><div style="display: inline-block; position: relative;"> </script>
<a href="${portal}"> <script type="text/javascript">
<img id="mastodon-widget-follow" style="height: 32px;" src="mastodon-follow-${theme}.svg"/> const embed_follow_template = (settings, lang) => `<div class="ma-box">
</a> <label for="ma-flw-toggle">
</div></script> <img height="32px" src="mastodon-follow-${settings.theme}.svg" />
<script id="embed-share-template" type="text/plain"><div style="display: inline-block; position: relative;"> </label>
<a href="#"> <input type="radio" name="ma-flw-control" id="ma-flw-toggle" class="ma-toggle" />
<img id="mastodon-widget-share" style="height: 32px;" src="mastodon-share-${theme}.svg"/> <input type="radio" name="ma-flw-control" class="ma-underlay" checked />
</a> <div class="ma-flw ma-dialog ma-theme-${settings.theme}">
</div></script> <form id="ma-flw-form">
<script id="script-template" type="text/plain">/* SPDX-License-Identifier: Zlib <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> */ Copyright (C) 2022 smpl <smpl@slamkode.ml> */
const MastodonInteract = function() { let MastodonInteract = {
settings = { sharetext: null,
"account": "${account}", account: null,
"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: { dialogs: {
follow: null, follow: null,
share: null share: null,
}, },
buttons: { cbAction: function(e) {
follow: null, var input = e.target.querySelector('input');
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"]');
var handle = input.value; var handle = input.value;
// remove any initial @
if(handle.charAt(0) == '@') { if(handle.charAt(0) == '@') {
handle = handle.substring(1); handle = handle.substring(1);
} }
// split into nick and host var parts = handle.split('@');
var uriparts = handle.split('@'); if(parts.length < 2) {
if(uriparts.length < 2) {
input.value = ''; input.value = '';
input.setAttribute('placeholder', strings.common.error.handle); input.setAttribute('placeholder', "Invalid handle");
return; return;
} }
if(e.target.parentNode === widget.dialogs.follow) { if(e.target === this.dialogs.follow) {
var oReq = new XMLHttpRequest(); window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Ffollow%3Furi%3Dacct%3A" + encodeURIComponent(this.account);
oReq.addEventListener("loadend", cbQueryResponse); } else if(e.target === this.dialogs.share) {
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle)); if(this.sharetext === null)
oReq.send(); this.sharetext = window.location;
} else if(e.target.parentNode === widget.dialogs.share) { window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Fshare%3Ftext%3D" + encodeURIComponent(this.sharetext);
window.location = "https://" + uriparts[1] + "/share?text=" + encodeURIComponent(strings.share.text);
} }
}; },
// follow only init: function(account) {
var cbQueryResponse = function(e) { var self = this;
var data;
console.log(e.type); window.addEventListener("DOMContentLoaded", function(e) {
if (e.readyState === e.DONE) { self.dialogs.follow = document.getElementById('ma-flw-form');
if (e.status === 200) { if(self.dialogs.follow) {
try { self.dialogs.follow.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
data = JSON.parse(e.responseText);
} catch {
window.location = settings.portal;
return;
} }
data.links.forEach( function(l) { self.dialogs.share = document.getElementById('ma-sha-form');
if(l.rel === "http://ostatus.org/schema/1.0/subscribe") { if(self.dialogs.share) {
window.location = l.template.replace('{uri}', encodeURIComponent(settings.account)); self.dialogs.share.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
return;
} }
}); });
} }
}
window.location = settings.portal;
return;
}; };
widget.buttons.follow = document.getElementById('mastodon-widget-follow'); MastodonInteract.account = "${settings.account}";
widget.buttons.share = document.getElementById('mastodon-widget-share'); MastodonInteract.init();`;
</script>
if(widget.buttons.follow) { <script type="text/javascript">
widget.buttons.follow.onclick = cbCreateDialog; const style_template = (settings) => `/* ----- DIALOG STYLE BEGIN ----- */
widget.buttons.follow.style.cursor = "pointer"; /* position the toggle radio control above the underlay */
let a = widget.buttons.follow.parentNode; .ma-toggle {
let div = a.parentNode; position: relative;
div.appendChild(widget.buttons.follow); z-index: 200;
a.remove(); display: none;
}
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; /* position dialog above the underlay and don't display it */
}; .ma-dialog {
z-index: 200;
position: absolute;
display: none;
}
var mastodon_widget; /* position the underlay radio control below the toggle radio
window.addEventListener("load", function(e) { * control and the dialog, make it transparent and fill the
mastodon_widget = MastodonInteract(); * view */
});</script> .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> <style>
body { body {
max-width: 800px; max-width: 800px;
@ -438,19 +383,20 @@ window.addEventListener("load", function(e) {
min-width: 200px; min-width: 200px;
font-family: inherit; font-family: inherit;
} }
#embed-follow-output, #embed-share-output { #embed-follow-output, #embed-share-output {
height: 200px; height: 200px;
} }
#script-output { #script-output {
height: 256px; height: 256px;
} }
#style-output {
height: 256px;
}
</style> </style>
<script> <script>
var defaults = { var defaults = {
settings: { settings: {
account: 'user@localhost', account: 'user@localhost',
portal: '#',
width: '256px', width: '256px',
theme: 'light' theme: 'light'
}, },
@ -493,63 +439,11 @@ window.addEventListener("load", function(e) {
}; };
var settings; var settings;
var lang; var lang;
var elements; 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 = { var theme = {
dark: ['#282c37', '#1b1e25'], dark: ['#282c37', '#1b1e25'],
light: ['#d9e1e8', '#c6d2dc'] light: ['#d9e1e8', '#c6d2dc']
}; };
switch(match) {
case '${color.0}': {
return theme[settings.theme][0];
}
case '${color.1}': {
return theme[settings.theme][1];
}
}
}
function generate() function generate()
{ {
@ -599,31 +493,27 @@ window.addEventListener("load", function(e) {
} }
} }
var tmpl = document.getElementById('script-template'); var embed = script_template(settings);
var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, replacer);
var script_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'})); 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('href', script_file);
document.getElementById('script-download').setAttribute('download', 'mastodon-interact.js'); document.getElementById('script-download').setAttribute('download', 'mastodon-interact.js');
document.getElementById('script-output').innerHTML = embed; document.getElementById('script-output').innerHTML = embed;
var tmpl = document.getElementById('embed-follow-template'); var embed = style_template(settings);
var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, replacer); var style_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'}));
document.getElementById('embed-follow-output').innerHTML = embed; 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'); document.getElementById('embed-follow-output').innerHTML = embed_follow_template(settings, lang);
var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, svg_replace);
var icon_follow_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'})); 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('href', icon_follow_file);
document.getElementById('follow-icon-download').setAttribute('download', 'mastodon-follow-' + settings.theme + '.svg'); 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 icon_share_file = URL.createObjectURL(new Blob(Array.from(icon_share_template(theme[settings.theme])), {type: 'octet/stream'}));
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'}));
document.getElementById('share-icon-download').setAttribute('href', icon_share_file); document.getElementById('share-icon-download').setAttribute('href', icon_share_file);
document.getElementById('share-icon-download').setAttribute('download', 'mastodon-share-' + settings.theme + '.svg'); 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> <h1>Mastodon Interact embedding</h1>
<p>Enter your Mastodon account, pick your settings and click on <p>Enter your Mastodon account, pick your settings and click on
generate. This page will generate a script to be embedded in generate. This page will generate a script and a style sheet
the <tt>&lt;head&gt;</tt> section of your page and two HTML you need to insert in the <tt>&lt;head&gt;</tt> section of your
snippets you can insert where you want each button on your page.</p>
page. Also remember to download the icon files for the buttons
unless you supply your own.</p>
<p>You can easily tweak the script after download. The settings <pre>&lt;head&gt;
and strings are in the beginning of the script. In the HTML ...
snippets you can modify the size of the button in the &lt;link rel="stylesheet" type="text/css" href="mastodon-interact.css"&gt;
<tt>style</tt> attribute of the <tt>&lt;img&gt;</tt> tag, which &lt;script type="application/javascript" src="mastodon-interact.js"&gt;&lt;/script&gt;
is set to <tt>height: 32px</tt> and change the <tt>src</tt> &lt;/head&gt;</pre>
attribute to adjust the path to the button image. You can also
adjust the fallback links, but you can't remove the <p>You need to make sure the paths are correct in the
<tt>&lt;a&gt;</tt> tags.</p> <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> </div>
<table> <table>
<tr> <tr>
@ -739,6 +639,9 @@ window.addEventListener("load", function(e) {
<h2>Script</h2> <h2>Script</h2>
<div><a id="script-download" href="#">Download script</a></div> <div><a id="script-download" href="#">Download script</a></div>
<textarea id="script-output"></textarea> <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> <h2>Follow Embed</h2>
<div><a id="follow-icon-download" href="#">Download icon</a></div> <div><a id="follow-icon-download" href="#">Download icon</a></div>
<textarea id="embed-follow-output"></textarea> <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 ----- */

296
mastodon-interact.js
View file

@ -1,292 +1,52 @@
/* SPDX-License-Identifier: Zlib /* SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml> */ Copyright (C) 2022 smpl <smpl@slamkode.ml> */
const MastodonInteract = function() { let MastodonInteract = {
settings = { sharetext: null,
"account": "superman@localhost", account: null,
"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: { dialogs: {
follow: null, follow: null,
share: null share: null,
}, },
buttons: { cbAction: function(e) {
follow: null, var input = e.target.querySelector('input');
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"]');
var handle = input.value; var handle = input.value;
// remove any initial @
if(handle.charAt(0) == '@') { if(handle.charAt(0) == '@') {
handle = handle.substring(1); handle = handle.substring(1);
} }
// split into nick and host var parts = handle.split('@');
var uriparts = handle.split('@'); if(parts.length < 2) {
if(uriparts.length < 2) {
input.value = ''; input.value = '';
input.setAttribute('placeholder', strings.common.error.handle); input.setAttribute('placeholder', "Invalid handle");
return; return;
} }
if(e.target.parentNode === widget.dialogs.follow) { if(e.target === this.dialogs.follow) {
var oReq = new XMLHttpRequest(); window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Ffollow%3Furi%3Dacct%3A" + encodeURIComponent(this.account);
oReq.addEventListener("loadend", cbQueryResponse); } else if(e.target === this.dialogs.share) {
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle)); if(this.sharetext === null)
oReq.send(); this.sharetext = window.location;
} else if(e.target.parentNode === widget.dialogs.share) { window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Fshare%3Ftext%3D" + encodeURIComponent(this.sharetext);
window.location = "https://" + uriparts[1] + "/share?text=" + encodeURIComponent(strings.share.text);
} }
}; },
// follow only init: function(account) {
var cbQueryResponse = function(e) { var self = this;
var data;
if (e.readyState === e.DONE) { window.addEventListener("DOMContentLoaded", function(e) {
if (e.status === 200) { self.dialogs.follow = document.getElementById('ma-flw-form');
try { if(self.dialogs.follow) {
data = JSON.parse(e.responseText); self.dialogs.follow.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
} catch {
window.location = settings.portal;
return;
} }
data.links.forEach( function(l) { self.dialogs.share = document.getElementById('ma-sha-form');
if(l.rel === "http://ostatus.org/schema/1.0/subscribe") { if(self.dialogs.share) {
window.location = l.template.replace('{uri}', encodeURIComponent(settings.account)); self.dialogs.share.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
return;
} }
}); });
} }
}
window.location = settings.portal;
return;
}; };
widget.buttons.follow = document.getElementById('mastodon-widget-follow'); MastodonInteract.init();
widget.buttons.share = document.getElementById('mastodon-widget-share'); MastodonInteract.account = "smpl@norrebro.space";
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();
}
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();
});

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>