Add js/css basic needs (re-used)

css/base.php

@@ -0,0 +1,40 @@
+<style>
+body {
+	padding: 0;
+	margin: 0;
+	padding-top: 1em;
+	font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,"mastodon-font-sans-serif",sans-serif;
+}
+
+.toast-container {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: -moz-available;
+	display: flex;
+	padding: 1em;
+	max-width: 45em;
+	z-index: 1000;
+}
+
+.toast {
+	width: 100%;
+	min-height: 2em;
+	border: 1px solid #ffffff3d;
+	border-radius: 10px;
+	box-shadow: 0px 0px 2em black;
+	color: #fff;
+	padding: 1em 1.8em;
+	display: flex;
+}
+.toast.info {
+	background: #0f3377;
+}
+.toast.error {
+	background: #9b1919;
+}
+
+textarea {
+	max-width: -moz-available;
+}
+</style>

js/base.php

@@ -0,0 +1,174 @@
+<script>
+
+var E = {
+	elemid: function(id, cback) { const e = document.getElementById(id); return E.do(e, cback) },
+	element: function(q, cback) { const e = document.querySelector(q); return E.do(e, cback) },
+	elements: function(q, cback) { const e = document.querySelectorAll(q); return E.do(e, cback) },
+	do: function(e, cback) {
+		if (typeof cback === 'function' && e !== null && e !== undefined)
+			return cback(e);
+		return e;
+	},
+	class: {
+		removeAll: function(elems, cls) {
+			if (typeof elems === 'string') elems = E.elements(elems);
+			elems.forEach(function(it) {
+				it.classList !== undefined &&
+				it.classList.remove(cls) });
+		},
+		addAll: function(elems, cls) {
+			if (typeof elems === 'string') elems = E.elements(elems);
+			elems.forEach(function(it) {
+				it.classList !== undefined &&
+				it.classList.add(cls) });
+		},
+		setAll: function(elems, cls) {
+			if (typeof elems === 'string') elems = E.elements(elems);
+			elems.forEach(function(it) { it.className = cls });
+		},
+	},
+	removeAll: function(query) {
+		return E.remove(E.elements(query));
+	},
+	remove: function(query) {
+		if (typeof query === 'string') {
+			const _ = E.element(query);
+			if (_ !== null) _.remove();
+		} else if (query instanceof NodeList) {
+			for (var i = 0; i < query.length; i++)
+				query[i].remove();
+		} else if (query instanceof Object) {
+			query.remove();
+		}
+	},
+};
+
+function isVisible(element) {
+	const rect = element.getBoundingClientRect();
+	return (
+		rect.top >= 0 &&
+		rect.left >= 0 &&
+		rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+		rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+	);
+}
+
+function html2text(html) {
+	var e = document.createElement('div');
+	e.innerHTML = html;
+	const result = e.innerText;
+	e.remove();
+	return result;
+}
+
+function JSON_to_URLEncoded(element,key,list) {
+	var list = list || [];
+	if (typeof(element) == 'object') {
+		for (var idx in element)
+			JSON_to_URLEncoded(element[idx],key?key+'['+idx+']':idx,list);
+	} else {
+		list.push(key+'='+encodeURIComponent(element));
+	}
+	return list.join('&');
+}
+
+// source: https://www.geeksforgeeks.org/how-to-get-the-javascript-function-parameter-names-values-dynamically/
+function _get_func_params(func) {
+	// String representaation of the function code
+	var str = func.toString();
+	// Remove comments of the form /* ... */
+	// Removing comments of the form //
+	// Remove body of the function { ... }
+	// removing '=>' if func is arrow function
+	str = str.replace(/\/\*[\s\S]*?\*\//g, '')
+			.replace(/\/\/(.)*/g, '')
+			.replace(/{[\s\S]*}/, '')
+			.replace(/=>/g, '')
+			.trim();
+	// Start parameter names after first '('
+	var start = str.indexOf("(") + 1;
+	// End parameter names is just before last ')'
+	var end = str.length - 1;
+	var result = str.substring(start, end).split(", ");
+	var params = [];
+	result.forEach(element => {
+		// Removing any default value
+		element = element.replace(/=[\s\S]*/g, '').trim();
+		if(element.length > 0)
+			params.push(element);
+	});
+	return params;
+}
+
+function printstack() { console.error(new Error().stack) }
+function uuidv4() {
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+		var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+		return v.toString(16);
+	});
+}
+
+const http = {
+	request: function(method, path, payload, callbk) {
+		//console.log(path); printstack();
+		const httpdiv = document.getElementById('http');
+		const httpts  = new Date().getTime();
+		if (httpdiv !== null)
+			httpdiv.innerHTML += '<div id="http-'+httpts+'">'+method+' '+path+'</div>';
+		payload = payload || null;
+		callbk = callbk || null;
+		const oReq = new XMLHttpRequest();
+		oReq.addEventListener("load", function() {
+			if (httpdiv !== null) {
+				const hit = document.getElementById('http-'+httpts);
+				if (hit !== null) hit.remove();
+			}
+			if (callbk) {
+				const ps = _get_func_params(callbk);
+				if (ps.includes('data') || ps.includes('text') ||
+					ps.includes('html') || ps.includes('plain'))
+					callbk(this.responseText);
+				else if (ps.includes('json') || ps.includes('js')) {
+					try { callbk(JSON.parse(this.responseText)) }
+					catch (SyntaxError) { callbk(undefined) }
+				}
+			}
+		});
+		oReq.open(method, path);
+		oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+		oReq.send(JSON_to_URLEncoded(payload));
+	},
+	get: function(path, payload, callbk) {
+		return http.request('GET',  path, payload, callbk);
+	},
+	post: function(path, payload, callbk) {
+		return http.request('POST', path, payload, callbk);
+	},
+	API: {
+	}
+};
+const toast = {
+	error: function(text, timeo) {
+		timeo = timeo || 7000;
+		return toast._show(text, 'error', 'exclamation-triangle', timeo);
+	},
+	info: function(text, timeo) {
+		timeo = timeo || 5000;
+		return toast._show(text, 'info', 'info-circle', timeo)
+	},
+	_show: function(text, type, fa, timeo) {
+		const id = 'toast-'+(new Date()).getTime();
+		var div = document.createElement('div');
+		div.id = id;
+		div.className = 'toast-container';
+		div.setAttribute('onclick', 'this.remove()');
+		div.innerHTML = '<div class="toast '+type+'"><p style="margin: auto 0 !important;font-size: 1.2em;line-height: 1.8em;">'+
+			'<i style="margin-right: 1em;font-size: 1.2em;position:relative;top:.1em" class="fa fa-'+fa+'"></i>'+text+'</p></div>';
+		document.body.appendChild(div);
+		setTimeout(function() {
+			const el = document.getElementById(id)
+			if (el !== undefined && el !== null) el.remove();
+		}, timeo);
+	},
+};
+</script>

js/relativeTime.js

@@ -0,0 +1 @@
+!function(r,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):r.dayjs_plugin_relativeTime=t()}(this,function(){"use strict";return function(r,t,e){var n=t.prototype;e.en.relativeTime={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};var o=function(r,t,n,o){for(var d,i,u,a=n.$locale().relativeTime,f=[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],s=f.length,l=0;l<s;l+=1){var h=f[l];h.d&&(d=o?e(r).diff(n,h.d,!0):n.diff(r,h.d,!0));var m=Math.round(Math.abs(d));if(u=d>0,m<=h.r||!h.r){1===m&&l>0&&(h=f[l-1]);var c=a[h.l];i="string"==typeof c?c.replace("%d",m):c(m,t,h.l,u);break}}return t?i:(u?a.future:a.past).replace("%s",i)};n.to=function(r,t){return o(r,t,this,!0)},n.from=function(r,t){return o(r,t,this)};var d=function(r){return r.$u?e.utc():e()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)}}});

js/updateLocale.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.dayjs_plugin_updateLocale=n()}(this,function(){"use strict";return function(e,n,t){t.updateLocale=function(e,n){var o=t.Ls[e];if(o)return(n?Object.keys(n):[]).forEach(function(e){o[e]=n[e]}),o}}});