@awesomeness-js/server 1.1.11 → 1.1.14

package/tests/fixtures/site-and-components/components/app/simple/index.js

@@ -0,0 +1,170 @@
+import ui from '#ui';
+
+export default ({
+	replaceApp = true,
+	navItems = [],
+	logo = 'AwesomenessJS.com',
+	fancyNavUnderline = true,
+	maxWidth = null,
+	navMaxWidth = null,
+} = {}) => {
+
+	console.log({ navMaxWidth });
+
+	let $app = ui.app.vanilla({ replaceApp });
+
+	const themeProps = ui.theme();
+
+	const $topNavBar = $(`<div class="awesomeness-app-simple-navBar ${themeProps.text.secondary}"></div>`)
+		.appendTo($app);
+
+	const $navBarInterior = $(`<div class="awesomeness-app-simple-navBar-interior"></div>`)
+		.appendTo($topNavBar);
+
+
+	if(navMaxWidth){
+
+		$navBarInterior.css('max-width', `${navMaxWidth}px`);
+	
+	}
+
+	const $logo = $(`<div class="awesomeness-app-simple-logo ${themeProps.text.accent}--hover">${logo}</div>`)
+		.appendTo($navBarInterior)
+		.on('click', () => {
+
+			window.location.href = '/';
+		
+		});
+
+	const $topNavItems = $(`<div class="hidden-t hidden-p awesomeness-app-simple-top-navItems"></div>`)
+		.appendTo($navBarInterior);
+
+	const $main = $(`<div id="main" class="awesomeness-app-simple-main ${themeProps.surface.base}"></div>`)
+		.appendTo($app);
+
+	if(maxWidth){
+
+		$main.css('max-width', `${maxWidth}px`);
+	
+	}
+
+	const $menuNav = $(`<i class="ico-menu awesomeness-app-simple-menu-button hidden-xl hidden-d ${themeProps.text.secondary} ${themeProps.text.accent}--hover"></i>`)
+		.appendTo($navBarInterior);
+
+	const $phoneMenu = $(`<div class="awesomeness-app-simple-phone-menu hidden-xl hidden-d ${themeProps.surface.base} ${themeProps.text.secondary} ${themeProps.text.accent}--hover pt65"></div>`);
+
+	
+	if(navItems.length > 0){
+		
+		const $navItemsContainer = $(`<div class="flex gap-10 height-65"></div>`)
+			.appendTo($topNavItems);
+
+		navItems.forEach((item) => {
+
+			let thisFancyNavUnderline = fancyNavUnderline;
+
+			if(!item.name && item.ico) {
+
+				item.name = `<i class="ico-${item.ico}"></i>`;
+				thisFancyNavUnderline = false;
+			
+			}
+
+
+			const itemContent = thisFancyNavUnderline ? `<span class="underline">${item.name}</span>` : item.name;
+
+			const $link = ui.link({
+				link: item.url,
+			}).appendTo($navItemsContainer)
+				.addClass(`flex justify-center align-center`);
+
+			const $item = $(`<div class="awesomeness-app-simple-nav-item ${themeProps.text.secondary} ${themeProps.text.accent}--hover">${itemContent}</div>`)
+				.appendTo($link);
+
+			
+			$link.clone(true).appendTo($phoneMenu);
+
+		});
+
+	}
+
+	// Put this after you create $menuNav and $phoneMenu
+
+	let menuOpen = false;
+
+	// Ensure phone menu is in the DOM
+	$phoneMenu.appendTo($app);
+
+	// Backdrop (z-index 2)
+	const $menuBackdrop = $('<div class="awesomeness-app-simple-menu-backdrop clearfix hidden"></div>')
+		.appendTo($app);
+
+	// icon swap helpers
+	const setMenuIconOpen = () => {
+
+		$menuNav.removeClass('ico-menu').addClass('ico-x');
+
+	};
+
+	const setMenuIconClosed = () => {
+
+		$menuNav.removeClass('ico-x').addClass('ico-menu');
+
+	};
+
+	// open/close
+	const openMenu = () => {
+
+		if (menuOpen) return;
+		menuOpen = true;
+
+		$menuBackdrop.removeClass('hidden'); // show backdrop
+		$phoneMenu.addClass('is-open');      // slide down
+		setMenuIconOpen();
+
+	};
+
+	const closeMenu = () => {
+
+		if (!menuOpen) return;
+		menuOpen = false;
+
+		$phoneMenu.removeClass('is-open');   // slide up
+		$menuBackdrop.addClass('hidden');    // hide backdrop
+		setMenuIconClosed();
+
+	};
+
+	const toggleMenu = () => (menuOpen ? closeMenu() : openMenu());
+
+	// button click
+	$menuNav.on('click', (e) => {
+
+		e.preventDefault();
+		toggleMenu();
+
+	});
+
+	// backdrop click closes
+	$menuBackdrop.on('click', (e) => {
+
+		e.preventDefault();
+		closeMenu();
+
+	});
+
+	// clicking a link closes
+	$phoneMenu.on('click', 'a', () => closeMenu());
+
+	// defensive: if items aren't anchors
+	$phoneMenu.find('.awesomeness-app-simple-nav-item').on('click', () => closeMenu());
+
+	ui.scrollSpy.top({
+		threshold: 120,
+		className: themeProps.surface.base,
+		$applyTo: $topNavBar
+	});
+	
+	return $app;
+
+};

package/tests/fixtures/site-and-components/components/app/start.js

@@ -0,0 +1,165 @@
+import ui from '#ui';
+
+export default function startApp({
+	data = {},
+	style = 'simple',
+	theme = {
+		name: 'light',
+		neutralColor: 'zinc',
+		accentColor: 'cyan',
+		customColors: {},
+	},
+	navItems = [],
+	logo = null,
+	styleConfig = {
+	},
+	postSetupHook = null,
+	home = null,
+}) {
+
+	if(!ui.app[style]){
+
+		throw new Error(`App style ${style} not found`);
+
+	}
+
+	app.theme = theme;
+
+	if(theme.customColors){
+
+		$.each(theme.customColors, (name, hexValue) => {
+
+			let inputColor;
+			let anchorShade = 600;
+
+			if(typeof hexValue === 'string'){
+
+				inputColor = hexValue;
+
+			} else if(typeof hexValue === 'object' && hexValue !== null){
+
+				inputColor = hexValue.inputColor;
+				anchorShade = hexValue.anchorShade || anchorShade;
+
+			}
+
+			ui.colors.custom({
+				inputColor: inputColor,
+				anchorShade: 600,
+				name
+			});
+
+		});
+
+	}
+
+	// create HTML first
+	// could be done in parts broken down in the scripts folder
+	var $body = $('body');
+
+	$body.empty();
+
+	var $app = $('<div id="app"></div>').appendTo($body);
+	
+	ui.app[style]({
+		logo,
+		navItems,
+		...styleConfig
+	});
+
+	app.$app = $app;
+
+	if(postSetupHook && typeof postSetupHook === 'function'){
+
+		postSetupHook({ $app });
+	
+	}
+
+
+	const $main = ui.app.cleanMain();
+
+
+	if(
+		data?.goToPage
+		&& data.goToPage != 'start'
+	){
+
+		let place = app.pages;
+		const trimmedPlace = data.goToPage.replace(/^\/+|\/+$/g, '');
+		const placeParts = trimmedPlace.split('/');
+
+		for(const part of placeParts){
+
+			if(!place[part]){
+
+				place[part] = {};
+			
+			}
+
+			place = place[part];
+		
+		}
+
+		if(place.init){
+
+			if(data.goToPage == "_md"){
+
+				// state management
+				app.state.create({
+					title: data?.pageData?.metadata?.title ?? '👋',
+					url: data?.pageData?.metadata?.url ?? data?.origLocation ?? '/' + data.goToPage,
+				});
+
+			} else {
+
+				// state management
+				app.state.create({
+					title: place?.about?.title ?? '👋',
+					url: place?.about?.url ?? data?.origLocation ?? '/' + data.goToPage,
+				});
+
+			}
+			
+			place.init(data.pageData);
+			
+		} else {
+
+			console.warn('No page found for', data);
+
+			if(data.errorFetchingPage?.code){
+
+				ui.statusPage(data.errorFetchingPage?.code).appendTo($app);
+
+			} else {
+
+				ui.statusPage(401).appendTo($app);
+
+			}
+
+
+		}
+
+		
+	} else {
+
+		if(home && typeof home === 'function'){
+
+			home({
+				$app,
+				data,
+				$main 
+			});
+
+		}
+
+	}
+
+
+	setTimeout(function(){
+
+		app.initialScroll();
+
+	}, 10);
+
+
+}

package/tests/fixtures/site-and-components/components/app/vanilla/_.css

@@ -0,0 +1 @@
+/* nothing */

package/tests/fixtures/site-and-components/components/app/vanilla/index.js

@@ -0,0 +1,27 @@
+import ui from '#ui';
+
+export default ({
+	replaceApp = true
+} = {}) => {
+
+	let $app;
+
+	if (replaceApp) {
+
+		$app = $('#app');
+		$app.empty().addClass('awesomeness-app-simple');
+	
+	} else {
+
+		$app = $('<div class="awesomeness-app-simple"></div>');
+
+	}
+
+	const themeProps = ui.theme();
+
+	$app.addClass(themeProps.surface.base);
+	$('body').addClass(themeProps.surface.base);
+	
+	return $app;
+
+};

package/tests/fixtures/site-and-components/components/scrollSpy/elm.js

@@ -0,0 +1,172 @@
+import ui from '#ui';
+
+export default ({
+	$elm,
+	callback = () => {},
+	root = null,
+	rootMargin = "0px 0px",
+	threshold = 0.01,
+	once = true,
+
+	// auto cleanup
+	destroyOnRemove = true,
+	removeRoot = null, // defaults below
+	debug = false
+} = {}) => {
+
+	const registry = ui.scrollSpy.observerPoolRegistry();
+
+	if (!$elm) throw new Error("observer: missing $elm");
+
+	const el = $elm?.[0] || $elm;
+
+	if (!el || !el.nodeType) {
+
+		throw new Error("observer: $elm must be a DOM element or a jQuery-like wrapper");
+	
+	}
+
+	if (!removeRoot) removeRoot = document.documentElement || document.body;
+
+	let pool = null;
+	let mo = null;
+	let connectMo = null;
+
+	let last = null;
+	let destroyed = false;
+	let started = false;
+	const subscriber = {
+		safeCall: (isIntersecting, entry) => safeCall(isIntersecting, entry)
+	};
+
+	const log = (...args) => debug && console.log("[observer]", ...args);
+
+	const safeCall = (v, entry) => {
+
+		if (destroyed) return;
+
+		v = !!v;
+
+		if (v === last) return;
+		last = v;
+
+		try {
+
+			callback(v, entry);
+
+		} catch (e) {}
+
+		if (once && v) destroy();
+
+	};
+
+	const destroy = () => {
+
+		if (destroyed) return;
+		destroyed = true;
+
+		ui.scrollSpy.observerPoolUnsubscribe({
+			registry,
+			poolEntry: pool,
+			targetElm: el,
+			subscriber
+		});
+		pool = null;
+
+		if (mo) mo.disconnect();
+		mo = null;
+
+		if (connectMo) connectMo.disconnect();
+		connectMo = null;
+
+		log("destroyed");
+
+	};
+
+	const start = () => {
+
+		if (destroyed || started) return;
+		started = true;
+
+		pool = ui.scrollSpy.observerPoolGet({
+			registry,
+			root,
+			rootMargin,
+			threshold 
+		});
+
+		ui.scrollSpy.observerPoolSubscribe({
+			poolEntry: pool,
+			targetElm: el,
+			subscriber
+		});
+
+		log("started", {
+			el,
+			root,
+			rootMargin,
+			threshold,
+			sharedObserverPool: true
+		});
+
+		// auto destroy on removal
+		if (destroyOnRemove) {
+
+			mo = new MutationObserver(() => {
+
+				if (!el.isConnected) destroy();
+
+			});
+
+			mo.observe(removeRoot, {
+				childList: true,
+				subtree: true
+			});
+
+		}
+
+	};
+
+	// If it's already connected, start immediately.
+	// If not, wait until it becomes connected.
+	if (el.isConnected) {
+
+		start();
+
+	} else {
+
+		log("waiting for element to connect...");
+
+		connectMo = new MutationObserver(() => {
+
+			if (destroyed) return;
+
+			if (el.isConnected) {
+
+				connectMo.disconnect();
+				connectMo = null;
+
+				// wait 1 frame so layout exists
+				requestAnimationFrame(() => start());
+
+			}
+
+		});
+
+		connectMo.observe(removeRoot, {
+			childList: true,
+			subtree: true
+		});
+
+	}
+
+	// stash destroy
+	try {
+
+		$elm?.data?.("observerDestroy", destroy); 
+
+	} catch (e) {}
+
+	return { destroy };
+
+};

package/tests/fixtures/site-and-components/components/scrollSpy/index.js

@@ -0,0 +1,63 @@
+export default ({
+	$spyOn,
+	$applyTo,
+	deadZone = 10
+} = {}) => {
+
+	const $classEl = ($applyTo && $applyTo.length)
+		? $applyTo
+		: $('body');
+
+	const spyTarget = ($spyOn && $spyOn.length)
+		? $spyOn.get(0)
+		: window;
+
+	const isWindow = (spyTarget === window);
+
+	const className = 'spy-scrolling-down';
+
+	let lastTop = isWindow
+		? (window.pageYOffset || document.documentElement.scrollTop || 0)
+		: (spyTarget.scrollTop || 0);
+
+	let ticking = false;
+
+	function apply(isDown) {
+
+		if (isDown) $classEl.addClass(className);
+		else $classEl.removeClass(className);
+
+	}
+
+	function readTop() {
+
+		return isWindow
+			? (window.pageYOffset || document.documentElement.scrollTop || 0)
+			: (spyTarget.scrollTop || 0);
+
+	}
+
+	function onRaf() {
+
+		ticking = false;
+
+		const topNow = readTop();
+		const delta = topNow - lastTop;
+
+		if (Math.abs(delta) < deadZone) return;
+
+		apply(delta > 0);
+		lastTop = topNow;
+
+	}
+
+	spyTarget.addEventListener('scroll', function() {
+
+		if (ticking) return;
+
+		ticking = true;
+		requestAnimationFrame(onRaf);
+
+	}, { passive: true });
+
+};

package/tests/fixtures/site-and-components/components/scrollSpy/observerPoolGet.js

@@ -0,0 +1,91 @@
+export default ({
+	registry,
+	root,
+	rootMargin,
+	threshold
+} = {}) => {
+
+	if (!registry) {
+
+		throw new Error('observerPoolGet: missing registry');
+
+	}
+
+	const toThresholdKey = (value) => {
+
+		if (Array.isArray(value)) {
+
+			return value.join(',');
+
+		}
+
+		return String(value);
+
+	};
+
+	const getRootKey = (rootElm) => {
+
+		if (!rootElm) {
+
+			return 'viewport';
+
+		}
+
+		if (!registry.rootIds.has(rootElm)) {
+
+			registry.rootSeq += 1;
+			registry.rootIds.set(rootElm, `root-${registry.rootSeq}`);
+
+		}
+
+		return registry.rootIds.get(rootElm);
+
+	};
+
+	const key = `${getRootKey(root)}|${rootMargin}|${toThresholdKey(threshold)}`;
+
+	if (registry.pools.has(key)) {
+
+		return registry.pools.get(key);
+
+	}
+
+	const targets = new Map();
+
+	const observer = new IntersectionObserver((entries) => {
+
+		entries.forEach((entry) => {
+
+			const subscribers = targets.get(entry.target);
+
+			if (!subscribers || subscribers.size === 0) {
+
+				return;
+
+			}
+
+			subscribers.forEach((subscriber) => {
+
+				subscriber.safeCall(entry.isIntersecting, entry);
+
+			});
+
+		});
+
+	}, {
+		root,
+		rootMargin,
+		threshold
+	});
+
+	const poolEntry = {
+		key,
+		observer,
+		targets
+	};
+
+	registry.pools.set(key, poolEntry);
+
+	return poolEntry;
+
+};

package/tests/fixtures/site-and-components/components/scrollSpy/observerPoolRegistry.js

@@ -0,0 +1,18 @@
+export default () => {
+
+	const OBSERVER_POOL_KEY = '__awesomenessScrollSpyElmPool__';
+	const globalScope = typeof window !== 'undefined' ? window : globalThis;
+
+	if (!globalScope[OBSERVER_POOL_KEY]) {
+
+		globalScope[OBSERVER_POOL_KEY] = {
+			pools: new Map(),
+			rootIds: new WeakMap(),
+			rootSeq: 0
+		};
+
+	}
+
+	return globalScope[OBSERVER_POOL_KEY];
+
+};