@onetype/framework 2.0.41 → 2.0.43

package/addons/services/cloudflare/images/back/items/commands/get.js

@@ -0,0 +1,56 @@
+import commands from '@onetype/framework/commands';
+import images from '#cloudflare-images/addon.js';
+
+commands.Item({
+	id: 'cloudflare:images:get',
+	exposed: true,
+	method: 'GET',
+	endpoint: '/api/images/:id',
+	in: {
+		id: ['string', null, true]
+	},
+	out: {
+		image: {
+			type: 'object',
+			config: {
+				id: ['string'],
+				team_id: ['string'],
+				site_id: ['string'],
+				cloudflare_id: ['string'],
+				filename: ['string'],
+				url: ['string'],
+				variants: ['object'],
+				alt: ['string'],
+				size: ['number'],
+				type: ['string'],
+				width: ['number'],
+				height: ['number'],
+				updated_at: ['string'],
+				created_at: ['string']
+			}
+		}
+	},
+	callback: async function(properties, resolve)
+	{
+		const user = this.http?.state?.user;
+
+		if(!user || !user.team)
+		{
+			return resolve(null, 'Not authenticated.', 401);
+		}
+
+		const item = await images.Find()
+			.filter('id', properties.id)
+			.filter('team_id', user.team.id)
+			.one();
+
+		if(!item)
+		{
+			return resolve(null, 'Image not found.', 404);
+		}
+
+		resolve({
+			image: item.Get(['id', 'team_id', 'site_id', 'cloudflare_id', 'filename', 'url', 'variants', 'alt', 'size', 'type', 'width', 'height', 'updated_at', 'created_at'])
+		});
+	}
+});

package/addons/services/cloudflare/images/back/items/commands/list.js

@@ -0,0 +1,49 @@
+import commands from '@onetype/framework/commands';
+import images from '#cloudflare-images/addon.js';
+
+commands.Item({
+	id: 'cloudflare:images:list',
+	exposed: true,
+	method: 'GET',
+	endpoint: '/api/images',
+	in: {
+		site_id: ['string', null, true],
+		page: ['number'],
+		limit: ['number']
+	},
+	out: {
+		images: ['array', null, true],
+		total: ['number']
+	},
+	callback: async function(properties, resolve)
+	{
+		const user = this.http?.state?.user;
+
+		if(!user || !user.team)
+		{
+			return resolve(null, 'Not authenticated.', 401);
+		}
+
+		const query = images.Find()
+			.filter('team_id', user.team.id)
+			.filter('site_id', properties.site_id)
+			.sort('created_at', 'desc');
+
+		if(properties.limit)
+		{
+			query.limit(properties.limit);
+		}
+
+		if(properties.page)
+		{
+			query.page(properties.page);
+		}
+
+		const result = await query.plain();
+
+		resolve({
+			images: result.items,
+			total: result.total
+		});
+	}
+});

package/addons/services/cloudflare/images/back/items/commands/upload.js

@@ -0,0 +1,79 @@
+import commands from '@onetype/framework/commands';
+import images from '#cloudflare-images/addon.js';
+
+commands.Item({
+	id: 'cloudflare:images:upload',
+	exposed: true,
+	method: 'POST',
+	endpoint: '/api/images',
+	in: {
+		site_id: ['string', null, true],
+		file: ['binary', null, true],
+		filename: ['string', null, true],
+		alt: ['string']
+	},
+	out: {
+		image: {
+			type: 'object',
+			config: {
+				id: ['string'],
+				team_id: ['string'],
+				site_id: ['string'],
+				cloudflare_id: ['string'],
+				filename: ['string'],
+				url: ['string'],
+				variants: ['object'],
+				alt: ['string'],
+				size: ['number'],
+				type: ['string'],
+				width: ['number'],
+				height: ['number'],
+				updated_at: ['string'],
+				created_at: ['string']
+			}
+		}
+	},
+	callback: async function(properties, resolve)
+	{
+		const user = this.http?.state?.user;
+
+		if(!user || !user.team)
+		{
+			return resolve(null, 'Not authenticated.', 401);
+		}
+
+		const { file, filename, site_id, alt } = properties;
+		const meta = images.Fn('meta', file);
+
+		if(!meta.type)
+		{
+			return resolve(null, 'Unsupported image format.', 400);
+		}
+
+		const form = new FormData();
+
+		form.append('file', new Blob([file]), filename);
+
+		const result = await images.Fn('api', 'POST', '', form);
+
+		const item = images.Item({
+			team_id: user.team.id,
+			site_id,
+			cloudflare_id: result.id,
+			filename,
+			url: result.variants?.[0] || '',
+			variants: result.variants || [],
+			alt: alt || '',
+			size: file.length,
+			type: meta.type,
+			width: meta.width,
+			height: meta.height
+		});
+
+		await item.Create();
+
+		resolve({
+			image: item.Get(['id', 'team_id', 'site_id', 'cloudflare_id', 'filename', 'url', 'variants', 'alt', 'size', 'type', 'width', 'height', 'updated_at', 'created_at'])
+		});
+	}
+});

package/addons/services/cloudflare/images/back/load.js

@@ -0,0 +1,21 @@
+import images from '#cloudflare-images/addon.js';
+
+/* Expose */
+import '#cloudflare-images/expose.js';
+
+/* Functions */
+import '#cloudflare-images/functions/api.js';
+import '#cloudflare-images/functions/meta.js';
+import '#cloudflare-images/functions/meta/detect.js';
+import '#cloudflare-images/functions/meta/dimensions/png.js';
+import '#cloudflare-images/functions/meta/dimensions/jpeg.js';
+import '#cloudflare-images/functions/meta/dimensions/gif.js';
+import '#cloudflare-images/functions/meta/dimensions/webp.js';
+
+/* Commands */
+import '#cloudflare-images/items/commands/upload.js';
+import '#cloudflare-images/items/commands/delete.js';
+import '#cloudflare-images/items/commands/list.js';
+import '#cloudflare-images/items/commands/get.js';
+
+export default images;

package/addons/services/cloudflare/images/front/items/elements/browse/browse.css

@@ -0,0 +1,235 @@
+/* Root */
+
+.e-15fd40b6
+{
+	display: flex;
+	width: calc(100vw - 80px);
+	height: calc(100vh - 80px);
+	max-width: 1200px;
+}
+
+/* Holder */
+
+.e-15fd40b6 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	background: var(--ot-bg-1);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-l);
+	overflow: hidden;
+}
+
+/* ─── Header ─── */
+
+.e-15fd40b6 .header
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px 20px;
+	border-bottom: 1px solid var(--ot-bg-2-border);
+	flex-shrink: 0;
+}
+
+.e-15fd40b6 .header > .left
+{
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.e-15fd40b6 .header > .left > .icon
+{
+	font-size: 18px;
+	color: var(--ot-text-2);
+}
+
+.e-15fd40b6 .header > .left > .title
+{
+	font-size: 13px;
+	font-weight: 700;
+	color: var(--ot-text-1);
+}
+
+.e-15fd40b6 .header > .left > .count
+{
+	font-size: 10px;
+	font-weight: 700;
+	color: var(--ot-text-3);
+	padding: 2px 6px;
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: 100px;
+}
+
+.e-15fd40b6 .header > .right
+{
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.e-15fd40b6 .header > .right > .close
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border: none;
+	background: transparent;
+	color: var(--ot-text-3);
+	border-radius: var(--ot-radius-s);
+	cursor: pointer;
+	transition: color 0.12s, background 0.12s;
+}
+
+.e-15fd40b6 .header > .right > .close:hover
+{
+	color: var(--ot-text-1);
+	background: var(--ot-bg-2);
+}
+
+.e-15fd40b6 .header > .right > .close > i
+{
+	font-size: 18px;
+}
+
+/* ─── Body ─── */
+
+.e-15fd40b6 .body
+{
+	flex: 1;
+	overflow-y: auto;
+	padding: 20px;
+	transition: background 0.15s;
+}
+
+.e-15fd40b6 .body.dragging
+{
+	background: var(--ot-brand-opacity);
+	outline: 2px dashed var(--ot-brand);
+	outline-offset: -8px;
+	border-radius: var(--ot-radius-m);
+}
+
+/* ─── Empty ─── */
+
+.e-15fd40b6 .empty
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+
+/* ─── Grid ─── */
+
+.e-15fd40b6 .grid
+{
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+	gap: 12px;
+}
+
+/* ─── Card ─── */
+
+.e-15fd40b6 .card
+{
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--ot-radius-m);
+	background: var(--ot-bg-2);
+	border: 1px solid transparent;
+	cursor: pointer;
+	overflow: hidden;
+	transition: border-color 0.15s;
+}
+
+.e-15fd40b6 .card:hover
+{
+	border-color: var(--ot-bg-2-border);
+}
+
+/* ─── Preview ─── */
+
+.e-15fd40b6 .preview
+{
+	width: 100%;
+	aspect-ratio: 4 / 3;
+	overflow: hidden;
+	background: var(--ot-bg-3);
+}
+
+.e-15fd40b6 .preview > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+/* ─── Info ─── */
+
+.e-15fd40b6 .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	padding: 8px 10px;
+}
+
+.e-15fd40b6 .name
+{
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-text-1);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.e-15fd40b6 .meta
+{
+	font-size: 10px;
+	color: var(--ot-text-3);
+}
+
+/* ─── Delete ─── */
+
+.e-15fd40b6 .delete
+{
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: var(--ot-bg-1);
+	color: var(--ot-text-3);
+	border-radius: var(--ot-radius-s);
+	cursor: pointer;
+	opacity: 0;
+	transition: color 0.12s, background 0.12s, opacity 0.12s;
+}
+
+.e-15fd40b6 .card:hover .delete
+{
+	opacity: 1;
+}
+
+.e-15fd40b6 .delete:hover
+{
+	color: var(--ot-red);
+	background: var(--ot-red-opacity);
+}
+
+.e-15fd40b6 .delete > i
+{
+	font-size: 15px;
+}

package/addons/services/cloudflare/images/front/items/elements/browse/browse.js

@@ -0,0 +1,193 @@
+elements.ItemAdd({
+	id: 'cloudflare-images',
+	icon: 'image',
+	name: 'Images',
+	description: 'Image browser with upload and management.',
+	category: 'Editor',
+	author: 'OneType',
+	config: {
+		site: {
+			type: 'object',
+			value: null
+		},
+		_pick: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.items = [];
+		this.loading = true;
+		this.uploading = false;
+		this.dragging = false;
+
+		const load = () =>
+		{
+			if(!this.site)
+			{
+				return;
+			}
+
+			$ot.command('cloudflare:images:list', { site_id: this.site.id }, true).then(result =>
+			{
+				this.items = result.data.images;
+				this.loading = false;
+			});
+		};
+
+		load();
+
+		this.upload = (files) =>
+		{
+			if(!files.length || !this.site)
+			{
+				return;
+			}
+
+			this.uploading = true;
+
+			const pending = Array.from(files).map(file =>
+			{
+				const form = new FormData();
+
+				form.append('file', file);
+				form.append('site_id', this.site.id);
+				form.append('filename', file.name);
+
+				return fetch('/api/images', { method: 'POST', body: form });
+			});
+
+			Promise.all(pending).then(responses =>
+			{
+				return Promise.all(responses.map(r => r.json()));
+			}).then(results =>
+			{
+				this.uploading = false;
+
+				const failed = results.filter(r => r.code !== 200);
+
+				if(failed.length)
+				{
+					$ot.toast({ type: 'error', message: failed[0].message || 'Upload failed.' });
+				}
+				else
+				{
+					$ot.toast({ type: 'success', message: 'Images uploaded.' });
+				}
+
+				load();
+			});
+		};
+
+		this.pick = (item) =>
+		{
+			if(this._pick)
+			{
+				this._pick(item);
+			}
+		};
+
+		this.remove = (event, item) =>
+		{
+			event.stopPropagation();
+
+			$ot.command('cloudflare:images:delete', { id: item.id }, true).then(result =>
+			{
+				if(result.data.code && result.data.code !== 200)
+				{
+					$ot.toast({ type: 'error', message: result.data.message || 'Delete failed.' });
+				}
+
+				load();
+			});
+		};
+
+		this.browse = () =>
+		{
+			const input = document.createElement('input');
+
+			input.type = 'file';
+			input.accept = 'image/*';
+			input.multiple = true;
+
+			input.onchange = () =>
+			{
+				this.upload(input.files);
+			};
+
+			input.click();
+		};
+
+		this.drop = (event) =>
+		{
+			event.preventDefault();
+			this.dragging = false;
+			this.upload(event.dataTransfer.files);
+		};
+
+		this.over = (event) =>
+		{
+			event.preventDefault();
+			this.dragging = true;
+		};
+
+		this.leave = () =>
+		{
+			this.dragging = false;
+		};
+
+		this.size = (bytes) =>
+		{
+			if(bytes < 1024)
+			{
+				return bytes + ' B';
+			}
+
+			if(bytes < 1048576)
+			{
+				return (bytes / 1024).toFixed(1) + ' KB';
+			}
+
+			return (bytes / 1048576).toFixed(1) + ' MB';
+		};
+
+		this.close = () =>
+		{
+			$ot.modal.close();
+		};
+
+		return `
+			<div class="holder">
+				<div class="header">
+					<div class="left">
+						<i class="icon">image</i>
+						<span class="title">Images</span>
+						<span class="count">{{ items.length }}</span>
+					</div>
+					<div class="right">
+						<e-form-button text="Upload" icon="upload" :variant="['bg-1', 'border', 'size-s']" :_click="browse" :loading="uploading"></e-form-button>
+						<button class="close" ot-click="close"><i>close</i></button>
+					</div>
+				</div>
+				<div :class="'body' + (dragging ? ' dragging' : '')" ot-drop="drop" ot-dragover="over" ot-dragleave="leave">
+					<e-status-loading ot-if="loading" :variant="['brand']"></e-status-loading>
+					<div ot-if="!loading && !items.length && !uploading" class="empty">
+						<e-status-empty icon="image" title="No images" description="Upload images by dragging them here or clicking upload." action="Upload" :_click="browse"></e-status-empty>
+					</div>
+					<div ot-if="items.length" class="grid">
+						<div ot-for="item in items" class="card" ot-click="() => pick(item)">
+							<div class="preview">
+								<img :src="item.url" :alt="item.alt || item.filename" loading="lazy" />
+							</div>
+							<div class="info">
+								<span class="name">{{ item.filename }}</span>
+								<span class="meta">{{ size(item.size) }}</span>
+							</div>
+							<button class="delete" ot-click="(e) => remove(e, item)"><i>delete</i></button>
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+});