fa6dce039b
- 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
292 lines
9.8 KiB
JavaScript
292 lines
9.8 KiB
JavaScript
/**
|
|
* Solutions Page Animators
|
|
* Handles the two JS-driven animations on the Solutions page:
|
|
* 1. Live Data board — ticking KPI values + animated sparkline
|
|
* 2. Transit board — live clock, split-flap flip characters, row cycling
|
|
*
|
|
* Both respect prefers-reduced-motion and pause via IntersectionObserver.
|
|
* Mirrors the patterns and conventions of dashboard-animator.js.
|
|
*/
|
|
|
|
/* ── 1. Live Data KPI Animator ─────────────────────────────────────────── */
|
|
(function () {
|
|
'use strict';
|
|
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
|
|
|
/* KPI definitions: label, base value, unit, variance range, display format */
|
|
var KPIS = [
|
|
{ id: 'ld-orders', base: 1847, range: 120, fmt: function (v) { return v.toLocaleString(); } },
|
|
{ id: 'ld-uptime', base: 9997, range: 2, fmt: function (v) { return (v / 100).toFixed(2) + '%'; } },
|
|
{ id: 'ld-alerts', base: 3, range: 2, fmt: function (v) { return Math.max(0, v).toString(); } },
|
|
{ id: 'ld-latency', base: 42, range: 18, fmt: function (v) { return Math.max(8, v) + 'ms'; } },
|
|
];
|
|
|
|
/* Sparkline path parameters */
|
|
var LINE_PTS = 16;
|
|
var LINE_W = 260;
|
|
var LINE_H = 60;
|
|
var SPEED = 0.0008;
|
|
|
|
function wave(t, off) {
|
|
return Math.max(0, Math.min(1,
|
|
0.5 +
|
|
Math.sin(t + off) * 0.28 +
|
|
Math.sin(t * 2.1 + off * 1.7) * 0.12
|
|
));
|
|
}
|
|
|
|
function makeState(stage) {
|
|
var kpiEls = [];
|
|
for (var i = 0; i < KPIS.length; i++) {
|
|
kpiEls.push(stage.querySelector('#' + KPIS[i].id));
|
|
}
|
|
return {
|
|
stage: stage,
|
|
kpiEls: kpiEls,
|
|
linePath: stage.querySelector('#ld-line-path'),
|
|
fillPath: stage.querySelector('#ld-fill-path'),
|
|
phase: Math.random() * Math.PI * 2,
|
|
ticker: 0, /* frame counter — update KPI text every N frames */
|
|
paused: false,
|
|
};
|
|
}
|
|
|
|
function updateKpis(st) {
|
|
for (var i = 0; i < KPIS.length; i++) {
|
|
var el = st.kpiEls[i];
|
|
if (!el) continue;
|
|
var k = KPIS[i];
|
|
var raw = Math.round(k.base + wave(st.phase, i * 1.5) * k.range - k.range / 2);
|
|
el.textContent = k.fmt(raw);
|
|
}
|
|
}
|
|
|
|
function updateSparkline(st) {
|
|
if (!st.linePath) return;
|
|
var pts = [];
|
|
for (var i = 0; i < LINE_PTS; i++) {
|
|
var x = (i / (LINE_PTS - 1)) * LINE_W;
|
|
var y = 8 + (1 - wave(st.phase * 0.7, i * 0.8)) * (LINE_H - 16);
|
|
pts.push(x.toFixed(1) + ',' + y.toFixed(1));
|
|
}
|
|
var d = 'M' + pts.join(' L');
|
|
st.linePath.setAttribute('d', d);
|
|
if (st.fillPath) {
|
|
st.fillPath.setAttribute('d', d + ' L' + LINE_W + ',' + LINE_H + ' L0,' + LINE_H + ' Z');
|
|
}
|
|
}
|
|
|
|
function tick(st) {
|
|
if (!st.paused) {
|
|
st.phase += SPEED * 16;
|
|
st.ticker++;
|
|
/* Update KPI text every 12 frames (~5/sec at 60fps) for legibility */
|
|
if (st.ticker >= 12) {
|
|
st.ticker = 0;
|
|
updateKpis(st);
|
|
}
|
|
updateSparkline(st);
|
|
}
|
|
requestAnimationFrame(function () { tick(st); });
|
|
}
|
|
|
|
function observe(st) {
|
|
if (!('IntersectionObserver' in window)) return;
|
|
new IntersectionObserver(function (entries) {
|
|
for (var i = 0; i < entries.length; i++) {
|
|
st.paused = !entries[i].isIntersecting;
|
|
}
|
|
}, { rootMargin: '200px', threshold: 0.05 }).observe(st.stage);
|
|
}
|
|
|
|
function boot() {
|
|
var stages = document.querySelectorAll('.ld-stage');
|
|
if (!stages.length) return;
|
|
for (var i = 0; i < stages.length; i++) {
|
|
if (stages[i]._ldAnim) continue;
|
|
var st = makeState(stages[i]);
|
|
stages[i]._ldAnim = st;
|
|
observe(st);
|
|
tick(st);
|
|
}
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', boot);
|
|
} else {
|
|
boot();
|
|
}
|
|
})();
|
|
|
|
/* ── 2. Transit Departure Board Animator ───────────────────────────────── */
|
|
(function () {
|
|
'use strict';
|
|
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
/* Still run the clock in reduced-motion mode */
|
|
startClocks();
|
|
return;
|
|
}
|
|
|
|
/* Departure data sets — cycle between these every CYCLE_MS */
|
|
var CYCLE_MS = 8000;
|
|
|
|
var DATA_SETS = [
|
|
[
|
|
{ time: '10:14', dest: 'London Victoria', plat: '2', status: 'On Time', cls: 'on-time' },
|
|
{ time: '10:22', dest: 'Brighton', plat: '4', status: 'On Time', cls: 'on-time' },
|
|
{ time: '10:31', dest: 'Gatwick Airport', plat: '1', status: 'Delayed', cls: 'delayed' },
|
|
{ time: '10:45', dest: 'London Bridge', plat: '3', status: 'On Time', cls: 'on-time' },
|
|
{ time: '11:02', dest: 'East Croydon', plat: '2', status: 'On Time', cls: 'on-time' },
|
|
],
|
|
[
|
|
{ time: '10:22', dest: 'Brighton', plat: '4', status: 'On Time', cls: 'on-time' },
|
|
{ time: '10:31', dest: 'Gatwick Airport', plat: '1', status: 'Delayed', cls: 'delayed' },
|
|
{ time: '10:45', dest: 'London Bridge', plat: '3', status: 'On Time', cls: 'on-time' },
|
|
{ time: '11:02', dest: 'East Croydon', plat: '2', status: 'On Time', cls: 'on-time' },
|
|
{ time: '11:14', dest: 'London Victoria', plat: '2', status: 'On Time', cls: 'on-time' },
|
|
],
|
|
[
|
|
{ time: '10:31', dest: 'Gatwick Airport', plat: '1', status: 'Delayed', cls: 'delayed' },
|
|
{ time: '10:45', dest: 'London Bridge', plat: '3', status: 'On Time', cls: 'on-time' },
|
|
{ time: '11:02', dest: 'East Croydon', plat: '2', status: 'On Time', cls: 'on-time' },
|
|
{ time: '11:14', dest: 'London Victoria', plat: '2', status: 'On Time', cls: 'on-time' },
|
|
{ time: '11:28', dest: 'Three Bridges', plat: '4', status: 'Cancelled', cls: 'cancelled'},
|
|
],
|
|
];
|
|
|
|
/* ── Clock ── */
|
|
function startClocks() {
|
|
var clocks = document.querySelectorAll('#transit-clock');
|
|
if (!clocks.length) return;
|
|
|
|
function updateClock() {
|
|
var now = new Date();
|
|
var hh = String(now.getHours()).padStart(2, '0');
|
|
var mm = String(now.getMinutes()).padStart(2, '0');
|
|
var ss = String(now.getSeconds()).padStart(2, '0');
|
|
var str = hh + ':' + mm + ':' + ss;
|
|
for (var i = 0; i < clocks.length; i++) clocks[i].textContent = str;
|
|
}
|
|
updateClock();
|
|
setInterval(updateClock, 1000);
|
|
}
|
|
|
|
/* ── Flip helpers ── */
|
|
function flipCells(rowEl, newDest) {
|
|
var flapEls = rowEl.querySelectorAll('.transit-flap');
|
|
var chars = newDest.split('');
|
|
|
|
/* Extend or shrink the flap container to match new length */
|
|
var destCell = rowEl.querySelector('.transit-cell--dest');
|
|
if (!destCell) return;
|
|
|
|
/* Animate existing flaps, create/remove extras */
|
|
var i;
|
|
for (i = 0; i < chars.length; i++) {
|
|
var ch = chars[i] === ' ' ? '\u00a0' : chars[i];
|
|
if (i < flapEls.length) {
|
|
/* Animate existing */
|
|
(function (el, character) {
|
|
el.classList.add('is-flipping');
|
|
setTimeout(function () {
|
|
el.textContent = character;
|
|
el.classList.remove('is-flipping');
|
|
}, 125);
|
|
})(flapEls[i], ch);
|
|
} else {
|
|
/* Append new flap */
|
|
var newFlap = document.createElement('span');
|
|
newFlap.className = 'transit-flap is-flipping';
|
|
newFlap.textContent = ch;
|
|
destCell.appendChild(newFlap);
|
|
setTimeout(function (el) {
|
|
el.classList.remove('is-flipping');
|
|
}, 125, newFlap);
|
|
}
|
|
}
|
|
/* Remove surplus flaps */
|
|
for (i = chars.length; i < flapEls.length; i++) {
|
|
(function (el) {
|
|
el.classList.add('is-flipping');
|
|
setTimeout(function () { el.parentNode && el.parentNode.removeChild(el); }, 250);
|
|
})(flapEls[i]);
|
|
}
|
|
}
|
|
|
|
function applyRow(rowEl, departure) {
|
|
var timeEl = rowEl.querySelector('.transit-cell--time');
|
|
var platEl = rowEl.querySelector('.transit-cell--plat');
|
|
var statusEl = rowEl.querySelector('.transit-cell--status');
|
|
|
|
if (timeEl) timeEl.textContent = departure.time;
|
|
if (platEl) platEl.textContent = departure.platform || departure.plat;
|
|
if (statusEl) {
|
|
statusEl.textContent = departure.status;
|
|
statusEl.className = 'transit-cell transit-cell--status transit-status--' + departure.cls;
|
|
}
|
|
flipCells(rowEl, departure.dest);
|
|
}
|
|
|
|
function cycleBoard(stage, dataIdx) {
|
|
var rows = stage.querySelectorAll('.transit-row');
|
|
var set = DATA_SETS[dataIdx % DATA_SETS.length];
|
|
|
|
for (var i = 0; i < Math.min(rows.length, set.length); i++) {
|
|
/* Stagger each row by 180ms */
|
|
(function (row, dep) {
|
|
setTimeout(function () { applyRow(row, dep); }, i * 180);
|
|
})(rows[i], set[i]);
|
|
}
|
|
}
|
|
|
|
function initBoard(stage) {
|
|
var state = { idx: 0, timer: null, paused: false };
|
|
|
|
function advance() {
|
|
if (state.paused) return;
|
|
state.idx++;
|
|
cycleBoard(stage, state.idx);
|
|
}
|
|
|
|
function startTimer() {
|
|
if (state.timer) return;
|
|
state.timer = setInterval(advance, CYCLE_MS);
|
|
}
|
|
|
|
function stopTimer() {
|
|
clearInterval(state.timer);
|
|
state.timer = null;
|
|
}
|
|
|
|
if ('IntersectionObserver' in window) {
|
|
new IntersectionObserver(function (entries) {
|
|
entries.forEach(function (e) {
|
|
state.paused = !e.isIntersecting;
|
|
e.isIntersecting ? startTimer() : stopTimer();
|
|
});
|
|
}, { rootMargin: '200px', threshold: 0.05 }).observe(stage);
|
|
}
|
|
|
|
startTimer();
|
|
}
|
|
|
|
function boot() {
|
|
startClocks();
|
|
var stages = document.querySelectorAll('.transit-stage');
|
|
if (!stages.length) return;
|
|
for (var i = 0; i < stages.length; i++) {
|
|
if (stages[i]._transitAnim) continue;
|
|
stages[i]._transitAnim = true;
|
|
initBoard(stages[i]);
|
|
}
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', boot);
|
|
} else {
|
|
boot();
|
|
}
|
|
})();
|