solarite 0.2.1 → 0.2.2

package/docs/js/ui/DarkToggle.js

@@ -1,52 +0,0 @@
-// Add this from a regular script tag in the head, not a module!
-
-
-/** TODO: Use slot for custom content? */
-class DarkToggle extends HTMLElement {
-	
-	constructor() {
-		super();
-		this.render();
-		
-		this.addEventListener('click', () => {
-			let h=document.documentElement;
-			let isDark = !h.hasAttribute('dark');
-			h.toggleAttribute('dark', isDark);
-			localStorage.setItem('dark', h.hasAttribute('dark')+'');
-			
-			for (let iframe of this.ownerDocument.body.querySelectorAll('iframe'))
-				iframe.contentWindow.document.documentElement.toggleAttribute('dark', isDark);
-		})
-	}
-	
-	/**
-	 * Add a dark attibute to the head tag if local storage or prefers-color-scheme says we're in dark mode.  */
-	static init() {
-		let saved = localStorage.getItem('dark');
-		let isDark = saved
-			? saved==='true'
-			: (document.querySelector('html[light]') ?
-				false
-				: (document.querySelector('html[dark]') || window?.matchMedia('(prefers-color-scheme: dark)').matches));
-		
-		document.documentElement.toggleAttribute('dark', isDark);
-	}
-	
-	
-	render() {
-		this.setAttribute('style', 'user-select: none');
-		this.setAttribute('title', 'Toggle Dark Mode');
-		this.innerHTML = `
-			<svg width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512">
-				<path fill="currentColor" d="M152.62 126.77c0-33 4.85-66.35 17.23-94.77C87.54 67.83 32 151.89 32 247.38C32
-			375.85 136.15 480 264.62 480c95.49 0 179.55-55.54 215.38-137.85c-28.42 12.38-61.8 17.23-94.77 17.23c-128.47
-			0-232.61-104.14-232.61-232.61Z"/></svg>`;
-	}
-}
-
-customElements.define('dark-toggle', DarkToggle);
-DarkToggle.init();
-document.documentElement.classList.add('eternium');
-
-// "Export"
-window.DarkToggle = DarkToggle;

package/docs/js/ui/FlexResizer.js

@@ -1,152 +0,0 @@
-import {Solarite, r, getArg} from "../../../src/solarite/Solarite.js";
-import Draggable2 from "../util/Draggable2.js";
-import Util from "../util/Util.js";
-
-/**
- * Put this element between flex children to allow resizing them. */
-export default class FlexResizer extends Solarite {
-
-	onStart = Util.callback();
-	onMove = Util.callback();
-	onStop = Util.callback();
-	
-	/**
-	 * @param unit {string} Can be 'px' or '%'
-	 * @param thickness {int} Width of the resize drag area.*/
-	constructor({unit='px', thickness=10}={}) {
-		super();
-		this.thickness = parseFloat(getArg(this, 'thickness', thickness));
-		this.unit =  getArg(this, 'unit', unit, ['px', '%']) || 'px';
-
-		let prevEl, startSize, isVertical;
-		let iframePointerEvents = new WeakMap(); // Store values of iframe pointer events.
-		let draggable = new Draggable2(this, {
-			onStart: e => {
-				isVertical = this.isVertical();
-				prevEl = this.previousElementSibling;
-				startSize =  isVertical ? prevEl.offsetWidth : prevEl.offsetHeight;
-				
-				// Disable iframes
-				for (let iframe of this.ownerDocument.querySelectorAll('iframe')) {
-					iframePointerEvents.set(iframe, iframe.style.pointerEvents);
-					iframe.style.pointerEvents = 'none';
-				}
-				
-				this.onStart(draggable, e);
-			},
-			onMove: e => {
-				let parentSizePx = isVertical
-					? this.parentNode.offsetWidth
-					: this.parentNode.offsetHeight;
-				let dragDist = isVertical
-					? draggable.totalDist.x
-					: draggable.totalDist.y;
-				let parentSize = this.unit==='%' ? 100 : parentSizePx;
-				let newSize = this.unit==='%'
-					? (startSize + dragDist) / parentSizePx * 100
-					: (startSize + dragDist);
-				if (newSize > parentSize)
-					newSize = parentSize;
-				this.setSize(newSize);
-				this.onMove(draggable, e);
-			},
-			onStop: e => {
-				
-				// Re-enable iframes.
-				for (let iframe of this.ownerDocument.querySelectorAll('iframe'))
-					iframe.style.pointerEvents = iframePointerEvents.get(iframe); // restore prev value
-				
-				this.onStop(draggable, e);
-			}
-		});
-	}
-
-	/**
-	 * It's vertical if the user drags the resizer vertically to resize.
-   * When vertical, the resizer will be stretched horizontally to fill the available space.
-	 * @returns {boolean} */
-	isVertical() {
-		if (this.parentNode) {
-			return getComputedStyle(this.parentNode).flexDirection === 'row';
-		}
-	}
-
-	/** @return {Number} */
-	getSize() {
-		let prev;
-		let prev2 = this;
-		while (prev2 = prev2.previousElementSibling) {
-			if (prev2.style.display !== 'none' && prev2.tagName !== 'flex-resizer') {
-				prev = prev2;
-				break;
-			}
-		}
-
-		return (this.isVertical() ? prev?.offsetWidth : prev?.offsetHeight) || 0;
-	}
-
-	/**
-	 * @param size {Number} Width in pixels or percent. */
-	setSize(size) {
-		let prevEl = this.previousElementSibling;
-		let nextEl = this.nextElementSibling;
-        if (size < 0)
-            size = 0;
-		
-		if (prevEl) {
-			if (this.isVertical()) {
-				if (nextEl) {
-					let totalWidth = this.unit === '%'
-						? (prevEl.offsetWidth + nextEl.offsetWidth) / this.parentNode.offsetWidth * 100
-						: (prevEl.offsetWidth + nextEl.offsetWidth);
-                    if (totalWidth - size < 0)
-                        size = totalWidth;
-
-					nextEl.style.minWidth = (totalWidth - size) + this.unit;
-					nextEl.style.maxWidth = (totalWidth - size) + this.unit;
-				}
-				prevEl.style.minWidth = size + this.unit;
-				prevEl.style.maxWidth = size + this.unit;
-			}
-			else {
-				if (nextEl) {
-					let totalHeight = this.unit === '%'
-						? (prevEl.offsetHeight + nextEl.offsetHeight) / this.parentNode.offsetHeight * 100
-						: (prevEl.offsetHeight + nextEl.offsetHeight);
-                    if (totalHeight - size < 0)
-                        size = totalHeight;
-					nextEl.style.minHeight = (totalHeight - size) + this.unit;
-					nextEl.style.maxHeight = (totalHeight - size) + this.unit;
-				}
-				
-				prevEl.style.minHeight = size + this.unit;
-				prevEl.style.maxHeight = size + this.unit;
-			}
-		}
-	}
-
-	render() {
-		r(this)`
-		<flex-resizer>
-			<style>
-				:host {
-					display: block; z-index: 1;
-				
-					/* We put the resize region (the margin thickness) all to the right / top bc vertical scrollbars 
-					 * are often to the left, and tab bars below the top.*/
-					${this.isVertical()
-			
-						/* Stretch horizontally */
-						? `min-width: ${this.thickness-1}px !important; max-width: ${this.thickness-1}px !important;
-							margin-left: -1px; margin-right: -${this.thickness-1}px; cursor: ew-resize`
-			
-						/* Stretch vertically */
-						: `min-height: ${this.thickness}px !important; max-height: ${this.thickness}px !important;
-							margin-top: -${this.thickness/2}px; margin-bottom: -${this.thickness/2}px; cursor: ns-resize`
-					};
-				}
-			</style>
-		</flex-resizer>
-	`}
-}
-customElements.define('flex-resizer', FlexResizer);

package/docs/js/util/Draggable2.js

@@ -1,151 +0,0 @@
-/**
- * Add events for drag start, drag, and drag stop to an element.
- * When callback functions are called, the "this" variable will be the HTMLElement being dragged, when mouseDown first occurred.
- *
- * @param options {object}
- * @param options.onStart {function(e:MouseEvent, draggable:Draggable):bool} Called on mousedown.
- *     If this function returns false, dragging will be canceled.
- * @param options.onMove {function(e:MouseEvent, draggable:Draggable)}  Called with the distance the mouse has moved while dragging.
- * @param options.onStop {function(e:MouseEvent, draggable:Draggable)} Called when dragging stops.
- *
- * @param options.selector {string=} If set, apply drag events to children that match this selector,
- *     instead of the element itself.
- *
- * @example
- * new Draggable(th, {
- *     onMove: (draggable, e) => {
- *         console.log(draggable.totalDist)
- * 	   }
- * });
- */
-export default class Draggable {
-
-	/** @type {HTMLElement} */
-	el;
-	options = {};
-
-	startPosition;
-	clientStart;
-	
-	/** @type {{x:int, y:int}} Distance the mouse moved since the last onMove() call. */
-	dist;
-	
-	/** @type {{x:int, y:int}} Total distance the mouse moved since dragging started. */
-	totalDist;
-
-
-	/** @type {HTMLElement} The node clicked when dragging starts.  Can be el or a child of el.*/
-	target;
-
-	/** @type {boolean} */
-	moved;
-
-	/** @type {HTMLElement} */
-	mask;
-
-	constructor(el, options) {
-		this.el = el;
-		this.options = options;
-
-		// Mask is needed to still grab move events when over iframe.
-		let div = document.createElement('div');
-		div.innerHTML = `
-			<div class="mask" style="position: absolute; inset: 0;  z-index: 32767; user-select: none; pointer-events: none"></div>`;
-		this.mask = div.children[0];
-		//this.mask.style.height = document.body.scrollHeight + 'px';
-		this.mask.remove(); // so it will be appended on the next move.
-
-		// Make sure the "this" object is always the Draggable and not the event target.
-		this.mousedown = this.mousedown.bind(this);
-		this.mousemove = this.mousemove.bind(this);
-		this.mouseup = this.mouseup.bind(this);
-		this.scroll = this.scroll.bind(this);
-
-		this.el.addEventListener('mousedown', this.mousedown);
-
-		// this.trace = new Error().stack
-	}
-
-	mousedown(e) {
-		// Prevent selecting text when dragging.
-		this.moved = false;
-		this.startPosition = {x: e.pageX, y: e.pageY};
-		this.clientStart = {x: e.clientX, y: e.clientY};
-		this.totalDist = {x:0, y:0};
-
-		this.lastScroll = {x: document.documentElement.scrollLeft, y: document.documentElement.scrollTop};
-
-		if (!this.options.onStart || this.options.onStart(e, this) !== false) {
-			e.preventDefault(); // Required after Chromium 124.
-
-			this.target = this.options.selector ? e.target.closest(this.options.selector) : this.el.contains(e.target) ? this.el : null;
-			if (this.target) {
-				this.mask.style.cursor = getComputedStyle(e.target).cursor;
-				document.addEventListener('mousemove', this.mousemove);
-				document.addEventListener('mouseup', this.mouseup);
-				document.addEventListener('scroll', this.scroll, true);
-			}
-		}
-
-	}
-
-	mousemove(e=null) {
-		if (e) {
-			this.dist = {
-				x: e.pageX - this.startPosition.x - this.totalDist.x,
-				y: e.pageY - this.startPosition.y - this.totalDist.y
-			};
-			this.totalDist = {
-				x: e.pageX - this.startPosition.x,
-				y: e.pageY - this.startPosition.y
-			};
-		}
-		this.moved = this.moved || this.totalDist.x !== 0 || this.totalDist.y !== 0;
-		if (this.moved && this.options.onMove)
-			this.options.onMove(e||{}, this); // TODO: reorder or only pass mouseDown?
-
-		if (!this.mask.parentNode)
-			document.body.append(this.mask);
-		if (e)
-			e.preventDefault();
-	}
-
-	mouseup(e) {
-		this.cleanup();
-
-		// TODO: Capture the drop target, instead of it being the mask.
-		if (this.moved && this.options.onStop)
-			this.options.onStop(e, this);
-	}
-
-	scroll(e) {
-		let newScroll = {x: document.documentElement.scrollLeft, y: document.documentElement.scrollTop};
-		this.dist = {
-			x: newScroll.x - this.lastScroll.x,
-			y: newScroll.y - this.lastScroll.y
-		}
-
-		this.totalDist.x += newScroll.x - this.lastScroll.x;
-		this.totalDist.y += newScroll.y - this.lastScroll.y;
-		this.mousemove();
-
-		this.lastScroll = newScroll;
-	}
-
-	cleanup() {
-		document.removeEventListener('mousemove', this.mousemove);
-		document.removeEventListener('mouseup', this.mouseup);
-		document.removeEventListener('scroll', this.scroll, true);
-		this.mask.remove();
-		this.target = null;
-	}
-}
-
-/** @deprecated */
-function pauseEvent(e){ // stackoverflow.com/a/5432363
-	if(e.stopPropagation) e.stopPropagation();
-	if(e.preventDefault) e.preventDefault();
-	e.cancelBubble=true; // deprecated?
-	e.returnValue=false; // deprecated?
-	return false;
-}

package/docs/js/util/Errors.js

@@ -1,20 +0,0 @@
-//#IFDEV
-/*@__NO_SIDE_EFFECTS__*/
-export function assert(val) {
-	if (!val) {
-		debugger;
-		throw new Error('Assertion failed: ' + val);
-}
-
-var Errors = {
-	getStack(ignoreTop=0, ignoreRegex) {
-		var e = new Error();
-		if (!e.stack) return []; // There is no stack in IE.
-		return e.stack
-			.split('\n')
-			.slice(ignoreTop+2)
-			.map(line => line.trim().replace(/^at /, ''))
-			.filter(line => !ignoreRegex || !line.match(ignoreRegex));
-	}
-}
-//#ENDIF

package/docs/js/util/Html.js

@@ -1,147 +0,0 @@
-var div = document.createElement('div');
-var decodeCache_ = {};
-
-// TODO: Move all of this to StringUtil?
-// Or move createEl here, along with htmlToText and textToHtml?
-export default {
-
-	/**
-	 * Convert html entities like &lt; to their literal values like <.
-	 * @param {string} html
-	 * @return {string} */
-	decode(html) {
-		if (!html)
-			return '';
-
-		return html // Fast solution inspired by https://stackoverflow.com/a/43282001
-			.replace(/&[#A-Z0-9]+;/gi, entity => {
-				let result = decodeCache_[entity];
-				if (result)
-					return result;
-
-				div.innerHTML = entity; // create and cache new entity
-				return decodeCache_[entity] = div.textContent;
-			});
-
-	},
-
-	encode(text, quotes='"') {
-		text = ((text === null || text === undefined) ? '' : text+'')
-			.replace(/&/g, '&amp;')
-			.replace(/</g, '&lt;')
-			.replace(/>/g, '&gt;')
-			.replace(/\a0/g, '&nbsp;')
-		if (quotes.includes("'"))
-			text = text.replace(/'/g, '&apos;');
-		if (quotes.includes('"'))
-			text = text.replace(/"/g, '&quot;');
-		return text;
-	},
-
-
-
-
-	/**
-	 * Convert a template tag with embedded html elements into a complete DOM tree,
-	 * without recreating the embedded elements.
-	 *
-	 * Caveats:
-	 * Will fail if elements are inserted as expressions inside <tags> instead of as children.
-	 *
-	 * See also createEl()
-	 *
-	 * @param strings {string[]}
-	 * @param exprs {*[]}
-	 * @return {Node[]} asdf
-	 *
-	 * @example
-	 * Html.create`<div>${document.createElement('a')}hi</div>` */
-	create(strings, ...exprs) {
-
-		// 1.  Append html strings together with placeholders for Nodes.
-		let html = [];
-		let placeholders = [];
-		for (let i in strings) {
-			html.push(strings[i])
-			let val = exprs[i];
-			if (val) {
-				if (val instanceof Node) {
-					html.push('') // U+E000, part of private unicode range for custom use.
-					placeholders.push(val)
-				}
-				else if (Array.isArray(val)) {
-					val = val.flat();
-					for (let item of val)
-						if (item instanceof Node) {
-							html.push('')
-							placeholders.push(item)
-						}
-						else
-							html.push(item+'');
-				}
-				else
-					html.push(val+'');
-			}
-		}
-
-		// 2. Create the element.
-		let htmlJoined = html.join('');
-		div.innerHTML = htmlJoined;
-
-		// Why does it sometimes fail but work on the second try?  Why is this remarkably stupid code necessary?
-		if (div.innerHTML !== htmlJoined)
-			div.innerHTML = htmlJoined;
-
-		// 3. Replace the placeholders:
-		let node;
-		let toRemove = [];
-		const walker = document.createTreeWalker(div, NodeFilter.SHOW_TEXT);
-		while (node = walker.nextNode()) {
-			let parts = node.textContent.split(//g)
-			if (parts.length > 1) {
-				let next = node.nextElementSibling;
-				for (let i = 0; i < parts.length; i++) {
-					let text = parts[i];
-					if (i > 0)
-						node.parentNode.insertBefore(placeholders.shift(), next);
-					if (text.length)
-						node.parentNode.insertBefore(document.createTextNode(text), next);
-				}
-
-				// Removing them here will mess up the treeWalker.
-				toRemove.push(node);
-			}
-		}
-
-		if (placeholders.length)
-			debugger;
-
-		toRemove.map(el => el.remove())
-
-		// 4. Get the result
-		let result = [];
-		while (div.firstChild)
-			result.push(div.removeChild(div.firstChild));
-		return result;
-	},
-
-	/**
-	 * Create and return one element.
-	 * If the string starts with whitespace before an element, trim that whitespace.
-	 * @param strings {string|string[]}
-	 * @param exprs {*[]=}
-	 * @returns {Node} */
-	createOne(strings, ...exprs) {
-		if (!Array.isArray(strings))
-			strings = [strings];
-
-		if (strings.length && strings[0].match(/^\s*</)) {
-			strings = strings.slice();
-			strings[0] = strings[0].trimStart();
-		}
-		return this.create(strings, ...exprs)[0];
-	}
-};
-
-export {div};
-