funiter/funiter.js

const gateway = 'gateway.pinata.cloud';
// const gateway = 'ipfs.copylaradio.com';
// const gateway = 'libra.copylaradio.com';

const answersId = 'Qmde15Aqjvz59s38ma3UhGTbKnwJtS5wYDwKRuQQrrc7mD';
let feedUrl = 'http://' + gateway + '/ipfs/' + answersId;
// let url = 'ipfs:///ipfs/' + answersId;

let jsToDOM = function (rootElt, children) {

	for (const child of children) {

		let elt = document.createElement(child.tag)

		if (child.classList !== undefined) {

			for (const aCSSClass of child.classList) {

				elt.classList.add(aCSSClass)
			}
		}

		if (child.props !== undefined) {

			for (const property in child.props) {

				elt[property] = child.props[property]
			}
		}

		if (child.children !== undefined) {

			elt = jsToDOM(elt, child.children)
			
		} else {

			if (child.innerHTML !== undefined) {

				elt.innerHTML = child.innerHTML
			}
		}

		rootElt.append(elt)
	}

	return rootElt
}

let vaChercher = async function (pageUrl) {

	var myHeaders = new Headers();

	let options = {
		method: 'GET', // *GET, POST, PUT, DELETE, etc.
		// mode: 'no-cors', // no-cors, *cors, same-origin
		cache: 'default', // *default, no-cache, reload, force-cache, only-if-cached
		credentials: 'omit', // include, *same-origin, omit
		// headers: myHeaders, 
		headers: { "Content-Type": "application/json" },
		redirect: 'follow', // manual, *follow, error
		referrerPolicy: 'no-referrer' // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
	};

	// console.log(url);

	fetch(feedUrl, options)
		.then(r => {

			if (!r.ok) {

				throw new Error('Network response was not OK');
			}

			return r.json()
		})
		.then(jason => {

			for (const item of jason) {

				let whereChild = document.querySelector('[data-post-id="'+item.position+'"]')
				let where = whereChild.parentNode

				let message = {

					  author : 'boris'
					, relativeDate : '2022-12-27'
					, contents : item.message
					, userAvatarSrc : browser.runtime.getURL("icons/tails.png")
				}

				let freeUserSymbol = browser.runtime.getURL("icons/funiter-48.png")
				
				let messageWrapperElt = document.createElement("div")
				messageWrapperElt.classList.add("topic-post", "clearfix", "regular", "sticky-avatar")

				let template = [
					{
						  tag : 'article'
						, classList : ['boxed', 'onscreen-post']
						, children : [
							{
								  tag : 'div'
								, classList : ['row']
								, children : [
									{
										  tag : 'div'
										, classList : ['topic-avatar']
										, children : [
											{
												  tag : 'div'
												, classList : ['post-avatar']
												, children : [
													{
														  tag : 'a'
														, classList : ['trigger-user-card', 'main-avatar']
														, children : [
															{
																  tag : 'img'
																, classList : ['avatar']
																, props : {
																	  src : message.userAvatarSrc
																	, width : 45
																	, height : 45
																}
															}
														]
													}
												]
											}
										]
									}
									, {
										  tag : 'div'
										, classList : ['topic-body', 'clearfix']
										, children : [
											{
												  tag : 'div'
												, classList : ['topic-meta-data']
												, children : [
													{
														  tag : 'div'
														, classList : ['names', 'trigger-user-card']
														, children : [
															{
																  tag : 'span'
																, classList : ['first', 'username']
																, children : [
																	{
																		  tag : 'a'
																		, innerHTML : message.author
																	}

																	, {
																		  tag : 'span'
																		, classList : ['svg-icon-title']
																		, props : {
																			title : 'This user is free'
																		}, children : [
																			{
																				  tag : 'img'
																				, props : {
																					  width  : 16
																					, height : 16
																					, src : freeUserSymbol
																				}
																			}
																		]
																	}
																]
															}
														]
													}
													, {
														  tag : 'div'
														, classList : ['post-infos']
														, children : [
															{
																  tag : 'div'
																, classList : ['post-info', 'post-date']
																, children : [
																	{
																		  tag : 'a'
																		, classList : ['widget-link', 'post-date']
																		, children : [
																			{
																				  tag : 'span'
																				, classList : ['relative-date']
																				, innerHTML : message.relativeDate
																			}
																		]
																	}
																]
															}
														]
													}
												]
											}
											, {
												  tag : 'div'
												, classList : ['regular', 'contents']
												, children : [
													{
														  tag : 'div'
														, classList : 'cooked'
														, innerHTML : message.contents
													}
												]
											}
										]
									}
								]
							}
						]
					}
				]

				messageWrapperElt = jsToDOM(messageWrapperElt, template)

				where.insertAdjacentElement('afterend', messageWrapperElt)
			}
		})
		.catch(err => {

			console.error(err)
		})
}

let pageUrl = window.location.href

if (pageUrl.match(/\/[0-9]+(\/[0-9]+)?$/)) {

	vaChercher(pageUrl)
}

let tabUpdateHandler = function () {


	/*
	console.log("j'écoute")


	*/
}

console.log('coucou')

// DOMContentLoaded
document.addEventListener('DOMContentLoaded', (event) => {

	console.log('coucou 2')
	tabUpdateHandler()
})