@onetype/framework 2.0.53 → 2.0.55

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

@@ -0,0 +1,291 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'global-gallery',
+		icon: 'photo_library',
+		name: 'Gallery',
+		description: 'Premium image gallery with bento, grid and carousel layouts plus built-in lightbox (no transform dependency).',
+		category: 'Global',
+		author: 'OneType',
+		config: {
+			images: {
+				type: 'array',
+				value: [],
+				each: { type: 'string|object' }
+			},
+			layout: {
+				type: 'string',
+				value: 'bento',
+				options: ['bento', 'grid', 'carousel']
+			},
+			columns: {
+				type: 'number',
+				value: 4
+			},
+			ratio: {
+				type: 'string',
+				value: '16/9'
+			},
+			gap: {
+				type: 'number',
+				value: 4
+			},
+			maxVisible: {
+				type: 'number',
+				value: 5
+			},
+			lightbox: {
+				type: 'boolean',
+				value: true
+			},
+			showAllButton: {
+				type: 'boolean',
+				value: true
+			},
+			variant: {
+				type: 'array',
+				value: ['rounded'],
+				options: ['rounded', 'compact', 'tall', 'size-s', 'size-m', 'size-l']
+			}
+		},
+		render: function()
+		{
+			// Normalize images — accept string URLs or objects
+
+			this.normalized = this.images.map((image, index) =>
+			{
+				if(typeof image === 'string')
+				{
+					return { src: image, alt: '', caption: '', thumb: image, index };
+				}
+
+				return {
+					src: image.src || '',
+					alt: image.alt || '',
+					caption: image.caption || '',
+					thumb: image.thumb || image.src || '',
+					index
+				};
+			});
+
+			this.total = this.normalized.length;
+
+			// Bento layout data
+
+			this.hero = this.normalized[0] || null;
+			this.thumbs = this.normalized.slice(1, this.maxVisible);
+			this.remaining = Math.max(0, this.total - this.maxVisible);
+			this.hasThumbs = this.thumbs.length > 0;
+			this.hasHero = !!this.hero;
+
+			// Grid layout — all images
+
+			this.gridImages = this.normalized;
+
+			// Carousel state
+
+			this.activeIndex = 0;
+			this.activeImage = this.normalized[0] || null;
+
+			this.isBento = this.layout === 'bento';
+			this.isGrid = this.layout === 'grid';
+			this.isCarousel = this.layout === 'carousel';
+
+			// Style hooks
+
+			this.gridStyle = `grid-template-columns: repeat(${this.columns}, minmax(0, 1fr)); gap: ${this.gap}px;`;
+			this.bentoStyle = `gap: ${this.gap}px;`;
+			this.carouselRatio = this.ratio;
+			this.gridRatio = this.ratio;
+
+			// Carousel actions
+
+			this.selectCarousel = (index) =>
+			{
+				if(index < 0 || index >= this.total)
+				{
+					return;
+				}
+
+				this.activeIndex = index;
+				this.activeImage = this.normalized[index];
+			};
+
+			this.next = () =>
+			{
+				this.selectCarousel((this.activeIndex + 1) % this.total);
+			};
+
+			this.prev = () =>
+			{
+				this.selectCarousel((this.activeIndex - 1 + this.total) % this.total);
+			};
+
+			// Lightbox open — builds a self-contained modal render
+
+			this.openLightbox = (startIndex) =>
+			{
+				if(!this.lightbox || !this.total)
+				{
+					return;
+				}
+
+				const images = this.normalized;
+				const total = this.total;
+
+				popup.Fn('modal', function()
+				{
+					this.images = images;
+					this.total = total;
+					this.index = startIndex || 0;
+					this.current = images[this.index];
+
+					this.OnReady(() =>
+					{
+						this.keydown = (event) =>
+						{
+							if(event.key === 'ArrowRight')
+							{
+								this.next();
+							}
+							else if(event.key === 'ArrowLeft')
+							{
+								this.prev();
+							}
+						};
+
+						document.addEventListener('keydown', this.keydown);
+					});
+
+					this.OnDestroy(() =>
+					{
+						if(this.keydown)
+						{
+							document.removeEventListener('keydown', this.keydown);
+						}
+					});
+
+					this.go = (index) =>
+					{
+						if(index < 0) index = this.total - 1;
+						if(index >= this.total) index = 0;
+						this.index = index;
+						this.current = this.images[index];
+					};
+
+					this.next = () => this.go(this.index + 1);
+					this.prev = () => this.go(this.index - 1);
+
+					this.close = () => $ot.close();
+
+					return /* html */ `
+						<div class="lightbox-holder">
+							<button class="lightbox-close" type="button" ot-click="close">
+								<i>close</i>
+							</button>
+
+							<div class="lightbox-counter">{{ (index + 1) + ' / ' + total }}</div>
+
+							<button ot-if="total > 1" class="lightbox-nav lightbox-prev" type="button" ot-click="prev">
+								<i>chevron_left</i>
+							</button>
+
+							<div class="lightbox-stage">
+								<img :src="current.src" :alt="current.alt || ''" />
+								<div ot-if="current.caption" class="lightbox-caption">{{ current.caption }}</div>
+							</div>
+
+							<button ot-if="total > 1" class="lightbox-nav lightbox-next" type="button" ot-click="next">
+								<i>chevron_right</i>
+							</button>
+
+							<div ot-if="total > 1" class="lightbox-thumbs">
+								<button
+									ot-for="image, i in images"
+									type="button"
+									:class="'lightbox-thumb' + (i === index ? ' active' : '')"
+									ot-click="() => go(i)"
+								>
+									<img :src="image.thumb" alt="" />
+								</button>
+							</div>
+						</div>
+					`;
+				}, { id: 'gallery-lightbox', backdrop: 0.85 });
+			};
+
+			this.openLightboxAt = (image) =>
+			{
+				this.openLightbox(image.index);
+			};
+
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ') + ' layout-' + layout">
+					<div ot-if="isBento && hasHero" class="bento" :style="bentoStyle">
+						<div class="bento-main" ot-click="() => openLightboxAt(hero)">
+							<img :src="hero.src" :alt="hero.alt || ''" />
+						</div>
+
+						<div ot-if="hasThumbs" class="bento-side" :style="'gap: ' + gap + 'px'">
+							<div
+								ot-for="thumb in thumbs"
+								class="bento-thumb"
+								ot-click="() => openLightboxAt(thumb)"
+							>
+								<img :src="thumb.src" :alt="thumb.alt || ''" />
+							</div>
+						</div>
+
+						<button
+							ot-if="showAllButton && remaining > 0"
+							type="button"
+							class="show-all"
+							ot-click="() => openLightbox(0)"
+						>
+							<i>grid_view</i>
+							<span>Show all {{ total }} photos</span>
+						</button>
+					</div>
+
+					<div ot-if="isGrid" class="grid" :style="gridStyle">
+						<div
+							ot-for="image in gridImages"
+							class="grid-item"
+							:style="'aspect-ratio: ' + gridRatio"
+							ot-click="() => openLightboxAt(image)"
+						>
+							<img :src="image.src" :alt="image.alt || ''" />
+						</div>
+					</div>
+
+					<div ot-if="isCarousel && hasHero" class="carousel">
+						<div class="carousel-stage" :style="'aspect-ratio: ' + carouselRatio">
+							<img :src="activeImage.src" :alt="activeImage.alt || ''" ot-click="() => openLightboxAt(activeImage)" />
+
+							<button ot-if="total > 1" class="carousel-nav carousel-prev" type="button" ot-click="prev">
+								<i>chevron_left</i>
+							</button>
+
+							<button ot-if="total > 1" class="carousel-nav carousel-next" type="button" ot-click="next">
+								<i>chevron_right</i>
+							</button>
+
+							<div ot-if="total > 1" class="carousel-counter">{{ (activeIndex + 1) + ' / ' + total }}</div>
+						</div>
+
+						<div ot-if="total > 1" class="carousel-thumbs">
+							<button
+								ot-for="image, i in normalized"
+								type="button"
+								:class="'carousel-thumb' + (i === activeIndex ? ' active' : '')"
+								ot-click="() => selectCarousel(i)"
+							>
+								<img :src="image.thumb" :alt="image.alt || ''" />
+							</button>
+						</div>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -1,129 +1,231 @@
+/* Root */
+
 .e-49fb116e
 {
 	display: flex;
 	width: 100%;
 }
 
+/* Holder */
+
 .e-49fb116e > .holder
 {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-l);
 	width: 100%;
+}
+
+.e-49fb116e > .holder.border-bottom
+{
+	padding-bottom: var(--ot-spacing-m);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+/* Top row */
+
+.e-49fb116e > .holder > .top
+{
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
 	gap: var(--ot-spacing-m);
-	border-bottom: 1px solid var(--ot-bg-2-border);
-	padding-bottom: var(--ot-spacing-m);
 }
 
-.e-49fb116e > .holder > .text
+/* Icon */
+
+.e-49fb116e > .holder > .top > .icon
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 48px;
+	height: 48px;
+	border-radius: var(--ot-radius-m);
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+	flex-shrink: 0;
+}
+
+.e-49fb116e > .holder > .top > .icon > i
+{
+	font-size: 26px;
+}
+
+/* Text block */
+
+.e-49fb116e > .holder > .top > .text
 {
 	display: flex;
 	flex-direction: column;
 	gap: var(--ot-spacing-x);
+	min-width: 0;
+	flex: 1;
 }
 
-.e-49fb116e > .holder > .text > .icon
+/* Eyebrow */
+
+.e-49fb116e > .holder > .top > .text > .eyebrow
 {
-	font-size: 36px;
-	color: var(--ot-text-2);
+	font-size: 11px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--ot-brand);
+	font-family: var(--ot-font-primary);
 }
 
-.e-49fb116e > .holder > .text > .title
+/* Title */
+
+.e-49fb116e > .holder > .top > .text > .title
 {
-	font-size: 18px;
-	font-weight: 600;
+	margin: 0;
+	font-family: var(--ot-font-secondary);
+	font-weight: 500;
+	letter-spacing: -0.022em;
 	color: var(--ot-text-1);
+	font-variation-settings: 'opsz' 144;
+	line-height: 1.05;
 }
 
-.e-49fb116e > .holder > .text > .description
+.e-49fb116e > .holder > .top > .text > .title em
 {
-	font-size: var(--ot-size-m);
+	font-style: italic;
+	color: var(--ot-brand);
+	font-weight: 500;
+}
+
+/* Description */
+
+.e-49fb116e > .holder > .top > .text > .description
+{
+	margin: 0;
+	font-size: 14px;
+	line-height: 1.55;
 	color: var(--ot-text-2);
+	max-width: 560px;
+	font-family: var(--ot-font-primary);
 }
 
-.e-49fb116e > .holder > .right
+/* Right slot */
+
+.e-49fb116e > .holder > .top > .right
 {
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
 	flex-shrink: 0;
 }
 
-.e-49fb116e > .holder > .right:empty
+.e-49fb116e > .holder > .top > .right:empty
 {
 	display: none;
 }
 
-/* Alignment */
+/* Bottom slot */
 
-.e-49fb116e > .holder.center
+.e-49fb116e > .holder > .bottom
 {
-	justify-content: center;
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	flex-wrap: wrap;
 }
 
-.e-49fb116e > .holder.center > .text
+/* ===== ALIGNMENT ===== */
+
+.e-49fb116e > .holder.center > .top
 {
+	flex-direction: column;
 	align-items: center;
 	text-align: center;
 }
 
-.e-49fb116e > .holder.right > .text
+.e-49fb116e > .holder.center > .top > .text
 {
-	align-items: flex-end;
+	align-items: center;
+	flex: 0 1 auto;
+}
+
+.e-49fb116e > .holder.center > .top > .text > .description
+{
+	max-width: 540px;
+}
+
+.e-49fb116e > .holder.center > .bottom
+{
+	justify-content: center;
+}
+
+.e-49fb116e > .holder.right > .top
+{
+	flex-direction: row-reverse;
 	text-align: right;
 }
 
-/* Variants */
+.e-49fb116e > .holder.right > .top > .text
+{
+	align-items: flex-end;
+}
+
+.e-49fb116e > .holder.right > .bottom
+{
+	justify-content: flex-end;
+}
 
-.e-49fb116e > .holder.clean
+/* ===== SIZES ===== */
+
+.e-49fb116e > .holder.size-s > .top > .text > .title
 {
-	border-bottom: none;
-	padding-bottom: 0;
+	font-size: 22px;
+	line-height: 1.15;
 }
 
-.e-49fb116e > .holder.page
+.e-49fb116e > .holder.size-s > .top > .text > .description
 {
-	border-bottom: none;
-	padding-bottom: 0;
+	font-size: 13px;
 }
 
-.e-49fb116e > .holder.page > .text > .title
+.e-49fb116e > .holder.size-s > .top > .icon
 {
-	font-size: 36px;
-	font-weight: 800;
+	width: 36px;
+	height: 36px;
 }
 
-/* Sizes */
+.e-49fb116e > .holder.size-s > .top > .icon > i
+{
+	font-size: 20px;
+}
 
-.e-49fb116e > .holder.size-s > .text > .title
+.e-49fb116e > .holder.size-m > .top > .text > .title
 {
-	font-size: 16px;
+	font-size: 32px;
+	line-height: 1.05;
 }
 
-.e-49fb116e > .holder.size-s > .text > .description
+.e-49fb116e > .holder.size-m > .top > .text > .description
 {
-	font-size: var(--ot-size-s);
+	font-size: 14px;
 }
 
-.e-49fb116e > .holder.size-m > .text > .title
+.e-49fb116e > .holder.size-l > .top > .text > .title
 {
-	font-size: 25px;
-	font-weight: 700;
+	font-size: 48px;
+	line-height: 1;
 }
 
-.e-49fb116e > .holder.size-m > .text > .description
+.e-49fb116e > .holder.size-l > .top > .text > .description
 {
-	font-size: var(--ot-size-m);
-	line-height: 1.6;
-	max-width: 500px;
+	font-size: 16px;
+	max-width: 640px;
 }
 
-.e-49fb116e > .holder.size-l > .text > .title
+.e-49fb116e > .holder.size-l > .top > .icon
 {
-	font-size: 36px;
-	font-weight: 800;
+	width: 60px;
+	height: 60px;
 }
 
-.e-49fb116e > .holder.size-l > .text > .description
+.e-49fb116e > .holder.size-l > .top > .icon > i
 {
-	font-size: var(--ot-size-l);
-	line-height: 1.6;
-	max-width: 600px;
+	font-size: 32px;
 }

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

@@ -4,40 +4,55 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'global-heading',
 		icon: 'title',
 		name: 'Heading',
-		description: 'Page heading with title and description.',
+		description: 'Page or section heading with eyebrow, icon, serif title, description and right/bottom slots.',
 		category: 'Global',
 		author: 'OneType',
 		config: {
+			eyebrow: {
+				type: 'string'
+			},
 			icon: {
-				type: 'string',
-				value: ''
+				type: 'string'
 			},
 			title: {
-				type: 'string',
-				value: 'Title'
+				type: 'string'
 			},
 			description: {
+				type: 'string'
+			},
+			element: {
 				type: 'string',
-				value: ''
+				value: 'h2',
+				options: ['h1', 'h2']
 			},
 			variant: {
 				type: 'array',
 				value: ['left', 'size-m'],
-				options: ['left', 'center', 'right', 'page', 'clean', 'size-s', 'size-m', 'size-l']
+				options: ['left', 'center', 'right', 'border-bottom', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
 		{
-			return `
+			this.hasRight = !!this.Slots.right;
+			this.hasBottom = !!this.Slots.bottom;
+			this.isH1 = this.element === 'h1';
+
+			return /* html */ `
 				<div :class="'holder ' + variant.join(' ')">
-					<div class="text">
-						<i ot-if="icon" class="icon">{{ icon }}</i>
-						<h2 ot-if="!variant.includes('page')" class="title">{{ title }}</h2>
-						<h1 ot-if="variant.includes('page')" class="title">{{ title }}</h1>
-						<p ot-if="description" class="description">{{ description }}</p>
+					<div class="top">
+						<div ot-if="icon" class="icon"><i>{{ icon }}</i></div>
+						<div class="text">
+							<div ot-if="eyebrow" class="eyebrow">{{ eyebrow }}</div>
+							<h1 ot-if="isH1" class="title"><span ot-html="title"></span></h1>
+							<h2 ot-if="!isH1" class="title"><span ot-html="title"></span></h2>
+							<p ot-if="description" class="description">{{ description }}</p>
+						</div>
+						<div ot-if="hasRight" class="right">
+							<slot name="right"></slot>
+						</div>
 					</div>
-					<div class="right">
-						<slot name="right"></slot>
+					<div ot-if="hasBottom" class="bottom">
+						<slot name="bottom"></slot>
 					</div>
 				</div>
 			`;