@onetype/framework 2.0.20

package/addons/render/pages/front/functions/change.js

@@ -0,0 +1,119 @@
+pages.Fn('change', function(target, parameters = {}, options = {})
+{
+    this.resolve = null;
+    this.page = null;
+    this.id = null;
+    this.parameters = parameters;
+    this.options = options;
+
+    this.methods.init = async (resolve) =>
+    {
+        this.resolve = resolve;
+
+        if(this.options.path)
+        {
+            this.methods.match();
+        }
+        else
+        {
+            this.page = this.ItemGet(target);
+            this.id = target;
+        }
+
+        if(!this.page)
+        {
+            // Try to find a 404 page
+            const notFoundPage = Object.values(this.Items()).find(p => p.Get('404'));
+
+            if(notFoundPage)
+            {
+                this.page = notFoundPage;
+                this.id = notFoundPage.Get('id');
+            }
+            else
+            {
+                return this.methods.done(null, `Page "${target}" not found.`, 404);
+            }
+        }
+
+        const route = this.page.Get('route');
+        const url = this.methods.url(this.methods.route(route, this.parameters), this.parameters);
+
+        if(this.options.push !== false)
+        {
+            history.pushState(null, '', url);
+        }
+
+        const result = this.Fn('open', this.id, this.parameters);
+
+        if(result === false)
+        {
+            return this.methods.done(null, 'Navigation prevented.', 403);
+        }
+
+        return this.methods.done({ id: this.id, parameters: this.parameters, url }, 'Page changed.', 200);
+    };
+
+    this.methods.match = () =>
+    {
+        const result = this.Fn('match', target);
+
+        if(result)
+        {
+            this.page = result.page;
+            this.id = result.page.Get('id');
+            this.parameters = { ...result.parameters, ...this.parameters };
+        }
+    };
+
+    this.methods.route = (route, parameters) =>
+    {
+        if(!Array.isArray(route))
+        {
+            return route;
+        }
+
+        const keys = Object.keys(parameters);
+
+        for(let i = route.length - 1; i >= 0; i--)
+        {
+            const params = (route[i].match(/:(\w+)/g) || []).map(p => p.slice(1));
+
+            if(params.length && params.every(p => keys.includes(p)))
+            {
+                return route[i];
+            }
+        }
+
+        return route[0];
+    };
+
+    this.methods.url = (route, parameters) =>
+    {
+        let url = route;
+
+        for(const key in parameters)
+        {
+            url = url.replace(`:${key}`, parameters[key]);
+        }
+
+        return url;
+    };
+
+    this.methods.done = (data, message, code) =>
+    {
+        this.resolve({ data, message, code });
+    };
+
+    return new Promise((resolve) =>
+    {
+        try
+        {
+            this.methods.init(resolve);
+        }
+        catch(error)
+        {
+            resolve({ data: null, message: error.message, code: 500 });
+        }
+    });
+});

package/addons/render/pages/front/functions/match.js

@@ -0,0 +1,34 @@
+pages.Fn('match', function(path)
+{
+	const items = Object.values(pages.Items());
+
+	for(const item of items)
+	{
+		// Skip 404 pages during normal matching
+		if(item.Get('404'))
+		{
+			continue;
+		}
+
+		const route = item.Get('route');
+
+		if(!route)
+		{
+			continue;
+		}
+
+		const routes = Array.isArray(route) ? route : [route];
+
+		for(const r of routes)
+		{
+			const result = onetype.RouteMatch(r, path || onetype.RouteCurrent());
+
+			if(result.match)
+			{
+				return { page: item, parameters: result.params };
+			}
+		}
+	}
+
+	return null;
+});

package/addons/render/pages/front/functions/open.js

@@ -0,0 +1,19 @@
+pages.Fn('open', async function(id, parameters = {})
+{
+	const page = pages.ItemGet(id);
+
+	if(!page)
+	{
+		console.warn(`Page with id "${id}" not found`);
+		return false;
+	}
+
+	const active = pages.StoreGet('active');
+
+	if(active && active.Fn('leave') === false)
+	{
+		return false;
+	}
+
+	return await page.Fn('enter', parameters);
+});

package/addons/render/pages/front/item/catch/add.js

@@ -0,0 +1,24 @@
+pages.ItemOn('add', (item) =>
+{
+	const map = item.Get('areas');
+
+	if(map)
+	{
+		Object.keys(map).forEach(name =>
+		{
+			const id = map[name];
+
+			if(typeof id === 'function')
+			{
+				pages.RenderAdd(item.Get('id') + ':' + name, function(parameters)
+				{
+					this.Define({
+						parameters: ['object', {}]
+					});
+
+					return id.call(this, parameters);
+				});
+			}
+		});
+	}
+});

package/addons/render/pages/front/item/catch/remove.js

@@ -0,0 +1,17 @@
+pages.ItemOn('removed', (item) =>
+{
+	const map = item.Get('layouts');
+
+	if(map)
+	{
+		Object.keys(map).forEach(name =>
+		{
+			const id = map[name];
+
+			if(typeof id === 'function')
+			{
+				pages.RenderRemove(item.Get('id') + ':' + name);
+			}
+		});
+	}
+});

package/addons/render/pages/front/item/functions/enter.js

@@ -0,0 +1,45 @@
+pages.Fn('item.enter', async function(item, parameters = {})
+{
+	const onEnter = item.Get('onEnter');
+	const onBeforeEnter = item.Get('onBeforeEnter');
+
+	const data = {};
+
+	if(item.Get('data'))
+	{
+		Object.assign(data, await item.Get('data').call(item, parameters));
+	}
+
+	if(onBeforeEnter && onBeforeEnter.call(item, parameters, data) === false)
+	{
+		return false;
+	}
+
+	pages.StoreSet('active', item);
+
+	const title = item.Get('title');
+
+	if(title)
+	{
+		if(typeof title === 'function')
+		{
+			document.title = title.call(item, parameters, data);
+		}
+		else
+		{
+			document.title = title;
+		}
+	}
+
+	const element = item.Fn('render', parameters, data);
+	item.Set('element', element);
+
+	document.body.appendChild(element);
+
+	if(onEnter)
+	{
+		onEnter.call(item, parameters, data);
+	}
+
+	return true;
+});

package/addons/render/pages/front/item/functions/leave.js

@@ -0,0 +1,27 @@
+pages.Fn('item.leave', function(item)
+{
+	const onLeave = item.Get('onLeave');
+	const onBeforeLeave = item.Get('onBeforeLeave');
+
+	if(onBeforeLeave && onBeforeLeave.call(item) === false)
+	{
+		return false;
+	}
+
+	pages.StoreSet('active', null);
+
+	if(onLeave)
+	{
+		onLeave.call(item);
+	}
+
+	const element = item.Get('element');
+
+	if(element)
+	{
+		element.remove();
+		item.Set('element', null);
+	}
+
+	return true;
+});

package/addons/render/pages/front/item/functions/render.js

@@ -0,0 +1,33 @@
+pages.Fn('item.render', function(item, parameters = {}, data = null)
+{
+	const grid = item.Get('grid');
+	const element = document.createElement('div');
+
+	element.classList.add('ot-page');
+	element.setAttribute('data-page', item.Get('id'));
+	element.style.cssText = [
+		`grid-template-areas: ${grid.template}`,
+		`grid-template-columns: ${grid.columns}`,
+		`grid-template-rows: ${grid.rows}`,
+		`gap: ${grid.gap}`
+	].join('; ');
+
+	const template = grid.template;
+	const areas = [...new Set(template.match(/[\w-]+/g) || [])];
+
+	areas.forEach(name =>
+	{
+		const container = document.createElement('div');
+
+		container.classList.add('ot-page-area');
+		container.setAttribute('data-area', name);
+		container.style.gridArea = name;
+
+		const render = pages.Render(item.Get('id') + ':' + name, {parameters, data});
+
+		container.appendChild(render.Element);
+		element.appendChild(container);
+	});
+
+	return element;
+});

package/addons/render/pages/front/items/directives/change.js

@@ -0,0 +1,41 @@
+onetype.AddonReady('directives', function()
+{
+	directives.ItemAdd({
+		id: 'ot-page',
+		icon: 'file',
+		name: 'Page',
+		description: 'Navigate to a page on render',
+		category: 'navigation',
+		trigger: 'node',
+		order: 666,
+		strict: false,
+		tag: 'ot-page',
+		attributes: {
+			'route': ['string', null, true],
+			'parameters': ['object', {}],
+			'history': ['boolean', true],
+			'timeout': ['number', 0]
+		},
+		code: function(data, item, compile, node, identifier)
+		{
+			const route = data['route'].value;
+			const parameters = data['parameters'].value;
+			const push = data['history'].value;
+			const timeout = data['timeout'].value;
+
+			const change = () =>
+			{
+				pages.Fn('change', route, parameters, { path: true, push });
+			};
+
+			if(timeout > 0)
+			{
+				setTimeout(change, timeout);
+			}
+			else
+			{
+				change();
+			}
+		}
+	});
+});

package/addons/render/pages/front/styles/page.css

@@ -0,0 +1,17 @@
+/* Base page styles */
+.ot-page
+{
+	display: grid;
+	position: fixed;
+	inset: 0;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+
+/* Page area containers */
+.ot-page-area
+{
+	position: relative;
+	overflow: auto;
+}

package/addons/render/tags/addon.js

@@ -0,0 +1,11 @@
+import onetype from '#framework/load.js';
+
+const tags = onetype.Addon('tags', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('closeable', ['boolean', true]);
+    addon.Field('text', ['boolean', true]);
+    addon.Field('nest', ['object', {}]);
+});
+
+export default tags;

package/addons/render/tags/functions/groups.js

@@ -0,0 +1,13 @@
+import tags from '#tags/addon.js';
+
+tags.Fn('groups', function()
+{
+    return {
+        'text-inline': ['a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'em', 'i', 'img', 'kbd', 'mark', 'q', 'small', 'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'del', 'ins'],
+        'form': ['input', 'textarea', 'select', 'option', 'optgroup', 'form', 'button', 'label', 'fieldset', 'legend', 'datalist', 'output'],
+        'block': ['div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'li', 'table', 'section', 'article', 'aside', 'nav', 'header', 'footer', 'main', 'figure'],
+        'table': ['table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'caption', 'colgroup', 'col'],
+        'media': ['img', 'video', 'audio', 'source', 'track', 'embed', 'iframe'],
+        'void': ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']
+    };
+});

package/addons/render/tags/functions/validate.js

@@ -0,0 +1,51 @@
+import tags from '#tags/addon.js';
+
+tags.Fn('validate', function(parentTag, childTag)
+{
+    const parent = this.ItemGet(parentTag);
+    const child = this.ItemGet(childTag);
+    
+    if(!parent || !child)
+    {
+        return false;
+    }
+    
+    const nest = parent.Get('nest');
+    const groups = this.Fn('groups');
+    
+    this.methods.check = (rules, tag) =>
+    {
+        return rules.some(rule =>
+        {
+            if(rule === '*')
+            {
+                return true;
+            }
+            
+            if(rule.startsWith('@'))
+            {
+                const groupName = rule.substring(1);
+                return groups[groupName] && groups[groupName].includes(tag);
+            }
+            
+            return rule === tag;
+        });
+    };
+    
+    if(nest.allowed)
+    {
+        if(nest.allowed.includes('*'))
+        {
+            return !nest.disallowed || !this.methods.check(nest.disallowed, childTag);
+        }
+        
+        return this.methods.check(nest.allowed, childTag);
+    }
+    
+    if(nest.disallowed)
+    {
+        return !this.methods.check(nest.disallowed, childTag);
+    }
+    
+    return true;
+});

package/addons/render/tags/items/block.js

@@ -0,0 +1,131 @@
+import tags from '#tags/addon.js';
+
+// Headings
+tags.Item({
+    id: 'h1',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'h2',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'h3',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'h4',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'h5',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'h6',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+// Text blocks
+tags.Item({
+    id: 'p',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'blockquote',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline', '@block']
+    }
+});
+
+tags.Item({
+    id: 'pre',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'hr',
+    closeable: false,
+    text: false,
+    nest: {
+        disallowed: ['*']
+    }
+});
+
+// Generic containers
+tags.Item({
+    id: 'div',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['*']
+    }
+});
+
+// Lists
+tags.Item({
+    id: 'ul',
+    closeable: true,
+    text: false,
+    nest: {
+        allowed: ['li']
+    }
+});
+
+tags.Item({
+    id: 'ol',
+    closeable: true,
+    text: false,
+    nest: {
+        allowed: ['li']
+    }
+});
+
+tags.Item({
+    id: 'li',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['*']
+    }
+});

package/addons/render/tags/items/form.js

@@ -0,0 +1,112 @@
+import tags from '#tags/addon.js';
+
+tags.Item({
+    id: 'form',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['*'],
+        disallowed: ['form']
+    }
+});
+
+tags.Item({
+    id: 'fieldset',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['*']
+    }
+});
+
+tags.Item({
+    id: 'legend',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'label',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline', '@form'],
+        disallowed: ['label']
+    }
+});
+
+tags.Item({
+    id: 'input',
+    closeable: false,
+    text: false,
+    nest: {
+        disallowed: ['*']
+    }
+});
+
+tags.Item({
+    id: 'textarea',
+    closeable: true,
+    text: true,
+    nest: {
+        disallowed: ['*']
+    }
+});
+
+tags.Item({
+    id: 'select',
+    closeable: true,
+    text: false,
+    nest: {
+        allowed: ['option', 'optgroup']
+    }
+});
+
+tags.Item({
+    id: 'option',
+    closeable: true,
+    text: true,
+    nest: {
+        disallowed: ['*']
+    }
+});
+
+tags.Item({
+    id: 'optgroup',
+    closeable: true,
+    text: false,
+    nest: {
+        allowed: ['option']
+    }
+});
+
+tags.Item({
+    id: 'datalist',
+    closeable: true,
+    text: false,
+    nest: {
+        allowed: ['option']
+    }
+});
+
+tags.Item({
+    id: 'button',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline'],
+        disallowed: ['@form']
+    }
+});
+
+tags.Item({
+    id: 'output',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});