@onetype/framework 2.0.41 → 2.0.43

package/lib/{items/elements/global/markdown → src/mixins}/markdown.js

@@ -1,8 +1,8 @@
-onetype.AddonReady('elements', (elements) =>
+const OneTypeMarkdown =
 {
-	const parse = function(content)
+	Markdown(content)
 	{
-		if(!content)
+		if (!content)
 		{
 			return '';
 		}
@@ -11,19 +11,65 @@ onetype.AddonReady('elements', (elements) =>
 		let buffer = [];
 		let block = false;
 
-		const line = (h) =>
+		const lines = content.split('\n');
+
+		for (let i = 0; i < lines.length; i++)
 		{
-			html += `<div class="line">${h}</div>`;
-		};
+			const trimmed = lines[i].trim();
+
+			if (trimmed.startsWith('```'))
+			{
+				buffer.push(lines[i]);
+				block = !block;
+
+				if (!block)
+				{
+					flush();
+				}
+
+				continue;
+			}
+
+			if (block)
+			{
+				buffer.push(lines[i]);
+				continue;
+			}
+
+			if (trimmed.startsWith('|') || /^[\t ]*[-*] .+/.test(trimmed) || /^[\t ]*\d+\. .+/.test(trimmed) || trimmed.startsWith('> '))
+			{
+				buffer.push(lines[i]);
+				continue;
+			}
+
+			flush();
+
+			if (!trimmed)
+			{
+				continue;
+			}
+
+			html += `<div class="line">${transform(trimmed)}</div>`;
+		}
+
+		flush();
+
+		return html;
 
-		const spacer = () =>
+		function flush()
 		{
-		};
+			if (!buffer.length)
+			{
+				return;
+			}
+
+			html += `<div class="line">${transform(buffer.join('\n'))}</div>`;
+			buffer = [];
+		}
 
-		const transform = (text) =>
+		function transform(text)
 		{
 			text = code(text);
-			text = inline(text);
 			text = media(text);
 			text = heading(text);
 			text = rule(text);
@@ -34,69 +80,53 @@ onetype.AddonReady('elements', (elements) =>
 			text = paragraph(text);
 
 			return text;
-		};
+		}
 
-		const code = (text) =>
+		function code(text)
 		{
-			text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, c) =>
+			text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, content) =>
 			{
-				c = c.replace(/</g, '&lt;').replace(/>/g, '&gt;').trim();
-
-				return `<pre class="codeblock"><code${lang ? ` data-lang="${lang}"` : ''}>${c}</code></pre>`;
+				content = content.replace(/</g, '&lt;').replace(/>/g, '&gt;').trim();
+				return `<pre class="codeblock"><code${lang ? ` data-lang="${lang}"` : ''}>${content}</code></pre>`;
 			});
 
-			text = text.replace(/`([^`]+)`/g, '<code class="inline">$1</code>');
-
-			return text;
-		};
-
-		const inline = (text) =>
-		{
-			return text;
-		};
+			return text.replace(/`([^`]+)`/g, '<code class="inline">$1</code>');
+		}
 
-		const media = (text) =>
+		function media(text)
 		{
 			text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" />');
-			text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
-
-			return text;
-		};
+			return text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+		}
 
-		const heading = (text) =>
+		function heading(text)
 		{
 			text = text.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
 			text = text.replace(/^### (.+)$/gm, '<h3>$1</h3>');
 			text = text.replace(/^## (.+)$/gm, '<h2>$1</h2>');
-			text = text.replace(/^# (.+)$/gm, '<h1>$1</h1>');
-
-			return text;
-		};
+			return text.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+		}
 
-		const rule = (text) =>
+		function rule(text)
 		{
 			return text.replace(/^---$/gm, '<hr />');
-		};
+		}
 
-		const quote = (text) =>
+		function quote(text)
 		{
 			text = text.replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>');
-			text = text.replace(/<\/blockquote>\n<blockquote>/g, '\n');
-
-			return text;
-		};
+			return text.replace(/<\/blockquote>\n<blockquote>/g, '\n');
+		}
 
-		const format = (text) =>
+		function format(text)
 		{
 			text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
 			text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
 			text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
-			text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
-
-			return text;
-		};
+			return text.replace(/~~(.+?)~~/g, '<del>$1</del>');
+		}
 
-		const list = (text) =>
+		function list(text)
 		{
 			text = text.replace(/^[\t ]*[-*] (.+)$/gm, '<uli>$1</uli>');
 			text = text.replace(/((?:<uli>.*<\/uli>\n?)+)/g, (match) =>
@@ -111,9 +141,9 @@ onetype.AddonReady('elements', (elements) =>
 			});
 
 			return text;
-		};
+		}
 
-		const table = (text) =>
+		function table(text)
 		{
 			return text.replace(/^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)+)/gm, (_, header, _align, body) =>
 			{
@@ -126,107 +156,28 @@ onetype.AddonReady('elements', (elements) =>
 
 				return `<table><thead><tr>${heads}</tr></thead><tbody>${rows}</tbody></table>`;
 			});
-		};
+		}
 
-		const paragraph = (text) =>
+		function paragraph(text)
 		{
 			text = text.replace(/(<\/(table|ul|ol|blockquote|pre|h[1-4])>)(.)/g, '$1\n$3');
 			text = text.replace(/(.)(<(table|ul|ol|blockquote|pre|h[1-4]|hr|img)[\s>])/g, '$1\n$2');
 
-			const blk = /^<(h[1-4]|ul|ol|pre|blockquote|hr|table|img|li|\/)/;
+			const pattern = /^<(h[1-4]|ul|ol|pre|blockquote|hr|table|img|li|\/)/;
 
-			return text.split('\n').map(l =>
+			return text.split('\n').map(line =>
 			{
-				const trimmed = l.trim();
+				const trimmed = line.trim();
 
-				if(!trimmed || blk.test(trimmed))
+				if (!trimmed || pattern.test(trimmed))
 				{
 					return trimmed;
 				}
 
 				return `<p>${trimmed}</p>`;
-			}).filter(l => l).join('\n');
-		};
-
-		const flush = () =>
-		{
-			if(!buffer.length)
-			{
-				return;
-			}
-
-			line(transform(buffer.join('\n')));
-			buffer = [];
-		};
-
-		const lines = content.split('\n');
-
-		for(let i = 0; i < lines.length; i++)
-		{
-			const trimmed = lines[i].trim();
-
-			if(trimmed.startsWith('```'))
-			{
-				buffer.push(lines[i]);
-				block = !block;
-
-				if(!block)
-				{
-					flush();
-				}
-
-				continue;
-			}
-
-			if(block)
-			{
-				buffer.push(lines[i]);
-				continue;
-			}
-
-			if(trimmed.startsWith('|') || /^[\t ]*[-*] .+/.test(trimmed) || /^[\t ]*\d+\. .+/.test(trimmed) || trimmed.startsWith('> '))
-			{
-				buffer.push(lines[i]);
-				continue;
-			}
-
-			flush();
-
-			if(!trimmed)
-			{
-				spacer();
-				continue;
-			}
-
-			line(transform(trimmed));
+			}).filter(line => line).join('\n');
 		}
+	}
+};
 
-		flush();
-
-		return html;
-	};
-
-	elements.ItemAdd({
-		id: 'global-markdown',
-		icon: 'article',
-		name: 'Markdown',
-		description: 'Renders markdown content as styled HTML.',
-		category: 'Global',
-		author: 'OneType',
-		config: {
-			content: {
-				type: 'string',
-				value: ''
-			},
-			variant: {
-				type: 'string',
-				value: '',
-				options: ['', 'bg-2']
-			}
-		},
-		render: function()
-		{
-			return `<div class="holder" :variant="variant">${parse(this.content)}</div>`;
-		}
-	});
-});
+export default OneTypeMarkdown;

package/lib/src/mixins/middleware.js

@@ -15,11 +15,11 @@ const OneTypeMiddleware =
                 {
                     try
                     {
-                        return await this.middleware[name][index](context);
+                        await this.middleware[name][index](context);
                     }
                     catch(error)
                     {
-                        this.LogError('Error in middleware callback: ' + name, {}, error);
+                        this.Error(500, 'Error in middleware callback :name:.', {name});
                     }
                 }
 

package/lib/src/mixins/observer.js

@@ -0,0 +1,337 @@
+const OneTypeObserver =
+{
+	ObserverStart()
+	{
+		if(this.environment !== 'front')
+		{
+			return;
+		}
+
+		this.observer =
+		{
+			mutation: null,
+			visibility: null,
+			resize: null
+		};
+
+		const start = () =>
+		{
+			this.observer.mutation = new MutationObserver((mutations) =>
+			{
+				for(const mutation of mutations)
+				{
+					for(const node of mutation.addedNodes)
+					{
+						if(node.nodeType !== 1)
+						{
+							continue;
+						}
+
+						this.ObserverNode(node, 'add');
+						this.ObserverWalk(node, 'add');
+					}
+
+					for(const node of mutation.removedNodes)
+					{
+						if(node.nodeType !== 1)
+						{
+							continue;
+						}
+
+						this.ObserverNode(node, 'remove');
+						this.ObserverWalk(node, 'remove');
+					}
+				}
+			});
+
+			this.observer.mutation.observe(document.body, { childList: true, subtree: true });
+
+			this.observer.visibility = new IntersectionObserver((entries) =>
+			{
+				for(const entry of entries)
+				{
+					if(entry.isIntersecting && entry.target.__visible)
+					{
+						entry.target.__visible(entry);
+					}
+				}
+			}, { threshold: 0.1 });
+
+			this.observer.resize = new ResizeObserver((entries) =>
+			{
+				for(const entry of entries)
+				{
+					if(entry.target.__resize)
+					{
+						entry.target.__resize(entry);
+					}
+				}
+			});
+		};
+
+		if(document.readyState === 'loading')
+		{
+			document.addEventListener('DOMContentLoaded', start);
+		}
+		else
+		{
+			start();
+		}
+	},
+
+	ObserverNode(node, type)
+	{
+		this.Emit('@dom.' + type, node);
+
+		if(type === 'add' && node.__add)
+		{
+			node.__add();
+		}
+
+		if(type === 'remove' && node.__remove)
+		{
+			node.__remove();
+		}
+	},
+
+	ObserverWalk(node, type)
+	{
+		if(!node.hasChildNodes())
+		{
+			return;
+		}
+
+		for(let i = 0; i < node.childNodes.length; i++)
+		{
+			const child = node.childNodes[i];
+
+			if(child.nodeType !== 1)
+			{
+				continue;
+			}
+
+			this.ObserverNode(child, type);
+			this.ObserverWalk(child, type);
+		}
+	},
+
+	ObserverVisible(element, callback)
+	{
+		if(!this.observer || !this.observer.visibility)
+		{
+			return;
+		}
+
+		element.__visible = callback;
+		this.observer.visibility.observe(element);
+	},
+
+	ObserverUnvisible(element)
+	{
+		if(!this.observer || !this.observer.visibility)
+		{
+			return;
+		}
+
+		delete element.__visible;
+		this.observer.visibility.unobserve(element);
+	},
+
+	ObserverResize(element, callback)
+	{
+		if(!this.observer || !this.observer.resize)
+		{
+			return;
+		}
+
+		element.__resize = callback;
+		this.observer.resize.observe(element);
+	},
+
+	ObserverUnresize(element)
+	{
+		if(!this.observer || !this.observer.resize)
+		{
+			return;
+		}
+
+		delete element.__resize;
+		this.observer.resize.unobserve(element);
+	},
+
+	ObserverScroll(element, callback)
+	{
+		if(!this.observer)
+		{
+			return;
+		}
+
+		if(!this.observer.scroll)
+		{
+			this.observer.scroll = new Set();
+			this.observer.scrollPrevious = window.scrollY;
+			this.observer.scrollTimestamp = Date.now();
+
+			window.addEventListener('scroll', () =>
+			{
+				const now = Date.now();
+				const current = window.scrollY;
+				const delta = now - this.observer.scrollTimestamp;
+				const direction = current >= this.observer.scrollPrevious ? 'down' : 'up';
+				const speed = delta > 0 ? Math.abs(current - this.observer.scrollPrevious) / (delta / 1000) : 0;
+				const height = window.innerHeight;
+
+				for(const node of this.observer.scroll)
+				{
+					if(!node.__scroll)
+					{
+						continue;
+					}
+
+					const rect = node.getBoundingClientRect();
+					const visible = rect.bottom > 0 && rect.top < height;
+
+					if(!visible)
+					{
+						continue;
+					}
+
+					node.__scroll({
+						progress: Math.min(1, Math.max(0, (height - rect.top) / (height + rect.height))),
+						direction: direction,
+						speed: speed,
+						top: rect.top,
+						bottom: height - rect.bottom,
+						visible: true
+					});
+				}
+
+				this.observer.scrollPrevious = current;
+				this.observer.scrollTimestamp = now;
+			}, { passive: true });
+		}
+
+		element.__scroll = callback;
+		this.observer.scroll.add(element);
+	},
+
+	ObserverUnscroll(element)
+	{
+		if(!this.observer || !this.observer.scroll)
+		{
+			return;
+		}
+
+		delete element.__scroll;
+		this.observer.scroll.delete(element);
+	},
+
+	ObserverHover(element, callback, offset = 0)
+	{
+		if(!this.observer)
+		{
+			return;
+		}
+
+		if(!this.observer.hover)
+		{
+			this.observer.hover = new Set();
+
+			document.addEventListener('mousemove', (event) =>
+			{
+				for(const node of this.observer.hover)
+				{
+					if(!node.__hover)
+					{
+						continue;
+					}
+
+					const rect = node.getBoundingClientRect();
+					const pad = node.__hoverOffset;
+					const inside = event.clientX >= rect.left - pad && event.clientX <= rect.right + pad && event.clientY >= rect.top - pad && event.clientY <= rect.bottom + pad;
+
+					if(inside || node.__hoverActive)
+					{
+						node.__hover({
+							active: inside,
+							enter: inside && !node.__hoverActive,
+							leave: !inside && node.__hoverActive,
+							x: (event.clientX - rect.left) / rect.width,
+							y: (event.clientY - rect.top) / rect.height
+						});
+
+						node.__hoverActive = inside;
+					}
+				}
+			}, { passive: true });
+		}
+
+		element.__hover = callback;
+		element.__hoverActive = false;
+		element.__hoverOffset = offset;
+		this.observer.hover.add(element);
+	},
+
+	ObserverUnhover(element)
+	{
+		if(!this.observer || !this.observer.hover)
+		{
+			return;
+		}
+
+		delete element.__hover;
+		delete element.__hoverActive;
+		this.observer.hover.delete(element);
+	},
+
+	ObserverClick(element, callback)
+	{
+		if(!this.observer)
+		{
+			return;
+		}
+
+		if(!this.observer.click)
+		{
+			this.observer.click = new Set();
+
+			document.addEventListener('click', (event) =>
+			{
+				for(const node of this.observer.click)
+				{
+					if(!node.__click)
+					{
+						continue;
+					}
+
+					const rect = node.getBoundingClientRect();
+					const inside = event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+
+					if(inside)
+					{
+						node.__click({
+							x: (event.clientX - rect.left) / rect.width,
+							y: (event.clientY - rect.top) / rect.height
+						});
+					}
+				}
+			});
+		}
+
+		element.__click = callback;
+		this.observer.click.add(element);
+	},
+
+	ObserverUnclick(element)
+	{
+		if(!this.observer || !this.observer.click)
+		{
+			return;
+		}
+
+		delete element.__click;
+		this.observer.click.delete(element);
+	}
+};
+
+export default OneTypeObserver;

package/lib/src/mixins/request.js

@@ -5,7 +5,7 @@ const OneTypeRequest = {
 
         const data = {value};
 
-        this.Emit('request.' + name, data);
+        this.Emit('@request.' + name, data);
 
         if(typeof data !== 'object' || !('value' in data) || typeof data.value !== typeof value)
         {
@@ -19,7 +19,7 @@ const OneTypeRequest = {
     {
         name = name.toLowerCase();
 
-        this.EmitOn('request.' + name, callback);
+        this.EmitOn('@request.' + name, callback);
     }
 };
 

package/lib/src/mixins/route.js

@@ -162,7 +162,15 @@ const OneTypeRoute =
             return '/';
         }
 
-        return this.RouteNormalize(window.location.pathname);
+        const base = this.StateGet('base', '');
+        let path = window.location.pathname;
+
+        if(base && path.startsWith(base))
+        {
+            path = path.slice(base.length) || '/';
+        }
+
+        return this.RouteNormalize(path);
     },
 
     RouteNavigate(pathname, state = {})
@@ -172,7 +180,8 @@ const OneTypeRoute =
             return;
         }
 
-        const normalized = this.RouteNormalize(pathname);
+        const base = this.StateGet('base', '');
+        const normalized = this.RouteNormalize(base + pathname);
 
         if (window.history && window.history.pushState)
         {