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' } })
)

31
theme/blocks/index.php
View File

@@ -555,6 +555,7 @@ add_action( 'init', function () {
'imgWidth' => [ 'type' => 'number', 'default' => 300 ],
'deviceAnim' => [ 'type' => 'boolean', 'default' => false ],
'tvStick' => [ 'type' => 'boolean', 'default' => false ],
'cameraAnim' => [ 'type' => 'boolean', 'default' => false ],
],
'supports' => $block_supports,
'render_callback' => 'oribi_render_platform_row',
@@ -1498,6 +1499,36 @@ function oribi_render_platform_row( $a ) {
$ts .= '</div>';
$visual_html = $ts;
$visual_cls = 'platform-visual has-tv-stick';
} elseif ( ! empty( $a['cameraAnim'] ) ) {
$ca = '<div class="cam-stage" aria-hidden="true">';
// Scene: product being photographed
$ca .= '<div class="cam-scene">';
$ca .= '<div class="cam-subject cam-subject--1"></div>';
$ca .= '<div class="cam-subject cam-subject--2"></div>';
$ca .= '<div class="cam-subject cam-subject--3"></div>';
$ca .= '<div class="cam-flash-overlay"></div>';
$ca .= '</div>';
// Camera body
$ca .= '<div class="cam-body">';
$ca .= '<div class="cam-top">';
$ca .= '<div class="cam-hump"><div class="cam-dial"></div></div>';
$ca .= '<div class="cam-shutter-btn"><div class="cam-shutter-inner"></div></div>';
$ca .= '</div>';
$ca .= '<div class="cam-front">';
$ca .= '<div class="cam-grip-ridge"></div>';
$ca .= '<div class="cam-lens-assembly"><div class="cam-lens-barrel"><div class="cam-lens-glass"><div class="cam-reflection"></div></div></div></div>';
$ca .= '<div class="cam-controls"><div class="cam-led"></div><div class="cam-btn"></div><div class="cam-btn"></div></div>';
$ca .= '</div>';
$ca .= '</div>';
// Polaroid prints ejecting after each capture
$ca .= '<div class="cam-prints">';
$ca .= '<div class="cam-print cam-print--1"><div class="cam-print__img"></div></div>';
$ca .= '<div class="cam-print cam-print--2"><div class="cam-print__img"></div></div>';
$ca .= '<div class="cam-print cam-print--3"><div class="cam-print__img"></div></div>';
$ca .= '</div>';
$ca .= '</div>';
$visual_html = $ca;
$visual_cls = 'platform-visual has-camera';
} else {
$visual_html = oribi_render_icon( $a['visual'] ?? '' );
$visual_cls = 'platform-visual';