mirror of
https://github.com/AleziaKurdis/Overte-community-apps.git
synced 2025-04-06 01:53:45 +02:00
364 lines
13 KiB
HTML
364 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
flyAvatar.html
|
|
|
|
Created by Alezia Kurdis, December 16th 2023.
|
|
Copyright 2023 Overte e.V.
|
|
|
|
HTML ui for flyAvatar app.
|
|
|
|
Distributed under the Apache License, Version 2.0.
|
|
See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script>
|
|
var channel = "overte.application.more.flyAvatar";
|
|
|
|
//Paths
|
|
var thisPageName = "flyAvatar.html";
|
|
var currentPath = window.location.protocol + "//" + window.location.host + window.location.pathname;
|
|
var ROOTPATH = currentPath.replace(thisPageName, "");
|
|
var flyAvatarUrl = [];
|
|
var bookmarks = [];
|
|
var flyAvatarSwitch = true;
|
|
|
|
EventBridge.scriptEventReceived.connect(function(message){
|
|
messageObj = JSON.parse(message);
|
|
if (messageObj.channel === channel) {
|
|
if (messageObj.action === "FLY-AVATAR-URL") {
|
|
flyAvatarUrl = messageObj.url || [];
|
|
bookmarks = messageObj.bookmarks;
|
|
flyAvatarSwitch = messageObj.mainSwitch;
|
|
document.getElementById("mainSwitch").checked = flyAvatarSwitch;
|
|
genBookmarkMenu();
|
|
genAvatarList();
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
<style>
|
|
@font-face {
|
|
font-family: FiraSans-SemiBold;
|
|
src: url(fonts/FiraSans-SemiBold.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: FiraSans-Regular;
|
|
src: url(fonts/FiraSans-Regular.ttf);
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: #454545;
|
|
font-family: FiraSans-Regular;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
text-decoration: none;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
#uninstall {
|
|
font-family: FiraSans-SemiBold;
|
|
background-color: #222222;
|
|
font-size: 9px;
|
|
color: #cccccc;
|
|
border-radius: 3px;
|
|
border: 0px solid #000000;
|
|
transition-duration: 0.2s;
|
|
width: 100px;
|
|
padding: 3px;
|
|
}
|
|
|
|
#uninstall:hover {
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
}
|
|
|
|
#uninstall:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#avatarUrl {
|
|
width: 75%;
|
|
font-size: 11px;
|
|
font-family: FiraSans-SemiBold;
|
|
background-color: #222222;
|
|
color: #bbbbbb;
|
|
border: 1px solid #bbbbbb;
|
|
}
|
|
|
|
#avatarUrl:focus {
|
|
outline: none;
|
|
}
|
|
#formContainer {
|
|
width: 100%;
|
|
}
|
|
#bookmarkPanel {
|
|
height: 690px;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 1;
|
|
top: 0px;
|
|
left: 0px;
|
|
background-color: #cccccc;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
transition: 0.5s;
|
|
display: none;
|
|
}
|
|
button.menuItem {
|
|
border: 0px;
|
|
border-bottom: 1px solid #222222;
|
|
text-align: left;
|
|
color: #000000;
|
|
width: 100%;
|
|
background-color: #bbbbbb;
|
|
font-size: 12px;
|
|
font-family: FiraSans-SemiBold;
|
|
}
|
|
button.menuItem:hover {
|
|
width: 100%;
|
|
background-color: #333333;
|
|
color: #bbbbbb;
|
|
}
|
|
#closeMenuBtn {
|
|
text-align: right;
|
|
width:100%;
|
|
color: #000000;
|
|
font-size: 18px;
|
|
font-family: FiraSans-SemiBold;
|
|
border-bottom: 1px solid #222222;
|
|
}
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
button:focus {
|
|
outline: none;
|
|
}
|
|
#bookmarks {
|
|
font-family: FiraSans-SemiBold;
|
|
background-color: #222222;
|
|
font-size: 11px;
|
|
color: #cccccc;
|
|
border-radius: 5px;
|
|
border: 0px solid #000000;
|
|
transition-duration: 0.2s;
|
|
padding: 3px 10px 3px 10px;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
#bookmarks:hover {
|
|
background-color: #111111;
|
|
color: #ffffff;
|
|
}
|
|
#avatarList {
|
|
height: 470px;
|
|
width: 100%;
|
|
background-color: #222222;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
color: #bbbbbb;
|
|
font-size: 8px;
|
|
font-family: FiraSans-Regular;
|
|
margin-bottom: 5px;
|
|
}
|
|
#addContainer {
|
|
border: 1px solid #bbbbbb;
|
|
width: 97%;
|
|
padding: 5px;
|
|
}
|
|
font.formTitle {
|
|
font-size: 14px;
|
|
font-family: FiraSans-SemiBold;
|
|
}
|
|
#addBtn {
|
|
font-family: FiraSans-SemiBold;
|
|
background-color: #0066ff;
|
|
background-image: linear-gradient(to bottom, #0066ff, #0020a1);
|
|
font-size: 11px;
|
|
color: #cccccc;
|
|
border-radius: 5px;
|
|
border: 0px solid #000000;
|
|
transition-duration: 0.2s;
|
|
padding: 3px 17px 3px 17px;
|
|
margin-top: 5px;
|
|
}
|
|
#addBtn:hover {
|
|
background-color: #26a1ff;
|
|
background-image: linear-gradient(to bottom, #26a1ff, #0060d6);
|
|
color: #ffffff;
|
|
}
|
|
span.removeBtn {
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 16px;
|
|
color: #c27a7a;
|
|
}
|
|
table.grid {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
td {
|
|
border: 1px solid #888888;
|
|
color: #bbbbbb;
|
|
font-size: 10px;
|
|
font-family: FiraSans-Regular;
|
|
word-wrap: break-word;
|
|
padding: 3px;
|
|
}
|
|
tr {
|
|
vertical-align: top;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="formContainer">
|
|
<h1>FLY AVATAR</h1>
|
|
<input type="checkbox" id="mainSwitch" name="mainSwitch" value="true" oninput = "updateAvatarUrl();"><label for="mainSwitch"> Replace avatar when flying.</label>
|
|
<br><br><div id = "addContainer">
|
|
<font class="formTitle">Link Avatar Url to use while flying to a specific avatar:</font><br>
|
|
Avatar: <button id="bookmarks" onClick="openAvatarBookmarkMenu();">-Select-</button><div id="bookmarkPanel"></div><br>
|
|
Flying Avatar Url: <input type = "text" id="avatarUrl"><br>
|
|
<div style="text-align:right; width:97%;"><button id="addBtn" onclick = "updateAvatarUrl();">+ Add</button></div>
|
|
</div></div><br>
|
|
<div id="avatarList"></div>
|
|
|
|
<div style="text-align: right; width:100%;">
|
|
<button id="uninstall" onClick = "uninstall();">Uninstall this app</button>
|
|
</div>
|
|
<script>
|
|
function uninstall() {
|
|
var message = {
|
|
"channel": channel,
|
|
"action": "SELF_UNINSTALL"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
}
|
|
|
|
function genAvatarList() {
|
|
let i;
|
|
let avatarlist = "";
|
|
if (flyAvatarUrl.length > 0) {
|
|
avatarlist = "<table class='grid'>";
|
|
avatarlist = avatarlist + "<tr><td style='background-color: #000000; color:#ffffff; width: 25%;'>AVATAR</td>";
|
|
avatarlist = avatarlist + "<td style='background-color: #000000; color:#ffffff; width: 70%;'>FLYING AVATAR URL</td>";
|
|
avatarlist = avatarlist + "<td style='background-color: #000000; color:#ffffff; text-align: center; width: 5%;'> </td></tr>";
|
|
for (i = 0; i < flyAvatarUrl.length; i++) {
|
|
avatarlist = avatarlist + "<tr><td style='width: 25%;'>" + getBookmarkName(flyAvatarUrl[i].avatarUrl) + "</td>";
|
|
avatarlist = avatarlist + "<td style='width: 70%;'>" + flyAvatarUrl[i].flyAvatarUrl + "</td>";
|
|
avatarlist = avatarlist + "<td style='text-align: center; width: 5%;'>";
|
|
avatarlist = avatarlist + "<span class='removeBtn' onClick='removeEntry(" + i + ")'>⮾</span></td></tr>";
|
|
}
|
|
avatarlist = avatarlist + "</table>";
|
|
}
|
|
document.getElementById("avatarList").innerHTML = avatarlist;
|
|
}
|
|
|
|
function openAvatarBookmarkMenu() {
|
|
document.getElementById("bookmarkPanel").style.display = "block";
|
|
}
|
|
|
|
function closeAvatarBookmarkMenu() {
|
|
document.getElementById("bookmarkPanel").style.display = "none";
|
|
}
|
|
|
|
function genBookmarkMenu() {
|
|
let opt = "<div id='closeMenuBtn' onClick = 'closeAvatarBookmarkMenu();'>🗙 </div>";
|
|
let key;
|
|
let panel = document.getElementById('bookmarkPanel');
|
|
for (key in bookmarks) {
|
|
opt = opt + "<button class = 'menuItem' onclick = 'selectBookMark(" + '"' + key + '"' + ");'>" + key + "</button><br>";
|
|
}
|
|
panel.innerHTML = opt;
|
|
}
|
|
|
|
function getBookmarkName(url) {
|
|
let key;
|
|
let name = "Unknown";
|
|
for (key in bookmarks) {
|
|
if (bookmarks[key].avatarUrl === url) {
|
|
name = key;
|
|
break;
|
|
}
|
|
}
|
|
return name;
|
|
}
|
|
|
|
function getBookmarkUrlFromName(name) {
|
|
let key;
|
|
let url = "";
|
|
for (key in bookmarks) {
|
|
if (key === name) {
|
|
url = bookmarks[key].avatarUrl;
|
|
break;
|
|
}
|
|
}
|
|
return url;
|
|
}
|
|
|
|
function removeEntry(index) {
|
|
flyAvatarUrl.splice(index,1);
|
|
flyAvatarSwitch = document.getElementById("mainSwitch").checked;
|
|
var message = {
|
|
"channel": channel,
|
|
"action": "UPDATE_URL",
|
|
"url": flyAvatarUrl,
|
|
"mainSwitch": flyAvatarSwitch
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
genAvatarList();
|
|
}
|
|
|
|
function selectBookMark(name) {
|
|
document.getElementById('bookmarks').innerText = name;
|
|
closeAvatarBookmarkMenu();
|
|
}
|
|
|
|
function updateAvatarUrl() {
|
|
let avUrl = getBookmarkUrlFromName(document.getElementById('bookmarks').innerText);
|
|
let flyAv = document.getElementById("avatarUrl").value;
|
|
|
|
if (avUrl !== "" && flyAv !== "") {
|
|
|
|
let link = {
|
|
"avatarUrl": avUrl,
|
|
"flyAvatarUrl": flyAv
|
|
};
|
|
flyAvatarUrl.push(link);
|
|
flyAvatarSwitch = document.getElementById("mainSwitch").checked;
|
|
var message = {
|
|
"channel": channel,
|
|
"action": "UPDATE_URL",
|
|
"url": flyAvatarUrl,
|
|
"mainSwitch": flyAvatarSwitch
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
document.getElementById('bookmarks').innerText = "-Select-";
|
|
document.getElementById("avatarUrl").value = "";
|
|
genAvatarList();
|
|
}
|
|
}
|
|
|
|
function requestInitialData() {
|
|
|
|
var message = {
|
|
"channel": channel,
|
|
"action": "REQUEST_INITIAL_DATA"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
}
|
|
|
|
requestInitialData();
|
|
</script>
|
|
</body>
|
|
</html>
|