msf-PI.php
1.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
// Create id attribute allowing for custom "anchor" value.
$id = 'msf-pi-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'msf-pi';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
$title = get_field('title') ?: null;
$theme = null;
$inner_blocks = get_field('data') ?: null;
$color = get_field('foreground_color') ?: null;
$data = [];
foreach($inner_blocks as $ib) {
$data[] = [ "name" => $ib['name'], "value" => (int)$ib['value'], 'color' => $ib['color'], 'font_color' => $color ];
}
?>
<script>
window.addEventListener('scroll', function(event) {
if(!jQuery("#<?= $id ?>").hasClass('visible') && window.tz_checkVisible(jQuery("#<?= $id ?>"), null, 200)) {
jQuery("#<?= $id ?>").addClass('visible');
jQuery("#<?= $id ?>").addClass('is-visible');
window.renderPI(document.getElementById("<?= $id ?>"))
}
});
</script>
<div class='pi <?= $theme ?>' class="<?php echo esc_attr($className); ?>" style='width:100%;'>
<h3><?= $title ?></h3>
<div id="<?= $id ?>" data-points='<?= json_encode($data) ?>' data-color="<?= $color ?>"></div>
</div>