@onetype/framework 2.0.42 → 2.0.43

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>
+		`;
+	}
+});

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

@@ -0,0 +1,154 @@
+/* Holder */
+
+.e-4b08d9cc > .holder
+{
+	display: flex;
+	width: 100%;
+	border-radius: var(--ot-radius-m);
+	overflow: hidden;
+	cursor: pointer;
+	transition: border-color 0.15s;
+}
+
+.e-4b08d9cc > .holder.border
+{
+	border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-4b08d9cc > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-4b08d9cc > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-4b08d9cc > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-4b08d9cc > .holder.bg-4 { background: var(--ot-bg-4); }
+
+/* ─── Sizes ─── */
+
+.e-4b08d9cc > .holder.size-s { min-height: var(--ot-height-s); }
+.e-4b08d9cc > .holder.size-m { min-height: var(--ot-height-m); }
+.e-4b08d9cc > .holder.size-l { min-height: var(--ot-height-l); }
+
+.e-4b08d9cc > .holder.size-s .empty { padding: 4px 8px; gap: 6px; }
+.e-4b08d9cc > .holder.size-m .empty { padding: 6px 10px; gap: 8px; }
+.e-4b08d9cc > .holder.size-l .empty { padding: 8px 12px; gap: 8px; }
+
+/* ─── Empty ─── */
+
+.e-4b08d9cc .empty
+{
+	display: flex;
+	align-items: center;
+	width: 100%;
+	cursor: pointer;
+}
+
+.e-4b08d9cc .empty > .icon
+{
+	font-size: 16px;
+	color: var(--ot-text-3);
+}
+
+.e-4b08d9cc .empty > .text
+{
+	font-size: 12px;
+	color: var(--ot-text-3);
+}
+
+.e-4b08d9cc > .holder:hover .empty > .text,
+.e-4b08d9cc > .holder:hover .empty > .icon
+{
+	color: var(--ot-text-2);
+}
+
+/* ─── Preview ─── */
+
+.e-4b08d9cc .preview
+{
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	width: 100%;
+	padding: 4px;
+	flex-wrap: wrap;
+}
+
+/* ─── Thumb ─── */
+
+.e-4b08d9cc .thumb
+{
+	position: relative;
+	width: 32px;
+	height: 32px;
+	border-radius: var(--ot-radius-s);
+	overflow: hidden;
+	flex-shrink: 0;
+}
+
+.e-4b08d9cc > .holder.size-s .thumb { width: 22px; height: 22px; }
+.e-4b08d9cc > .holder.size-m .thumb { width: 28px; height: 28px; }
+.e-4b08d9cc > .holder.size-l .thumb { width: 36px; height: 36px; }
+
+.e-4b08d9cc .thumb > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+/* ─── Remove ─── */
+
+.e-4b08d9cc .remove
+{
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	border: none;
+	background: rgba(0, 0, 0, 0.6);
+	color: var(--ot-text-1);
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity 0.12s;
+}
+
+.e-4b08d9cc .thumb:hover .remove
+{
+	opacity: 1;
+}
+
+.e-4b08d9cc .remove > i
+{
+	font-size: 13px;
+}
+
+/* ─── Clear ─── */
+
+.e-4b08d9cc .clear
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: transparent;
+	color: var(--ot-text-3);
+	border-radius: var(--ot-radius-s);
+	cursor: pointer;
+	margin-left: auto;
+	flex-shrink: 0;
+	transition: color 0.12s, background 0.12s;
+}
+
+.e-4b08d9cc .clear:hover
+{
+	color: var(--ot-red);
+	background: var(--ot-red-opacity);
+}
+
+.e-4b08d9cc .clear > i
+{
+	font-size: 15px;
+}

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

@@ -0,0 +1,147 @@
+elements.ItemAdd({
+	id: 'cloudflare-input',
+	icon: 'image',
+	name: 'Image Input',
+	description: 'Image picker input that opens browse modal.',
+	category: 'Form',
+	author: 'OneType',
+	config: {
+		value: {
+			type: 'string',
+			value: ''
+		},
+		name: {
+			type: 'string',
+			value: ''
+		},
+		site: {
+			type: 'object',
+			value: null
+		},
+		multiple: {
+			type: 'boolean',
+			value: false
+		},
+		placeholder: {
+			type: 'string',
+			value: 'Select image...'
+		},
+		disabled: {
+			type: 'boolean',
+			value: false
+		},
+		variant: {
+			type: 'array',
+			value: ['bg-2', 'border', 'size-m'],
+			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+		},
+		_change: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		const self = this;
+
+		this.images = () =>
+		{
+			if(!this.value)
+			{
+				return [];
+			}
+
+			return this.multiple ? this.value.split(',').filter(Boolean) : [this.value];
+		};
+
+		this.browse = () =>
+		{
+			if(this.disabled)
+			{
+				return;
+			}
+
+			const site = self.site || $ot.get('site');
+
+			$ot.modal(function()
+			{
+				this.site = site;
+				this.pick = (item) =>
+				{
+					$ot.modal.close();
+					callback(item.url);
+				};
+
+				return `<e-cloudflare-images :site="site" :_pick="pick"></e-cloudflare-images>`;
+			});
+		};
+
+		const callback = (url) =>
+		{
+			if(this.multiple)
+			{
+				const current = this.value ? this.value.split(',').filter(Boolean) : [];
+
+				current.push(url);
+				this.value = current.join(',');
+			}
+			else
+			{
+				this.value = url;
+			}
+
+			if(this._change)
+			{
+				this._change({ value: this.value });
+			}
+		};
+
+		this.remove = (event, url) =>
+		{
+			event.stopPropagation();
+
+			if(this.multiple)
+			{
+				const current = this.value.split(',').filter(v => v !== url);
+
+				this.value = current.join(',');
+			}
+			else
+			{
+				this.value = '';
+			}
+
+			if(this._change)
+			{
+				this._change({ value: this.value });
+			}
+		};
+
+		this.clear = (event) =>
+		{
+			event.stopPropagation();
+			this.value = '';
+
+			if(this._change)
+			{
+				this._change({ value: this.value });
+			}
+		};
+
+		return `
+			<div :class="'holder ' + variant.join(' ')">
+				<input type="hidden" :name="name" :value="value" />
+				<div ot-if="!images().length" class="empty" ot-click="browse">
+					<i class="icon">image</i>
+					<span class="text">{{ placeholder }}</span>
+				</div>
+				<div ot-if="images().length" class="preview" ot-click="browse">
+					<div ot-for="url in images()" class="thumb">
+						<img :src="url" loading="lazy" />
+						<button class="remove" ot-click="(e) => remove(e, url)"><i>close</i></button>
+					</div>
+					<button ot-if="value" class="clear" ot-click="clear"><i>delete</i></button>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/services/cloudflare/images/sql.txt

@@ -0,0 +1,43 @@
+CREATE SEQUENCE IF NOT EXISTS cloudflare_images_id_seq;
+
+CREATE TABLE IF NOT EXISTS public.cloudflare_images
+(
+    id bigint NOT NULL DEFAULT nextval('cloudflare_images_id_seq'::regclass),
+    team_id bigint NOT NULL,
+    site_id bigint NOT NULL,
+    cloudflare_id character varying(255) COLLATE pg_catalog."default" NOT NULL,
+    filename character varying(255) COLLATE pg_catalog."default" NOT NULL,
+    url text COLLATE pg_catalog."default",
+    variants jsonb NOT NULL DEFAULT '{}'::jsonb,
+    alt character varying(255) COLLATE pg_catalog."default",
+    size integer,
+    type character varying(50) COLLATE pg_catalog."default",
+    width integer,
+    height integer,
+    updated_at timestamp with time zone NOT NULL DEFAULT now(),
+    created_at timestamp with time zone NOT NULL DEFAULT now(),
+    CONSTRAINT cloudflare_images_pkey PRIMARY KEY (id)
+)
+
+TABLESPACE pg_default;
+
+ALTER TABLE IF EXISTS public.cloudflare_images
+    OWNER to onetype;
+
+CREATE INDEX IF NOT EXISTS idx_cloudflare_images_team_id
+    ON public.cloudflare_images USING btree
+    (team_id ASC NULLS LAST)
+    WITH (fillfactor=100, deduplicate_items=True)
+    TABLESPACE pg_default;
+
+CREATE INDEX IF NOT EXISTS idx_cloudflare_images_site_id
+    ON public.cloudflare_images USING btree
+    (site_id ASC NULLS LAST)
+    WITH (fillfactor=100, deduplicate_items=True)
+    TABLESPACE pg_default;
+
+CREATE INDEX IF NOT EXISTS idx_cloudflare_images_cloudflare_id
+    ON public.cloudflare_images USING btree
+    (cloudflare_id ASC NULLS LAST)
+    WITH (fillfactor=100, deduplicate_items=True)
+    TABLESPACE pg_default;

package/lib/events.js

@@ -1,16 +1,16 @@
 const handleReady = () =>
 {
-    window.onetype.Emit('document.ready');
+    window.onetype.Emit('@document.ready');
 };
 
 const handleLoad = () =>
 {
-    window.onetype.Emit('document.load');
+    window.onetype.Emit('@document.load');
 };
 
 const handleResize = () =>
 {
-    window.onetype.Emit('window.resize',
+    window.onetype.Emit('@window.resize',
     {
         width: window.innerWidth,
         height: window.innerHeight
@@ -19,7 +19,7 @@ const handleResize = () =>
 
 const handleScroll = () =>
 {
-    window.onetype.Emit('window.scroll',
+    window.onetype.Emit('@window.scroll',
     {
         x: window.scrollX,
         y: window.scrollY
@@ -28,7 +28,7 @@ const handleScroll = () =>
 
 const handleVisibility = () =>
 {
-    window.onetype.Emit('document.visibility',
+    window.onetype.Emit('@document.visibility',
     {
         hidden: document.hidden,
         state: document.visibilityState
@@ -37,22 +37,22 @@ const handleVisibility = () =>
 
 const handleBeforeUnload = () =>
 {
-    window.onetype.Emit('window.beforeunload');
+    window.onetype.Emit('@window.beforeunload');
 };
 
 const handleFocus = () =>
 {
-    window.onetype.Emit('window.focus');
+    window.onetype.Emit('@window.focus');
 };
 
 const handleBlur = () =>
 {
-    window.onetype.Emit('window.blur');
+    window.onetype.Emit('@window.blur');
 };
 
 const handleOrientation = () =>
 {
-    window.onetype.Emit('window.orientation',
+    window.onetype.Emit('@window.orientation',
     {
         angle: screen.orientation?.angle || window.orientation,
         type: screen.orientation?.type || 'unknown'
@@ -61,17 +61,17 @@ const handleOrientation = () =>
 
 const handleOnline = () =>
 {
-    window.onetype.Emit('navigator.online');
+    window.onetype.Emit('@navigator.online');
 };
 
 const handleOffline = () =>
 {
-    window.onetype.Emit('navigator.offline');
+    window.onetype.Emit('@navigator.offline');
 };
 
 const handlePopstate = (event) =>
 {
-    window.onetype.Emit('history.popstate',
+    window.onetype.Emit('@history.popstate',
     {
         state: event.state,
         pathname: window.location.pathname