Add camera animation support to platform rows and update rendering logic

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

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';