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

Add camera animation support to platform rows and update rendering logic

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 10:04:18 -05:00
parent 7e0c216e1c
commit ab6f4212bd
4 changed files with 508 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
theme/blocks/editor.js
View File

@@ -1180,6 +1180,7 @@ reg('oribi/platform-row', {
imgUrl: { type: 'string', default: '' },
imgAlt: { type: 'string', default: '' },
imgWidth: { type: 'number', default: 300 },
cameraAnim: { type: 'boolean', default: false },
},
edit: function (props) {
var a = props.attributes, s = props.setAttributes;
@@ -1189,7 +1190,8 @@ reg('oribi/platform-row', {
el(PB, { title: 'Row Settings' },
el(TC, { label: 'Visual (emoji)', value: a.visual, onChange: function(v){s({visual:v});} }),
el(TC, { label: 'Button URL', value: a.btnUrl, onChange: function(v){s({btnUrl:v});} }),
el(TG, { label: 'Reversed', checked: !!a.reversed, onChange: function(v){s({reversed:v});} })
el(TG, { label: 'Reversed', checked: !!a.reversed, onChange: function(v){s({reversed:v});} }),
el(TG, { label: 'Camera Animation', checked: !!a.cameraAnim, onChange: function(v){s({cameraAnim:v});} })
),
el(PB, { title: 'Visual Image', initialOpen: false },
el(MUC, null,
@@ -1220,7 +1222,42 @@ reg('oribi/platform-row', {
a.btnUrl ? el(RT, { tagName: 'span', className: 'btn btn-outline mt-3',
value: a.btnText, onChange: function(v){s({btnText:v});}, placeholder: 'Button...' }) : null
),
a.imgUrl
a.cameraAnim
? el('div', { className: 'platform-visual has-camera' },
el('div', { className: 'cam-stage', 'aria-hidden': 'true' },
el('div', { className: 'cam-scene' },
el('div', { className: 'cam-subject cam-subject--1' }),
el('div', { className: 'cam-flash-overlay' })
),
el('div', { className: 'cam-body' },
el('div', { className: 'cam-top' },
el('div', { className: 'cam-hump' }, el('div', { className: 'cam-dial' })),
el('div', { className: 'cam-shutter-btn' }, el('div', { className: 'cam-shutter-inner' }))
),
el('div', { className: 'cam-front' },
el('div', { className: 'cam-grip-ridge' }),
el('div', { className: 'cam-lens-assembly' },
el('div', { className: 'cam-lens-barrel' },
el('div', { className: 'cam-lens-glass' },
el('div', { className: 'cam-reflection' })
)
)
),
el('div', { className: 'cam-controls' },
el('div', { className: 'cam-led' }),
el('div', { className: 'cam-btn' }),
el('div', { className: 'cam-btn' })
)
)
),
el('div', { className: 'cam-prints' },
el('div', { className: 'cam-print cam-print--1', style: { opacity: '1', transform: 'rotate(-14deg) translateY(0)' } },
el('div', { className: 'cam-print__img' })
)
)
)
)
: a.imgUrl
? el('div', { className: 'platform-visual has-img' },
el('img', { src: a.imgUrl, style: { width: imgW + 'px', maxWidth: '100%', height: 'auto', borderRadius: '4px', objectFit: 'contain', display: 'block', marginInline: 'auto' } })
)