@awesomeness-js/server 1.0.2 → 1.1.0

package/ui/core/css/dynamic/spacing.js

@@ -0,0 +1,61 @@
+export default function({
+	sizes = [
+		'xl',
+		'd',
+		't',
+		'p'
+	],
+	pixels = 126
+} = {}) {
+
+	let data = ` `;
+
+	// dynamic margin
+	for( let i = 0; i < pixels; i += 5 ){
+
+		data += `.gap-${i} { gap:${i}px; } `;
+
+		data += `.m${i} { margin:${i}px; } `;
+		data += `.mt${i} { margin-top:${i}px; } `;
+		data += `.mb${i} { margin-bottom:${i}px; } `;
+		data += `.ml${i} { margin-left:${i}px; } `;
+		data += `.mr${i} { margin-right:${i}px; } `;
+		data += `.mtb${i} { margin-top:${i}px; margin-bottom:${i}px; } `;
+		data += `.mlr${i} { margin-left:${i}px; margin-right:${i}px; } `;
+
+		data += `.p${i} { padding:${i}px; } `;
+		data += `.pt${i} { padding-top:${i}px; } `;
+		data += `.pb${i} { padding-bottom:${i}px; } `;
+		data += `.pl${i} { padding-left:${i}px; } `;
+		data += `.pr${i} { padding-right:${i}px; } `;
+		data += `.ptb${i} { padding-top:${i}px; padding-bottom:${i}px; } `;
+		data += `.plr${i} { padding-left:${i}px; padding-right:${i}px; } `;
+
+		sizes.forEach((s) => {
+
+			data += `.app-size-${s} .gap-${i}-${s} { gap:${i}px; } `;
+
+			data += `.app-size-${s} .m${i}-${s} { margin:${i}px; } `;
+			data += `.app-size-${s} .mt${i}-${s} { margin-top:${i}px; } `;
+			data += `.app-size-${s} .mr${i}-${s} { margin-right:${i}px; } `;
+			data += `.app-size-${s} .mb${i}-${s} { margin-bottom:${i}px; } `;
+			data += `.app-size-${s} .ml${i}-${s} { margin-left:${i}px; } `;
+			data += `.app-size-${s} .mtb${i}-${s} { margin-top:${i}px; margin-bottom:${i}px; } `;
+			data += `.app-size-${s} .mlr${i}-${s} { margin-left:${i}px; margin-right:${i}px; } `;
+
+
+			data += `.app-size-${s} .p${i}-${s} { padding:${i}px; } `;
+			data += `.app-size-${s} .pt${i}-${s} { padding-top:${i}px; } `;
+			data += `.app-size-${s} .pr${i}-${s} { padding-right:${i}px; } `;
+			data += `.app-size-${s} .pb${i}-${s} { padding-bottom:${i}px; } `;
+			data += `.app-size-${s} .pl${i}-${s} { padding-left:${i}px; } `;
+			data += `.app-size-${s} .ptb${i}-${s} { padding-top:${i}px; padding-bottom:${i}px; } `;
+			data += `.app-size-${s} .plr${i}-${s} { padding-left:${i}px; padding-right:${i}px; } `;
+		
+		});
+
+	}
+
+	return data;
+
+}

package/ui/core/css/dynamic/text.js

@@ -0,0 +1,80 @@
+export default function(sizes = [
+	'xl',
+	'd',
+	't',
+	'p'
+]) {
+
+	let data = ` `;
+
+	data += `.text-center {text-align:center !important;} `;
+	data += `.text-left {text-align:left !important;} `;
+	data += `.text-right {text-align:right !important;} `;
+
+	data += `.text-300 {font-weight:300 !important;} `;
+	data += `.text-400 {font-weight:400 !important;} `;
+	data += `.text-500 {font-weight:500 !important;} `;
+	data += `.text-600 {font-weight:600 !important;} `;
+	data += `.text-700 {font-weight:700 !important;} `;
+	data += `.text-800 {font-weight:800 !important;} `;
+	data += `.text-900 {font-weight:900 !important;} `;
+
+	data += `.text-300--hover:hover{font-weight:300 !important;} `;
+	data += `.text-400--hover:hover{font-weight:400 !important;} `;
+	data += `.text-500--hover:hover{font-weight:500 !important;} `;
+	data += `.text-600--hover:hover{font-weight:600 !important;} `;
+	data += `.text-700--hover:hover{font-weight:700 !important;} `;
+	data += `.text-800--hover:hover{font-weight:800 !important;} `;
+	data += `.text-900--hover:hover{font-weight:900 !important;} `;
+
+	data += `.text-xxs {font-size:.70em !important;} `;
+	data += `.text-xs {font-size:.83em !important;} `;
+	data += `.text-s {font-size:.9em !important;} `;
+	data += `.text-m {font-size:1.1em !important;} `;
+	data += `.text-l {font-size:1.2em !important;} `;
+	data += `.text-xl {font-size:1.4em !important;} `;
+	data += `.text-xxl {font-size:1.6em !important;} `;
+	data += `.text-xxxl {font-size:2em !important;} `;
+
+	data += `.text-i {font-style:italic !important;} `;
+
+
+	sizes.forEach((s) => {
+
+		data += `.app-size-${s} .text-center-${s}{text-align:center !important;} `;
+		data += `.app-size-${s} .text-left-${s}{text-align:left !important;} `;
+		data += `.app-size-${s} .text-right-${s}{text-align:right !important;} `;
+
+		data += `.app-size-${s} .text-300-${s}{font-weight:300 !important;} `;
+		data += `.app-size-${s} .text-400-${s}{font-weight:400 !important;} `;
+		data += `.app-size-${s} .text-500-${s}{font-weight:500 !important;} `;
+		data += `.app-size-${s} .text-600-${s}{font-weight:600 !important;} `;
+		data += `.app-size-${s} .text-700-${s}{font-weight:700 !important;} `;
+		data += `.app-size-${s} .text-800-${s}{font-weight:800 !important;} `;
+		data += `.app-size-${s} .text-900-${s}{font-weight:900 !important;} `;
+
+		data += `.app-size-${s} .text-300-${s}--hover:hover{font-weight:300 !important;} `;
+		data += `.app-size-${s} .text-400-${s}--hover:hover{font-weight:400 !important;} `;
+		data += `.app-size-${s} .text-500-${s}--hover:hover{font-weight:500 !important;} `;
+		data += `.app-size-${s} .text-600-${s}--hover:hover{font-weight:600 !important;} `;
+		data += `.app-size-${s} .text-700-${s}--hover:hover{font-weight:700 !important;} `;
+		data += `.app-size-${s} .text-800-${s}--hover:hover{font-weight:800 !important;} `;
+		data += `.app-size-${s} .text-900-${s}--hover:hover{font-weight:900 !important;} `;
+
+
+		data += `.app-size-${s} .text-xxs-${s}{font-size:.70em !important;} `;
+		data += `.app-size-${s} .text-xs-${s}{font-size:.83em !important;} `;
+		data += `.app-size-${s} .text-s-${s}{font-size:.9em !important;} `;
+		data += `.app-size-${s} .text-m-${s}{font-size:1.1em !important;} `;
+		data += `.app-size-${s} .text-l-${s}{font-size:1.2em !important;} `;
+		data += `.app-size-${s} .text-xl-${s}{font-size:1.4em !important;} `;
+		data += `.app-size-${s} .text-xxl-${s}{font-size:1.6em !important;} `;
+		data += `.app-size-${s} .text-xxxl-${s}{font-size:2em !important;} `;
+
+		data += `.app-size-${s} .i-${s}{font-style:italic !important;} `;
+
+	});
+
+	return data;
+
+}

package/ui/core/css/dynamic/width.js

@@ -0,0 +1,75 @@
+export default function(sizes = [
+	'xl',
+	'd',
+	't',
+	'p'
+]) {
+
+	let data = ` `;
+
+	// dynamic width
+	for (let i = 1; i <= 100; i++) {
+
+		// float
+		data += `.width${i} { width:${i}%; } `;
+		sizes.forEach((s) => {
+
+			data += `.app-size-${s} .width${i}-${s} { width:${i}%; } `;
+		
+		});
+
+	}
+
+	// dynamic height
+	for (let i = 1; i <= 1000; i++) {
+
+		// float
+		data += `.height${i} { height:${i}%; } `;
+		sizes.forEach((s) => {
+
+			data += `.app-size-${s} .height${i}-${s} { height:${i}%; } `;
+		
+		});
+
+	}
+
+
+	for (let i = 5; i <= 2000; i += 5) {
+		
+		// max width
+		data += `.width-${i} { width:${i}px; } `;
+		data += `.height-${i} { height:${i}px; } `;
+		data += `.max-width-${i} { max-width:${i}px; } `;
+		data += `.min-width-${i} { min-width:${i}px; } `;
+		data += `.max-height-${i} { max-height:${i}px; } `;
+		data += `.min-height-${i} { min-height:${i}px; } `;
+
+		sizes.forEach((s) => {
+
+			data += `.app-size-${s} .width-${i}-${s} { width:${i}px; } `;
+			data += `.app-size-${s} .height-${i}-${s} { height:${i}px; } `;
+			data += `.app-size-${s} .max-width-${i}-${s} { max-width:${i}px; } `;
+			data += `.app-size-${s} .min-width-${i}-${s} { min-width:${i}px; } `;
+			data += `.app-size-${s} .max-height-${i}-${s} { max-height:${i}px; } `;
+			data += `.app-size-${s} .min-height-${i}-${s} { min-height:${i}px; } `;
+		
+		});
+
+	}
+
+
+	// span 1 - 12
+	for (let i = 1; i <= 12; i++) {
+
+		data += `.span${i} { width:${i / 12 * 100}%; } `;
+		sizes.forEach((s) => {
+
+			data += `.app-size-${s} .span${i}-${s} { width:${i / 12 * 100}%; } `;
+		
+		});
+	
+	}
+
+	return data;
+
+}

package/ui/core/css/dynamic.js

@@ -0,0 +1,40 @@
+import grid from './dynamic/grid.js';
+import text from './dynamic/text.js';
+import spacing from './dynamic/spacing.js';
+import shortcuts from './dynamic/shortcuts.js';
+import width from './dynamic/width.js';
+import flex from './dynamic/flex.js';
+
+function dynamicCSS() {
+
+	let sizes = [
+		'xl', // extra large
+		'd', // desktop
+		't', // tablet
+		'p' // phone
+	];
+		
+	let data = '';
+
+	const pixels = 126;
+
+	data += shortcuts(sizes);
+	data += text(sizes);
+	data += width(sizes);
+	data += flex(sizes);
+
+	data += spacing({
+		sizes,
+		pixels 
+	});
+	data += grid({
+		sizes,
+		pixels 
+	});
+	
+	return data;
+
+}
+
+
+export { dynamicCSS };

package/ui/core/js/app/api.js

@@ -0,0 +1,143 @@
+app.api = async function (route, data = {}) {
+
+	const time = Date.now();
+
+	if (!route) throw {
+		reason: 'route undefined',
+		route,
+		data 
+	};
+	if (route[0] === '/') route = route.substring(1);
+	if (route.match(/[^a-zA-Z0-9/_\-]/)) throw {
+		reason: 'route invalid',
+		route,
+		data 
+	};
+
+	const deviceInfo = {
+		device: 'web',
+		userAgent: window.navigator.userAgent 
+	};
+
+	let isFormData = false;
+	let body;
+
+	// Detect files
+	if (data && Object.values(data).some((v) => v instanceof File || v instanceof FileList || (Array.isArray(v) && v[0] instanceof File))) {
+
+		isFormData = true;
+		const formData = new FormData();
+
+		formData.append('awesomenessType', 'api');
+		formData.append('meta', JSON.stringify(app.meta));
+		formData.append('device', JSON.stringify(deviceInfo));
+
+
+		for (const key in data) {
+
+			const val = data[key];
+
+			if (val instanceof FileList) {
+
+				[ ...val ].forEach((f) => formData.append(key + '[]', f));
+			
+			} else if (Array.isArray(val) && val[0] instanceof File) {
+
+				val.forEach((f) => formData.append(key + '[]', f));
+			
+			} else {
+
+				formData.append(key, val);
+			
+			}
+		
+		}
+
+		body = formData;
+	
+	} else {
+
+		body = JSON.stringify({
+			awesomenessType: 'api',
+			meta: app.meta,
+			device: deviceInfo,
+			... data,
+		});
+	
+	}
+
+	let headers = {
+		'Authorization': 'Bearer ' + (app.session ?? ''),
+	};
+
+	if (!isFormData) headers['Content-Type'] = 'application/json';
+
+	let fetchOptions = {
+		method: 'POST',
+		headers,
+		body,
+		timeout: 5 * 60 * 1000,
+	};
+
+	try {
+
+		if (app.testing) {
+
+			console.log('%capi: ', 'color: blue; font-weight:bold;', route, isFormData ? body : JSON.parse(body));
+		
+		}
+
+
+		const response = await fetch(app.apiBaseURL + route, fetchOptions);
+
+		if (!response.ok) throw {
+			status: response.status,
+			...(await response.json()) 
+		};
+
+		const doneData = await response.json();
+
+		app.metaUpdates(doneData.meta);
+
+		if (app.testing) {
+
+			if (doneData.testing) {
+
+				if (doneData.testing.perf) doneData.testing.perf.xhr = Date.now() - time;
+				console.log('%ctesting: ', 'color: purple; font-weight:bold;', doneData.testing);
+			
+			}
+
+			delete doneData.testing;
+			console.log('%cmeta: ', 'color: #ff6f00; font-weight:bold;', doneData.meta ?? null);
+			delete doneData.meta;
+			console.log('%capi: ', 'color: green; font-weight:bold;', doneData);
+		
+		} else {
+
+			delete doneData.testing;
+			delete doneData.meta;
+		
+		}
+
+		
+		return doneData;
+	
+	} catch (errorData) {
+
+		if (app.testing) console.log('%capi: ', 'color: red; font-weight:bold;', errorData);
+
+		if (errorData.APP_SESSION) {
+
+			app.session = null;
+			app.user = null;
+			window.localStorage.removeItem('awesomeness-appSession');
+			location.reload();
+		
+		}
+
+		throw errorData;
+	
+	}
+
+};

package/ui/core/js/app/init.js

@@ -0,0 +1,88 @@
+app.init = async function({
+	loadPage = 'start',
+	emptyBody = false,
+} = {}){
+
+	app._supportsConstructableSheets =
+		!!document.adoptedStyleSheets &&
+		typeof CSSStyleSheet !== "undefined" &&
+		typeof CSSStyleSheet.prototype.replaceSync === "function";
+
+	app.session = window.localStorage.getItem('awesomeness-appSession');
+
+	// fuck with dark mode
+	app.initDarkMode();
+
+	// adjust on resize
+	window.onresize = function(){
+
+		app.resize(); 
+
+	};
+
+	app.resize(); // trigger initial resize
+
+	// URL STUFF
+	var origLocation = window.location.pathname;
+
+	// do we have a mouse
+	app.mouse = false;
+
+
+	const $body = $('body');
+
+	window.addEventListener('beforeunload', () => {
+
+		console.log('Saving last page info:', {
+			url: origLocation,
+			scrollY: window.scrollY
+		});
+
+		localStorage.setItem('awesomeness-lastPage', JSON.stringify({
+			url: origLocation,
+			scrollY: window.scrollY
+		}));
+
+	});
+
+	
+
+
+	$body.on('mousemove', function(){
+
+		app.mouse = true; 
+		$body.off('mousemove'); 
+
+	});
+
+	if(loadPage){
+
+		if(emptyBody){
+
+			$body.empty();
+		
+		}
+
+		app.page(loadPage, { origLocation });
+	
+	}
+	
+	const url = "/app.css";
+
+	const css = await fetch(url).then((r) => r.text());
+
+	const sheet = new CSSStyleSheet();
+
+	sheet.replaceSync(css);
+
+	app.meta.styleSheets.__CORE__ = sheet;
+
+	// Optional: Apply globally if not shadow-based
+	document.adoptedStyleSheets = [
+		...(document.adoptedStyleSheets || []),
+		sheet
+	];
+
+	return true;
+
+};

package/ui/core/js/app/initDarkMode.js

@@ -0,0 +1,26 @@
+app.initDarkMode = function(){
+
+	// ititial add
+	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+
+		document.body.classList.add('darkMode');
+	
+	}
+
+	// adjust on change	
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+
+		if(event.matches){
+
+			document.body.classList.add('darkMode'); 
+
+		} else {
+
+			document.body.classList.remove('darkMode'); 
+
+		}
+	
+	});
+
+
+};

package/ui/core/js/app/initialScroll.js

@@ -0,0 +1,28 @@
+app.initialScroll = async function(){
+
+	// if we have the same page 
+	const wereOnSamePage_raw = localStorage.getItem('awesomeness-lastPage');
+
+	if(wereOnSamePage_raw){
+
+		const wereOnSamePage = JSON.parse(wereOnSamePage_raw);
+
+		const url = window.location.pathname;
+
+		if(wereOnSamePage.url == url){
+
+			if(wereOnSamePage.scrollY){
+
+				setTimeout(function(){
+
+					window.scrollTo(0, wereOnSamePage.scrollY);
+					
+				}, 100);
+				
+			}
+
+		}
+		
+	}
+
+};

package/ui/core/js/app/meta/update/components.js

@@ -0,0 +1,65 @@
+app.meta.update.components = function (components) {
+
+	Object.entries(components).forEach(([ name, component ]) => {
+
+		app.meta.components[name] = component.hash;
+
+		// prefix + normalize
+		const key = "component__" + String(name).replaceAll("/", "_");
+
+		// CSS
+		if (component.css) {
+
+			if (app._supportsConstructableSheets) {
+
+				let sheet = app.meta.styleSheets[key];
+
+
+				if (!sheet) {
+
+					sheet = new CSSStyleSheet();
+					app.meta.styleSheets[key] = sheet;
+					document.adoptedStyleSheets = [ ...document.adoptedStyleSheets, sheet ];
+				
+				}
+
+				sheet.replaceSync(component.css);
+			
+			} else {
+
+				// fallback <style> injection
+				const cssID = key;
+				const cssTag ='<style type="text/css" id="' + cssID + '">' + component.css + "</style>";
+
+				// remove old and insert new inside #css bucket
+				$("#" + cssID).remove();
+				let $css = $("#css");
+
+				if (!$css.length) $css = $('<div id="css"></div>').appendTo($("body"));
+				$(cssTag).appendTo($css);
+			
+			}
+		
+		}
+
+		// JS
+		if (component.js) {
+
+			try {
+
+				eval(component.js);
+			
+			} catch (error) {
+
+				console.error("Failed to load function:", {
+					component: name,
+					error 
+				});
+			
+			}
+		
+		}
+	
+	});
+
+};

package/ui/core/js/app/meta/update/pages.js

@@ -0,0 +1,86 @@
+app.meta.update.pages = function (pages) {
+
+	if (!pages) return;
+
+	$.each(pages, function (rawName, pageData) {
+
+		// normalize name like original (no leading/trailing slash)
+		const name = String(rawName).replace(/^\/+|\/+$/g, "");
+		const nameParts = name.split("/");
+
+		// ensure namespace: app.pages.example.test
+		let base = app.pages;
+
+
+		for (let i = 0; i < nameParts.length; i++) {
+
+			const part = nameParts[i];
+
+			if (!base[part]) base[part] = {};
+			base = base[part];
+		
+		}
+
+		// CSS (hot-reload)
+		if (pageData.css) {
+
+			const key = "page__" + name.replaceAll("/", "_"); // <- prefix here
+
+			if (app._supportsConstructableSheets) {
+
+				let sheet = app.meta.styleSheets[key];
+
+
+				if (!sheet) {
+
+					sheet = new CSSStyleSheet();
+					app.meta.styleSheets[key] = sheet;
+					document.adoptedStyleSheets = [ ...document.adoptedStyleSheets, sheet ];
+				
+				}
+
+				sheet.replaceSync(pageData.css);
+			
+			} else {
+
+				// fallback: <style> injection
+				const cssID = key; // id equals prefixed key
+				const cssTag ='<style type="text/css" id="' + cssID + '">' + pageData.css + "</style>";
+
+				$("#" + cssID).remove(); // remove old
+				let $css = $("#css");
+
+				if (!$css.length) $css = $('<div id="css"></div>').appendTo($("body"));
+				$(cssTag).appendTo($css);
+			
+			}
+		
+		}
+
+		// JS (hot-reload)
+		if (pageData.js) {
+
+			try {
+
+				eval(pageData.js); 
+
+			} catch (error) {
+
+				console.error("Failed to load page script:", {
+					name,
+					error 
+				});
+			
+			}
+		
+		}
+
+		// metadata
+		app.meta.pages[name] = pageData.version;
+		
+		base.version = pageData.version;
+		base.about = pageData.about;
+	
+	});
+
+};

package/ui/core/js/app/metaUpdates.js

@@ -0,0 +1,10 @@
+app.metaUpdates = function(meta){
+
+	if(!meta) return;
+
+	// ORDER OF UPDATES MATTERS
+	if(meta.user) app.user = meta.user;
+	if(meta.pages) app.meta.update.pages(meta.pages);
+	if(meta.components) app.meta.update.components(meta.components);
+
+};