From 841fe95450e8cefb13f7042d4dd19dbd7d7d314e Mon Sep 17 00:00:00 2001 From: octospacc Date: Thu, 20 Apr 2023 22:08:38 +0200 Subject: [PATCH] Restructuring of DOM management --- Source/ApiStatic.js | 1 + Source/ApiTransform.js | 16 ++++++++++++ Source/FakeApi.js | 1 + Source/Friendiiverse.html | 33 +++++++++++++----------- Source/Main.js | 53 +++++++++++++++++++++++++++++++++------ Source/Style.css | 8 ++++-- Source/Utils.js | 19 +++++++++++--- 7 files changed, 103 insertions(+), 28 deletions(-) create mode 100644 Source/ApiStatic.js diff --git a/Source/ApiStatic.js b/Source/ApiStatic.js new file mode 100644 index 0000000..8d1c8b6 --- /dev/null +++ b/Source/ApiStatic.js @@ -0,0 +1 @@ + diff --git a/Source/ApiTransform.js b/Source/ApiTransform.js index fd7f428..40c249c 100644 --- a/Source/ApiTransform.js +++ b/Source/ApiTransform.js @@ -1,3 +1,4 @@ +/* var TransSchemas = { Mastodon: { Account: { @@ -18,17 +19,25 @@ var TransSchemas = { }, }, }; +*/ var ApiSchema = { __Account__: { Banner: { Mastodon: "header", + Misskey: "bannerUrl", + }, + Description: { + Mastodon: "note", + Misskey: "description", }, Icon: { Mastodon: "avatar", + Misskey: "avatarUrl", }, Name: { Mastodon: "display_name", + Misskey: "name", }, Url: { Mastodon: "url", @@ -37,12 +46,15 @@ var ApiSchema = { Note: { Author: { Mastodon: "account", + Misskey: "user", }, Content: { Mastodon: "content", + Misskey: "text", }, Time: { Mastodon: "created_at", + Misskey: "createdAt", }, Url: { Mastodon: "url", @@ -54,15 +66,19 @@ ApiSchema.Channel = CopyObj(ApiSchema.__Account__); var TransParsers = { Mastodon: { + /* Account(Data) { return JsonTransformA(Data, TransSchemas.Mastodon.Author, TransSchemas.Mastodon); }, Instance(Data) { return JsonTransformA(Data, TransSchemas.Mastodon.Instance, TransSchemas.Mastodon); }, + */ Status(Data) { //return JsonTransformA(Data, TransSchemas.Mastodon.Status, TransSchemas.Mastodon); return JsonTransformB(Data, ApiSchema, ApiSchema.Note, 'Mastodon'); }, }, + Misskey: { + }, }; diff --git a/Source/FakeApi.js b/Source/FakeApi.js index 693bc1d..531ae13 100644 --- a/Source/FakeApi.js +++ b/Source/FakeApi.js @@ -24,6 +24,7 @@ FakeApi.Friendiiverse.Featured.Categories.push({ FakeApi.Mastodon.Account = { avatar: "https://picsum.photos/seed/Tester.Icon/64", display_name: "The Tester", + header: "https://picsum.photos/seed/Tester.Banner/320/180", url: "https://mastodon.example.com/@Tester", }; diff --git a/Source/Friendiiverse.html b/Source/Friendiiverse.html index 4b46da8..7c1dc3a 100644 --- a/Source/Friendiiverse.html +++ b/Source/Friendiiverse.html @@ -16,23 +16,26 @@ var UseFakeApi = true; -
-
- LOGO - Loading... +
+
+ LOGO + Loading... +
+
+ No Script! +
+
-
- No Script! + -
- - -
- -
- diff --git a/Source/Main.js b/Source/Main.js index 01b56f6..c2a8255 100644 --- a/Source/Main.js +++ b/Source/Main.js @@ -26,6 +26,7 @@ function DoAsync(First, Then, Data) { ForceList(Then).forEach(function(Fun){ Fun(CurrTasks[Job].Result); }); + delete CurrTasks[Job]; }; }, 50, Job, Then); return Job; @@ -77,6 +78,7 @@ function ApiCall(Data, Proc) { Req.send(); }; +/* function DisplayFriendicaTimeline(Timeline) { ApiCall({Target: "Friendica", Method: Timeline, CallFine: function(Res){ 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 = ` +
+ +
+ +
+
+ + ${Channel.Name} +
+ +
+ `; +}; function FetchMastodon(Proc) { if (UseFakeApi) { @@ -107,8 +139,8 @@ function ResFetchMastodon(Res) { function FillTimeline(Notes) { Notes.forEach(function(Note){ - TimelineView.innerHTML += `
- + TimelineView.innerHTML += `
+ ${Note.Author.Name} @@ -127,19 +159,25 @@ function FetchFeatured(Proc) { }; function FillFeatured(Categories) { + var Window = MakeWindow({className: "Gallery"}); Object.values(Categories).forEach(function(Channels){ Channels.forEach(function(Channel){ - PlazasView.innerHTML += `
- - - - ${Channel.Name} + Window.innerHTML += `
+ +
+ +
+
+ + ${Channel.Name} +
`; }); }); }; +/* PlazasView.innerHTML = `

Featured

@@ -160,6 +198,7 @@ PlazasView.innerHTML = `
`; +*/ DoAsync(FetchFeatured, FillFeatured); diff --git a/Source/Style.css b/Source/Style.css index 92528a2..96adecb 100644 --- a/Source/Style.css +++ b/Source/Style.css @@ -2,11 +2,11 @@ img, video { max-width: 100%; } -main { +#Root { margin-bottom: 2em; } -footer { +#Bottom { display: block; width: 100%; position: fixed; @@ -28,3 +28,7 @@ footer { .View.Note .Author.Icon { width: 64px; } + +.Gallery > div { + display: inline-block; +} diff --git a/Source/Utils.js b/Source/Utils.js index cc28c7c..980a654 100644 --- a/Source/Utils.js +++ b/Source/Utils.js @@ -20,10 +20,21 @@ function LogDebug(Data, Status) { }; }; +function IsObj(Item) { + return typeof(Item) == 'object'; +}; + function CopyObj(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 // DEVNOTE: Unsafe, should check for colliding "__" keys from input tree and act accordingly function JsonTransformA(TreesOld, SchemaCurr, SchemaRoot) { @@ -41,8 +52,8 @@ function JsonTransformCycleA(TreeOld, SchemaCurr, SchemaRoot) { var TreeNew = {}; Object.keys(TreeOld).forEach(function(KeyOld){ var Content = TreeOld[KeyOld]; - var KeyNew = ((typeof(SchemaCurr) == 'object' && KeyOld in SchemaCurr) ? SchemaCurr[KeyOld] : KeyOld); - if (typeof(Content) == 'object' && Content !== null) { + var KeyNew = ((IsObj(SchemaCurr) && KeyOld in SchemaCurr) ? SchemaCurr[KeyOld] : KeyOld); + if (IsObj(Content) && Content !== null) { if (Array.isArray(Content)) { // Lists /* var ListNew = []; @@ -87,12 +98,12 @@ function JsonTransformCycleB(TreeOld, SchemaNew, NodeNew, TypeOld) { if (TypeOld in TreeNew[KeyNew]) { var KeyOld = TreeNew[KeyNew][TypeOld]; var ObjOld = TreeOld[KeyOld]; - if (typeof(KeyOld) == 'object') { + if (IsObj(KeyOld)) { // Deep nested children in TreeOld } else { // Direct children in TreeOld - if (typeof(ObjOld) == 'object') { + if (IsObj(ObjOld)) { TreeNew[KeyNew] = JsonTransformB(ObjOld, SchemaNew, SchemaNew[KeyNew], TypeOld); } else { TreeNew[KeyNew] = ObjOld;