@onetype/framework 2.0.41 → 2.0.43

package/addons/float/overlays/js/events/escape.js

@@ -0,0 +1,18 @@
+document.addEventListener('keydown', (event) =>
+{
+	if (event.key !== 'Escape')
+	{
+		return;
+	}
+
+	const items = Object.values(overlays.Items()).sort((a, b) => b.Get('index') - a.Get('index'));
+
+	for (const item of items)
+	{
+		if (item.Get('escape'))
+		{
+			item.Remove();
+			break;
+		}
+	}
+});

package/addons/float/overlays/js/functions/flip.js

@@ -0,0 +1,51 @@
+overlays.Fn('flip', function(target, overlay, position, offset, padding)
+{
+	position = position || {x: 'center', y: 'center'};
+	padding = padding || 10;
+
+	const width = overlay.offsetWidth;
+	const height = overlay.offsetHeight;
+	const viewport = {width: window.innerWidth, height: window.innerHeight};
+
+	const pos = {x: position.x, y: position.y};
+	let flipped = {x: false, y: false};
+
+	let result = overlays.Fn('position', target, overlay, pos, offset, padding);
+
+	if (pos.y === 'bottom' && (result.top + height) > (viewport.height - padding))
+	{
+		pos.y = 'top';
+		flipped.y = true;
+	}
+	else if (pos.y === 'top' && result.top < padding)
+	{
+		pos.y = 'bottom';
+		flipped.y = true;
+	}
+
+	if (pos.x === 'right' && (result.left + width) > (viewport.width - padding))
+	{
+		pos.x = 'left';
+		flipped.x = true;
+	}
+	else if (pos.x === 'left' && result.left < padding)
+	{
+		pos.x = 'right';
+		flipped.x = true;
+	}
+
+	if (flipped.x || flipped.y)
+	{
+		result = overlays.Fn('position', target, overlay, pos, offset, padding);
+	}
+
+	result.left = Math.max(padding, Math.min(result.left, viewport.width - width - padding));
+	result.top = Math.max(padding, Math.min(result.top, viewport.height - height - padding));
+
+	return {
+		left: Math.round(result.left),
+		top: Math.round(result.top),
+		position: pos,
+		flipped
+	};
+});

package/addons/float/overlays/js/functions/index.js

@@ -0,0 +1,17 @@
+overlays.Fn('index', function()
+{
+	const items = overlays.Items();
+	let max = 100000;
+
+	for (const id in items)
+	{
+		const index = items[id].Get('index') || 100000;
+
+		if (index > max)
+		{
+			max = index;
+		}
+	}
+
+	return max + 1;
+});

package/addons/float/overlays/js/functions/position.js

@@ -0,0 +1,62 @@
+overlays.Fn('position', function(target, overlay, position, offset, padding)
+{
+	const body = !target || target === document.body;
+	const rect = body
+		? {left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight, width: window.innerWidth, height: window.innerHeight}
+		: target.getBoundingClientRect();
+
+	const width = overlay.offsetWidth;
+	const height = overlay.offsetHeight;
+	const pos = position || {x: 'center', y: 'center'};
+	const pad = padding || 0;
+
+	let left = rect.left;
+	let top = rect.top;
+
+	if (pos.x === 'left')
+	{
+		left = body ? pad : rect.left - width;
+	}
+	else if (pos.x === 'left-in')
+	{
+		left = rect.left + pad;
+	}
+	else if (pos.x === 'center')
+	{
+		left = rect.left + (rect.width / 2) - (width / 2);
+	}
+	else if (pos.x === 'right-in')
+	{
+		left = rect.right - width - pad;
+	}
+	else if (pos.x === 'right')
+	{
+		left = body ? rect.right - width - pad : rect.right;
+	}
+
+	if (pos.y === 'top')
+	{
+		top = body ? pad : rect.top - height;
+	}
+	else if (pos.y === 'top-in')
+	{
+		top = rect.top + pad;
+	}
+	else if (pos.y === 'center')
+	{
+		top = rect.top + (rect.height / 2) - (height / 2);
+	}
+	else if (pos.y === 'bottom-in')
+	{
+		top = rect.bottom - height - pad;
+	}
+	else if (pos.y === 'bottom')
+	{
+		top = body ? rect.bottom - height - pad : rect.bottom;
+	}
+
+	left += offset?.x || 0;
+	top += offset?.y || 0;
+
+	return {left: Math.round(left), top: Math.round(top)};
+});

package/addons/float/overlays/js/functions/reposition.js

@@ -0,0 +1,29 @@
+overlays.Fn('reposition', function(item)
+{
+	const element = item.Get('element');
+	const content = element?.querySelector('.content');
+
+	if (!content)
+	{
+		return;
+	}
+
+	const target = item.Get('target');
+	const position = item.Get('position');
+	const offset = item.Get('offset');
+	const padding = item.Get('padding');
+
+	let result;
+
+	if (item.Get('flip'))
+	{
+		result = overlays.Fn('flip', target, content, position, offset, padding);
+	}
+	else
+	{
+		result = overlays.Fn('position', target, content, position, offset, padding);
+	}
+
+	content.style.left = result.left + 'px';
+	content.style.top = result.top + 'px';
+});

package/addons/float/overlays/js/item/catch/add.js

@@ -0,0 +1,123 @@
+overlays.ItemOn('add', function(item)
+{
+	this.replace = () =>
+	{
+		const existing = overlays.ItemGet(item.Get('id'));
+
+		if(existing && existing !== item)
+		{
+			existing.Remove();
+		}
+	};
+
+	this.compile = () =>
+	{
+		const render = item.Get('render');
+
+		if(!render)
+		{
+			return null;
+		}
+
+		const name = 'overlay:' + item.Get('id');
+
+		overlays.RenderAdd(name, function()
+		{
+			return render.call(this, item);
+		});
+
+		return overlays.Render(name);
+	};
+
+	this.element = (rendered) =>
+	{
+		const element = document.createElement('div');
+
+		element.className = 'ot-overlay';
+		element.setAttribute('data-id', item.Get('id'));
+		element.style.zIndex = overlays.Fn('index');
+
+		const backdrop = item.Get('backdrop');
+
+		if(backdrop)
+		{
+			const bg = document.createElement('div');
+			bg.className = 'backdrop';
+			bg.style.opacity = backdrop;
+			element.appendChild(bg);
+		}
+
+		if(rendered?.Element)
+		{
+			rendered.Element.classList.add('content');
+			element.appendChild(rendered.Element);
+		}
+
+		item.Set('element', element);
+		item.Set('index', parseInt(element.style.zIndex));
+
+		return element;
+	};
+
+	this.open = (element) =>
+	{
+		const callback = item.Get('onOpen');
+
+		if(callback)
+		{
+			callback(item);
+		}
+
+		document.body.appendChild(element);
+	};
+
+	this.position = (element) =>
+	{
+		if(element.classList.contains('ot-modal'))
+		{
+			return;
+		}
+
+		const content = element.querySelector('.content');
+
+		if(!content)
+		{
+			return;
+		}
+
+		const target = item.Get('target') || document.body;
+		const position = item.Get('position');
+		const offset = item.Get('offset');
+		const padding = item.Get('padding');
+		const method = item.Get('flip') ? 'flip' : 'position';
+		const result = overlays.Fn(method, target, content, position, offset, padding);
+
+		content.style.left = result.left + 'px';
+		content.style.top = result.top + 'px';
+	};
+
+	this.track = () =>
+	{
+		if(!item.Get('track') || !item.Get('target'))
+		{
+			return;
+		}
+
+		const reposition = () => overlays.Fn('reposition', item);
+
+		item.StoreSet('scroll', reposition);
+		item.StoreSet('resize', reposition);
+
+		window.addEventListener('scroll', reposition, true);
+		window.addEventListener('resize', reposition);
+	};
+
+	this.replace();
+
+	const rendered = this.compile();
+	const element = this.element(rendered);
+
+	this.open(element);
+	this.position(element);
+	this.track();
+});

package/addons/float/overlays/js/item/catch/remove.js

@@ -0,0 +1,29 @@
+overlays.ItemOn('remove', (item) =>
+{
+	const scroll = item.StoreGet('scroll');
+	const resize = item.StoreGet('resize');
+
+	if (scroll)
+	{
+		window.removeEventListener('scroll', scroll, true);
+	}
+
+	if (resize)
+	{
+		window.removeEventListener('resize', resize);
+	}
+
+	const element = item.Get('element');
+
+	if (element)
+	{
+		element.remove();
+	}
+
+	const onClose = item.Get('onClose');
+
+	if (typeof onClose === 'function')
+	{
+		onClose(item);
+	}
+});

package/addons/float/popup/css/popup.css

@@ -0,0 +1,93 @@
+.ot-tooltip
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	background: var(--ot-bg-3);
+	border: 1px solid var(--ot-bg-3-border);
+	border-radius: var(--ot-radius-m);
+	color: var(--ot-text-1);
+	font-size: var(--ot-size-s);
+	max-width: 280px;
+	white-space: normal;
+}
+
+.ot-tooltip > .icon
+{
+	font-size: 16px;
+	color: var(--ot-text-2);
+}
+
+.ot-tooltip > .content > .title
+{
+	font-weight: 600;
+	margin-bottom: 2px;
+}
+
+.ot-tooltip > .content > .text
+{
+	color: var(--ot-text-2);
+}
+
+.ot-tooltip.info > .icon { color: var(--ot-blue); }
+.ot-tooltip.success > .icon { color: var(--ot-green); }
+.ot-tooltip.warning > .icon { color: var(--ot-orange); }
+.ot-tooltip.error > .icon { color: var(--ot-red); }
+
+.ot-toast
+{
+	display: flex;
+	align-items: flex-start;
+	gap: var(--ot-spacing-m);
+	padding: var(--ot-spacing-m);
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+	color: var(--ot-text-1);
+	font-size: var(--ot-size-m);
+	min-width: 280px;
+	max-width: 400px;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.ot-toast > .icon
+{
+	font-size: 20px;
+	margin-top: 1px;
+}
+
+.ot-toast > .content
+{
+	flex: 1;
+}
+
+.ot-toast > .content > .title
+{
+	font-weight: 600;
+	margin-bottom: 2px;
+}
+
+.ot-toast > .content > .message
+{
+	color: var(--ot-text-2);
+}
+
+.ot-toast > .close
+{
+	background: none;
+	border: none;
+	color: var(--ot-text-2);
+	cursor: pointer;
+	padding: 0;
+}
+
+.ot-toast > .close:hover
+{
+	color: var(--ot-text-1);
+}
+
+.ot-toast.info > .icon { color: var(--ot-blue); }
+.ot-toast.success > .icon { color: var(--ot-green); }
+.ot-toast.warning > .icon { color: var(--ot-orange); }
+.ot-toast.error > .icon { color: var(--ot-red); }

package/addons/float/popup/js/addon.js

@@ -0,0 +1,34 @@
+const popup = onetype.Addon('popup');
+
+onetype.$ot.popup = function(target, render, options)
+{
+	return popup.Fn('popup', target, render, options);
+};
+
+onetype.$ot.popup.open = onetype.$ot.popup;
+onetype.$ot.popup.close = (id) => popup.Fn('close', id);
+
+onetype.$ot.modal = function(render, options)
+{
+	return popup.Fn('modal', render, options);
+};
+
+onetype.$ot.modal.open = onetype.$ot.modal;
+onetype.$ot.modal.close = (id) => popup.Fn('close', id);
+
+onetype.$ot.tooltip = function(target, text, options)
+{
+	return popup.Fn('tooltip', target, text, options);
+};
+
+onetype.$ot.tooltip.open = onetype.$ot.tooltip;
+onetype.$ot.tooltip.close = (id) => popup.Fn('close', id);
+
+onetype.$ot.toast = function(message, options)
+{
+	return popup.Fn('toast', message, options);
+};
+
+onetype.$ot.toast.open = onetype.$ot.toast;
+onetype.$ot.toast.close = (id) => popup.Fn('close', id);
+

package/addons/float/popup/js/functions/close.js

@@ -0,0 +1,25 @@
+popup.Fn('close', function(id)
+{
+	if(id)
+	{
+		const item = overlays.ItemGet(id);
+
+		if(item)
+		{
+			item.Remove();
+			return true;
+		}
+
+		return false;
+	}
+
+	const items = Object.values(overlays.Items()).sort((a, b) => b.Get('index') - a.Get('index'));
+
+	if(items.length)
+	{
+		items[0].Remove();
+		return true;
+	}
+
+	return false;
+});

package/addons/float/popup/js/functions/modal.js

@@ -0,0 +1,31 @@
+popup.Fn('modal', function(render, options = {})
+{
+	const id = 'modal-' + onetype.GenerateUID();
+
+	return overlays.Item({
+		id: options.id || id,
+		position: {x: 'center', y: 'center'},
+		backdrop: options.backdrop ?? 0.5,
+		closeable: options.closeable !== false,
+		escape: options.escape !== false,
+		onClose: options.onClose,
+		onOpen: (item) =>
+		{
+			const element = item.Get('element');
+
+			if(element)
+			{
+				element.classList.add('ot-modal');
+			}
+
+			if(options.onOpen)
+			{
+				options.onOpen(item);
+			}
+		},
+		render: typeof render === 'function' ? render : function()
+		{
+			return render;
+		}
+	});
+});

package/addons/float/popup/js/functions/popup.js

@@ -0,0 +1,21 @@
+popup.Fn('popup', function(target, render, options = {})
+{
+	const id = 'popup-' + onetype.GenerateUID();
+
+	return overlays.Item({
+		id: options.id || id,
+		target,
+		position: options.position || {x: 'center', y: 'bottom'},
+		offset: options.offset || {x: 0, y: 4},
+		flip: true,
+		track: true,
+		closeable: true,
+		escape: true,
+		onClose: options.onClose,
+		onOpen: options.onOpen,
+		render: typeof render === 'function' ? render : function()
+		{
+			return render;
+		}
+	});
+});

package/addons/float/popup/js/functions/toast.js

@@ -0,0 +1,55 @@
+popup.Fn('toast', function(message, options = {})
+{
+	const config = typeof message === 'object' ? message : {message};
+	const id = 'toast-' + onetype.GenerateUID();
+	const duration = config.duration ?? options.duration ?? 5000;
+
+	const overlay = overlays.Item({
+		id: options.id || id,
+		position: options.position || {x: 'right-in', y: 'top-in'},
+		padding: options.padding || 16,
+		flip: false,
+		escape: true,
+		onClose: options.onClose,
+		onOpen: options.onOpen,
+		render: function()
+		{
+			this.type = config.type || 'info';
+			this.title = config.title || null;
+			this.message = config.message || '';
+			this.icon = config.icon || null;
+			this.closeable = config.closeable !== false;
+
+			this.close = () =>
+			{
+				overlay.Remove();
+			};
+
+			const icons = {info: 'info', success: 'check_circle', warning: 'warning', error: 'error'};
+
+			return `
+				<div :class="'ot-toast ' + type">
+					<i class="icon">{{ icon || '${icons[this.type] || 'info'}' }}</i>
+					<div class="content">
+						<div ot-if="title" class="title">{{ title }}</div>
+						<div ot-if="message" class="message">{{ message }}</div>
+					</div>
+					<button ot-if="closeable" class="close" ot-click="close"><i>close</i></button>
+				</div>
+			`;
+		}
+	});
+
+	if(duration > 0)
+	{
+		setTimeout(() =>
+		{
+			if(overlays.ItemGet(overlay.Get('id')))
+			{
+				overlay.Remove();
+			}
+		}, duration);
+	}
+
+	return overlay;
+});

package/addons/float/popup/js/functions/tooltip.js

@@ -0,0 +1,34 @@
+popup.Fn('tooltip', function(target, text, options = {})
+{
+	const config = typeof text === 'object' ? text : {text};
+	const id = 'tooltip-' + onetype.GenerateUID();
+
+	return overlays.Item({
+		id: options.id || id,
+		target,
+		position: options.position || {x: 'center', y: 'top'},
+		offset: options.offset || {x: 0, y: -4},
+		flip: true,
+		track: true,
+		escape: true,
+		onClose: options.onClose,
+		onOpen: options.onOpen,
+		render: function()
+		{
+			this.icon = config.icon || null;
+			this.title = config.title || null;
+			this.text = config.text || '';
+			this.variant = config.variant || 'default';
+
+			return `
+				<div :class="'ot-tooltip ' + variant">
+					<i ot-if="icon" class="icon">{{ icon }}</i>
+					<div class="content">
+						<div ot-if="title" class="title">{{ title }}</div>
+						<div ot-if="text" class="text">{{ text }}</div>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

package/addons/float/popup/js/items/directives/popup.js

@@ -0,0 +1,58 @@
+onetype.AddonReady('directives', function(directives)
+{
+	document.addEventListener('click', function(event)
+	{
+		let node = event.target;
+
+		while (node && node !== document)
+		{
+			if ('otPopupConfig' in node)
+			{
+				if (node.otPopupOverlay)
+				{
+					node.otPopupOverlay.Remove();
+					node.otPopupOverlay = null;
+				}
+				else
+				{
+					node.otPopupOverlay = popup.Fn('popup', node, node.otPopupConfig.render, node.otPopupConfig);
+				}
+
+				break;
+			}
+
+			node = node.parentNode;
+		}
+	});
+
+	directives.ItemAdd({
+		id: 'ot-popup',
+		icon: 'smart_popup',
+		name: 'Popup',
+		description: 'Shows popup on click.',
+		trigger: 'node',
+		order: 600,
+		attributes: {
+			'ot-popup': ['string|object|function']
+		},
+		code: function(data, item, compile, node)
+		{
+			const value = data['ot-popup'].value;
+
+			if (typeof value === 'string')
+			{
+				node.otPopupConfig = {render: value};
+			}
+			else if (typeof value === 'function')
+			{
+				node.otPopupConfig = {render: value};
+			}
+			else if (typeof value === 'object')
+			{
+				node.otPopupConfig = value;
+			}
+
+			node.otPopupOverlay = null;
+		}
+	});
+});