mirror of
https://gitlab.com/octospacc/octospacc.gitlab.io
synced 2025-01-03 04:09:24 +01:00
Finish Collections page, add global script everywhere
This commit is contained in:
parent
5778ef430f
commit
f111057a2b
0
public/Assets/JS/Global.js
Normal file
0
public/Assets/JS/Global.js
Normal file
@ -3,26 +3,33 @@
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>My Collections | OctoSpacc Place</title>
|
||||
<meta property="og:title" content="My Collections | OctoSpacc Place"/>
|
||||
<title>My Collections 🎀 | OctoSpacc Place</title>
|
||||
<meta property="og:title" content="My Collections 🎀 | OctoSpacc Place"/>
|
||||
<meta property="og:image" content="RichPreview/Collections.jpg"/>
|
||||
<meta property="og:url" content="https://hub.octt.eu.org/Collections/"/>
|
||||
<link rel="canonical" href="https://hub.octt.eu.org/Collections/"/>
|
||||
<!--<meta name="description" content=""/>
|
||||
<meta property="og:description" content=""/>-->
|
||||
<meta name="description" content="Organized listings and collections of my own posts and pages!"/>
|
||||
<meta property="og:description" content="Organized listings and collections of my own posts and pages!"/>
|
||||
<link rel="shortcut icon" href="../favicon.png" type="image/x-icon"/>
|
||||
<link href="../Assets/CSS/Dark.css" rel="stylesheet"/>
|
||||
<script src="../Assets/JS/RandomGIF.js"></script>
|
||||
<script src="../Assets/JS/Global.js"></script>
|
||||
<style>
|
||||
.form > * { margin: 4px; }
|
||||
#PostsListMain { text-align: left; }
|
||||
#SitesList, #PostsListMain { text-align: left; }
|
||||
#PostsListMain div { display: inline; }
|
||||
#PostsListMain h4 { display: inline-block; margin: 4px; }
|
||||
ul#PostsListMain { list-style: none; padding: 8px; }
|
||||
ul#PostsListMain > li { display: flex; }
|
||||
ul#PostsListMain > li > a { width: 100%; display: flex; align-items: center; }
|
||||
ul#PostsListMain > li > a > img { margin-left: auto; }
|
||||
#ActionsBar { text-align: right; }
|
||||
</style>
|
||||
<style id="StyleToggleThumbs" data-data="4em"> ul#PostsListMain > li > a > img { height: 4em; } </style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="Content" style="text-align: center;">
|
||||
<h2>My Collections</h2><br/>
|
||||
<h2>My Collections 🎀</h2><br/>
|
||||
<div style="max-width: 80%; margin: auto;">
|
||||
<p>
|
||||
🇬🇧 This page is an attempt to centralize my personal collections of thematic pages and posts,
|
||||
@ -41,18 +48,28 @@
|
||||
<noscript><p>(...if nothing happens please check that JavaScript is working on your browser for this site)</p></noscript>
|
||||
<p>Alternatively, check out my collections directly on my external sites:</p>
|
||||
<ul id="SitesList" class="BackgroundedBox">
|
||||
<li><a href="https://sitoctt.octt.eu.org/Categories/"
|
||||
<li>✨ <a href="https://sitoctt.octt.eu.org/Categories/"
|
||||
data-platform="staticoso"
|
||||
data-categories-blacklist="Blog MicroBlog Note"
|
||||
>https://sitoctt.octt.eu.org/Categories/</a></li>
|
||||
<li><a href="https://octospacc.altervista.org/libreria-post/"
|
||||
data-staticoso-assets-root="https://sitoctt-assets.octt.eu.org"
|
||||
>Tutte le categorie sul sitoctt</a></li>
|
||||
<li>📓️ <a href="https://octospacc.altervista.org/libreria-post/"
|
||||
data-platform="wordpress"
|
||||
data-categories-blacklist="Senza-categoria"
|
||||
data-dump="https://octospacc.github.io/microblog-mirror/search.json"
|
||||
>https://octospacc.altervista.org/libreria-post/</a></li>
|
||||
data-media-urls-replace='/microblog-mirror//assets/ /wp-content/'
|
||||
>Libreria dei post sul MicroBlog</a></li>
|
||||
<li>🏛️ <a href="https://bbs.spacc.eu.org/search.php?keywords=&terms=any&author=Octt&sc=1&sf=firstpost&sr=topics&sk=t&sd=d&st=0&ch=300&t=0&submit=Search"
|
||||
data-platform="phpbb"
|
||||
>Tutti i miei thread su Spacc BBS</a> (non in lista)</li>
|
||||
</ul>
|
||||
<br/><hr/><br/>
|
||||
<a name="..."></a>
|
||||
<div id="CategoriesList" class="form"></div>
|
||||
<div id="ActionsBar" class="form" style="display: none;">
|
||||
<button id="BtnToggleThumbs">Toggle Thumbnails Small/Large 🖼️</button>
|
||||
<br/><br/>
|
||||
</div>
|
||||
<div id="PostsList">
|
||||
<ul id="PostsListMain"></ul>
|
||||
<p id="PostsListAppend"></p>
|
||||
@ -62,37 +79,54 @@
|
||||
<span class="FlexItem FooterLeft">
|
||||
<a href="..">↩️ Go Back Home</a>
|
||||
</span>
|
||||
<span class="FlexItem FooterRight">
|
||||
<a href="#...">🔝 Scroll to Options</a>
|
||||
</span>
|
||||
</div>
|
||||
<script>(async function(){
|
||||
var [globalPosts, globalCategories] = [{}, {}];
|
||||
var [globalPosts, globalCategories] = [[], {}];
|
||||
var domParser = new DOMParser();
|
||||
PostsListAppend.textContent = '...';
|
||||
|
||||
// fetch posts
|
||||
for (var refElem of document.querySelectorAll('ul#SitesList > li > a')) {
|
||||
var [fetchUrl, fetchParser] = [null, null];
|
||||
var siteUrl = refElem.href.split('/').slice(0, 3).join('/');
|
||||
if (refElem.dataset.categoriesBlacklist) {
|
||||
refElem.dataset.categoriesBlacklist = refElem.dataset.categoriesBlacklist.toLowerCase();
|
||||
var fetchUrl, fetchParser;
|
||||
if (refElem.dataset.platform === 'staticoso') {
|
||||
fetchUrl = `${refElem.href.split('/').slice(0, 3).join('/')}/Search.html`;
|
||||
}
|
||||
switch (refElem.dataset.platform) { default:
|
||||
break; case 'staticoso':
|
||||
fetchUrl = `${siteUrl}/Search.html`;
|
||||
fetchParser = staticosoFetchParser;
|
||||
} else {
|
||||
break; case 'wordpress':
|
||||
fetchUrl = refElem.dataset.dump;
|
||||
fetchParser = (function(req){ return req.json() });
|
||||
fetchParser = wordpressFetchParser;
|
||||
}
|
||||
if (!fetchUrl || !fetchParser) {
|
||||
continue;
|
||||
}
|
||||
try {
|
||||
var postsReq = await fetch(fetchUrl);
|
||||
var postsData = await fetchParser(postsReq, { href: refElem.href, categoriesBlacklist: refElem.dataset.categoriesBlacklist.split(' ') });
|
||||
var postsData = await fetchParser(postsReq, {
|
||||
href: refElem.href,
|
||||
categoriesBlacklist: refElem.dataset.categoriesBlacklist.split(' '),
|
||||
staticosoAssetsRoot: refElem.dataset.staticosoAssetsRoot,
|
||||
mediaUrlsReplace: (refElem.dataset.mediaUrlsReplace || ' ').split(' '),
|
||||
});
|
||||
if (postsReq.status !== 200) {
|
||||
throw '';
|
||||
}
|
||||
globalPosts[refElem.href] = postsData;
|
||||
globalPosts = globalPosts.concat(postsData);
|
||||
} catch (err) {
|
||||
displayError();
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
// TODO handle blacklist
|
||||
for (var post of Object.values(globalPosts).flat()) {
|
||||
// reorder all by date and display them, newest first
|
||||
globalPosts.sort(function(a, b) { return (b.date - a.date) });
|
||||
for (var post of globalPosts) {
|
||||
for (var categoryIndex in post.categories) {
|
||||
var category = normalizeCategory(post.categories[categoryIndex]);
|
||||
post.categories[categoryIndex] = category;
|
||||
@ -101,20 +135,7 @@
|
||||
var categoryElem = document.createElement('button')//('li');
|
||||
//categoryElem.innerHTML = `<label><input type="radio" name="CategoryList"> ${humanizeCategory(category)}</label>`;
|
||||
categoryElem.textContent = humanizeCategory(category);
|
||||
categoryElem.onclick = (function(){
|
||||
var category = normalizeCategory(this.textContent);
|
||||
Array.from(CategoriesList.children).forEach(function(categoryElem){ categoryElem.disabled = false });
|
||||
this.disabled = true;
|
||||
PostsListMain.innerHTML = null;
|
||||
for (var post of Object.values(globalPosts).flat()) {
|
||||
if (post.categories.includes(category)) {
|
||||
var postElem = document.createElement('li');//('div');
|
||||
// TODO cover images
|
||||
postElem.innerHTML = `<a href="${post.url}"><h4>${post.title}</h4></a>`;
|
||||
PostsListMain.appendChild(postElem);
|
||||
}
|
||||
}
|
||||
});
|
||||
categoryElem.onclick = onSelectCategory;
|
||||
CategoriesList.appendChild(categoryElem);
|
||||
}
|
||||
globalCategories[category].push(post);
|
||||
@ -125,6 +146,28 @@
|
||||
LoadingInfo.textContent = null;
|
||||
PostsListAppend.textContent = null;
|
||||
|
||||
BtnToggleThumbs.onclick = (function(){
|
||||
var prev = StyleToggleThumbs.dataset.data;
|
||||
var curr = (prev !== '10em' ? '10em' : '4em');
|
||||
StyleToggleThumbs.innerHTML = StyleToggleThumbs.innerHTML.replace(prev, curr);
|
||||
StyleToggleThumbs.dataset.data = curr;
|
||||
});
|
||||
|
||||
async function onSelectCategory () {
|
||||
var category = normalizeCategory(this.textContent);
|
||||
Array.from(CategoriesList.children).forEach(function(categoryElem){ categoryElem.disabled = false });
|
||||
this.disabled = true;
|
||||
PostsListMain.innerHTML = null;
|
||||
ActionsBar.style = null;
|
||||
for (var post of globalPosts) {
|
||||
if (post.categories.includes(category)) {
|
||||
var postElem = document.createElement('li');//('div');
|
||||
postElem.innerHTML = `<a href="${post.url}"><h4>${post.title || '[?]'}</h4><!--<p>${post.summary}</p>--><img src="${post.image || ''}"/></a>`;
|
||||
PostsListMain.appendChild(postElem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function staticosoFetchParser (req, extra) {
|
||||
var postsData = {};
|
||||
var html = await req.text();
|
||||
@ -138,11 +181,20 @@
|
||||
for (postElem of categoryElem.querySelectorAll('div ul.staticoso-PagesList > li')) {
|
||||
var postLinkElem = postElem.querySelector('a');
|
||||
var postUrl = (postLinkElem || postElem).getAttribute('href');
|
||||
if (!postUrl || !postUrl.startsWith('../Posts/')) {
|
||||
if (!postUrl || !postUrl.startsWith('../Posts/') || postUrl === '../Posts/index.html') {
|
||||
continue;
|
||||
}
|
||||
postUrl = postUrl.split('/').slice(1).join('/');
|
||||
if (!postsData[postUrl]) {
|
||||
postsData[postUrl] = { url: (extra.href + postUrl), title: postLinkElem.textContent, date: (postElem.querySelector('time') || {}).textContent, categories: [] };
|
||||
postsData[postUrl] = {
|
||||
url: (extra.href + postUrl),
|
||||
title: postLinkElem.textContent,
|
||||
date: isoToUnixWithZone((postElem.querySelector('time') || {}).textContent || ''),
|
||||
image: (postElem.dataset.image
|
||||
? postElem.dataset.image.replace('[staticoso:CustomPath:Assets]', extra.staticosoAssetsRoot).replace('[staticoso:Folder:Assets:AbsoluteRoot]', extra.staticosoAssetsRoot)
|
||||
: (doc.querySelector(`div.staticoso-HtmlSearch-Pages > div.staticoso-HtmlSearch-Page[data-staticoso-htmlsearch-href="${postUrl}"] img[src]`) || {}).src
|
||||
),
|
||||
categories: [] };
|
||||
}
|
||||
postsData[postUrl].categories.push(categoryName);
|
||||
}
|
||||
@ -150,6 +202,39 @@
|
||||
return Object.values(postsData);
|
||||
}
|
||||
|
||||
// TODO: also handle (some) tags as categories
|
||||
async function wordpressFetchParser (req, extra) {
|
||||
var sourcePosts = await req.json();
|
||||
var finalPosts = [];
|
||||
for (var post of sourcePosts) {
|
||||
var newCategories = [];
|
||||
for (var category of post.categories) {
|
||||
category = normalizeCategory(category);
|
||||
if (!extra.categoriesBlacklist.includes(category)) {
|
||||
newCategories.push(category);
|
||||
}
|
||||
}
|
||||
if (newCategories.length === 0) {
|
||||
continue;
|
||||
}
|
||||
post.url = `${siteUrl}/?p=${post.ID}`;
|
||||
post.date = isoToUnixWithZone(post.date);
|
||||
post.categories = newCategories;
|
||||
var imageFrag = post.contentHtml.split('<img src="')[1];
|
||||
if (imageFrag) {
|
||||
if (imageFrag.startsWith(extra.mediaUrlsReplace[0])) {
|
||||
imageFrag = imageFrag.replace(extra.mediaUrlsReplace[0], extra.mediaUrlsReplace[1])
|
||||
}
|
||||
post.image = (siteUrl + imageFrag.split('"')[0]);
|
||||
}
|
||||
finalPosts.push(post);
|
||||
}
|
||||
return finalPosts;
|
||||
}
|
||||
|
||||
// NOTE: doesn't handle negative time zones
|
||||
function isoToUnixWithZone (time) { return Number(`${Date.parse(time)}.${time.split('+')[1] || 0}`) }
|
||||
|
||||
function normalizeCategory (category) { return category.toLowerCase().replaceAll(' ', '-') }
|
||||
|
||||
function humanizeCategory (category) { return category.split('-').map(function(word){
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<script src="../Assets/JS/Global.js"></script>
|
||||
<style>
|
||||
@Media (Prefers-Color-Scheme: Light) {
|
||||
Body, TextArea {
|
||||
|
||||
@ -92,6 +92,7 @@
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="../Assets/JS/Global.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="BtnFullscreen" onclick="ToggleFullscreen()">🎞️ Menu</button>
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
<link href="Bubbles.css" rel="stylesheet"/>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="../favicon.png"/>
|
||||
<link rel="manifest" href="./manifest.json"/>
|
||||
<script src="../Assets/JS/Global.js"></script>
|
||||
<style>
|
||||
Body {
|
||||
Color: #FFFFFF;
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
<link rel="stylesheet" media="screen" href="css/telegram-web.css"/>
|
||||
<link rel="stylesheet" media="screen" href="css/MBViewer.css"/>
|
||||
<link rel="stylesheet" media="print" href="css/print.css"/>
|
||||
<script src="../Assets/JS/Global.js"></script>
|
||||
</head>
|
||||
<body class="widget_frame_base tgme_webpreview emoji_image thin_box_shadow tme_mode no_transitions">
|
||||
<div class="tgme_background_wrap">
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>🃏️ [Matrix] Sticker Helper</title>
|
||||
|
||||
<script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
|
||||
<script src="//SpaccInc.gitlab.io/SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
|
||||
<script src="../Assets/JS/Global.js"></script>
|
||||
<script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script><!-- offline -->
|
||||
<script src="//SpaccInc.gitlab.io/SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script><!-- online -->
|
||||
<link rel="stylesheet" href="./paper.min.css"/>
|
||||
|
||||
<!--
|
||||
|
||||
0
public/ServiceWorker.js
Normal file
0
public/ServiceWorker.js
Normal file
@ -13,6 +13,7 @@
|
||||
<link rel="shortcut icon" href="../favicon.png" type="image/x-icon"/>
|
||||
<link href="../Assets/CSS/Dark.css" rel="stylesheet"/>
|
||||
<script src="../Assets/JS/RandomGIF.js"></script>
|
||||
<script src="../Assets/JS/Global.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="Content" style="text-align: center;">
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
<link href="./Assets/CSS/Dark.css" rel="stylesheet"/>
|
||||
<script src="./Assets/JS/RandomGIF.js"></script>
|
||||
<script src="./Assets/JS/CurrentAge.js"></script>
|
||||
<script src="./Assets/JS/Global.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="ConfettiCanvas"></div>
|
||||
@ -44,29 +45,31 @@
|
||||
<!--<h4><del><a href="https://octtspacc.gitlab.io/bachecoctt">🔖️ bachecoctt</a> (my WebPinBoard)</del></h4>-->
|
||||
<br/>
|
||||
<h4><!--
|
||||
--><a href="./HashyMagnet">🧲 HashyMagnet</a>
|
||||
--><a href="./HashyMagnet/">🧲 HashyMagnet</a>
|
||||
<small>(BitTorrent Hash to Magnet)</small><!--
|
||||
--></h4>
|
||||
<h4><!--
|
||||
--><a href="./Ecoji">🦜 Ecoji v1</a>
|
||||
--><a href="./Ecoji/">🦜 Ecoji v1</a>
|
||||
<small>(webapp fork)</small><!--
|
||||
--></h4>
|
||||
<h4><!--
|
||||
--><a href="./FramesBrowser">🪟️ Frames Browser</a>
|
||||
--><a href="./FramesBrowser/">🪟️ Frames Browser</a>
|
||||
<small>(<i>yo dawg, i heard you...</i>)</small><!--
|
||||
--></h4>
|
||||
<h4><a href="./MatrixStickerHelper">🃏️ [Matrix] Sticker Helper</a></h4>
|
||||
<h4><a href="./MatrixStickerHelper/">🃏️ [Matrix] Sticker Helper</a></h4>
|
||||
<h4><!--
|
||||
--><a href="./MBViewer">👁️🗨️️ MBViewer</a>
|
||||
--><a href="./MBViewer/">👁️🗨️️ MBViewer</a>
|
||||
<small>(WordPress/RSS/... chat-like UI)</small><!--
|
||||
--></h4>
|
||||
<h4><!--
|
||||
--><a href="./WuppiMini">☘️ WuppìMini</a>
|
||||
--><a href="./WuppiMini/">☘️ WuppìMini</a>
|
||||
<small>(basic-HTML posting client)</small><!--
|
||||
--></h4>
|
||||
<br/>
|
||||
<h4><a href="https://octospacc.gitlab.io/FumoPrisms">🔺️ Fumo Prisms (!)</a></h4>
|
||||
<h4><a href="./Userscripts">⚙️ My Userscripts</a></h4>
|
||||
<h4><a href="./Collections/">🎀 My Collections</a> <small>(of posts/pages)</small></h4>
|
||||
<h4><a href="./Userscripts/">⚙️ My Userscripts</a></h4>
|
||||
<h4>Some <a href="https://addons.mozilla.org/firefox/collections/18049170/octollection/">🦊 Firefox Add-ons</a> <small>(mine + suggestions)</small></h4>
|
||||
</div></div>
|
||||
<br/><br/><br/>
|
||||
<div id="OcttAgeView">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user