OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Add digital signage animation to the intro section block.

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-27 17:57:59 -05:00
parent a1f6f9a51b
commit 44e2ed7061
4 changed files with 2247 additions and 2004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pages/about.php
View File

@@ -8,7 +8,7 @@
return <<<'ORIBI_SYNC_CONTENT' return <<<'ORIBI_SYNC_CONTENT'
<!-- wp:oribi/page-hero-animated {"label":"About Us","title":"Digital Signage, Done Properly","description":"OTS Signs is the digital signage arm of Oribi Technology Services. We combine deep IT expertise with creative production to deliver signage that businesses can genuinely rely on."} /--> <!-- wp:oribi/page-hero-animated {"label":"About Us","title":"Digital Signage, Done Properly","description":"OTS Signs is the digital signage arm of Oribi Technology Services. We combine deep IT expertise with creative production to deliver signage that businesses can genuinely rely on."} /-->
<!-- wp:oribi/intro-section {"label":"Our Story","heading":"Born from Infrastructure, Built for Signage","description":"OTS Signs grew out of a gap we kept seeing: businesses wanted digital signage but were stuck choosing between complex enterprise platforms and unreliable consumer tools. As part of Oribi Technology Services, we already understood networks, uptime, and security at a deep level. We took that foundation and built a signage platform that is powerful enough for large deployments yet simple enough for a single-site café. Every decision we make, from hardware selection to Command Center design, is grounded in real-world infrastructure experience."} /--> <!-- wp:oribi/intro-section {"label":"Our Story","heading":"Born from Infrastructure, Built for Signage","description":"OTS Signs grew out of a gap we kept seeing: businesses wanted digital signage but were stuck choosing between complex enterprise platforms and unreliable consumer tools. As part of Oribi Technology Services, we already understood networks, uptime, and security at a deep level. We took that foundation and built a signage platform that is powerful enough for large deployments yet simple enough for a single-site café. Every decision we make, from hardware selection to Command Center design, is grounded in real-world infrastructure experience.","cloudAnim":true} /-->
<!-- wp:oribi/value-section {"variant":"alt","label":"Our Heritage","heading":"Backed by Years of Enterprise IT","lead":"OTS Signs is built on the infrastructure expertise of Oribi Technology Services \u2014 a team that has spent years designing, deploying, and supporting business-critical technology.","columns":3} --> <!-- wp:oribi/value-section {"variant":"alt","label":"Our Heritage","heading":"Backed by Years of Enterprise IT","lead":"OTS Signs is built on the infrastructure expertise of Oribi Technology Services \u2014 a team that has spent years designing, deploying, and supporting business-critical technology.","columns":3} -->
<!-- wp:oribi/value-card {"iconType":"fontawesome","faIcon":"fas fa-network-wired","title":"Enterprise Networking","description":"We\u0027ve designed and managed networks for organisations that can\u0027t afford downtime. That same rigour underpins every signage deployment we build."} /--> <!-- wp:oribi/value-card {"iconType":"fontawesome","faIcon":"fas fa-network-wired","title":"Enterprise Networking","description":"We\u0027ve designed and managed networks for organisations that can\u0027t afford downtime. That same rigour underpins every signage deployment we build."} /-->
@@ -38,5 +38,4 @@ return <<<'ORIBI_SYNC_CONTENT'
<!-- wp:oribi/stat-card {"value":"4K","label":"Ultra-HD Output","description":"Every player delivers crisp 4K resolution over HDMI for stunning visuals on any display."} /--> <!-- wp:oribi/stat-card {"value":"4K","label":"Ultra-HD Output","description":"Every player delivers crisp 4K resolution over HDMI for stunning visuals on any display."} /-->
<!-- wp:oribi/stat-card {"value":"24/7","label":"Always-On Operation","description":"Commercial-grade hardware with offline playback ensures your screens never go dark."} /--> <!-- wp:oribi/stat-card {"value":"24/7","label":"Always-On Operation","description":"Commercial-grade hardware with offline playback ensures your screens never go dark."} /-->
<!-- /wp:oribi/stat-section --> <!-- /wp:oribi/stat-section -->
<!-- wp:oribi/cta-banner {"heading":"Ready to See What We Can Do?","text":"Whether you're planning your first screen or scaling to hundreds, we'd love to hear about your project.","btnText":"Get in Touch","btnUrl":"/contact"} /--> <!-- wp:oribi/cta-banner {"heading":"Ready to See What We Can Do?","text":"Whether you're planning your first screen or scaling to hundreds, we'd love to hear about your project.","btnText":"Get in Touch","btnUrl":"/contact"} /-->ORIBI_SYNC_CONTENT;
ORIBI_SYNC_CONTENT;

116
theme/assets/css/main.css
View File

@@ -3272,7 +3272,8 @@ p:last-child { margin-bottom: 0; }
color: #fff; color: #fff;
} }
/* When an image is set, remove the gradient box styling */ /* When an image is set, remove the gradient box styling */
.about-intro-visual.has-img { .about-intro-visual.has-img,
.about-intro-visual.has-cloud-anim {
background: none; background: none;
box-shadow: none; box-shadow: none;
aspect-ratio: unset; aspect-ratio: unset;
@@ -3284,6 +3285,119 @@ p:last-child { margin-bottom: 0; }
.about-intro-visual { max-width: 280px; margin-inline: auto; } .about-intro-visual { max-width: 280px; margin-inline: auto; }
} }
/* ── Digital Signage Animation ────────────────────────────── */
.ds-anim-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: 2rem 0;
position: relative;
color: var(--color-primary);
}
[data-theme="dark"] .ds-anim-container {
color: #fff;
}
.ds-tv, .ds-cloud {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.ds-tv {
font-size: 5rem;
position: relative;
}
.ds-tv-screen {
position: absolute;
top: 15%;
left: 10%;
width: 80%;
height: 60%;
background: rgba(var(--color-primary-rgb), 0.2);
border-radius: 4px;
animation: ds-screen-pulse 3s infinite alternate;
}
[data-theme="dark"] .ds-tv-screen {
background: rgba(255, 255, 255, 0.15);
}
@keyframes ds-screen-pulse {
0% { opacity: 0.4; }
100% { opacity: 1; }
}
.ds-cloud {
font-size: 4.5rem;
animation: ds-float 4s ease-in-out infinite;
}
@keyframes ds-float {
0% { transform: translateY(0); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0); }
}
.ds-line {
flex-grow: 1;
height: 2px;
background: rgba(var(--color-primary-rgb), 0.2);
margin: 0 1.5rem;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 2px;
}
[data-theme="dark"] .ds-line {
background: rgba(255, 255, 255, 0.1);
}
.ds-packet {
width: 12px;
height: 4px;
background: var(--color-primary);
border-radius: 4px;
position: absolute;
left: -20px;
box-shadow: 0 0 8px var(--color-primary);
}
[data-theme="dark"] .ds-packet {
background: #fff;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.ds-packet-1 { animation: ds-travel 2s linear infinite; }
.ds-packet-2 { animation: ds-travel 2s linear infinite 0.6s; }
.ds-packet-3 { animation: ds-travel 2s linear infinite 1.2s; }
@keyframes ds-travel {
0% { left: -20px; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ds-tv-screen, .ds-cloud, .ds-packet {
animation: none;
}
.ds-packet-1 { left: 20%; opacity: 1; }
.ds-packet-2 { left: 50%; opacity: 1; }
.ds-packet-3 { left: 80%; opacity: 1; }
}
/* ── 13. Contact ────────────────────────────────────────────── */ /* ── 13. Contact ────────────────────────────────────────────── */
.contact-layout { .contact-layout {
display: grid; display: grid;

317
theme/blocks/editor.js
View File

@@ -270,18 +270,26 @@ function cardImageControls(a, s) {
}) })
), ),
a.imgUrl ? el(Frag, null, a.imgUrl ? el(Frag, null,
el(RC, { label: 'Width (px)', value: imgW, min: 20, max: 600, step: 4, el(RC, {
onChange: function(v){ s({ imgWidth: v }); } }), label: 'Width (px)', value: imgW, min: 20, max: 600, step: 4,
el(RC, { label: 'Height (px) - 0 = auto', value: imgH, min: 0, max: 600, step: 4, onChange: function (v) { s({ imgWidth: v }); }
onChange: function(v){ s({ imgHeight: v }); } }), }),
el(TG, { label: 'Scale to fill (cover)', checked: imgFit === 'cover', el(RC, {
onChange: function(v){ s({ imgFit: v ? 'cover' : 'contain' }); } }), label: 'Height (px) - 0 = auto', value: imgH, min: 0, max: 600, step: 4,
el(SC, { label: 'Position', value: imgPos, options: [ onChange: function (v) { s({ imgHeight: v }); }
}),
el(TG, {
label: 'Scale to fill (cover)', checked: imgFit === 'cover',
onChange: function (v) { s({ imgFit: v ? 'cover' : 'contain' }); }
}),
el(SC, {
label: 'Position', value: imgPos, options: [
{ label: 'Above content', value: 'top' }, { label: 'Above content', value: 'top' },
{ label: 'Left of content', value: 'left' }, { label: 'Left of content', value: 'left' },
{ label: 'Replace icon', value: 'replace-icon' }, { label: 'Replace icon', value: 'replace-icon' },
{ label: 'Background', value: 'background' } { label: 'Background', value: 'background' }
], onChange: function(v){ s({ imgPosition: v }); } }) ], onChange: function (v) { s({ imgPosition: v }); }
})
) : null ) : null
); );
} }
@@ -309,9 +317,11 @@ function createCardSectionEdit(allowedBlocks, defaultTemplate, label) {
return el(Frag, null, return el(Frag, null,
el(IC, null, el(IC, null,
el(PB, { title: 'Section Settings' }, el(PB, { title: 'Section Settings' },
el(SC, { label: 'Background', value: a.variant, options: [ el(SC, {
label: 'Background', value: a.variant, options: [
{ label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' } { label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' }
], onChange: function(v){s({variant:v});} }), ], onChange: function (v) { s({ variant: v }); }
}),
el(RC, { label: 'Columns', value: a.columns, min: 1, max: 4, onChange: function (v) { s({ columns: v }); } }), el(RC, { label: 'Columns', value: a.columns, min: 1, max: 4, onChange: function (v) { s({ columns: v }); } }),
el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } }) el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } })
) )
@@ -399,30 +409,48 @@ reg('oribi/hero', {
el('section', { className: 'hero' }, el('section', { className: 'hero' },
el('div', { className: 'container hero-inner' }, el('div', { className: 'container hero-inner' },
el('div', { className: 'hero-content' }, el('div', { className: 'hero-content' },
el(RT, { tagName: 'span', className: 'hero-label', value: a.label, el(RT, {
onChange: function(v){s({label:v});}, placeholder: '\u25CF Label text', allowedFormats: [] }), tagName: 'span', className: 'hero-label', value: a.label,
el(RT, { tagName: 'h1', className: 'hero-title', value: a.title, onChange: function (v) { s({ label: v }); }, placeholder: '\u25CF Label text', allowedFormats: []
onChange: function(v){s({title:v});}, placeholder: 'Hero title...' }), }),
el(RT, { tagName: 'p', className: 'hero-description', value: a.description, el(RT, {
onChange: function(v){s({description:v});}, placeholder: 'Description...' }), tagName: 'h1', className: 'hero-title', value: a.title,
onChange: function (v) { s({ title: v }); }, placeholder: 'Hero title...'
}),
el(RT, {
tagName: 'p', className: 'hero-description', value: a.description,
onChange: function (v) { s({ description: v }); }, placeholder: 'Description...'
}),
el('div', { className: 'btn-group' }, el('div', { className: 'btn-group' },
el(RT, { tagName: 'span', className: 'btn btn-primary btn-lg', value: a.primaryBtnText, el(RT, {
onChange: function(v){s({primaryBtnText:v});}, placeholder: 'Button', allowedFormats: [] }), tagName: 'span', className: 'btn btn-primary btn-lg', value: a.primaryBtnText,
el(RT, { tagName: 'span', className: 'btn btn-ghost btn-lg', value: a.secondaryBtnText, onChange: function (v) { s({ primaryBtnText: v }); }, placeholder: 'Button', allowedFormats: []
onChange: function(v){s({secondaryBtnText:v});}, placeholder: 'Secondary button', allowedFormats: [] }) }),
el(RT, {
tagName: 'span', className: 'btn btn-ghost btn-lg', value: a.secondaryBtnText,
onChange: function (v) { s({ secondaryBtnText: v }); }, placeholder: 'Secondary button', allowedFormats: []
})
), ),
el('div', { className: 'hero-stats' }, el('div', { className: 'hero-stats' },
el('div', null, el('div', null,
el(RT, { tagName: 'div', className: 'hero-stat-value', value: a.stat1Value, el(RT, {
onChange: function(v){s({stat1Value:v});}, placeholder: '\u2014', allowedFormats: [] }), tagName: 'div', className: 'hero-stat-value', value: a.stat1Value,
el(RT, { tagName: 'div', className: 'hero-stat-label', value: a.stat1Label, onChange: function (v) { s({ stat1Value: v }); }, placeholder: '\u2014', allowedFormats: []
onChange: function(v){s({stat1Label:v});}, placeholder: 'Stat label', allowedFormats: [] }) }),
el(RT, {
tagName: 'div', className: 'hero-stat-label', value: a.stat1Label,
onChange: function (v) { s({ stat1Label: v }); }, placeholder: 'Stat label', allowedFormats: []
})
), ),
el('div', null, el('div', null,
el(RT, { tagName: 'div', className: 'hero-stat-value', value: a.stat2Value, el(RT, {
onChange: function(v){s({stat2Value:v});}, placeholder: '\u2014', allowedFormats: [] }), tagName: 'div', className: 'hero-stat-value', value: a.stat2Value,
el(RT, { tagName: 'div', className: 'hero-stat-label', value: a.stat2Label, onChange: function (v) { s({ stat2Value: v }); }, placeholder: '\u2014', allowedFormats: []
onChange: function(v){s({stat2Label:v});}, placeholder: 'Stat label', allowedFormats: [] }) }),
el(RT, {
tagName: 'div', className: 'hero-stat-label', value: a.stat2Label,
onChange: function (v) { s({ stat2Label: v }); }, placeholder: 'Stat label', allowedFormats: []
})
) )
) )
), ),
@@ -577,6 +605,7 @@ reg('oribi/intro-section', {
description: { type: 'string', default: '' }, description: { type: 'string', default: '' },
visual: { type: 'string', default: '' }, visual: { type: 'string', default: '' },
reversed: { type: 'boolean', default: false }, reversed: { type: 'boolean', default: false },
cloudAnim: { type: 'boolean', default: false },
imgId: { type: 'number', default: 0 }, imgId: { type: 'number', default: 0 },
imgUrl: { type: 'string', default: '' }, imgUrl: { type: 'string', default: '' },
imgAlt: { type: 'string', default: '' }, imgAlt: { type: 'string', default: '' },
@@ -585,18 +614,40 @@ reg('oribi/intro-section', {
edit: function (props) { edit: function (props) {
var a = props.attributes, s = props.setAttributes; var a = props.attributes, s = props.setAttributes;
var imgW = a.imgWidth || 280; var imgW = a.imgWidth || 280;
var visualContent = a.imgUrl
var animHtml = null;
if (a.cloudAnim) {
animHtml = el('div', { className: 'ds-anim-container' },
el('div', { className: 'ds-tv' },
el('i', { className: 'fas fa-tv', 'aria-hidden': 'true' }),
el('div', { className: 'ds-tv-screen' })
),
el('div', { className: 'ds-line' },
el('div', { className: 'ds-packet ds-packet-1' }),
el('div', { className: 'ds-packet ds-packet-2' }),
el('div', { className: 'ds-packet ds-packet-3' })
),
el('div', { className: 'ds-cloud' },
el('i', { className: 'fas fa-cloud', 'aria-hidden': 'true' })
)
);
}
var visualContent = a.cloudAnim ? animHtml : (a.imgUrl
? el('img', { src: a.imgUrl, style: { width: imgW + 'px', maxWidth: '100%', height: 'auto', borderRadius: '8px', objectFit: 'contain', display: 'block' } }) ? el('img', { src: a.imgUrl, style: { width: imgW + 'px', maxWidth: '100%', height: 'auto', borderRadius: '8px', objectFit: 'contain', display: 'block' } })
: (a.visual || '\uD83D\uDCBB'); : (a.visual || '\uD83D\uDCBB'));
return el(Frag, null, return el(Frag, null,
el(IC, null, el(IC, null,
el(PB, { title: 'Settings' }, el(PB, { title: 'Settings' },
el(SC, { label: 'Background', value: a.variant, options: [ el(SC, {
label: 'Background', value: a.variant, options: [
{ label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' } { label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' }
], onChange: function(v){s({variant:v});} }), ], onChange: function (v) { s({ variant: v }); }
}),
el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } }), el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } }),
el(TC, { label: 'Visual (emoji or text)', value: a.visual, onChange: function (v) { s({ visual: v }); } }), el(TC, { label: 'Visual (emoji or text)', value: a.visual, onChange: function (v) { s({ visual: v }); } }),
el(TG, { label: 'Reversed layout', checked: a.reversed, onChange: function(v){s({reversed:v});} }) el(TG, { label: 'Reversed layout', checked: a.reversed, onChange: function (v) { s({ reversed: v }); } }),
el(TG, { label: 'Cloud Server Animation', checked: a.cloudAnim, onChange: function (v) { s({ cloudAnim: v }); } })
), ),
el(PB, { title: 'Visual Image', initialOpen: false }, el(PB, { title: 'Visual Image', initialOpen: false },
el(MUC, null, el(MUC, null,
@@ -616,8 +667,10 @@ reg('oribi/intro-section', {
} }
}) })
), ),
a.imgUrl ? el(RC, { label: 'Width (px)', value: imgW, min: 50, max: 420, step: 4, a.imgUrl ? el(RC, {
onChange: function(v){ s({ imgWidth: v }); } }) : null label: 'Width (px)', value: imgW, min: 50, max: 420, step: 4,
onChange: function (v) { s({ imgWidth: v }); }
}) : null
) )
), ),
el('section', { className: a.variant === 'alt' ? 'section section-alt' : 'section' }, el('section', { className: a.variant === 'alt' ? 'section section-alt' : 'section' },
@@ -628,7 +681,7 @@ reg('oribi/intro-section', {
el(RT, { tagName: 'h2', style: { marginBottom: '1.5rem' }, value: a.heading, onChange: function (v) { s({ heading: v }); }, placeholder: 'Heading...' }), el(RT, { tagName: 'h2', style: { marginBottom: '1.5rem' }, value: a.heading, onChange: function (v) { s({ heading: v }); }, placeholder: 'Heading...' }),
el(RT, { tagName: 'p', className: 'lead', value: a.description, onChange: function (v) { s({ description: v }); }, placeholder: 'Description...' }) el(RT, { tagName: 'p', className: 'lead', value: a.description, onChange: function (v) { s({ description: v }); }, placeholder: 'Description...' })
), ),
el('div', { className: 'about-intro-visual' + (a.imgUrl ? ' has-img' : ''), style: a.reversed ? { direction: 'ltr' } : {} }, visualContent) el('div', { className: 'about-intro-visual' + (a.cloudAnim ? ' has-cloud-anim' : (a.imgUrl ? ' has-img' : '')), style: a.reversed ? { direction: 'ltr' } : {} }, visualContent)
) )
) )
) )
@@ -1109,53 +1162,77 @@ reg('oribi/pricing-card', {
} }
}) })
), ),
a.imgUrl ? el(RC, { label: 'Width (px)', value: imgW, min: 20, max: 400, step: 4, a.imgUrl ? el(RC, {
onChange: function(v){ s({ imgWidth: v }); } }) : null label: 'Width (px)', value: imgW, min: 20, max: 400, step: 4,
onChange: function (v) { s({ imgWidth: v }); }
}) : null
) )
), ),
el('div', { className: 'pricing-card' + (a.featured ? ' featured' : '') }, el('div', { className: 'pricing-card' + (a.featured ? ' featured' : '') },
a.featured && a.badge ? el(RT, { tagName: 'span', className: 'pricing-badge', value: a.badge, a.featured && a.badge ? el(RT, {
onChange: function(v){s({badge:v});}, placeholder: 'Badge...' }) : null, tagName: 'span', className: 'pricing-badge', value: a.badge,
onChange: function (v) { s({ badge: v }); }, placeholder: 'Badge...'
}) : null,
a.imgUrl ? el('div', { style: { textAlign: 'center', marginBottom: '1.25rem' } }, a.imgUrl ? el('div', { style: { textAlign: 'center', marginBottom: '1.25rem' } },
el('img', { src: a.imgUrl, style: { width: imgW + 'px', maxWidth: '100%', height: 'auto', borderRadius: '4px', objectFit: 'contain' } }) el('img', { src: a.imgUrl, style: { width: imgW + 'px', maxWidth: '100%', height: 'auto', borderRadius: '4px', objectFit: 'contain' } })
) : null, ) : null,
iconPreview(a, 'feature-icon', { marginInline: 'auto' }), iconPreview(a, 'feature-icon', { marginInline: 'auto' }),
el(RT, { tagName: 'div', className: 'pricing-name', value: a.name, el(RT, {
onChange: function(v){s({name:v});}, placeholder: 'Plan name...' }), tagName: 'div', className: 'pricing-name', value: a.name,
el(RT, { tagName: 'p', className: 'pricing-tagline', value: a.tagline, onChange: function (v) { s({ name: v }); }, placeholder: 'Plan name...'
onChange: function(v){s({tagline:v});}, placeholder: 'Tagline...' }), }),
el(RT, {
tagName: 'p', className: 'pricing-tagline', value: a.tagline,
onChange: function (v) { s({ tagline: v }); }, placeholder: 'Tagline...'
}),
a.price || a.pricePer ? el('div', { className: 'pricing-price' }, a.price || a.pricePer ? el('div', { className: 'pricing-price' },
el(RT, { tagName: 'div', className: 'pricing-amount', value: a.price || '', el(RT, {
onChange: function(v){s({price:v});}, placeholder: '$0' }), tagName: 'div', className: 'pricing-amount', value: a.price || '',
el(RT, { tagName: 'div', className: 'pricing-per', value: a.pricePer || '', onChange: function (v) { s({ price: v }); }, placeholder: '$0'
onChange: function(v){s({pricePer:v});}, placeholder: 'per screen / month' }) }),
el(RT, {
tagName: 'div', className: 'pricing-per', value: a.pricePer || '',
onChange: function (v) { s({ pricePer: v }); }, placeholder: 'per screen / month'
})
) : el('div', { className: 'pricing-price' }, ) : el('div', { className: 'pricing-price' },
el(RT, { tagName: 'div', className: 'pricing-amount', value: '', el(RT, {
onChange: function(v){s({price:v});}, placeholder: '$0' }), tagName: 'div', className: 'pricing-amount', value: '',
el(RT, { tagName: 'div', className: 'pricing-per', value: '', onChange: function (v) { s({ price: v }); }, placeholder: '$0'
onChange: function(v){s({pricePer:v});}, placeholder: 'per screen / month' }) }),
el(RT, {
tagName: 'div', className: 'pricing-per', value: '',
onChange: function (v) { s({ pricePer: v }); }, placeholder: 'per screen / month'
})
), ),
el('ul', { className: 'pricing-features' }, el('ul', { className: 'pricing-features' },
features.map(function (f, fi) { features.map(function (f, fi) {
return el('li', { key: fi, style: { display: 'flex', alignItems: 'center', gap: '4px' } }, return el('li', { key: fi, style: { display: 'flex', alignItems: 'center', gap: '4px' } },
el('span', { className: 'pricing-check' }, '\u2713'), el('span', { className: 'pricing-check' }, '\u2713'),
el(RT, { tagName: 'span', style: { flex: 1, minWidth: 0 }, value: f, el(RT, {
onChange: function(v){ s({features: arrSet(features, fi, v)}); }, placeholder: 'Feature...' }), tagName: 'span', style: { flex: 1, minWidth: 0 }, value: f,
el(Btn, { isSmall: true, isDestructive: true, onChange: function (v) { s({ features: arrSet(features, fi, v) }); }, placeholder: 'Feature...'
}),
el(Btn, {
isSmall: true, isDestructive: true,
style: { minWidth: '20px', padding: 0, height: '20px', flexShrink: 0 }, style: { minWidth: '20px', padding: 0, height: '20px', flexShrink: 0 },
onClick: function(){ s({features: arrRm(features, fi)}); } }, '\u2715') onClick: function () { s({ features: arrRm(features, fi) }); }
}, '\u2715')
); );
}), }),
el('li', { style: { listStyle: 'none', marginTop: '4px' } }, el('li', { style: { listStyle: 'none', marginTop: '4px' } },
el(Btn, { isSmall: true, variant: 'secondary', el(Btn, {
onClick: function(){ s({features: arrAdd(features, '')}); } }, '+ Feature') isSmall: true, variant: 'secondary',
onClick: function () { s({ features: arrAdd(features, '') }); }
}, '+ Feature')
) )
), ),
el(RT, { tagName: 'span', el(RT, {
tagName: 'span',
className: 'btn ' + (a.featured ? 'btn-primary' : 'btn-outline'), className: 'btn ' + (a.featured ? 'btn-primary' : 'btn-outline'),
style: { width: '100%', justifyContent: 'center', cursor: 'text' }, style: { width: '100%', justifyContent: 'center', cursor: 'text' },
value: a.btnText || '', value: a.btnText || '',
onChange: function(v){s({btnText:v});}, placeholder: 'Button text...' }) onChange: function (v) { s({ btnText: v }); }, placeholder: 'Button text...'
})
) )
); );
}, },
@@ -1288,16 +1365,20 @@ reg('oribi/platform-row', {
} }
}) })
), ),
a.imgUrl ? el(RC, { label: 'Width (px)', value: imgW, min: 50, max: 600, step: 4, a.imgUrl ? el(RC, {
onChange: function(v){ s({ imgWidth: v }); } }) : null label: 'Width (px)', value: imgW, min: 50, max: 600, step: 4,
onChange: function (v) { s({ imgWidth: v }); }
}) : null
) )
), ),
el('div', { className: 'platform-row' + (a.reversed ? ' reverse' : '') }, el('div', { className: 'platform-row' + (a.reversed ? ' reverse' : '') },
el('div', { className: 'platform-text' }, el('div', { className: 'platform-text' },
el(RT, { tagName: 'h3', value: a.heading, onChange: function (v) { s({ heading: v }); }, placeholder: 'Service name...' }), el(RT, { tagName: 'h3', value: a.heading, onChange: function (v) { s({ heading: v }); }, placeholder: 'Service name...' }),
el(RT, { tagName: 'p', value: a.description, onChange: function (v) { s({ description: v }); }, placeholder: 'Service description...' }), el(RT, { tagName: 'p', value: a.description, onChange: function (v) { s({ description: v }); }, placeholder: 'Service description...' }),
a.btnUrl ? el(RT, { tagName: 'span', className: 'btn btn-outline mt-3', a.btnUrl ? el(RT, {
value: a.btnText, onChange: function(v){s({btnText:v});}, placeholder: 'Button...' }) : null tagName: 'span', className: 'btn btn-outline mt-3',
value: a.btnText, onChange: function (v) { s({ btnText: v }); }, placeholder: 'Button...'
}) : null
), ),
a.isDashboard a.isDashboard
? el('div', { className: 'platform-visual has-dashboard', dangerouslySetInnerHTML: { __html: DB_HTML } }) ? el('div', { className: 'platform-visual has-dashboard', dangerouslySetInnerHTML: { __html: DB_HTML } })
@@ -1394,10 +1475,14 @@ reg('oribi/trust-item', {
edit: function (props) { edit: function (props) {
var a = props.attributes, s = props.setAttributes; var a = props.attributes, s = props.setAttributes;
return el('div', { className: 'trust-item' }, return el('div', { className: 'trust-item' },
el(RT, { tagName: 'h3', style: { marginBottom: '1rem' }, el(RT, {
value: a.heading, onChange: function(v){s({heading:v});}, placeholder: 'Sub-heading...' }), tagName: 'h3', style: { marginBottom: '1rem' },
el(RT, { tagName: 'p', value: a.description, value: a.heading, onChange: function (v) { s({ heading: v }); }, placeholder: 'Sub-heading...'
onChange: function(v){s({description:v});}, placeholder: 'Description...' }) }),
el(RT, {
tagName: 'p', value: a.description,
onChange: function (v) { s({ description: v }); }, placeholder: 'Description...'
})
); );
}, },
save: function () { return null; } save: function () { return null; }
@@ -1491,9 +1576,11 @@ reg('oribi/pricing-section', {
return el(Frag, null, return el(Frag, null,
el(IC, null, el(IC, null,
el(PB, { title: 'Section Settings' }, el(PB, { title: 'Section Settings' },
el(SC, { label: 'Background', value: a.variant, options: [ el(SC, {
label: 'Background', value: a.variant, options: [
{ label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' } { label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' }
], onChange: function(v){s({variant:v});} }), ], onChange: function (v) { s({ variant: v }); }
}),
el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } }) el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } })
) )
), ),
@@ -1632,9 +1719,11 @@ reg('oribi/faq-section', {
return el(Frag, null, return el(Frag, null,
el(IC, null, el(IC, null,
el(PB, { title: 'Section Settings' }, el(PB, { title: 'Section Settings' },
el(SC, { label: 'Background', value: a.variant, options: [ el(SC, {
label: 'Background', value: a.variant, options: [
{ label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' } { label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' }
], onChange: function(v){s({variant:v});} }), ], onChange: function (v) { s({ variant: v }); }
}),
el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } }) el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } })
) )
), ),
@@ -1674,12 +1763,16 @@ reg('oribi/faq-item', {
var a = props.attributes, s = props.setAttributes; var a = props.attributes, s = props.setAttributes;
return el('details', { className: 'faq-item', open: true }, return el('details', { className: 'faq-item', open: true },
el('summary', { className: 'faq-question' }, el('summary', { className: 'faq-question' },
el(RT, { tagName: 'span', value: a.question, el(RT, {
onChange: function(v){s({question:v});}, placeholder: 'Question...' }) tagName: 'span', value: a.question,
onChange: function (v) { s({ question: v }); }, placeholder: 'Question...'
})
), ),
el('div', { className: 'faq-answer' }, el('div', { className: 'faq-answer' },
el(RT, { tagName: 'p', value: a.answer, el(RT, {
onChange: function(v){s({answer:v});}, placeholder: 'Answer...' }) tagName: 'p', value: a.answer,
onChange: function (v) { s({ answer: v }); }, placeholder: 'Answer...'
})
) )
); );
}, },
@@ -1776,9 +1869,11 @@ reg('oribi/comparison-table', {
return el(Frag, null, return el(Frag, null,
el(IC, null, el(IC, null,
el(PB, { title: 'Table Settings' }, el(PB, { title: 'Table Settings' },
el(SC, { label: 'Background', value: a.variant, options: [ el(SC, {
label: 'Background', value: a.variant, options: [
{ label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' } { label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' }
], onChange: function(v){s({variant:v});} }), ], onChange: function (v) { s({ variant: v }); }
}),
el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } }) el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } })
), ),
el(PB, { title: 'Columns', initialOpen: false }, el(PB, { title: 'Columns', initialOpen: false },
@@ -1929,36 +2024,58 @@ reg('oribi/hero-animated', {
el('div', { className: 'hero-animated__glow' }), el('div', { className: 'hero-animated__glow' }),
el('div', { className: 'container hero-animated__inner' }, el('div', { className: 'container hero-animated__inner' },
el('div', { className: 'hero-animated__content' }, el('div', { className: 'hero-animated__content' },
el(RT, { tagName: 'span', className: 'hero-label', value: a.label, el(RT, {
onChange: function(v){s({label:v});}, placeholder: '\u25CF Label text', allowedFormats: [] }), tagName: 'span', className: 'hero-label', value: a.label,
el(RT, { tagName: 'h1', className: 'hero-title', value: a.title, onChange: function (v) { s({ label: v }); }, placeholder: '\u25CF Label text', allowedFormats: []
onChange: function(v){s({title:v});}, placeholder: 'Hero title...' }), }),
el(RT, { tagName: 'p', className: 'hero-description', value: a.description, el(RT, {
onChange: function(v){s({description:v});}, placeholder: 'Description...' }), tagName: 'h1', className: 'hero-title', value: a.title,
onChange: function (v) { s({ title: v }); }, placeholder: 'Hero title...'
}),
el(RT, {
tagName: 'p', className: 'hero-description', value: a.description,
onChange: function (v) { s({ description: v }); }, placeholder: 'Description...'
}),
el('div', { className: 'btn-group' }, el('div', { className: 'btn-group' },
el(RT, { tagName: 'span', className: 'btn btn-primary btn-lg', value: a.primaryBtnText, el(RT, {
onChange: function(v){s({primaryBtnText:v});}, placeholder: 'Button', allowedFormats: [] }), tagName: 'span', className: 'btn btn-primary btn-lg', value: a.primaryBtnText,
el(RT, { tagName: 'span', className: 'btn btn-ghost btn-lg', value: a.secondaryBtnText, onChange: function (v) { s({ primaryBtnText: v }); }, placeholder: 'Button', allowedFormats: []
onChange: function(v){s({secondaryBtnText:v});}, placeholder: 'Secondary button', allowedFormats: [] }) }),
el(RT, {
tagName: 'span', className: 'btn btn-ghost btn-lg', value: a.secondaryBtnText,
onChange: function (v) { s({ secondaryBtnText: v }); }, placeholder: 'Secondary button', allowedFormats: []
})
), ),
el('div', { className: 'hero-stats hero-stats--three' }, el('div', { className: 'hero-stats hero-stats--three' },
el('div', null, el('div', null,
el(RT, { tagName: 'div', className: 'hero-stat-value', value: a.stat1Value, el(RT, {
onChange: function(v){s({stat1Value:v});}, placeholder: '\u2014', allowedFormats: [] }), tagName: 'div', className: 'hero-stat-value', value: a.stat1Value,
el(RT, { tagName: 'div', className: 'hero-stat-label', value: a.stat1Label, onChange: function (v) { s({ stat1Value: v }); }, placeholder: '\u2014', allowedFormats: []
onChange: function(v){s({stat1Label:v});}, placeholder: 'Stat label', allowedFormats: [] }) }),
el(RT, {
tagName: 'div', className: 'hero-stat-label', value: a.stat1Label,
onChange: function (v) { s({ stat1Label: v }); }, placeholder: 'Stat label', allowedFormats: []
})
), ),
el('div', null, el('div', null,
el(RT, { tagName: 'div', className: 'hero-stat-value', value: a.stat2Value, el(RT, {
onChange: function(v){s({stat2Value:v});}, placeholder: '\u2014', allowedFormats: [] }), tagName: 'div', className: 'hero-stat-value', value: a.stat2Value,
el(RT, { tagName: 'div', className: 'hero-stat-label', value: a.stat2Label, onChange: function (v) { s({ stat2Value: v }); }, placeholder: '\u2014', allowedFormats: []
onChange: function(v){s({stat2Label:v});}, placeholder: 'Stat label', allowedFormats: [] }) }),
el(RT, {
tagName: 'div', className: 'hero-stat-label', value: a.stat2Label,
onChange: function (v) { s({ stat2Label: v }); }, placeholder: 'Stat label', allowedFormats: []
})
), ),
el('div', null, el('div', null,
el(RT, { tagName: 'div', className: 'hero-stat-value', value: a.stat3Value, el(RT, {
onChange: function(v){s({stat3Value:v});}, placeholder: '\u2014', allowedFormats: [] }), tagName: 'div', className: 'hero-stat-value', value: a.stat3Value,
el(RT, { tagName: 'div', className: 'hero-stat-label', value: a.stat3Label, onChange: function (v) { s({ stat3Value: v }); }, placeholder: '\u2014', allowedFormats: []
onChange: function(v){s({stat3Label:v});}, placeholder: 'Stat label', allowedFormats: [] }) }),
el(RT, {
tagName: 'div', className: 'hero-stat-label', value: a.stat3Label,
onChange: function (v) { s({ stat3Label: v }); }, placeholder: 'Stat label', allowedFormats: []
})
) )
) )
) )

19
theme/blocks/index.php
View File

@@ -339,6 +339,7 @@ add_action('init', function () {
'description' => ['type' => 'string', 'default' => ''], 'description' => ['type' => 'string', 'default' => ''],
'visual' => ['type' => 'string', 'default' => ''], 'visual' => ['type' => 'string', 'default' => ''],
'reversed' => ['type' => 'boolean', 'default' => false], 'reversed' => ['type' => 'boolean', 'default' => false],
'cloudAnim' => ['type' => 'boolean', 'default' => false],
'imgId' => ['type' => 'number', 'default' => 0], 'imgId' => ['type' => 'number', 'default' => 0],
'imgUrl' => ['type' => 'string', 'default' => ''], 'imgUrl' => ['type' => 'string', 'default' => ''],
'imgAlt' => ['type' => 'string', 'default' => ''], 'imgAlt' => ['type' => 'string', 'default' => ''],
@@ -972,7 +973,20 @@ function oribi_render_intro_section($a)
<h2 style="margin-bottom:1.5rem;"><?php echo wp_kses_post($a['heading']); ?></h2> <h2 style="margin-bottom:1.5rem;"><?php echo wp_kses_post($a['heading']); ?></h2>
<p class="lead"><?php echo wp_kses_post($a['description']); ?></p> <p class="lead"><?php echo wp_kses_post($a['description']); ?></p>
</div> </div>
<div class="about-intro-visual"<?php echo $ltr; ?>><?php echo wp_kses_post($a['visual']); ?></div> <div class="about-intro-visual<?php echo !empty($a['cloudAnim']) ? ' has-cloud-anim' : ''; ?>"<?php echo $ltr; ?>>
<?php
if (!empty($a['cloudAnim'])) {
echo '<div class="ds-anim-container">';
echo '<div class="ds-tv"><i class="fas fa-tv" aria-hidden="true"></i><div class="ds-tv-screen"></div></div>';
echo '<div class="ds-line"><div class="ds-packet ds-packet-1"></div><div class="ds-packet ds-packet-2"></div><div class="ds-packet ds-packet-3"></div></div>';
echo '<div class="ds-cloud"><i class="fas fa-cloud" aria-hidden="true"></i></div>';
echo '</div>';
}
else {
echo wp_kses_post($a['visual']);
}
?>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -1650,8 +1664,7 @@ function oribi_render_camera_animation()
<rect id="ve-playhead-line" x="103" y="220" width="2" height="68" fill="#FF4500" opacity="0.92"/> <rect id="ve-playhead-line" x="103" y="220" width="2" height="68" fill="#FF4500" opacity="0.92"/>
<!-- Timecode display --> <!-- Timecode display -->
<text id="ve-timecode" x="36" y="230" fill="#8a8e98" font-size="8" font-family="monospace">0:00</text> <text id="ve-timecode" x="36" y="230" fill="#8a8e98" font-size="8" font-family="monospace">0:00</text>
</svg></div> </svg></div>HTML;
HTML;
} }
function oribi_render_platform_row($a) function oribi_render_platform_row($a)