smpl
1808843e9e
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.
658 lines
21 KiB
HTML
658 lines
21 KiB
HTML
<!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"?>
|
|
<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;" />
|
|
<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"?>
|
|
<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;"
|
|
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
|
|
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');
|
|
var handle = input.value;
|
|
|
|
if(handle.charAt(0) == '@') {
|
|
handle = handle.substring(1);
|
|
}
|
|
|
|
var parts = handle.split('@');
|
|
if(parts.length < 2) {
|
|
input.value = '';
|
|
input.setAttribute('placeholder', "Invalid handle");
|
|
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);
|
|
}
|
|
},
|
|
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(); };
|
|
}
|
|
|
|
self.dialogs.share = document.getElementById('ma-sha-form');
|
|
if(self.dialogs.share) {
|
|
self.dialogs.share.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
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;
|
|
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;
|
|
}
|
|
</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']
|
|
};
|
|
|
|
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);
|
|
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;
|
|
|
|
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 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');
|
|
}
|
|
|
|
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><head></tt> section of your
|
|
page.</p>
|
|
|
|
<pre><head>
|
|
...
|
|
<link rel="stylesheet" type="text/css" href="mastodon-interact.css">
|
|
<script type="application/javascript" src="mastodon-interact.js"></script>
|
|
</head></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>
|
|
<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>
|
|
<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 <smpl@slamkode.ml></p>
|
|
<a style="text-decoration: none; color: #fff;" href="https://git.data.coop/smpl/mastodon-interact.js">Source code</a>
|
|
</div>
|
|
</body>
|
|
</html>
|