Add photo and video camera components to platform row with animations and styling
This commit is contained in:
Matt Batchelder
@@ -1225,34 +1225,59 @@ reg('oribi/platform-row', {
|
||||
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' })
|
||||
)
|
||||
)
|
||||
// Photo camera (left)
|
||||
el('div', { className: 'pc-wrap' },
|
||||
el('div', { className: 'pc-body' },
|
||||
el('div', { className: 'pc-flash-unit' }),
|
||||
el('div', { className: 'pc-top' },
|
||||
el('div', { className: 'pc-shutter-btn' }),
|
||||
el('div', { className: 'pc-viewfinder' })
|
||||
),
|
||||
el('div', { className: 'cam-controls' },
|
||||
el('div', { className: 'cam-led' }),
|
||||
el('div', { className: 'cam-btn' }),
|
||||
el('div', { className: 'cam-btn' })
|
||||
el('div', { className: 'pc-front' },
|
||||
el('div', { className: 'pc-lens-ring' },
|
||||
el('div', { className: 'pc-lens-glass' },
|
||||
el('div', { className: 'pc-lens-reflex' })
|
||||
)
|
||||
),
|
||||
el('div', { className: 'pc-grip' })
|
||||
)
|
||||
),
|
||||
el('div', { className: 'pc-prints' },
|
||||
el('div', { className: 'pc-print pc-print--1', style: { opacity: '1', transform: 'rotate(-12deg) translateY(0)' } },
|
||||
el('div', { className: 'pc-print__img' })
|
||||
)
|
||||
)
|
||||
),
|
||||
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' })
|
||||
// Centre scene
|
||||
el('div', { className: 'cam-scene' },
|
||||
el('div', { className: 'cam-subject cam-subject--1' }),
|
||||
el('div', { className: 'cam-flash-overlay' }),
|
||||
el('div', { className: 'cam-vid-overlay' })
|
||||
),
|
||||
// Video camera on tripod (right)
|
||||
el('div', { className: 'vc-wrap' },
|
||||
el('div', { className: 'vc-camera' },
|
||||
el('div', { className: 'vc-handle' }),
|
||||
el('div', { className: 'vc-body' },
|
||||
el('div', { className: 'vc-lens-barrel' },
|
||||
el('div', { className: 'vc-lens-tip' },
|
||||
el('div', { className: 'vc-lens-glass' },
|
||||
el('div', { className: 'vc-lens-reflex' })
|
||||
)
|
||||
)
|
||||
),
|
||||
el('div', { className: 'vc-top-rail' }),
|
||||
el('div', { className: 'vc-rec-light' }),
|
||||
el('div', { className: 'vc-eyepiece' })
|
||||
)
|
||||
),
|
||||
el('div', { className: 'vc-tripod' },
|
||||
el('div', { className: 'vc-stem' }),
|
||||
el('div', { className: 'vc-legs' },
|
||||
el('div', { className: 'vc-leg vc-leg--l' }),
|
||||
el('div', { className: 'vc-leg vc-leg--c' }),
|
||||
el('div', { className: 'vc-leg vc-leg--r' })
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
@@ -1500,33 +1500,56 @@ function oribi_render_platform_row( $a ) {
|
||||
$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-stage" aria-hidden="true">';
|
||||
|
||||
// ── Left: compact photo camera ──
|
||||
$ca .= '<div class="pc-wrap">';
|
||||
$ca .= '<div class="pc-body">';
|
||||
$ca .= '<div class="pc-flash-unit"></div>';
|
||||
$ca .= '<div class="pc-top"><div class="pc-shutter-btn"></div><div class="pc-viewfinder"></div></div>';
|
||||
$ca .= '<div class="pc-front">';
|
||||
$ca .= '<div class="pc-lens-ring"><div class="pc-lens-glass"><div class="pc-lens-reflex"></div></div></div>';
|
||||
$ca .= '<div class="pc-grip"></div>';
|
||||
$ca .= '</div>';
|
||||
$ca .= '</div>'; // pc-body
|
||||
$ca .= '<div class="pc-prints">';
|
||||
$ca .= '<div class="pc-print pc-print--1"><div class="pc-print__img"></div></div>';
|
||||
$ca .= '<div class="pc-print pc-print--2"><div class="pc-print__img"></div></div>';
|
||||
$ca .= '<div class="pc-print pc-print--3"><div class="pc-print__img"></div></div>';
|
||||
$ca .= '</div>'; // pc-prints
|
||||
$ca .= '</div>'; // pc-wrap
|
||||
|
||||
// ── Centre: product scene both cameras shoot ──
|
||||
$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>';
|
||||
$ca .= '<div class="cam-vid-overlay"></div>';
|
||||
$ca .= '</div>'; // cam-scene
|
||||
|
||||
// ── Right: retro VHS video camera on tripod ──
|
||||
$ca .= '<div class="vc-wrap">';
|
||||
$ca .= '<div class="vc-camera">';
|
||||
$ca .= '<div class="vc-handle"></div>';
|
||||
$ca .= '<div class="vc-body">';
|
||||
$ca .= '<div class="vc-lens-barrel"><div class="vc-lens-tip"><div class="vc-lens-glass"><div class="vc-lens-reflex"></div></div></div></div>';
|
||||
$ca .= '<div class="vc-top-rail"></div>';
|
||||
$ca .= '<div class="vc-rec-light"></div>';
|
||||
$ca .= '<div class="vc-eyepiece"></div>';
|
||||
$ca .= '</div>'; // vc-body
|
||||
$ca .= '</div>'; // vc-camera
|
||||
$ca .= '<div class="vc-tripod">';
|
||||
$ca .= '<div class="vc-stem"></div>';
|
||||
$ca .= '<div class="vc-legs">';
|
||||
$ca .= '<div class="vc-leg vc-leg--l"></div>';
|
||||
$ca .= '<div class="vc-leg vc-leg--c"></div>';
|
||||
$ca .= '<div class="vc-leg vc-leg--r"></div>';
|
||||
$ca .= '</div>'; // vc-legs
|
||||
$ca .= '</div>'; // vc-tripod
|
||||
$ca .= '</div>'; // vc-wrap
|
||||
|
||||
$ca .= '</div>'; // cam-stage
|
||||
$visual_html = $ca;
|
||||
$visual_cls = 'platform-visual has-camera';
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user