feat: Add animations for video motion, branded layouts, and digital menu boards
This commit is contained in:
Matt Batchelder
@@ -605,6 +605,9 @@ add_action('init', function () {
|
||||
'waitingRoomAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'multiZoneAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'membershipAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'videoMotionAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'brandLayoutAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'menuBoardAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'galleryIds' => ['type' => 'array', 'default' => [], 'items' => ['type' => 'number']],
|
||||
],
|
||||
'supports' => $block_supports,
|
||||
@@ -2849,6 +2852,180 @@ function oribi_render_platform_row($a)
|
||||
$visual_html = $ha;
|
||||
$visual_cls = 'platform-visual has-hospitality';
|
||||
}
|
||||
elseif (!empty($a['videoMotionAnim'])) {
|
||||
/* ── Video & Motion Graphics: TV with kinetic text, promo, loop preview ── */
|
||||
$vm = '<div class="vidmo-stage" aria-hidden="true">';
|
||||
$vm .= '<div class="vidmo-tv">';
|
||||
$vm .= '<div class="vidmo-tv__body">';
|
||||
$vm .= '<div class="vidmo-tv__screen">';
|
||||
$vm .= '<div class="vidmo-slides">';
|
||||
|
||||
/* Slide 1: Kinetic typography */
|
||||
$vm .= '<div class="vidmo-slide vidmo-slide--kinetic">';
|
||||
$vm .= '<div class="vidmo-kinetic">';
|
||||
$vm .= '<span class="vidmo-kinetic__word vidmo-kinetic__word--1">Engage</span>';
|
||||
$vm .= '<span class="vidmo-kinetic__word vidmo-kinetic__word--2">Inform</span>';
|
||||
$vm .= '<span class="vidmo-kinetic__word vidmo-kinetic__word--3">Convert</span>';
|
||||
$vm .= '</div>';
|
||||
$vm .= '</div>';
|
||||
|
||||
/* Slide 2: Promo graphic */
|
||||
$vm .= '<div class="vidmo-slide vidmo-slide--promo">';
|
||||
$vm .= '<div class="vidmo-promo">';
|
||||
$vm .= '<div class="vidmo-promo__bg"></div>';
|
||||
$vm .= '<div class="vidmo-promo__label">Summer Campaign</div>';
|
||||
$vm .= '<div class="vidmo-promo__title">Your Brand, Animated</div>';
|
||||
$vm .= '<div class="vidmo-promo__sub">15s promotional loop</div>';
|
||||
$vm .= '</div>';
|
||||
$vm .= '</div>';
|
||||
|
||||
/* Slide 3: Loop format */
|
||||
$vm .= '<div class="vidmo-slide vidmo-slide--loop">';
|
||||
$vm .= '<div class="vidmo-loop">';
|
||||
$vm .= '<div class="vidmo-loop__icon">▶</div>';
|
||||
$vm .= '<div class="vidmo-loop__text">Screen-Ready Formats</div>';
|
||||
$vm .= '<div class="vidmo-loop__formats">';
|
||||
$vm .= '<span class="vidmo-loop__fmt">MP4</span>';
|
||||
$vm .= '<span class="vidmo-loop__fmt">WEBM</span>';
|
||||
$vm .= '<span class="vidmo-loop__fmt">GIF</span>';
|
||||
$vm .= '</div>';
|
||||
$vm .= '</div>';
|
||||
$vm .= '</div>';
|
||||
|
||||
$vm .= '</div>'; // vidmo-slides
|
||||
$vm .= '<div class="vidmo-progress"><div class="vidmo-progress__bar"></div></div>';
|
||||
$vm .= '</div>'; // vidmo-tv__screen
|
||||
$vm .= '</div>'; // vidmo-tv__body
|
||||
$vm .= '<div class="vidmo-tv__feet"><div class="vidmo-tv__foot"></div><div class="vidmo-tv__foot"></div></div>';
|
||||
$vm .= '</div>'; // vidmo-tv
|
||||
$vm .= '</div>'; // vidmo-stage
|
||||
|
||||
$visual_html = $vm;
|
||||
$visual_cls = 'platform-visual has-video-motion';
|
||||
}
|
||||
elseif (!empty($a['brandLayoutAnim'])) {
|
||||
/* ── Branded Layout Design: template builder with brand guide ── */
|
||||
$bl = '<div class="blay-stage" aria-hidden="true">';
|
||||
$bl .= '<div class="blay-editor">';
|
||||
|
||||
/* Toolbar */
|
||||
$bl .= '<div class="blay-toolbar">';
|
||||
$bl .= '<div class="blay-toolbar__dots">';
|
||||
$bl .= '<span class="blay-toolbar__dot blay-toolbar__dot--r"></span>';
|
||||
$bl .= '<span class="blay-toolbar__dot blay-toolbar__dot--y"></span>';
|
||||
$bl .= '<span class="blay-toolbar__dot blay-toolbar__dot--g"></span>';
|
||||
$bl .= '</div>';
|
||||
$bl .= '<div class="blay-toolbar__title">Layout Editor</div>';
|
||||
$bl .= '</div>';
|
||||
|
||||
/* Body: canvas + panel */
|
||||
$bl .= '<div class="blay-body">';
|
||||
|
||||
/* Canvas */
|
||||
$bl .= '<div class="blay-canvas">';
|
||||
$bl .= '<div class="blay-preview">';
|
||||
$bl .= '<div class="blay-el blay-el--logo"></div>';
|
||||
$bl .= '<div class="blay-el blay-el--hero"></div>';
|
||||
$bl .= '<div class="blay-el blay-el--headline"></div>';
|
||||
$bl .= '<div class="blay-el blay-el--body"></div>';
|
||||
$bl .= '<div class="blay-el blay-el--body2"></div>';
|
||||
$bl .= '<div class="blay-el blay-el--cta"></div>';
|
||||
$bl .= '<div class="blay-el blay-el--accent"></div>';
|
||||
$bl .= '</div>';
|
||||
$bl .= '</div>';
|
||||
|
||||
/* Brand guide panel */
|
||||
$bl .= '<div class="blay-panel">';
|
||||
$bl .= '<div class="blay-panel__title">Brand Guide</div>';
|
||||
$bl .= '<div class="blay-colors">';
|
||||
$bl .= '<div class="blay-color blay-color--1"></div>';
|
||||
$bl .= '<div class="blay-color blay-color--2"></div>';
|
||||
$bl .= '<div class="blay-color blay-color--3"></div>';
|
||||
$bl .= '<div class="blay-color blay-color--4"></div>';
|
||||
$bl .= '</div>';
|
||||
$bl .= '<div class="blay-fonts">';
|
||||
$bl .= '<div class="blay-font"><span class="blay-font__label">Heading</span><span class="blay-font__sample">Aa</span></div>';
|
||||
$bl .= '<div class="blay-font"><span class="blay-font__label">Body</span><span class="blay-font__sample blay-font__sample--body">Aa Bb Cc</span></div>';
|
||||
$bl .= '</div>';
|
||||
$bl .= '<div class="blay-spacing">';
|
||||
$bl .= '<div class="blay-spacing__label">Spacing</div>';
|
||||
$bl .= '<div class="blay-spacing__bars">';
|
||||
$bl .= '<div class="blay-spacing__bar blay-spacing__bar--sm"></div>';
|
||||
$bl .= '<div class="blay-spacing__bar blay-spacing__bar--md"></div>';
|
||||
$bl .= '<div class="blay-spacing__bar blay-spacing__bar--lg"></div>';
|
||||
$bl .= '<div class="blay-spacing__bar blay-spacing__bar--xl"></div>';
|
||||
$bl .= '</div>';
|
||||
$bl .= '</div>';
|
||||
$bl .= '</div>';
|
||||
|
||||
$bl .= '</div>'; // blay-body
|
||||
$bl .= '</div>'; // blay-editor
|
||||
$bl .= '</div>'; // blay-stage
|
||||
|
||||
$visual_html = $bl;
|
||||
$visual_cls = 'platform-visual has-brand-layout';
|
||||
}
|
||||
elseif (!empty($a['menuBoardAnim'])) {
|
||||
/* ── Digital Menu Board: TV with rotating menu categories ── */
|
||||
$mb = '<div class="menu-stage" aria-hidden="true">';
|
||||
$mb .= '<div class="menu-tv">';
|
||||
$mb .= '<div class="menu-tv__body">';
|
||||
$mb .= '<div class="menu-tv__screen">';
|
||||
|
||||
/* Live badge */
|
||||
$mb .= '<div class="menu-live"><span class="menu-live__dot"></span><span class="menu-live__text">LIVE</span></div>';
|
||||
|
||||
$mb .= '<div class="menu-slides">';
|
||||
|
||||
/* Slide 1: Mains */
|
||||
$mb .= '<div class="menu-slide menu-slide--mains">';
|
||||
$mb .= '<div class="menu-content">';
|
||||
$mb .= '<div class="menu-content__hd"><span class="menu-content__badge">Lunch</span><span class="menu-content__time">11:30 AM</span></div>';
|
||||
$mb .= '<div class="menu-content__title">Mains</div>';
|
||||
$mb .= '<div class="menu-content__items">';
|
||||
$mb .= '<div class="menu-content__item"><div><div class="menu-content__name">Grilled Chicken</div><div class="menu-content__desc">Herb-crusted, seasonal veg</div></div><div class="menu-content__price">$16.50</div></div>';
|
||||
$mb .= '<div class="menu-content__item"><div><div class="menu-content__name">Wild Salmon</div><div class="menu-content__desc">Pan-seared, lemon butter</div></div><div class="menu-content__price">$22.00</div></div>';
|
||||
$mb .= '<div class="menu-content__item"><div><div class="menu-content__name">Mushroom Risotto</div><div class="menu-content__desc">Truffle oil, parmesan</div></div><div class="menu-content__price">$14.00</div></div>';
|
||||
$mb .= '</div>';
|
||||
$mb .= '</div>';
|
||||
$mb .= '</div>';
|
||||
|
||||
/* Slide 2: Drinks */
|
||||
$mb .= '<div class="menu-slide menu-slide--drinks">';
|
||||
$mb .= '<div class="menu-content">';
|
||||
$mb .= '<div class="menu-content__hd"><span class="menu-content__badge">Drinks</span><span class="menu-content__time">11:30 AM</span></div>';
|
||||
$mb .= '<div class="menu-content__title">Beverages</div>';
|
||||
$mb .= '<div class="menu-content__items">';
|
||||
$mb .= '<div class="menu-content__item"><div><div class="menu-content__name">Flat White</div><div class="menu-content__desc">Double shot, oat option</div></div><div class="menu-content__price">$5.50</div></div>';
|
||||
$mb .= '<div class="menu-content__item"><div><div class="menu-content__name">Fresh Juice</div><div class="menu-content__desc">Orange, apple or green</div></div><div class="menu-content__price">$7.00</div></div>';
|
||||
$mb .= '<div class="menu-content__item"><div><div class="menu-content__name">Sparkling Water</div><div class="menu-content__desc">750ml bottle</div></div><div class="menu-content__price">$4.00</div></div>';
|
||||
$mb .= '</div>';
|
||||
$mb .= '</div>';
|
||||
$mb .= '</div>';
|
||||
|
||||
/* Slide 3: Desserts */
|
||||
$mb .= '<div class="menu-slide menu-slide--dessert">';
|
||||
$mb .= '<div class="menu-content">';
|
||||
$mb .= '<div class="menu-content__hd"><span class="menu-content__badge">Dessert</span><span class="menu-content__time">11:30 AM</span></div>';
|
||||
$mb .= '<div class="menu-content__title">Something Sweet</div>';
|
||||
$mb .= '<div class="menu-content__items">';
|
||||
$mb .= '<div class="menu-content__item"><div><div class="menu-content__name">Chocolate Fondant</div><div class="menu-content__desc">Molten centre, vanilla ice cream</div></div><div class="menu-content__price">$12.00</div></div>';
|
||||
$mb .= '<div class="menu-content__item"><div><div class="menu-content__name">Crème Brûlée</div><div class="menu-content__desc">Classic vanilla, caramelised top</div></div><div class="menu-content__price">$10.00</div></div>';
|
||||
$mb .= '<div class="menu-content__item"><div><div class="menu-content__name">Seasonal Fruit</div><div class="menu-content__desc">Fresh selection, honey drizzle</div></div><div class="menu-content__price">$8.00</div></div>';
|
||||
$mb .= '</div>';
|
||||
$mb .= '</div>';
|
||||
$mb .= '</div>';
|
||||
|
||||
$mb .= '</div>'; // menu-slides
|
||||
$mb .= '</div>'; // menu-tv__screen
|
||||
$mb .= '</div>'; // menu-tv__body
|
||||
$mb .= '<div class="menu-tv__feet"><div class="menu-tv__foot"></div><div class="menu-tv__foot"></div></div>';
|
||||
$mb .= '</div>'; // menu-tv
|
||||
$mb .= '</div>'; // menu-stage
|
||||
|
||||
$visual_html = $mb;
|
||||
$visual_cls = 'platform-visual has-menu-board';
|
||||
}
|
||||
elseif (!empty($a['cameraAnim'])) {
|
||||
$visual_html = oribi_render_camera_animation();
|
||||
$visual_cls = 'platform-visual has-video-editor';
|
||||
|
||||
Reference in New Issue
Block a user