Rick/mastodon-icone
Archived
1
0
Fork 0
Code Issues Pull requests Activity

Ajout de la première version

Browse source
This commit is contained in:
Rick 2020-05-30 18:52:26 +02:00
parent a8d9d30e64
commit b9bf94f8c3
Signed by: Rick
GPG key ID: 9570A7DB7CB2F436
3 changed files with 104 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
index.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/mastodonFooter.css">
<title>Affichage du compte Mastodon</title>
</head>
<body>
<footer>
<div id="petitAffichage"></div>
</footer>
<script src="js/affichage.js"></script>
<script>
getProfile("https://toot.gnous.eu", 1693);
</script>
</body>
</html>

54
js/affichage.js Normal file
View file

@ -0,0 +1,54 @@
function transformName(name, url) {
nameWithoutHttps = url.substring(8);
indexOfSlash = nameWithoutHttps.indexOf("/");
nameWithoutSlash = nameWithoutHttps.substring(0,indexOfSlash);
ret = "@" + name.toLowerCase() + "@" + nameWithoutSlash;
return ret;
}
function getProfile(url, id) {
apiUrl = url + "/api/v1/accounts/" + id;
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", apiUrl, false);
xmlHttp.send();
response = JSON.parse(xmlHttp.responseText);
console.log(response);
accountUrl = response['url'];
accountName = response['display_name']
accountPicture = response['avatar'];
accountAtName = transformName(accountName, accountUrl);
linkHTML = document.createElement("a");
text = document.createTextNode("coucou");
linkHTML.title = "link to mastodon profile";
linkHTML.href = accountUrl;
imageHtml = document.createElement("img");
imageHtml.src = accountPicture
imageHtml.height = 65;
imageHtml.width = 65;
imageHtml.id = "photoMasto";
accountNameHtml = document.createElement("p");
text = document.createTextNode(accountName);
accountNameHtml.appendChild(text);
accountNameHtml.id = "nomMasto";
atAccountHtml = document.createElement("p");
text = document.createTextNode(accountAtName);
atAccountHtml.appendChild(text);
atAccountHtml.value = accountName;
atAccountHtml.id = "nomCompteMasto";
divInfos = document.createElement("div");
divInfos.id = "infoTextMasto";
divInfos.appendChild(accountNameHtml);
divInfos.appendChild(atAccountHtml);
linkHTML.appendChild(imageHtml);
linkHTML.appendChild(divInfos);
document.getElementById("petitAffichage").appendChild(linkHTML);
}

33
style/mastodonFooter.css Normal file
View file

@ -0,0 +1,33 @@
#petitAffichage {
width: 250px;
height: 65px;
padding: 10px;
margin: 0;
border-radius: 25px;
background-color: #414141;
}
#petitAffichage a {
display: flex;
color: white;
text-decoration: none;
}
#photoMasto {
margin-right: 10px;
border-radius: 360px;
}
#infoTextMasto {
margin:10px;
}
#infoTextMasto p {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#nomCompteMasto {
padding-top: 10px;
color: #778899;
}