revert c5d5ad33e5
revert Add Use Cases Showcase block with animated circles and descriptions
This commit is contained in:
@@ -1763,6 +1763,7 @@ reg('oribi/hero-animated', {
|
||||
save: function () { return null; }
|
||||
});
|
||||
|
||||
/* ANIMATED PAGE HERO ──────────────────────────────────────────────────── */
|
||||
reg('oribi/page-hero-animated', {
|
||||
title: 'Animated Page Hero',
|
||||
icon: 'flag',
|
||||
@@ -1845,81 +1846,4 @@ reg('oribi/site-footer', {
|
||||
save: function () { return null; }
|
||||
});
|
||||
|
||||
/* USE CASES SHOWCASE ──────────────────────────────────────────────────── */
|
||||
reg('oribi/use-cases', {
|
||||
title: 'Use Cases Showcase',
|
||||
icon: 'grid-view',
|
||||
category: 'oribi',
|
||||
supports: { html: false },
|
||||
attributes: {
|
||||
label: { type: 'string', default: '\u25cf Use Cases' },
|
||||
heading: { type: 'string', default: 'Built for Every Scenario' },
|
||||
lead: { type: 'string', default: 'From menus to meeting-room dashboards, digital signage adapts to your environment.' },
|
||||
case1Title: { type: 'string', default: 'Menu Boards' },
|
||||
case1Desc: { type: 'string', default: 'Showcase food, drinks, and daily specials with dynamic, always-current displays.' },
|
||||
case2Title: { type: 'string', default: 'Event Displays' },
|
||||
case2Desc: { type: 'string', default: 'Promote schedules, speakers, and live countdowns across lobbies and venues.' },
|
||||
case3Title: { type: 'string', default: 'Office Dashboards' },
|
||||
case3Desc: { type: 'string', default: 'Surface KPIs, occupancy data, and team alerts on screens throughout your workspace.' },
|
||||
case4Title: { type: 'string', default: 'Wayfinding' },
|
||||
case4Desc: { type: 'string', default: 'Guide visitors through complex buildings with interactive maps and directional signs.' },
|
||||
},
|
||||
edit: function (props) {
|
||||
var a = props.attributes, s = props.setAttributes;
|
||||
return el(Frag, null,
|
||||
el(IC, null,
|
||||
el(PB, { title: 'Section Header' },
|
||||
el(TC, { label: 'Label', value: a.label, onChange: function(v){s({label:v});} }),
|
||||
el(TC, { label: 'Heading', value: a.heading, onChange: function(v){s({heading:v});} }),
|
||||
el(TA, { label: 'Lead', value: a.lead, onChange: function(v){s({lead:v});} })
|
||||
),
|
||||
el(PB, { title: 'Use Case 1 – Menu Boards', initialOpen: false },
|
||||
el(TC, { label: 'Title', value: a.case1Title, onChange: function(v){s({case1Title:v});} }),
|
||||
el(TA, { label: 'Description', value: a.case1Desc, onChange: function(v){s({case1Desc:v});} })
|
||||
),
|
||||
el(PB, { title: 'Use Case 2 – Events', initialOpen: false },
|
||||
el(TC, { label: 'Title', value: a.case2Title, onChange: function(v){s({case2Title:v});} }),
|
||||
el(TA, { label: 'Description', value: a.case2Desc, onChange: function(v){s({case2Desc:v});} })
|
||||
),
|
||||
el(PB, { title: 'Use Case 3 – Dashboards', initialOpen: false },
|
||||
el(TC, { label: 'Title', value: a.case3Title, onChange: function(v){s({case3Title:v});} }),
|
||||
el(TA, { label: 'Description', value: a.case3Desc, onChange: function(v){s({case3Desc:v});} })
|
||||
),
|
||||
el(PB, { title: 'Use Case 4 – Wayfinding', initialOpen: false },
|
||||
el(TC, { label: 'Title', value: a.case4Title, onChange: function(v){s({case4Title:v});} }),
|
||||
el(TA, { label: 'Description', value: a.case4Desc, onChange: function(v){s({case4Desc:v});} })
|
||||
)
|
||||
),
|
||||
el('section', { className: 'section use-cases-section' },
|
||||
el('div', { className: 'container' },
|
||||
el('div', { className: 'section-header' },
|
||||
a.label ? el('span', { className: 'section-label' }, a.label) : null,
|
||||
a.heading ? el('h2', null, a.heading) : null,
|
||||
a.lead ? el('p', { className: 'lead' }, a.lead) : null
|
||||
),
|
||||
el('div', { className: 'uc-track' },
|
||||
['menu', 'event', 'dashboard', 'wayfinding'].map(function (mod, i) {
|
||||
var n = i + 1;
|
||||
var title = a['case' + n + 'Title'];
|
||||
var desc = a['case' + n + 'Desc'];
|
||||
return el('div', { key: mod, className: 'uc-item' },
|
||||
el('div', { className: 'uc-circle uc-anim--' + mod,
|
||||
style: { display:'flex', alignItems:'center', justifyContent:'center',
|
||||
fontSize:'.7rem', color:'var(--color-muted)', textAlign:'center', padding:'8px' } },
|
||||
mod
|
||||
),
|
||||
el('div', { className: 'uc-item-body' },
|
||||
el('div', { className: 'uc-item-title' }, title),
|
||||
desc ? el('p', { className: 'uc-item-desc' }, desc) : null
|
||||
)
|
||||
);
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
save: function () { return null; }
|
||||
});
|
||||
|
||||
})(window.wp);
|
||||
|
||||
@@ -656,25 +656,6 @@ add_action( 'init', function () {
|
||||
'render_callback' => 'oribi_render_page_hero_animated',
|
||||
] );
|
||||
|
||||
/* Use Cases Showcase - 4 animated circles beneath the homepage hero */
|
||||
register_block_type( 'oribi/use-cases', [
|
||||
'attributes' => [
|
||||
'label' => [ 'type' => 'string', 'default' => '● Use Cases' ],
|
||||
'heading' => [ 'type' => 'string', 'default' => 'Built for Every Scenario' ],
|
||||
'lead' => [ 'type' => 'string', 'default' => 'From menus to meeting-room dashboards, digital signage adapts to your environment.' ],
|
||||
'case1Title' => [ 'type' => 'string', 'default' => 'Menu Boards' ],
|
||||
'case1Desc' => [ 'type' => 'string', 'default' => 'Showcase food, drinks, and daily specials with dynamic, always-current displays.' ],
|
||||
'case2Title' => [ 'type' => 'string', 'default' => 'Event Displays' ],
|
||||
'case2Desc' => [ 'type' => 'string', 'default' => 'Promote schedules, speakers, and live countdowns across lobbies and venues.' ],
|
||||
'case3Title' => [ 'type' => 'string', 'default' => 'Office Dashboards' ],
|
||||
'case3Desc' => [ 'type' => 'string', 'default' => 'Surface KPIs, occupancy data, and team alerts on screens throughout your workspace.' ],
|
||||
'case4Title' => [ 'type' => 'string', 'default' => 'Wayfinding' ],
|
||||
'case4Desc' => [ 'type' => 'string', 'default' => 'Guide visitors through complex buildings with interactive maps and directional signs.' ],
|
||||
],
|
||||
'supports' => $block_supports,
|
||||
'render_callback' => 'oribi_render_use_cases',
|
||||
] );
|
||||
|
||||
} );
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════════
|
||||
@@ -1781,95 +1762,3 @@ function oribi_render_page_hero_animated( $a ) {
|
||||
</section>
|
||||
<?php return ob_get_clean();
|
||||
}
|
||||
|
||||
/* ── Use Cases Showcase ────────────────────────────────────────────────── */
|
||||
function oribi_uc_anim_inner( $mod ) {
|
||||
switch ( $mod ) {
|
||||
case 'menu':
|
||||
return '
|
||||
<div class="uc-inner uc-inner--menu" aria-hidden="true">
|
||||
<div class="uc-menu-header"></div>
|
||||
<div class="uc-menu-row"><span class="uc-menu-name"></span><span class="uc-menu-price"></span></div>
|
||||
<div class="uc-menu-row uc-menu-row--highlight"><span class="uc-menu-name"></span><span class="uc-menu-price"></span></div>
|
||||
<div class="uc-menu-row"><span class="uc-menu-name uc-menu-name--sm"></span><span class="uc-menu-price"></span></div>
|
||||
<div class="uc-menu-row"><span class="uc-menu-name"></span><span class="uc-menu-price"></span></div>
|
||||
<div class="uc-menu-divider"></div>
|
||||
<div class="uc-menu-row"><span class="uc-menu-name uc-menu-name--sm"></span><span class="uc-menu-price"></span></div>
|
||||
</div>';
|
||||
case 'event':
|
||||
return '
|
||||
<div class="uc-inner uc-inner--event" aria-hidden="true">
|
||||
<div class="uc-event-cursor"></div>
|
||||
<div class="uc-event-header"></div>
|
||||
<div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar uc-event-bar--active"></div></div>
|
||||
<div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar"></div></div>
|
||||
<div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar uc-event-bar--accent"></div></div>
|
||||
<div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar"></div></div>
|
||||
</div>';
|
||||
case 'dashboard':
|
||||
return '
|
||||
<div class="uc-inner uc-inner--dashboard" aria-hidden="true">
|
||||
<div class="uc-db-bars">
|
||||
<div class="uc-db-bar uc-db-bar--1"></div>
|
||||
<div class="uc-db-bar uc-db-bar--2"></div>
|
||||
<div class="uc-db-bar uc-db-bar--3"></div>
|
||||
<div class="uc-db-bar uc-db-bar--4"></div>
|
||||
</div>
|
||||
<div class="uc-db-baseline"></div>
|
||||
<div class="uc-db-labels">
|
||||
<div class="uc-db-lbl"></div>
|
||||
<div class="uc-db-lbl"></div>
|
||||
<div class="uc-db-lbl"></div>
|
||||
<div class="uc-db-lbl"></div>
|
||||
</div>
|
||||
</div>';
|
||||
case 'wayfinding':
|
||||
return '
|
||||
<div class="uc-inner uc-inner--wayfinding" aria-hidden="true">
|
||||
<div class="uc-wf-corridor uc-wf-corridor--h"></div>
|
||||
<div class="uc-wf-corridor uc-wf-corridor--v"></div>
|
||||
<div class="uc-wf-room uc-wf-room--1"></div>
|
||||
<div class="uc-wf-room uc-wf-room--2"></div>
|
||||
<div class="uc-wf-room uc-wf-room--3"></div>
|
||||
<div class="uc-wf-dot"></div>
|
||||
<div class="uc-wf-arrow"></div>
|
||||
</div>';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function oribi_render_use_cases( $a ) {
|
||||
$cases = [
|
||||
[ 'title' => $a['case1Title'], 'desc' => $a['case1Desc'], 'mod' => 'menu' ],
|
||||
[ 'title' => $a['case2Title'], 'desc' => $a['case2Desc'], 'mod' => 'event' ],
|
||||
[ 'title' => $a['case3Title'], 'desc' => $a['case3Desc'], 'mod' => 'dashboard' ],
|
||||
[ 'title' => $a['case4Title'], 'desc' => $a['case4Desc'], 'mod' => 'wayfinding' ],
|
||||
];
|
||||
ob_start(); ?>
|
||||
<section class="section use-cases-section">
|
||||
<div class="container">
|
||||
<?php if ( $a['label'] || $a['heading'] || $a['lead'] ) : ?>
|
||||
<div class="section-header">
|
||||
<?php if ( $a['label'] ) : ?><span class="section-label"><?php echo esc_html( $a['label'] ); ?></span><?php endif; ?>
|
||||
<?php if ( $a['heading'] ) : ?><h2><?php echo wp_kses_post( $a['heading'] ); ?></h2><?php endif; ?>
|
||||
<?php if ( $a['lead'] ) : ?><p class="lead"><?php echo wp_kses_post( $a['lead'] ); ?></p><?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="uc-track">
|
||||
<?php foreach ( $cases as $c ) : ?>
|
||||
<div class="uc-item">
|
||||
<div class="uc-circle uc-anim--<?php echo esc_attr( $c['mod'] ); ?>">
|
||||
<?php echo oribi_uc_anim_inner( $c['mod'] ); ?>
|
||||
</div>
|
||||
<div class="uc-item-body">
|
||||
<div class="uc-item-title"><?php echo esc_html( $c['title'] ); ?></div>
|
||||
<?php if ( $c['desc'] ) : ?><p class="uc-item-desc"><?php echo esc_html( $c['desc'] ); ?></p><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php return ob_get_clean();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user