octospacc
/
Friendiiverse
mirror of https://gitlab.com/octtspacc/Friendiiverse
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Restructuring of DOM management

This commit is contained in:
octospacc 2023-04-20 22:08:38 +02:00
parent 279691e9a1
commit 841fe95450
7 changed files with 103 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Source/ApiStatic.js Normal file
View File

@ -0,0 +1 @@

16
Source/ApiTransform.js
View File

@ -1,3 +1,4 @@
/*
var TransSchemas = { var TransSchemas = {
Mastodon: { Mastodon: {
Account: { Account: {
@ -18,17 +19,25 @@ var TransSchemas = {
}, },
}, },
}; };
*/
var ApiSchema = { var ApiSchema = {
__Account__: { __Account__: {
Banner: { Banner: {
Mastodon: "header", Mastodon: "header",
Misskey: "bannerUrl",
},
Description: {
Mastodon: "note",
Misskey: "description",
}, },
Icon: { Icon: {
Mastodon: "avatar", Mastodon: "avatar",
Misskey: "avatarUrl",
}, },
Name: { Name: {
Mastodon: "display_name", Mastodon: "display_name",
Misskey: "name",
}, },
Url: { Url: {
Mastodon: "url", Mastodon: "url",
@ -37,12 +46,15 @@ var ApiSchema = {
Note: { Note: {
Author: { Author: {
Mastodon: "account", Mastodon: "account",
Misskey: "user",
}, },
Content: { Content: {
Mastodon: "content", Mastodon: "content",
Misskey: "text",
}, },
Time: { Time: {
Mastodon: "created_at", Mastodon: "created_at",
Misskey: "createdAt",
}, },
Url: { Url: {
Mastodon: "url", Mastodon: "url",
@ -54,15 +66,19 @@ ApiSchema.Channel = CopyObj(ApiSchema.__Account__);
var TransParsers = { var TransParsers = {
Mastodon: { Mastodon: {
/*
Account(Data) { Account(Data) {
return JsonTransformA(Data, TransSchemas.Mastodon.Author, TransSchemas.Mastodon); return JsonTransformA(Data, TransSchemas.Mastodon.Author, TransSchemas.Mastodon);
}, },
Instance(Data) { Instance(Data) {
return JsonTransformA(Data, TransSchemas.Mastodon.Instance, TransSchemas.Mastodon); return JsonTransformA(Data, TransSchemas.Mastodon.Instance, TransSchemas.Mastodon);
}, },
*/
Status(Data) { Status(Data) {
//return JsonTransformA(Data, TransSchemas.Mastodon.Status, TransSchemas.Mastodon); //return JsonTransformA(Data, TransSchemas.Mastodon.Status, TransSchemas.Mastodon);
return JsonTransformB(Data, ApiSchema, ApiSchema.Note, 'Mastodon'); return JsonTransformB(Data, ApiSchema, ApiSchema.Note, 'Mastodon');
}, },
}, },
Misskey: {
},
}; };

1
Source/FakeApi.js
View File

@ -24,6 +24,7 @@ FakeApi.Friendiiverse.Featured.Categories.push({
FakeApi.Mastodon.Account = { FakeApi.Mastodon.Account = {
avatar: "https://picsum.photos/seed/Tester.Icon/64", avatar: "https://picsum.photos/seed/Tester.Icon/64",
display_name: "The Tester", display_name: "The Tester",
header: "https://picsum.photos/seed/Tester.Banner/320/180",
url: "https://mastodon.example.com/@Tester", url: "https://mastodon.example.com/@Tester",
}; };

33
Source/Friendiiverse.html
View File

@ -16,23 +16,26 @@ var UseFakeApi = true;
</script> </script>
</head> </head>
<body> <body>
<main> <div id="Root">
<div id="CoverView"> <div id="CoverView">
LOGO LOGO
Loading... Loading...
</div>
<div id="NoscriptView">
No Script!
</div>
<!--
<div id="PlazasView"></div>
<textarea id="Input"></textarea>
<button id="Post">Post</button>
<div id="ChannelView"></div>
<div id="TimelineView"></div>
<xmp id="DataView"></xmp>
-->
</div> </div>
<div id="NoscriptView"> <div id="Bottom">
No Script! <a href="https://gitlab.com/octtspacc/Friendiiverse">Source Code</a>
</div> </div>
<div id="PlazasView"></div>
<textarea id="Input"></textarea>
<button id="Post">Post</button>
<div id="TimelineView"></div>
<xmp id="DataView"></xmp>
</main>
<footer>
<a href="https://gitlab.com/octtspacc/Friendiiverse">Source Code</a>
</footer>
<script>NoscriptView.remove();</script> <script>NoscriptView.remove();</script>
<script src="./Utils.js"></script> <script src="./Utils.js"></script>
<script src="./Strings.js"></script> <script src="./Strings.js"></script>

53
Source/Main.js
View File

@ -26,6 +26,7 @@ function DoAsync(First, Then, Data) {
ForceList(Then).forEach(function(Fun){ ForceList(Then).forEach(function(Fun){
Fun(CurrTasks[Job].Result); Fun(CurrTasks[Job].Result);
}); });
delete CurrTasks[Job];
}; };
}, 50, Job, Then); }, 50, Job, Then);
return Job; return Job;
@ -77,6 +78,7 @@ function ApiCall(Data, Proc) {
Req.send(); Req.send();
}; };
/*
function DisplayFriendicaTimeline(Timeline) { function DisplayFriendicaTimeline(Timeline) {
ApiCall({Target: "Friendica", Method: Timeline, CallFine: function(Res){ ApiCall({Target: "Friendica", Method: Timeline, CallFine: function(Res){
DataView.innerHTML = Res.responseText; DataView.innerHTML = Res.responseText;
@ -91,6 +93,36 @@ function DisplayFriendicaTimeline(Timeline) {
}); });
}}); }});
}; };
*/
function MakeWindow(Attrs) {
var Window = document.createElement('div');
if (Attrs) {
Object.keys(Attrs).forEach(function(Attr){
Window[Attr] = Attrs[Attr];
});
};
Window.className += ' Window';
Root.appendChild(Window);
return Window;
};
function DisplayChannel(Channel) {
//DoAsync(FetchMastodon, FillTimeline);
ChannelView.innerHTML = `
<div class="" style="display: inline-block;">
<a href="${Channel.Url}">
<div>
<img class="" src="${Channel.Banner}"/>
</div>
<div>
<img class="" src="${Channel.Icon}"/>
${Channel.Name}
</div>
</a>
</div>
`;
};
function FetchMastodon(Proc) { function FetchMastodon(Proc) {
if (UseFakeApi) { if (UseFakeApi) {
@ -107,8 +139,8 @@ function ResFetchMastodon(Res) {
function FillTimeline(Notes) { function FillTimeline(Notes) {
Notes.forEach(function(Note){ Notes.forEach(function(Note){
TimelineView.innerHTML += `<div class="View Note"> TimelineView.innerHTML += `<div class="View Note" data-data="${B64Obj(Note)}">
<a href="${Note.Author.Url}"> <a href="${Note.Author.Url}" onclick="DisplayChannel(UnB64Obj(this.parentNode.dataset.data).Author); return false;">
<img class="Author Icon" src="${Note.Author.Icon}"/> <img class="Author Icon" src="${Note.Author.Icon}"/>
${Note.Author.Name} ${Note.Author.Name}
</a> </a>
@ -127,19 +159,25 @@ function FetchFeatured(Proc) {
}; };
function FillFeatured(Categories) { function FillFeatured(Categories) {
var Window = MakeWindow({className: "Gallery"});
Object.values(Categories).forEach(function(Channels){ Object.values(Categories).forEach(function(Channels){
Channels.forEach(function(Channel){ Channels.forEach(function(Channel){
PlazasView.innerHTML += `<div> Window.innerHTML += `<div data-data="${B64Obj(Channel)}">
<a href="${Channel.Url}"> <a href="${Channel.Url}" onclick="DisplayChannel(UnB64Obj(this.parentNode.dataset.data).Author); return false;">
<img class="" src="${Channel.Banner}"/> <div>
<img class="" src="${Channel.Icon}"/> <img src="${Channel.Banner}"/>
${Channel.Name} </div>
<div>
<img src="${Channel.Icon}"/>
${Channel.Name}
</div>
</a> </a>
</div>`; </div>`;
}); });
}); });
}; };
/*
PlazasView.innerHTML = ` PlazasView.innerHTML = `
<div> <div>
<h3>Featured</h3> <h3>Featured</h3>
@ -160,6 +198,7 @@ PlazasView.innerHTML = `
</ul> </ul>
</div> </div>
`; `;
*/
DoAsync(FetchFeatured, FillFeatured); DoAsync(FetchFeatured, FillFeatured);

8
Source/Style.css
View File

@ -2,11 +2,11 @@ img, video {
max-width: 100%; max-width: 100%;
} }
main { #Root {
margin-bottom: 2em; margin-bottom: 2em;
} }
footer { #Bottom {
display: block; display: block;
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -28,3 +28,7 @@ footer {
.View.Note .Author.Icon { .View.Note .Author.Icon {
width: 64px; width: 64px;
} }
.Gallery > div {
display: inline-block;
}

19
Source/Utils.js
View File

@ -20,10 +20,21 @@ function LogDebug(Data, Status) {
}; };
}; };
function IsObj(Item) {
return typeof(Item) == 'object';
};
function CopyObj(Obj) { function CopyObj(Obj) {
return JSON.parse(JSON.stringify(Obj)); return JSON.parse(JSON.stringify(Obj));
}; };
function B64Obj(Obj) {
return btoa(JSON.stringify(Obj));
};
function UnB64Obj(Obj) {
return JSON.parse(atob(Obj));
};
// Transform JSON tree into a new using a template schema // Transform JSON tree into a new using a template schema
// DEVNOTE: Unsafe, should check for colliding "__" keys from input tree and act accordingly // DEVNOTE: Unsafe, should check for colliding "__" keys from input tree and act accordingly
function JsonTransformA(TreesOld, SchemaCurr, SchemaRoot) { function JsonTransformA(TreesOld, SchemaCurr, SchemaRoot) {
@ -41,8 +52,8 @@ function JsonTransformCycleA(TreeOld, SchemaCurr, SchemaRoot) {
var TreeNew = {}; var TreeNew = {};
Object.keys(TreeOld).forEach(function(KeyOld){ Object.keys(TreeOld).forEach(function(KeyOld){
var Content = TreeOld[KeyOld]; var Content = TreeOld[KeyOld];
var KeyNew = ((typeof(SchemaCurr) == 'object' && KeyOld in SchemaCurr) ? SchemaCurr[KeyOld] : KeyOld); var KeyNew = ((IsObj(SchemaCurr) && KeyOld in SchemaCurr) ? SchemaCurr[KeyOld] : KeyOld);
if (typeof(Content) == 'object' && Content !== null) { if (IsObj(Content) && Content !== null) {
if (Array.isArray(Content)) { if (Array.isArray(Content)) {
// Lists // Lists
/* var ListNew = []; /* var ListNew = [];
@ -87,12 +98,12 @@ function JsonTransformCycleB(TreeOld, SchemaNew, NodeNew, TypeOld) {
if (TypeOld in TreeNew[KeyNew]) { if (TypeOld in TreeNew[KeyNew]) {
var KeyOld = TreeNew[KeyNew][TypeOld]; var KeyOld = TreeNew[KeyNew][TypeOld];
var ObjOld = TreeOld[KeyOld]; var ObjOld = TreeOld[KeyOld];
if (typeof(KeyOld) == 'object') { if (IsObj(KeyOld)) {
// Deep nested children in TreeOld // Deep nested children in TreeOld
} else { } else {
// Direct children in TreeOld // Direct children in TreeOld
if (typeof(ObjOld) == 'object') { if (IsObj(ObjOld)) {
TreeNew[KeyNew] = JsonTransformB(ObjOld, SchemaNew, SchemaNew[KeyNew], TypeOld); TreeNew[KeyNew] = JsonTransformB(ObjOld, SchemaNew, SchemaNew[KeyNew], TypeOld);
} else { } else {
TreeNew[KeyNew] = ObjOld; TreeNew[KeyNew] = ObjOld;