index.php
231 lines
| 1 | <?php |
| 2 | |
| 3 | namespace Kubio\Blocks; |
| 4 | |
| 5 | use IlluminateAgnostic\Arr\Support\Arr; |
| 6 | use Kubio\AssetsDependencyInjector; |
| 7 | use Kubio\Core\Blocks\BlockBase; |
| 8 | use Kubio\Core\Registry; |
| 9 | use Kubio\Core\Utils; |
| 10 | |
| 11 | class ImageGalleryBlock extends BlockBase { |
| 12 | const GALLERY = 'gallery'; |
| 13 | const STYLE = 'style'; |
| 14 | |
| 15 | public $blockNamespace = 'image-gallery'; |
| 16 | |
| 17 | public function mapPropsToElements() { |
| 18 | |
| 19 | $hoverEffect = $this->getProp( 'hoverEffect' ); |
| 20 | $captionSettings = $this->getProp( 'caption', array( 'enabled' => false ) ); |
| 21 | |
| 22 | $jsProps = Utils::useJSComponentProps( |
| 23 | 'image-gallery', |
| 24 | array( |
| 25 | 'showMasonry' => $this->getProp( 'showMasonry' ), |
| 26 | 'gridGap' => $this->getProp( 'gridGap' ), |
| 27 | 'columns' => $this->getProp( 'columns' ), |
| 28 | ) |
| 29 | ); |
| 30 | |
| 31 | $masonry = $this->getProp( 'showMasonry' ); |
| 32 | $gallery_classname = array( 'wp-block-kubio-image-gallery_classic' ); |
| 33 | |
| 34 | if ( $masonry ) { |
| 35 | wp_enqueue_script( 'jquery-masonry' ); |
| 36 | AssetsDependencyInjector::injectKubioScriptDependencies( 'jquery-masonry', false ); |
| 37 | $gallery_classname = array( 'wp-block-kubio-image-gallery_masonry' ); |
| 38 | } |
| 39 | |
| 40 | if ( $hoverEffect['enabled'] === true ) { |
| 41 | $gallery_classname[] = 'hover-effect--' . $hoverEffect['type']; |
| 42 | } |
| 43 | |
| 44 | if ( $hoverEffect['enabled'] === true ) { |
| 45 | $gallery_classname[] = 'hover-effect--' . $hoverEffect['type']; |
| 46 | } |
| 47 | |
| 48 | if ( Arr::get( $captionSettings, 'enabled', false ) ) { |
| 49 | $gallery_classname[] = 'caption--' . $captionSettings['verticalAlign']; |
| 50 | $gallery_classname[] = 'caption-position--' . $captionSettings['position']; |
| 51 | } |
| 52 | |
| 53 | return array( |
| 54 | self::GALLERY => array_merge( |
| 55 | $jsProps, |
| 56 | array( |
| 57 | 'className' => $gallery_classname, |
| 58 | ) |
| 59 | ), |
| 60 | self::STYLE => array( |
| 61 | 'innerHTML' => $this->renderStyle(), |
| 62 | ), |
| 63 | ); |
| 64 | } |
| 65 | |
| 66 | public function renderStyle() { |
| 67 | $columns_per_media = $this->getPropByMedia( 'columns' ); |
| 68 | |
| 69 | $columns_media_sizes = array( |
| 70 | 'desktop' => "\n@media (min-width: 1023px) {\n", |
| 71 | 'tablet' => "\n@media (min-width: 768px) and (max-width: 1023px) {\n", |
| 72 | 'mobile' => "\n@media (max-width: 767px) {\n", |
| 73 | ); |
| 74 | |
| 75 | $style = ''; |
| 76 | |
| 77 | $local_style_class = $this->getLocalIdClass( 'container' ); |
| 78 | |
| 79 | foreach ( $columns_per_media as $key => $value ) { |
| 80 | $nr_columns_per_media = esc_attr( $value ); |
| 81 | |
| 82 | $style .= $columns_media_sizes[ $key ]; |
| 83 | |
| 84 | $style .= "\t.{$local_style_class} figure.wp-block-kubio-" . $this->blockNamespace . "-item{\n"; |
| 85 | $style .= "\t\twidth: " . ( 100 / $nr_columns_per_media ) . "% !important;\n"; |
| 86 | $style .= "\t\tmax-width: " . ( 100 / $nr_columns_per_media ) . "% !important;\n"; |
| 87 | $style .= "\t}\n"; // closing style selector. |
| 88 | $style .= "}\n"; // closing media query. |
| 89 | } |
| 90 | |
| 91 | return $style; |
| 92 | } |
| 93 | |
| 94 | public function computed() { |
| 95 | |
| 96 | return array(); |
| 97 | } |
| 98 | } |
| 99 | |
| 100 | class ImageGalleryItemBlock extends BlockBase { |
| 101 | const IMAGE_CONTAINER = 'image-container'; |
| 102 | const LINK = 'link'; |
| 103 | const IMAGE = 'image'; |
| 104 | const IMAGE_OVERLAY = 'image-overlay'; |
| 105 | const CAPTION = 'caption'; |
| 106 | |
| 107 | private $parent_block = null; |
| 108 | |
| 109 | public function mapPropsToElements() { |
| 110 | $link_type = $this->parent_block->getProp( 'clickBehaviour' ); |
| 111 | $size = $this->parent_block->getAttribute( 'size' ); |
| 112 | $alt = $this->getAttribute( 'alt' ); |
| 113 | $caption = $this->getAttribute( 'caption' ); |
| 114 | $id = \kubio_wpml_get_translated_media_id( $this->getAttribute( 'id' ) ); |
| 115 | $url = $this->getAttribute( 'url', '' ); |
| 116 | |
| 117 | //https://mantis.iconvert.pro/view.php?id=51034 For some reason caption is array in this bug |
| 118 | if ( $caption !== null && gettype( $caption ) !== 'string' ) { |
| 119 | $caption = null; |
| 120 | } |
| 121 | $image_classnames = array( |
| 122 | 'image-gallery-grid-item', |
| 123 | ); |
| 124 | |
| 125 | $link_classname = null; |
| 126 | $link = null; |
| 127 | $src = wp_get_attachment_image_url( $id, $size ); |
| 128 | |
| 129 | if ( $link_type === 'lightbox' ) { |
| 130 | AssetsDependencyInjector::injectKubioFrontendStyleDependencies( 'fancybox' ); |
| 131 | AssetsDependencyInjector::injectKubioScriptDependencies( 'fancybox' ); |
| 132 | } |
| 133 | |
| 134 | switch ( $link_type ) { |
| 135 | case 'lightbox': |
| 136 | $link_classname = 'lightbox'; |
| 137 | $link = wp_get_attachment_image_url( $id, 'full' ); |
| 138 | break; |
| 139 | |
| 140 | case 'link': |
| 141 | $link = get_attachment_link( $id ); |
| 142 | break; |
| 143 | |
| 144 | case 'media': |
| 145 | // get the link to the media, not to the attachment page. |
| 146 | $link = wp_get_attachment_url( $id ); |
| 147 | break; |
| 148 | |
| 149 | case 'none': |
| 150 | default: |
| 151 | break; |
| 152 | } |
| 153 | |
| 154 | //if we add predefined sections we'll have images url that are not in media. |
| 155 | if ( ! $src && ! empty( $url ) ) { |
| 156 | $src = $url; |
| 157 | $link = $url; |
| 158 | } |
| 159 | |
| 160 | return array( |
| 161 | self::IMAGE_CONTAINER => array( |
| 162 | 'className' => $image_classnames, |
| 163 | ), |
| 164 | self::LINK => array( |
| 165 | 'href' => $link, |
| 166 | 'className' => $link_classname, |
| 167 | ), |
| 168 | self::IMAGE => array( |
| 169 | 'src' => esc_url( $src ), |
| 170 | 'alt' => esc_attr( $alt ), |
| 171 | 'className' => array( esc_attr( 'wp-image-' . $id ) ), |
| 172 | ), |
| 173 | self::IMAGE_OVERLAY => array(), |
| 174 | self::CAPTION => array( |
| 175 | 'innerHTML' => $caption, |
| 176 | ), |
| 177 | ); |
| 178 | } |
| 179 | |
| 180 | function getParentBlock() { |
| 181 | return Registry::getInstance()->getLastBlockOfName( 'kubio/image-gallery' ); |
| 182 | } |
| 183 | |
| 184 | public function computed() { |
| 185 | |
| 186 | $this->parent_block = $this->getParentBlock(); |
| 187 | |
| 188 | $captionSettings = $this->parent_block->getProp( 'caption', array( 'enabled' => false ) ); |
| 189 | $hoverEffect = $this->parent_block->getProp( 'hoverEffect' ); |
| 190 | $link_type = $this->parent_block->getProp( 'clickBehaviour' ); |
| 191 | $id = $this->getAttribute( 'id' ); |
| 192 | $captionAttribute = $this->getAttribute( 'caption' ); |
| 193 | $showCaption = Arr::get( $captionSettings, 'enabled', false ); |
| 194 | $caption = wp_get_attachment_caption( $id ); |
| 195 | |
| 196 | //for images from predefined section we dont have an attachment so we look at the attribute for caption |
| 197 | $caption = $caption ? $caption : $captionAttribute; |
| 198 | $linkEnabled = in_array( $link_type, array( 'lightbox', 'link', 'media' ) ); |
| 199 | |
| 200 | return array( |
| 201 | 'showCaption' => $showCaption && ! empty( $caption ), |
| 202 | 'showCaptionWithoutLink' => $showCaption && ! empty( $caption ) && ! $linkEnabled, |
| 203 | 'showOverlay' => $hoverEffect['enabled'] === true && in_array( $hoverEffect['type'], array( 'addOverlay', 'removeOverlay' ) ), |
| 204 | 'showOverlayWithoutLink' => $hoverEffect['enabled'] === true && in_array( |
| 205 | $hoverEffect['type'], |
| 206 | array( |
| 207 | 'addOverlay', |
| 208 | 'removeOverlay', |
| 209 | ) |
| 210 | ) && ! $linkEnabled, |
| 211 | 'linkEnabled' => $linkEnabled, |
| 212 | 'linkDisabled' => ! $linkEnabled, |
| 213 | ); |
| 214 | } |
| 215 | } |
| 216 | |
| 217 | Registry::registerBlock( |
| 218 | __DIR__, |
| 219 | ImageGalleryBlock::class, |
| 220 | array( |
| 221 | 'metadata' => './blocks/gallery/block.json', |
| 222 | ) |
| 223 | ); |
| 224 | Registry::registerBlock( |
| 225 | __DIR__, |
| 226 | ImageGalleryItemBlock::class, |
| 227 | array( |
| 228 | 'metadata' => './blocks/image/block.json', |
| 229 | ) |
| 230 | ); |
| 231 |