index.php
99 lines
| 1 | <?php |
| 2 | |
| 3 | namespace Kubio\Blocks; |
| 4 | |
| 5 | use Kubio\Core\Blocks\BlockBase; |
| 6 | use Kubio\Core\Registry; |
| 7 | use Kubio\Core\Utils; |
| 8 | |
| 9 | |
| 10 | class MenuOffscreen extends BlockBase { |
| 11 | const BLOCK_NAME = 'kubio/menu-offscreen'; |
| 12 | const CONTAINER = 'container'; |
| 13 | const OFFSCREEN = 'offscreen'; |
| 14 | const OFFSCREEN_OVERLAY = 'offscreenOverlay'; |
| 15 | const ICON_WRAPPER = 'iconWrapper'; |
| 16 | const ICON = 'icon'; |
| 17 | |
| 18 | |
| 19 | private $offscreen_id = null; |
| 20 | |
| 21 | public function __construct( $block, $autoload = true ) { |
| 22 | parent::__construct( $block, $autoload ); |
| 23 | $this->offscreen_id = uniqid( 'kubio-offscreen-' ); |
| 24 | } |
| 25 | |
| 26 | public function mapPropsToElements() { |
| 27 | $icon = $this->getAttribute( 'icon', 'font-awesome/navicon' ); |
| 28 | $direction = $this->getAttribute( 'openSide', 'right' ); |
| 29 | $js_props = Utils::useJSComponentProps( 'offcanvas' ); |
| 30 | |
| 31 | $width = $this->getStyle( |
| 32 | 'width', |
| 33 | 250, |
| 34 | array( |
| 35 | 'styledComponent' => self::OFFSCREEN, |
| 36 | ) |
| 37 | ); |
| 38 | |
| 39 | $width = array_merge( |
| 40 | array( |
| 41 | 'value' => 300, |
| 42 | 'unit' => 'px', |
| 43 | ), |
| 44 | (array) $width |
| 45 | ); |
| 46 | |
| 47 | return array( |
| 48 | self::ICON => array( 'name' => $icon ), |
| 49 | self::ICON_WRAPPER => array_merge( |
| 50 | array( |
| 51 | 'data-target' => "#{$this->offscreen_id}", |
| 52 | 'data-target-id' => "{$this->offscreen_id}", |
| 53 | 'data-direction' => esc_attr( $direction ), |
| 54 | 'data-width' => esc_attr( "{$width['value']}{$width['unit']}" ), |
| 55 | 'data-offcanvas-overlay-id' => "{$this->offscreen_id}-overlay", |
| 56 | 'aria-label' => __( 'Mobile Menu', 'kubio' ), |
| 57 | ), |
| 58 | $js_props |
| 59 | ), |
| 60 | self::OFFSCREEN_OVERLAY => array( |
| 61 | 'id' => "{$this->offscreen_id}-overlay", |
| 62 | 'className' => 'offscreen-overlay', |
| 63 | ), |
| 64 | self::OFFSCREEN => array( |
| 65 | 'id' => $this->offscreen_id, |
| 66 | 'className' => 'hide', |
| 67 | ), |
| 68 | ); |
| 69 | } |
| 70 | |
| 71 | public function canRender() { |
| 72 | |
| 73 | $menu_block = Registry::getInstance()->getLastBlockOfName( DropDownMenuBlock::BLOCK_NAME ); |
| 74 | if ( ! $menu_block ) { |
| 75 | $menu_block = Registry::getInstance()->getLastBlockOfName( AccordionMenuBlock::BLOCK_NAME ); |
| 76 | } |
| 77 | |
| 78 | if ( $menu_block ) { |
| 79 | $offscreen_style = $menu_block->getAttribute( 'showOffscreenMenuOn', false ); |
| 80 | |
| 81 | if ( $offscreen_style === 'has-offcanvas-none' ) { |
| 82 | return false; |
| 83 | } |
| 84 | } |
| 85 | |
| 86 | return parent::canRender(); |
| 87 | } |
| 88 | |
| 89 | public function render( $wp_block ) { |
| 90 | |
| 91 | return parent::render( $wp_block ); |
| 92 | } |
| 93 | } |
| 94 | |
| 95 | Registry::registerBlock( |
| 96 | __DIR__, |
| 97 | MenuOffscreen::class |
| 98 | ); |
| 99 |