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

Add new animations for retail, corporate, education, outdoor, live data, healthcare, transit, and fitness sectors

Browse Source 
- Extend block attributes to include new animation options in index.php
- Implement animation rendering logic for each sector in oribi_render_platform_row function
- Enqueue new JavaScript file for solutions page animations in enqueue.php
- Create solutions-animator.js to handle live data KPI and transit board animations
This commit is contained in:
Matt Batchelder
2026-03-16 20:29:15 -04:00
parent 9f415320de
commit fa6dce039b
5 changed files with 2144 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
theme/blocks/index.php
View File

@@ -576,6 +576,15 @@ add_action('init', function () {
'cameraAnim' => ['type' => 'boolean', 'default' => false],
'neverGoesDark' => ['type' => 'boolean', 'default' => false],
'brandedAnim' => ['type' => 'boolean', 'default' => false],
'hospitalityAnim' => ['type' => 'boolean', 'default' => false],
'retailAnim' => ['type' => 'boolean', 'default' => false],
'corporateAnim' => ['type' => 'boolean', 'default' => false],
'educationAnim' => ['type' => 'boolean', 'default' => false],
'outdoorAnim' => ['type' => 'boolean', 'default' => false],
'liveDataAnim' => ['type' => 'boolean', 'default' => false],
'healthcareAnim' => ['type' => 'boolean', 'default' => false],
'transitAnim' => ['type' => 'boolean', 'default' => false],
'fitnessAnim' => ['type' => 'boolean', 'default' => false],
'galleryIds' => ['type' => 'array', 'default' => [], 'items' => ['type' => 'number']],
],
'supports' => $block_supports,
@@ -2062,6 +2071,355 @@ function oribi_render_platform_row($a)
$visual_html = $bd;
$visual_cls = 'platform-visual has-branded';
}
elseif (!empty($a['retailAnim'])) {
/* ── Retail Sign: TV cycling 3 promo slides ── */
$ra = '<div class="retail-stage" aria-hidden="true">';
$ra .= '<div class="retail-tv">';
$ra .= '<div class="retail-tv__body">';
$ra .= '<div class="retail-tv__screen">';
$ra .= '<div class="retail-slides">';
// Slide 1: Flash Sale
$ra .= '<div class="retail-slide retail-slide--sale">';
$ra .= '<div class="retail-promo">';
$ra .= '<div class="retail-promo__eyebrow">Today Only</div>';
$ra .= '<div class="retail-promo__headline">Flash Sale</div>';
$ra .= '<div class="retail-promo__badge">Up to 40% Off</div>';
$ra .= '<div class="retail-promo__items">';
$ra .= '<div class="retail-promo__item"><span class="retail-promo__dot"></span><span class="retail-promo__lbl">Select Apparel</span></div>';
$ra .= '<div class="retail-promo__item"><span class="retail-promo__dot"></span><span class="retail-promo__lbl">Footwear Range</span></div>';
$ra .= '<div class="retail-promo__item"><span class="retail-promo__dot"></span><span class="retail-promo__lbl">Accessories</span></div>';
$ra .= '</div>';
$ra .= '<div class="retail-promo__cta">In-Store Only</div>';
$ra .= '</div>';
$ra .= '</div>';
// Slide 2: New Arrivals
$ra .= '<div class="retail-slide retail-slide--new">';
$ra .= '<div class="retail-promo">';
$ra .= '<div class="retail-promo__eyebrow">Just Landed</div>';
$ra .= '<div class="retail-promo__headline">New In Store</div>';
$ra .= '<div class="retail-promo__grid">';
$ra .= '<div class="retail-promo__swatch retail-promo__swatch--a"></div>';
$ra .= '<div class="retail-promo__swatch retail-promo__swatch--b"></div>';
$ra .= '<div class="retail-promo__swatch retail-promo__swatch--c"></div>';
$ra .= '<div class="retail-promo__swatch retail-promo__swatch--d"></div>';
$ra .= '</div>';
$ra .= '<div class="retail-promo__sub">Spring/Summer Collection</div>';
$ra .= '</div>';
$ra .= '</div>';
// Slide 3: Loyalty Rewards
$ra .= '<div class="retail-slide retail-slide--loyalty">';
$ra .= '<div class="retail-promo">';
$ra .= '<div class="retail-promo__eyebrow">Member Exclusive</div>';
$ra .= '<div class="retail-promo__headline">Earn Points</div>';
$ra .= '<div class="retail-promo__points">';
$ra .= '<div class="retail-promo__pts-val">2x</div>';
$ra .= '<div class="retail-promo__pts-lbl">Points This Weekend</div>';
$ra .= '</div>';
$ra .= '<div class="retail-promo__bar"><div class="retail-promo__bar-fill"></div></div>';
$ra .= '<div class="retail-promo__sub">Scan your card at checkout</div>';
$ra .= '</div>';
$ra .= '</div>';
$ra .= '</div>'; // retail-slides
$ra .= '</div>'; // retail-tv__screen
$ra .= '</div>'; // retail-tv__body
$ra .= '<div class="retail-tv__feet"><div class="retail-tv__foot"></div><div class="retail-tv__foot"></div></div>';
$ra .= '</div>'; // retail-tv
$ra .= '</div>'; // retail-stage
$visual_html = $ra;
$visual_cls = 'platform-visual has-retail';
}
elseif (!empty($a['corporateAnim'])) {
/* ── Corporate: Meeting room door panel ── */
$ca = '<div class="corp-stage" aria-hidden="true">';
$ca .= '<div class="corp-panel">';
$ca .= '<div class="corp-panel__header">';
$ca .= '<div class="corp-panel__room">Boardroom A</div>';
$ca .= '<div class="corp-panel__status corp-panel__status--busy"><span class="corp-panel__dot"></span>In Use</div>';
$ca .= '</div>';
$ca .= '<div class="corp-panel__meeting">';
$ca .= '<div class="corp-panel__meeting-name">Q2 Strategy Review</div>';
$ca .= '<div class="corp-panel__meeting-time">10:00 – 11:30</div>';
$ca .= '<div class="corp-panel__organiser">Sarah Mitchell</div>';
$ca .= '</div>';
$ca .= '<div class="corp-panel__timeline">';
$ca .= '<div class="corp-panel__tl-track"><div class="corp-panel__tl-fill"></div><div class="corp-panel__tl-now"></div></div>';
$ca .= '<div class="corp-panel__tl-labels"><span>09:00</span><span>12:00</span><span>17:00</span></div>';
$ca .= '</div>';
$ca .= '<div class="corp-panel__next">';
$ca .= '<div class="corp-panel__next-lbl">Next</div>';
$ca .= '<div class="corp-panel__next-name">Design Sprint Planning</div>';
$ca .= '<div class="corp-panel__next-time">13:00 – 14:00</div>';
$ca .= '</div>';
$ca .= '<div class="corp-panel__teams"><div class="corp-panel__teams-icon"></div><span>Teams Meeting Active</span></div>';
$ca .= '</div>'; // corp-panel
$ca .= '</div>'; // corp-stage
$visual_html = $ca;
$visual_cls = 'platform-visual has-corporate';
}
elseif (!empty($a['educationAnim'])) {
/* ── Education: Campus schedule board ── */
$ea = '<div class="edu-stage" aria-hidden="true">';
$ea .= '<div class="edu-board">';
$ea .= '<div class="edu-board__header">';
$ea .= '<div class="edu-board__title">Today\'s Timetable</div>';
$ea .= '<div class="edu-board__date">Monday, 16 Mar</div>';
$ea .= '</div>';
$ea .= '<div class="edu-board__rows">';
$rows = [
['time' => '09:00', 'subject' => 'Advanced Mathematics', 'room' => 'B204', 'state' => 'done'],
['time' => '10:30', 'subject' => 'Physics Lab', 'room' => 'Lab 3', 'state' => 'now'],
['time' => '13:00', 'subject' => 'English Literature', 'room' => 'A101', 'state' => ''],
['time' => '14:30', 'subject' => 'Computer Science', 'room' => 'IT Suite', 'state' => ''],
['time' => '16:00', 'subject' => 'Art & Design', 'room' => 'Studio 1', 'state' => ''],
];
foreach ($rows as $row) {
$state_cls = $row['state'] ? ' edu-row--' . $row['state'] : '';
$ea .= '<div class="edu-board__row' . $state_cls . '">';
$ea .= '<span class="edu-row__time">' . esc_html($row['time']) . '</span>';
$ea .= '<span class="edu-row__subject">' . esc_html($row['subject']) . '</span>';
$ea .= '<span class="edu-row__room">' . esc_html($row['room']) . '</span>';
if ($row['state'] === 'now') {
$ea .= '<span class="edu-row__badge">Now</span>';
}
$ea .= '</div>';
}
$ea .= '</div>'; // edu-board__rows
$ea .= '<div class="edu-board__alert">';
$ea .= '<span class="edu-alert__icon">!</span>';
$ea .= '<span class="edu-alert__txt">Fire drill scheduled — 15:45 today</span>';
$ea .= '</div>';
$ea .= '</div>'; // edu-board
$ea .= '</div>'; // edu-stage
$visual_html = $ea;
$visual_cls = 'platform-visual has-education';
}
elseif (!empty($a['outdoorAnim'])) {
/* ── Outdoor Marketplace: wide board cycling 2 slides ── */
$oa = '<div class="outdoor-stage" aria-hidden="true">';
$oa .= '<div class="outdoor-board">';
$oa .= '<div class="outdoor-board__screen">';
$oa .= '<div class="outdoor-slides">';
// Slide 1: Market Info
$oa .= '<div class="outdoor-slide outdoor-slide--info">';
$oa .= '<div class="outdoor-info">';
$oa .= '<div class="outdoor-info__header">';
$oa .= '<div class="outdoor-info__name">Riverside Market</div>';
$oa .= '<div class="outdoor-info__weather"><span class="outdoor-info__temp">18°</span><span class="outdoor-info__cond">Mostly Sunny</span></div>';
$oa .= '</div>';
$oa .= '<div class="outdoor-info__details">';
$oa .= '<div class="outdoor-info__row"><span class="outdoor-info__icon outdoor-info__icon--clock"></span><span>Open 8am – 3pm</span></div>';
$oa .= '<div class="outdoor-info__row"><span class="outdoor-info__icon outdoor-info__icon--pin"></span><span>Victoria Embankment</span></div>';
$oa .= '<div class="outdoor-info__row"><span class="outdoor-info__icon outdoor-info__icon--stall"></span><span>42 Stallholders Today</span></div>';
$oa .= '</div>';
$oa .= '</div>';
$oa .= '</div>';
// Slide 2: Stall Directory
$oa .= '<div class="outdoor-slide outdoor-slide--directory">';
$oa .= '<div class="outdoor-dir">';
$oa .= '<div class="outdoor-dir__title">Stall Directory</div>';
$oa .= '<div class="outdoor-dir__grid">';
$stalls = [['A1–A5', 'Produce & Veg'], ['B1–B4', 'Artisan Bakery'], ['C1–C6', 'Street Food'], ['D1–D3', 'Crafts & Gifts']];
foreach ($stalls as $s) {
$oa .= '<div class="outdoor-dir__cell"><span class="outdoor-dir__zone">' . esc_html($s[0]) . '</span><span class="outdoor-dir__cat">' . esc_html($s[1]) . '</span></div>';
}
$oa .= '</div>';
$oa .= '</div>';
$oa .= '</div>';
$oa .= '</div>'; // outdoor-slides
$oa .= '</div>'; // outdoor-board__screen
$oa .= '<div class="outdoor-board__bezel"></div>';
$oa .= '</div>'; // outdoor-board
$oa .= '</div>'; // outdoor-stage
$visual_html = $oa;
$visual_cls = 'platform-visual has-outdoor';
}
elseif (!empty($a['liveDataAnim'])) {
/* ── Live Data: Operations centre KPI board ── */
$la = '<div class="ld-stage" aria-hidden="true">';
$la .= '<div class="ld-board">';
$la .= '<div class="ld-board__header">';
$la .= '<div class="ld-board__title">Operations Dashboard</div>';
$la .= '<div class="ld-board__live"><span class="ld-board__live-dot"></span>LIVE</div>';
$la .= '</div>';
$la .= '<div class="ld-kpis">';
$kpis = [
['id' => 'ld-orders', 'label' => 'Orders / hr', 'value' => '1,847', 'trend' => 'up'],
['id' => 'ld-uptime', 'label' => 'Uptime', 'value' => '99.97%', 'trend' => 'up'],
['id' => 'ld-alerts', 'label' => 'Active Alerts', 'value' => '3', 'trend' => 'down'],
['id' => 'ld-latency', 'label' => 'Avg Latency', 'value' => '42ms', 'trend' => 'neutral'],
];
foreach ($kpis as $k) {
$la .= '<div class="ld-kpi ld-kpi--' . esc_attr($k['trend']) . '">';
$la .= '<div class="ld-kpi__label">' . esc_html($k['label']) . '</div>';
$la .= '<div class="ld-kpi__value" id="' . esc_attr($k['id']) . '">' . esc_html($k['value']) . '</div>';
$la .= '<div class="ld-kpi__trend"></div>';
$la .= '</div>';
}
$la .= '</div>'; // ld-kpis
$la .= '<div class="ld-chart">';
$la .= '<svg class="ld-sparkline" viewBox="0 0 260 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">';
$la .= '<defs><linearGradient id="ld-grad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4CAF50" stop-opacity=".35"/><stop offset="100%" stop-color="#4CAF50" stop-opacity="0"/></linearGradient></defs>';
$la .= '<path id="ld-fill-path" d="M0,40 L0,40 L260,40 Z" fill="url(#ld-grad)"/>';
$la .= '<path id="ld-line-path" d="M0,40 L260,40" stroke="#4CAF50" stroke-width="2" fill="none" stroke-linejoin="round"/>';
$la .= '</svg>';
$la .= '<div class="ld-chart__label">Orders / hr — last 60 min</div>';
$la .= '</div>'; // ld-chart
$la .= '<div class="ld-status">';
$services = [
['API Gateway', 'ok'],
['Payment Proc.', 'ok'],
['Warehouse Feed', 'warn'],
['CDN', 'ok'],
];
foreach ($services as $svc) {
$la .= '<div class="ld-svc ld-svc--' . esc_attr($svc[1]) . '"><span class="ld-svc__dot"></span><span class="ld-svc__name">' . esc_html($svc[0]) . '</span></div>';
}
$la .= '</div>'; // ld-status
$la .= '</div>'; // ld-board
$la .= '</div>'; // ld-stage
$visual_html = $la;
$visual_cls = 'platform-visual has-live-data';
}
elseif (!empty($a['healthcareAnim'])) {
/* ── Healthcare: Queue management display ── */
$hca = '<div class="hc-stage" aria-hidden="true">';
$hca .= '<div class="hc-board">';
$hca .= '<div class="hc-board__header">';
$hca .= '<div class="hc-board__logo"></div>';
$hca .= '<div class="hc-board__title">Patient Queue</div>';
$hca .= '</div>';
$hca .= '<div class="hc-now">';
$hca .= '<div class="hc-now__lbl">Now Serving</div>';
$hca .= '<div class="hc-now__number hc-ticker">A042</div>';
$hca .= '<div class="hc-now__counter">Counter 3 — Dr. Patel</div>';
$hca .= '</div>';
$hca .= '<div class="hc-counters">';
$counters = [
['id' => 'C1', 'doctor' => 'Dr. Patel', 'ticket' => 'A042', 'wait' => '0 min', 'state' => 'active'],
['id' => 'C2', 'doctor' => 'Dr. Okonkwo', 'ticket' => 'B018', 'wait' => '4 min', 'state' => 'active'],
['id' => 'C3', 'doctor' => 'Dr. Williams', 'ticket' => 'A041', 'wait' => '8 min', 'state' => 'active'],
['id' => 'C4', 'doctor' => 'Dr. Nguyen', 'ticket' => '—', 'wait' => 'Closed', 'state' => 'closed'],
];
foreach ($counters as $c) {
$hca .= '<div class="hc-counter hc-counter--' . esc_attr($c['state']) . '">';
$hca .= '<span class="hc-counter__id">' . esc_html($c['id']) . '</span>';
$hca .= '<span class="hc-counter__doctor">' . esc_html($c['doctor']) . '</span>';
$hca .= '<span class="hc-counter__ticket">' . esc_html($c['ticket']) . '</span>';
$hca .= '<span class="hc-counter__wait">' . esc_html($c['wait']) . '</span>';
$hca .= '</div>';
}
$hca .= '</div>'; // hc-counters
$hca .= '<div class="hc-board__footer">Take a seat — your number will be called</div>';
$hca .= '</div>'; // hc-board
$hca .= '</div>'; // hc-stage
$visual_html = $hca;
$visual_cls = 'platform-visual has-healthcare';
}
elseif (!empty($a['transitAnim'])) {
/* ── Transit: Split-flap departure board ── */
$ta = '<div class="transit-stage" aria-hidden="true">';
$ta .= '<div class="transit-board">';
$ta .= '<div class="transit-board__header">';
$ta .= '<div class="transit-board__title">Departures</div>';
$ta .= '<div class="transit-board__clock" id="transit-clock">--:--</div>';
$ta .= '</div>';
$ta .= '<div class="transit-board__cols">';
$ta .= '<span class="transit-col-hd">Time</span><span class="transit-col-hd">Destination</span><span class="transit-col-hd">Platform</span><span class="transit-col-hd">Status</span>';
$ta .= '</div>';
$ta .= '<div class="transit-rows" id="transit-rows">';
$departures = [
['time' => '10:14', 'destination' => 'London Victoria', 'platform' => '2', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '10:22', 'destination' => 'Brighton', 'platform' => '4', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '10:31', 'destination' => 'Gatwick Airport', 'platform' => '1', 'status' => 'Delayed', 'status_cls' => 'delayed'],
['time' => '10:45', 'destination' => 'London Bridge', 'platform' => '3', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '11:02', 'destination' => 'East Croydon', 'platform' => '2', 'status' => 'On Time', 'status_cls' => 'on-time'],
];
foreach ($departures as $d) {
$ta .= '<div class="transit-row">';
$ta .= '<span class="transit-cell transit-cell--time">' . esc_html($d['time']) . '</span>';
$ta .= '<span class="transit-cell transit-cell--dest">';
// Each character gets a flap span for the CSS flip animation
$dest = esc_html($d['destination']);
foreach (str_split($dest) as $ch) {
$ta .= '<span class="transit-flap">' . ($ch === ' ' ? '&nbsp;' : htmlspecialchars($ch)) . '</span>';
}
$ta .= '</span>';
$ta .= '<span class="transit-cell transit-cell--plat">' . esc_html($d['platform']) . '</span>';
$ta .= '<span class="transit-cell transit-cell--status transit-status--' . esc_attr($d['status_cls']) . '">' . esc_html($d['status']) . '</span>';
$ta .= '</div>';
}
$ta .= '</div>'; // transit-rows
$ta .= '</div>'; // transit-board
$ta .= '</div>'; // transit-stage
$visual_html = $ta;
$visual_cls = 'platform-visual has-transit';
}
elseif (!empty($a['fitnessAnim'])) {
/* ── Fitness: Class schedule with live capacity bar ── */
$fa = '<div class="fit-stage" aria-hidden="true">';
$fa .= '<div class="fit-board">';
$fa .= '<div class="fit-board__header">';
$fa .= '<div class="fit-board__logo"></div>';
$fa .= '<div class="fit-board__title">Today\'s Classes</div>';
$fa .= '</div>';
$fa .= '<div class="fit-now">';
$fa .= '<div class="fit-now__badge">LIVE NOW</div>';
$fa .= '<div class="fit-now__name">HIIT Circuit</div>';
$fa .= '<div class="fit-now__detail">Studio 1 &nbsp;·&nbsp; Coach: Emma T &nbsp;·&nbsp; Ends 10:45</div>';
$fa .= '<div class="fit-now__capacity">';
$fa .= '<span class="fit-cap__lbl">Capacity</span>';
$fa .= '<div class="fit-cap__track"><div class="fit-cap__fill"></div></div>';
$fa .= '<span class="fit-cap__val">24/30</span>';
$fa .= '</div>';
$fa .= '</div>';
$fa .= '<div class="fit-upcoming">';
$classes = [
['time' => '11:00', 'name' => 'Yoga Flow', 'coach' => 'Sarah K', 'spaces' => 6],
['time' => '12:15', 'name' => 'Spin & Burn', 'coach' => 'James R', 'spaces' => 2],
['time' => '13:30', 'name' => 'Pilates Core', 'coach' => 'Lisa M', 'spaces' => 12],
];
foreach ($classes as $cls) {
$full_cls = $cls['spaces'] <= 3 ? ' fit-class--filling' : '';
$fa .= '<div class="fit-class' . $full_cls . '">';
$fa .= '<span class="fit-class__time">' . esc_html($cls['time']) . '</span>';
$fa .= '<span class="fit-class__name">' . esc_html($cls['name']) . '</span>';
$fa .= '<span class="fit-class__coach">' . esc_html($cls['coach']) . '</span>';
$fa .= '<span class="fit-class__spaces">' . esc_html($cls['spaces']) . ' spaces</span>';
$fa .= '</div>';
}
$fa .= '</div>'; // fit-upcoming
$fa .= '</div>'; // fit-board
$fa .= '</div>'; // fit-stage
$visual_html = $fa;
$visual_cls = 'platform-visual has-fitness';
}
elseif (!empty($a['hospitalityAnim'])) {
/* ── Hospitality Sign: Rotating Menu (Breakfast, Lunch, Dinner) ── */
$ha = '<div class="hosp-stage" aria-hidden="true">';