@onetype/framework 2.0.53 → 2.0.54

package/addons/render/elements/front/items/self/form/editor-markdown/editor-markdown.js

@@ -1,191 +0,0 @@
-onetype.AddonReady('elements', (elements) =>
-{
-	elements.ItemAdd({
-		id: 'form-editor-markdown',
-		icon: 'edit_note',
-		name: 'Markdown Editor',
-		description: 'WYSIWYG markdown editor with toolbar, cover image, title, and body.',
-		category: 'Form',
-		author: 'OneType',
-		config: {
-			value: {
-				type: 'string',
-				value: ''
-			},
-			title: {
-				type: 'string',
-				value: ''
-			},
-			subtitle: {
-				type: 'string',
-				value: ''
-			},
-			cover: {
-				type: 'string',
-				value: ''
-			},
-			placeholder: {
-				type: 'string',
-				value: 'Start writing…'
-			},
-			name: {
-				type: 'string',
-				value: ''
-			},
-			variant: {
-				type: 'array',
-				value: [],
-				options: ['compact', 'no-toolbar', 'no-cover', 'no-title']
-			},
-			_change: {
-				type: 'function'
-			}
-		},
-		render: function()
-		{
-			this.tools = [
-				{ cmd: 'bold', icon: 'format_bold', label: 'Bold' },
-				{ cmd: 'italic', icon: 'format_italic', label: 'Italic' },
-				{ cmd: 'underline', icon: 'format_underlined', label: 'Underline' },
-				{ sep: true },
-				{ cmd: 'heading1', icon: 'title', label: 'Heading 1' },
-				{ cmd: 'heading2', icon: 'text_fields', label: 'Heading 2' },
-				{ cmd: 'blockquote', icon: 'format_quote', label: 'Quote' },
-				{ sep: true },
-				{ cmd: 'insertUnorderedList', icon: 'format_list_bulleted', label: 'Bullet list' },
-				{ cmd: 'insertOrderedList', icon: 'format_list_numbered', label: 'Numbered list' },
-				{ sep: true },
-				{ cmd: 'link', icon: 'link', label: 'Link' },
-				{ cmd: 'image', icon: 'image', label: 'Image' },
-				{ sep: true },
-				{ cmd: 'undo', icon: 'undo', label: 'Undo' },
-				{ cmd: 'redo', icon: 'redo', label: 'Redo' }
-			];
-
-			this.exec = (cmd) =>
-			{
-				if(cmd === 'heading1')
-				{
-					document.execCommand('formatBlock', false, 'h2');
-				}
-				else if(cmd === 'heading2')
-				{
-					document.execCommand('formatBlock', false, 'h3');
-				}
-				else if(cmd === 'blockquote')
-				{
-					document.execCommand('formatBlock', false, 'blockquote');
-				}
-				else if(cmd === 'link')
-				{
-					const url = prompt('Enter URL:');
-					if(url) document.execCommand('createLink', false, url);
-				}
-				else if(cmd === 'image')
-				{
-					const url = prompt('Enter image URL:');
-					if(url) document.execCommand('insertImage', false, url);
-				}
-				else
-				{
-					document.execCommand(cmd, false, null);
-				}
-			};
-
-			this.changeCover = () =>
-			{
-				const url = prompt('Enter cover image URL:', this.cover);
-				if(url !== null) this.cover = url;
-			};
-
-			this.hasCover = !this.variant.includes('no-cover');
-			this.hasTitle = !this.variant.includes('no-title');
-			this.hasToolbar = !this.variant.includes('no-toolbar');
-
-			this.OnReady(() =>
-			{
-				const body = this.Element.querySelector('.body');
-
-				if(body && this.value)
-				{
-					body.innerHTML = onetype.Markdown ? onetype.Markdown(this.value) : this.value;
-				}
-
-				const hidden = this.Element.querySelector('input.hidden');
-
-				if(body)
-				{
-					body.addEventListener('input', () =>
-					{
-						if(hidden) hidden.value = body.innerHTML;
-
-						if(this._change)
-						{
-							this._change({
-								value: body.innerHTML,
-								title: this.title,
-								subtitle: this.subtitle,
-								cover: this.cover
-							});
-						}
-					});
-				}
-
-				this.Element.querySelectorAll('.toolbar .btn').forEach(btn =>
-				{
-					btn.addEventListener('mousedown', (e) =>
-					{
-						e.preventDefault();
-						const cmd = btn.getAttribute('data-cmd');
-						if(cmd) this.exec(cmd);
-					});
-				});
-			});
-
-			this.changeTitle = ({ value }) =>
-			{
-				this.title = value;
-			};
-
-			this.changeSubtitle = ({ value }) =>
-			{
-				this.subtitle = value;
-			};
-
-			return /* html */ `
-				<div :class="'holder ' + variant.join(' ')">
-					<input ot-if="name" class="hidden" type="hidden" :name="name" :value="value" />
-					<div ot-if="hasToolbar" class="toolbar">
-						<div ot-for="tool in tools">
-							<div ot-if="tool.sep" class="sep"></div>
-							<button ot-if="!tool.sep" class="btn" :data-cmd="tool.cmd">
-								<i>{{ tool.icon }}</i>
-							</button>
-						</div>
-					</div>
-
-					<div ot-if="hasCover && cover" class="cover" :style="'background-image: url(' + cover + ')'">
-						<button class="change" ot-click="changeCover">
-							<i>photo_camera</i>
-							<span>Change cover</span>
-						</button>
-					</div>
-
-					<div ot-if="hasCover && !cover" class="cover-empty" ot-click="changeCover">
-						<i>add_photo_alternate</i>
-						<span>Add cover image</span>
-					</div>
-
-					<div class="content">
-						<div ot-if="hasTitle" class="title-area">
-							<input class="title-input" type="text" :value="title" :placeholder="'Title'" ot-input="changeTitle" />
-							<input class="subtitle-input" type="text" :value="subtitle" :placeholder="'Subtitle (optional)'" ot-input="changeSubtitle" />
-						</div>
-
-						<div class="body" contenteditable="true" :data-placeholder="placeholder"></div>
-					</div>
-				</div>
-			`;
-		}
-	});
-});

package/addons/render/elements/front/items/self/global/faq/faq.css

@@ -1,98 +0,0 @@
-/* Root */
-
-.e-e204b7e
-{
-	display: flex;
-	width: 100%;
-}
-
-/* Holder */
-
-.e-e204b7e > .holder
-{
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	border: 1px solid transparent;
-	border-radius: var(--ot-radius-m);
-	overflow: hidden;
-}
-
-/* Item */
-
-.e-e204b7e > .holder > .item
-{
-	display: flex;
-	flex-direction: column;
-	cursor: pointer;
-	border-bottom: 1px solid transparent;
-	transition: background 0.15s ease;
-}
-
-.e-e204b7e > .holder > .item:last-child
-{
-	border-bottom: none;
-}
-
-/* Question */
-
-.e-e204b7e > .holder > .item > .question
-{
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--ot-spacing-s);
-	padding: var(--ot-spacing-m);
-}
-
-.e-e204b7e > .holder > .item > .question > .text
-{
-	font-size: var(--ot-size-m);
-	font-weight: 600;
-	color: var(--ot-text-1);
-}
-
-.e-e204b7e > .holder > .item > .question > .icon
-{
-	font-size: var(--ot-size-l);
-	color: var(--ot-text-2);
-	flex-shrink: 0;
-}
-
-/* Answer */
-
-.e-e204b7e > .holder > .item > .answer
-{
-	padding: 0 var(--ot-spacing-m) var(--ot-spacing-m);
-	font-size: var(--ot-size-m);
-	color: var(--ot-text-2);
-	line-height: 1.6;
-}
-
-/* Background variants */
-
-.e-e204b7e > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
-.e-e204b7e > .holder.bg-1 > .item { border-bottom-color: var(--ot-bg-1-border); }
-.e-e204b7e > .holder.bg-1 > .item:hover, .e-e204b7e > .holder.bg-1 > .item.active { background: var(--ot-bg-1-hover); }
-.e-e204b7e > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
-.e-e204b7e > .holder.bg-2 > .item { border-bottom-color: var(--ot-bg-2-border); }
-.e-e204b7e > .holder.bg-2 > .item:hover, .e-e204b7e > .holder.bg-2 > .item.active { background: var(--ot-bg-2-hover); }
-.e-e204b7e > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
-.e-e204b7e > .holder.bg-3 > .item { border-bottom-color: var(--ot-bg-3-border); }
-.e-e204b7e > .holder.bg-3 > .item:hover, .e-e204b7e > .holder.bg-3 > .item.active { background: var(--ot-bg-3-hover); }
-.e-e204b7e > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
-.e-e204b7e > .holder.bg-4 > .item { border-bottom-color: var(--ot-bg-4-border); }
-.e-e204b7e > .holder.bg-4 > .item:hover, .e-e204b7e > .holder.bg-4 > .item.active { background: var(--ot-bg-4-hover); }
-
-/* Size variants */
-
-.e-e204b7e > .holder.size-s > .item > .question { padding: var(--ot-spacing-s); }
-.e-e204b7e > .holder.size-s > .item > .answer { padding: 0 var(--ot-spacing-s) var(--ot-spacing-s); font-size: var(--ot-size-s); }
-.e-e204b7e > .holder.size-m > .item > .question { padding: var(--ot-spacing-m); }
-.e-e204b7e > .holder.size-m > .item > .answer { padding: 0 var(--ot-spacing-m) var(--ot-spacing-m); }
-.e-e204b7e > .holder.size-l > .item > .question { padding: var(--ot-spacing-l); }
-.e-e204b7e > .holder.size-l > .item > .answer { padding: 0 var(--ot-spacing-l) var(--ot-spacing-l); }
-
-/* Border variant */
-
-.e-e204b7e > .holder.border { border: 1px solid var(--ot-bg-2-border); }

package/addons/render/elements/front/items/self/global/faq/faq.js

@@ -1,56 +0,0 @@
-onetype.AddonReady('elements', (elements) =>
-{
-	elements.ItemAdd({
-		id: 'global-faq',
-		icon: 'help',
-		name: 'FAQ',
-		description: 'Expandable FAQ accordion.',
-		category: 'Global',
-		author: 'OneType',
-		config: {
-			items: {
-				type: 'array',
-				value: [],
-				each: {
-					type: 'object',
-					config: {
-						question: { type: 'string', value: '' },
-						answer: { type: 'string', value: '' }
-					}
-				}
-			},
-			variant: {
-				type: 'array',
-				value: ['bg-2'],
-				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
-			}
-		},
-		render: function()
-		{
-			this.open = -1;
-
-			this.toggle = (index) =>
-			{
-				this.open = this.open === index ? -1 : index;
-				this.Update();
-			};
-
-			this.isOpen = (index) =>
-			{
-				return this.open === index;
-			};
-
-			return `
-				<div :class="'holder ' + variant.join(' ')">
-					<div ot-for="item, index in items" :class="'item' + (isOpen(index) ? ' active' : '')">
-						<div class="question" ot-click="toggle(index)">
-							<span class="text">{{ item.question }}</span>
-							<i class="icon">{{ isOpen(index) ? 'remove' : 'add' }}</i>
-						</div>
-						<div ot-if="isOpen(index)" class="answer">{{ item.answer }}</div>
-					</div>
-				</div>
-			`;
-		}
-	});
-});