1
0
Fork 0
mastodon-interact.js/embed/index.html

658 lines
21 KiB
HTML
Raw Permalink Normal View History

2022-05-03 01:34:37 +00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml>
-->
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-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 type="text/javascript">
const icon_follow_template = color => `<?xml version="1.0" standalone="no"?>
2022-05-03 01:34:37 +00:00
<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:${color[0]};stroke:${color[1]};stroke-width:1.71882558;" />
2022-05-03 01:34:37 +00:00
<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>`;
</script>
<script type="text/javascript">
const icon_share_template = color => `<?xml version="1.0" standalone="no"?>
2022-05-03 01:34:37 +00:00
<svg
xmlns="http://www.w3.org/2000/svg"
width="57.883163mm"
height="45.014904mm"
viewBox="0 0 57.883163 45.014904"
version="1.1">
<rect
style="fill:${color[0]};stroke:${color[1]};stroke-width:1.71882558;"
2022-05-03 01:34:37 +00:00
width="56.164337"
height="43.296078"
x="0.85941321"
y="0.85940945"
ry="6.0133438" />
<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 48.419887,25.72787 -9.710952,6.3391 11.059692,3.91135"
style="fill:none;stroke:#3088d4;stroke-width:2.11666656;" />
<g style="fill:#3088d4;">
<circle
cx="49.161694"
cy="25.12093"
r="3.5741699" />
<circle
r="3.5741699"
cy="32.134388"
cx="38.911243" />
<circle
cx="49.688114"
cy="36.044575"
r="3.5741699" />
</g>
</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
2022-05-03 01:34:37 +00:00
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
let MastodonInteract = {
sharetext: null,
account: null,
dialogs: {
follow: null,
share: null,
},
cbAction: function(e) {
var input = e.target.querySelector('input');
2022-05-03 01:34:37 +00:00
var handle = input.value;
if(handle.charAt(0) == '@') {
handle = handle.substring(1);
}
var parts = handle.split('@');
if(parts.length < 2) {
2022-05-03 01:34:37 +00:00
input.value = '';
input.setAttribute('placeholder', "Invalid handle");
2022-05-03 01:34:37 +00:00
return;
}
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);
2022-05-03 01:34:37 +00:00
}
},
init: function(account) {
var self = this;
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(); };
2022-05-03 01:34:37 +00:00
}
self.dialogs.share = document.getElementById('ma-sha-form');
if(self.dialogs.share) {
self.dialogs.share.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
}
});
2022-05-03 01:34:37 +00:00
}
};
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>
2022-05-03 01:34:37 +00:00
<style>
body {
max-width: 800px;
margin: auto;
background: #282c37;
color: #9baec8;
font-family: "Roboto",Roboto,sans-serif;
}
#description h1, h2 {
color: #fff;
}
a[id$="download"], a[id$="download"]:hover, a[id$="download"]:active {
text-decoration: none;
color: #fff;
}
table, #output {
min-width: 600px;
max-width: 800px;
}
table,tr,td {
padding: 0; margin: 0; border: 0;
vertical-align: middle;
}
td:first-child {
white-space: nowrap;
width: 1%;
padding: 10px;
color: #fff;
font-weight: bold;
}
input[type="text"] {
border: 0;
border-radius: 4px;
padding: 10px;
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-weight: 500;
font-size: 18px;
background: #131419;
color: #fff;
}
textarea {
border: 0;
border-radius: 4px;
margin-top: 20px;
padding: 10px;
width: 100%;
box-sizing: border-box;
background: #131419;
color: #9baec8;
}
select, button {
border: 0;
border-radius: 4px;
padding: 10px;
background-color: #2b90d9;
color: #fff;
box-sizing: border-box;
min-width: 200px;
font-family: inherit;
}
#embed-follow-output, #embed-share-output {
height: 200px;
}
#script-output {
height: 256px;
}
#style-output {
height: 256px;
}
2022-05-03 01:34:37 +00:00
</style>
<script>
var defaults = {
settings: {
account: 'user@localhost',
width: '256px',
theme: 'light'
},
lang: {
da: {
"share": {
"title": "Tast dit Mastodon id",
"button": "Del"
},
"follow": {
"title": "Tast dit Mastodon id",
"button": "Følg"
},
"common": {
"create": "Opret konto",
"create_url": "https://joinmastodon.org/communities",
"error": {
"handle": "Forkert id"
}
}
},
en: {
"share": {
"title": "Enter your Mastodon handle",
"button": "Share"
},
"follow": {
"title": "Enter your Mastodon handle",
"button": "Follow"
},
"common": {
"create": "Create account",
"create_url": "https://joinmastodon.org/communities",
"error": {
"handle": "Invalid handle"
}
}
}
}
};
var settings;
var lang;
var elements;
var theme = {
dark: ['#282c37', '#1b1e25'],
light: ['#d9e1e8', '#c6d2dc']
};
2022-05-03 01:34:37 +00:00
function generate()
{
var account = elements.handle.value;
if(account.charAt(0) == '@')
account = account.substring(1);
var uriparts = account.split('@');
var e = document.querySelector('select[name=theme]');
settings = {
account: account,
portal: "https://" + uriparts[1] + "/users/" + uriparts[0] + "/remote_follow",
width: defaults.settings.width,
theme: e.options[e.selectedIndex].value //defaults.settings.theme //TODO
};
var e = document.querySelector('select[name=lang]');
switch(e.options[e.selectedIndex].value) {
case 'en': {
lang = defaults.lang.en;
break;
}
case 'da': {
lang = defaults.lang.da;
break;
}
case 'custom': {
lang = {
"share": {
"title": document.querySelector('input[name="share.title"]').value,
"button": document.querySelector('input[name="share.button"]').value
},
"follow": {
"title": document.querySelector('input[name="follow.title"]').value,
"button": document.querySelector('input[name="follow.button"]').value
},
"common": {
"create": document.querySelector('input[name="common.create"]').value,
"create_url": document.querySelector('input[name="common.create_url"]').value,
"error": {
"handle": document.querySelector('input[name="common.error.handle"]').value
}
}
};
break;
}
}
var embed = script_template(settings);
2022-05-03 01:34:37 +00:00
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 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;
2022-05-03 01:34:37 +00:00
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'}));
2022-05-03 01:34:37 +00:00
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);
2022-05-03 01:34:37 +00:00
var icon_share_file = URL.createObjectURL(new Blob(Array.from(icon_share_template(theme[settings.theme])), {type: 'octet/stream'}));
2022-05-03 01:34:37 +00:00
document.getElementById('share-icon-download').setAttribute('href', icon_share_file);
document.getElementById('share-icon-download').setAttribute('download', 'mastodon-share-' + settings.theme + '.svg');
}
function cb_select(e)
{
console.log(e.target.value);
if(e.target.value === 'custom') {
elements.custom.style.display = '';
} else {
elements.custom.style.display = 'none';
}
}
window.onload = function() {
elements = {
follow: document.querySelector('input[name=follow]'),
share: document.querySelector('input[name=share]'),
lang: document.querySelector('select[name=lang]'),
theme: document.querySelector('select[name=theme]'),
handle: document.querySelector('input[name=handle]'),
custom: document.getElementById('custom-lang')
};
elements.lang.onchange = cb_select;
};
</script>
</head>
<body>
<div id="description">
<h1>Mastodon Interact embedding</h1>
<p>Enter your Mastodon account, pick your settings and click on
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>
<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>
2022-05-03 01:34:37 +00:00
<p>This generator page is entirely selfcontained and can be
download to you computer.</p>
2022-05-03 01:34:37 +00:00
</div>
<table>
<tr>
<td>Mastodon handle</td>
<td>
<input type="text" name="handle" />
</td>
</tr>
<tr>
<td>Language</td>
<td>
<select name="lang">
<option value="en">English</option>
<option value="da">Danish</option>
<option value="custom">Custom</option>
</select>
</td>
</tr>
<tr>
<td>Theme</td>
<td>
<select name="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</td>
</tr>
</table>
<div id="custom-lang" style="display: none;">
<table>
<tr>
<td>share.title:</td>
<td><input type="text" name="share.title" value="Enter your Mastodon handle" /></td>
</tr>
<tr>
<td>share.button:</td>
<td><input type="text" name="share.button" value="Share" /></td>
</tr>
<tr>
<td>follow.title:</td>
<td><input type="text" name="follow.title" value="Enter your Mastodon handle" /></td>
</tr>
<tr>
<td>follow.button:</td>
<td><input type="text" name="follow.button" value="Follow" /></td>
</tr>
<tr>
<td>common.create:</td>
<td><input type="text" name="common.create" value="Create account" /></td>
</tr>
<tr>
<td>common.create_url:</td>
<td><input type="text" name="common.create_url" value="https://joinmastodon.org/communities" /></td>
</tr>
<tr>
<td>common.error.handle:</td>
<td><input type="text" name="common.error.handle" value="Invalid handle" /></td>
</tr>
</table>
</div>
<div>
<button onclick="generate()">Generate embed</button>
</div>
<div id="output">
<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>
2022-05-03 01:34:37 +00:00
<h2>Follow Embed</h2>
<div><a id="follow-icon-download" href="#">Download icon</a></div>
<textarea id="embed-follow-output"></textarea>
<h2>Share Embed</h2>
<div><a id="share-icon-download" href="#">Download icon</a></div>
<textarea id="embed-share-output"></textarea>
</div>
<div style="padding: 64px; text-align:center">
<p>Copyright (C) 2022 smpl &lt;smpl@slamkode.ml&gt;</p>
<a style="text-decoration: none; color: #fff;" href="https://git.data.coop/smpl/mastodon-interact.js">Source code</a>
</div>
</body>
</html>