class-carousel-gallery-template.php
637 lines
| 1 | <?php |
| 2 | |
| 3 | if ( ! defined( 'ABSPATH' ) ) { |
| 4 | exit; |
| 5 | } |
| 6 | |
| 7 | if ( ! class_exists( 'FooGallery_Carousel_Gallery_Template' ) ) { |
| 8 | |
| 9 | class FooGallery_Carousel_Gallery_Template { |
| 10 | |
| 11 | const TEMPLATE_ID = 'carousel'; |
| 12 | |
| 13 | /** |
| 14 | * Wire up everything we need to run the extension |
| 15 | */ |
| 16 | function __construct() { |
| 17 | // @formatter:off |
| 18 | add_filter( 'foogallery_gallery_templates', array( $this, 'add_template' ) ); |
| 19 | |
| 20 | add_filter( 'foogallery_gallery_templates_files', array( $this, 'register_myself' ) ); |
| 21 | |
| 22 | //build up the thumb dimensions from some arguments |
| 23 | add_filter( 'foogallery_calculate_thumbnail_dimensions-carousel', array( $this, 'build_thumbnail_dimensions_from_arguments' ), 10, 2 ); |
| 24 | |
| 25 | //build up the thumb dimensions on save |
| 26 | add_filter( 'foogallery_template_thumbnail_dimensions-carousel', array( $this, 'get_thumbnail_dimensions' ), 10, 2 ); |
| 27 | |
| 28 | //build up the arguments needed for rendering this template |
| 29 | add_filter( 'foogallery_gallery_template_arguments-carousel', array( $this, 'build_gallery_template_arguments' ) ); |
| 30 | |
| 31 | // handle aliases for carousel template settings |
| 32 | add_filter( 'foogallery_gallery_template_argument_alias', array( $this, 'handle_alias' ), 10, 2 ); |
| 33 | |
| 34 | //add the data options needed for grid pro |
| 35 | add_filter( 'foogallery_build_container_data_options-carousel', array( $this, 'add_data_options' ), 10, 3 ); |
| 36 | add_filter( 'foogallery_build_container_mobile_data_options-carousel', array( $this, 'add_mobile_data_options' ), 10, 3 ); |
| 37 | |
| 38 | add_action( 'foogallery_render_gallery_template_field_custom', array( $this, 'admin_custom_fields' ), 10, 3 ); |
| 39 | |
| 40 | // Adjust the default settings for this layout |
| 41 | add_filter( 'foogallery_override_gallery_template_fields_defaults-carousel', array( $this, 'field_defaults' ), 10, 1 ); |
| 42 | |
| 43 | // add a style block for the gallery |
| 44 | add_action( 'foogallery_template_style_block-carousel', array( $this, 'add_css' ), 10, 2 ); |
| 45 | |
| 46 | // add il8n for the template |
| 47 | add_filter( 'foogallery_il8n', array( $this, 'add_il8n' ) ); |
| 48 | // @formatter:on |
| 49 | } |
| 50 | |
| 51 | /** |
| 52 | * Handle aliases for gallery template settings saved in meta. |
| 53 | * |
| 54 | * @param string $key The key of the setting. |
| 55 | * @param string $template The template slug. |
| 56 | * @return string |
| 57 | */ |
| 58 | function handle_alias( $key, $template ) { |
| 59 | if ( self::TEMPLATE_ID !== $template ) { |
| 60 | return $key; |
| 61 | } |
| 62 | |
| 63 | $aliases = array( |
| 64 | 'maxItems' => 'max_items', |
| 65 | 'centerOnClick' => 'center_on_click', |
| 66 | 'activePosition' => 'active_position', |
| 67 | ); |
| 68 | |
| 69 | return array_key_exists( $key, $aliases ) ? $aliases[ $key ] : $key; |
| 70 | } |
| 71 | |
| 72 | /** |
| 73 | * Add il8n for the template |
| 74 | * |
| 75 | * @param $il8n |
| 76 | * |
| 77 | * @return array |
| 78 | */ |
| 79 | function add_il8n( $il8n ) { |
| 80 | $prev_entry = foogallery_get_language_array_value( 'language_carousel_previous_text', __( 'Previous', 'foogallery' ) ); |
| 81 | if ( $prev_entry !== false ) { |
| 82 | $il8n = array_merge_recursive( $il8n, array( |
| 83 | 'template' => array( |
| 84 | "carousel" => array( |
| 85 | 'prev' => esc_html( $prev_entry ) |
| 86 | ) |
| 87 | ) |
| 88 | ) ); |
| 89 | } |
| 90 | |
| 91 | $next_entry = foogallery_get_language_array_value( 'language_carousel_next_text', __( 'Next', 'foogallery' ) ); |
| 92 | if ( $next_entry !== false ) { |
| 93 | $il8n = array_merge_recursive( $il8n, array( |
| 94 | 'template' => array( |
| 95 | "carousel" => array( |
| 96 | 'next' => esc_html( $next_entry ) |
| 97 | ) |
| 98 | ) |
| 99 | ) ); |
| 100 | } |
| 101 | |
| 102 | $bullet_entry = foogallery_get_language_array_value( 'language_carousel_bullet_text', __( 'Item {ITEM}', 'foogallery' ) ); |
| 103 | if ( $bullet_entry !== false ) { |
| 104 | $il8n = array_merge_recursive( $il8n, array( |
| 105 | 'template' => array( |
| 106 | "carousel" => array( |
| 107 | 'bullet' => esc_html( $bullet_entry ) |
| 108 | ) |
| 109 | ) |
| 110 | ) ); |
| 111 | } |
| 112 | |
| 113 | $bullet_active_entry = foogallery_get_language_array_value( 'language_carousel_bullet_active_text', __( 'Item {ITEM} - Current', 'foogallery' ) ); |
| 114 | if ( $bullet_active_entry !== false ) { |
| 115 | $il8n = array_merge_recursive( $il8n, array( |
| 116 | 'template' => array( |
| 117 | "carousel" => array( |
| 118 | 'bulletActive' => esc_html( $bullet_active_entry ) |
| 119 | ) |
| 120 | ) |
| 121 | ) ); |
| 122 | } |
| 123 | |
| 124 | return $il8n; |
| 125 | } |
| 126 | |
| 127 | /** |
| 128 | * Output a custom gutter field. |
| 129 | * |
| 130 | * @param $field |
| 131 | * @param $gallery |
| 132 | * @param $template |
| 133 | * |
| 134 | * @return void |
| 135 | */ |
| 136 | function admin_custom_fields( $field, $gallery, $template ) { |
| 137 | if ( isset( $field ) && is_array( $field ) && isset( $field['type'] ) && 'carousel_gutter' === $field['type'] ) { |
| 138 | $id = $template['slug'] . '_' . $field['id']; |
| 139 | $min = is_array( $field['value'] ) ? intval( $field['value']['min'] ) : -40; |
| 140 | $max = is_array( $field['value'] ) ? intval( $field['value']['max'] ): -20; |
| 141 | $units = is_array( $field['value'] ) ? $field['value']['units'] : '%'; |
| 142 | |
| 143 | echo '<label for="FooGallerySettings_' . esc_attr( $id ) . '_min">' . esc_html__( 'Min', 'foogallery' ) . '</label> '; |
| 144 | echo '<input class="small-text" type="number" step="1" min="-1000" id="FooGallerySettings_' . esc_attr( $id ) . '_min" name="' . esc_attr( FOOGALLERY_META_SETTINGS ) . '[' . esc_attr( $id ) . '][min]" value="' . esc_attr( $min ) . '" />'; |
| 145 | echo ' <label for="FooGallerySettings_' . esc_attr( $id ) . '_max">' . esc_html__( 'Max', 'foogallery' ) . '</label> '; |
| 146 | echo '<input class="small-text" type="number" step="1" min="-1000" id="FooGallerySettings_' . esc_attr( $id ) . '_max" name="' . esc_attr( FOOGALLERY_META_SETTINGS ) . '[' . esc_attr( $id ) . '][max]" value="' . esc_attr( $max ) . '" />'; |
| 147 | echo ' <label for="FooGallerySettings_' . esc_attr( $id ) . '_units">' . esc_html__( 'Units', 'foogallery' ) . '</label> '; |
| 148 | echo '<select id="FooGallerySettings_' . esc_attr( $id ) . '_units" name="' . esc_attr( FOOGALLERY_META_SETTINGS ) . '[' . esc_attr( $id ) . '][units]">'; |
| 149 | echo '<option ' . ( $units === '%' ? 'selected="selected" ' : '' ) . 'value="%">' . esc_html__( '%', 'foogallery' ) . '</option>'; |
| 150 | echo '<option ' . ( $units === 'px' ? 'selected="selected" ' : '' ) . 'value="px">' . esc_html__( 'px', 'foogallery' ) . '</option>'; |
| 151 | echo '</select>'; |
| 152 | ?> |
| 153 | <script type="text/javascript"> |
| 154 | jQuery(function ($) { |
| 155 | $('.foogallery-field-carousel-gutter-preset[data-target="<?php echo esc_js( $id ); ?>"]').on('click', function(e) { |
| 156 | e.preventDefault(); |
| 157 | |
| 158 | $('#FooGallerySettings_<?php echo esc_js( $id ); ?>_min').val( $(this).data('min') ); |
| 159 | $('#FooGallerySettings_<?php echo esc_js( $id ); ?>_max').val( $(this).data('max') ); |
| 160 | $('#FooGallerySettings_<?php echo esc_js( $id ); ?>_units').val( $(this).data('units') ).trigger("change"); |
| 161 | }); |
| 162 | }); |
| 163 | </script> |
| 164 | <?php |
| 165 | echo ' <a data-target="' . esc_attr( $id ) . '" data-min="-40" data-max="-20" data-units="%" class="foogallery-field-carousel-gutter-preset" href="#" >' . esc_html__( 'Preset 1', 'foogallery' ) . '</a>'; |
| 166 | echo ' <a data-target="' . esc_attr( $id ) . '" data-min="5" data-max="10" data-units="px" class="foogallery-field-carousel-gutter-preset" href="#" >' . esc_html__( 'Preset 2', 'foogallery' ) . '</a>'; |
| 167 | } |
| 168 | } |
| 169 | |
| 170 | /** |
| 171 | * Add the required data options if needed |
| 172 | * |
| 173 | * @param $options |
| 174 | * @param $gallery FooGallery |
| 175 | * |
| 176 | * @param $attributes array |
| 177 | * |
| 178 | * @return array |
| 179 | */ |
| 180 | function add_data_options($options, $gallery, $attributes) { |
| 181 | $maxItems = foogallery_gallery_template_setting( 'maxItems', 3 ); |
| 182 | $scale = foogallery_gallery_template_setting( 'scale', 0.12 ); |
| 183 | $gutter = foogallery_gallery_template_setting( 'gutter', array( 'min' => -40, 'max' => -20, 'units' => '%' ) ); |
| 184 | $gutter_min = $gutter['min']; |
| 185 | $gutter_max = $gutter['max']; |
| 186 | $gutter_units = $gutter['units']; |
| 187 | $centerOnClick = foogallery_gallery_template_setting( 'centerOnClick', 'false' ) === 'true'; |
| 188 | $autoplay_interaction = foogallery_gallery_template_setting( 'autoplay_interaction', 'pause' ); |
| 189 | $autoplay_time = foogallery_gallery_template_setting( 'autoplay_time', 0 ); |
| 190 | |
| 191 | $options['template']['maxItems'] = intval( $maxItems ); |
| 192 | $options['template']['scale'] = floatval( $scale ); |
| 193 | $options['template']['gutter']['min'] = intval( $gutter_min ); |
| 194 | $options['template']['gutter']['max'] = intval( $gutter_max ); |
| 195 | $options['template']['gutter']['unit'] = $gutter_units; |
| 196 | $options['template']['autoplay']['time'] = intval( $autoplay_time ); |
| 197 | $options['template']['autoplay']['interaction'] = $autoplay_interaction; |
| 198 | $options['template']['centerOnClick'] = $centerOnClick; |
| 199 | $options['template']['align'] = foogallery_gallery_template_setting( 'align', 'center' ); |
| 200 | $options['template']['activePosition'] = foogallery_gallery_template_setting( 'activePosition', 'center' ); |
| 201 | |
| 202 | return $options; |
| 203 | } |
| 204 | |
| 205 | /** |
| 206 | * Add the custom mobile Carousel gap options. |
| 207 | * |
| 208 | * Max Items is handled by the declarative mobile option mapping. |
| 209 | * |
| 210 | * @param array $options Mobile client options. |
| 211 | * @param FooGallery $_gallery Gallery instance (unused). |
| 212 | * @param array $_attributes Gallery container attributes (unused). |
| 213 | * |
| 214 | * @return array |
| 215 | */ |
| 216 | function add_mobile_data_options( $options, $_gallery, $_attributes ) { |
| 217 | $gutter = $this->normalize_gutter( foogallery_gallery_template_setting( 'mobile_gutter', null ) ); |
| 218 | if ( null !== $gutter ) { |
| 219 | $options['template']['gutter'] = $gutter; |
| 220 | } |
| 221 | |
| 222 | return $options; |
| 223 | } |
| 224 | |
| 225 | /** |
| 226 | * Normalize a Carousel gutter value for the client. |
| 227 | * |
| 228 | * @param mixed $value Raw gutter setting. |
| 229 | * |
| 230 | * @return array|null |
| 231 | */ |
| 232 | private function normalize_gutter( $value ) { |
| 233 | if ( ! is_array( $value ) || ! isset( $value['min'], $value['max'], $value['units'] ) || ! is_numeric( $value['min'] ) || ! is_numeric( $value['max'] ) ) { |
| 234 | return null; |
| 235 | } |
| 236 | |
| 237 | $unit = in_array( $value['units'], array( '%', 'px' ), true ) ? $value['units'] : null; |
| 238 | if ( null === $unit ) { |
| 239 | return null; |
| 240 | } |
| 241 | |
| 242 | return array( |
| 243 | 'min' => max( -1000, min( 1000, intval( $value['min'] ) ) ), |
| 244 | 'max' => max( -1000, min( 1000, intval( $value['max'] ) ) ), |
| 245 | 'unit' => $unit, |
| 246 | ); |
| 247 | } |
| 248 | |
| 249 | /** |
| 250 | * Register myself so that all associated JS and CSS files can be found and automatically included |
| 251 | * |
| 252 | * @param $extensions |
| 253 | * |
| 254 | * @return array |
| 255 | */ |
| 256 | function register_myself( $extensions ) { |
| 257 | $extensions[] = __FILE__; |
| 258 | |
| 259 | return $extensions; |
| 260 | } |
| 261 | |
| 262 | /** |
| 263 | * Add our gallery template to the list of templates available for every gallery |
| 264 | * |
| 265 | * @param $gallery_templates |
| 266 | * |
| 267 | * @return array |
| 268 | */ |
| 269 | function add_template( $gallery_templates ) { |
| 270 | $gallery_templates[self::TEMPLATE_ID] = array( |
| 271 | 'slug' => self::TEMPLATE_ID, |
| 272 | 'name' => __( 'Carousel', 'foogallery' ), |
| 273 | 'preview_support' => true, |
| 274 | 'common_fields_support' => true, |
| 275 | 'paging_support' => false, |
| 276 | 'lazyload_support' => true, |
| 277 | 'mandatory_classes' => 'fg-carousel', |
| 278 | 'thumbnail_dimensions' => true, |
| 279 | 'filtering_support' => true, |
| 280 | 'enqueue_core' => true, |
| 281 | 'icon' => '<svg viewBox="0 0 24 24"> |
| 282 | <!-- images --> |
| 283 | <rect x="6" y="5" width="4" height="8"/> |
| 284 | <rect x="10" y="5" width="4" height="8"/> |
| 285 | <rect x="14" y="5" width="4" height="8"/> |
| 286 | <!-- arrows (solid triangles) --> |
| 287 | <polygon points="2,9 4,7 4,11" /> |
| 288 | <polygon points="22,9 20,7 20,11" /> |
| 289 | <!-- dots (more spaced out) --> |
| 290 | <circle cx="8" cy="17" r="0.8"/> |
| 291 | <circle cx="12" cy="17" r="0.8"/> |
| 292 | <circle cx="16" cy="17" r="0.8"/> |
| 293 | </svg>', |
| 294 | 'fields' => array( |
| 295 | array( |
| 296 | 'id' => 'thumbnail_dimensions', |
| 297 | 'title' => __( 'Thumbnail Size', 'foogallery' ), |
| 298 | 'desc' => __( 'Choose the size of your thumbnails.', 'foogallery' ), |
| 299 | 'section' => __( 'General', 'foogallery' ), |
| 300 | 'alias' => 'thumbnail_size', |
| 301 | 'type' => 'thumb_size_no_crop', |
| 302 | 'for' => 'thumbnail_dimensions_width', |
| 303 | 'default' => array( |
| 304 | 'width' => 200, |
| 305 | 'height' => 200, |
| 306 | 'crop' => true |
| 307 | ), |
| 308 | 'row_data' => array( |
| 309 | 'data-foogallery-change-selector' => 'input', |
| 310 | 'data-foogallery-preview' => 'shortcode' |
| 311 | ) |
| 312 | ), |
| 313 | array( |
| 314 | 'id' => 'gutter', |
| 315 | 'title' => __( 'Thumbnail Gap', 'foogallery' ), |
| 316 | 'desc' => __( 'The minimum gap or spacing to apply to thumbnails. Negative values create an overlap. ', 'foogallery' ), |
| 317 | 'section' => __( 'General', 'foogallery' ), |
| 318 | 'default' => array( 'min' => -40, 'max' => -20, 'units' => '%' ), |
| 319 | 'type' => 'carousel_gutter', |
| 320 | 'for' => 'gutter_min', |
| 321 | 'mobile' => true, |
| 322 | 'row_data' => array( |
| 323 | 'data-foogallery-change-selector' => ':input', |
| 324 | 'data-foogallery-preview' => 'shortcode' |
| 325 | ) |
| 326 | ), |
| 327 | array( |
| 328 | 'id' => 'maxItems', |
| 329 | 'alias' => 'max_items', |
| 330 | 'title' => __( 'Max Items To Show', 'foogallery' ), |
| 331 | 'desc' => __( 'The total number of items displayed in the carousel. This should be an ODD number as the active item is the center and the remainder make up each side.', 'foogallery' ), |
| 332 | 'section' => __( 'General', 'foogallery' ), |
| 333 | 'default' => '5', |
| 334 | 'type' => 'number', |
| 335 | 'mobile' => array( |
| 336 | 'default' => '3', |
| 337 | 'data_option' => array( 'template', 'maxItems' ), |
| 338 | ), |
| 339 | 'row_data' => array( |
| 340 | 'data-foogallery-change-selector' => 'input', |
| 341 | 'data-foogallery-preview' => 'shortcode' |
| 342 | ) |
| 343 | ), |
| 344 | array( |
| 345 | 'id' => 'scale', |
| 346 | 'title' => __( 'Scaling', 'foogallery' ), |
| 347 | 'desc' => __( 'How to scale the items that are not in the center. Each item to the side is scaled down by this factor.', 'foogallery' ), |
| 348 | 'section' => __( 'General', 'foogallery' ), |
| 349 | 'default' => '0.12', |
| 350 | 'type' => 'select', |
| 351 | 'choices' => array( |
| 352 | '0' => __( 'None', 'foogallery' ), |
| 353 | '0.05' => __( 'Less', 'foogallery' ), |
| 354 | '0.12' => __( 'Normal', 'foogallery' ), |
| 355 | '0.18' => __( 'More', 'foogallery' ), |
| 356 | '0.25' => __( 'Most', 'foogallery' ), |
| 357 | ), |
| 358 | 'row_data' => array( |
| 359 | 'data-foogallery-change-selector' => 'select', |
| 360 | 'data-foogallery-preview' => 'shortcode' |
| 361 | ) |
| 362 | ), |
| 363 | array( |
| 364 | 'id' => 'centerOnClick', |
| 365 | 'alias' => 'center_on_click', |
| 366 | 'title' => __( 'Side Items Click', 'foogallery' ), |
| 367 | 'desc' => __( 'What happens when an item in the carousel is clicked.', 'foogallery' ), |
| 368 | 'section' => __( 'General', 'foogallery' ), |
| 369 | 'default' => 'true', |
| 370 | 'type' => 'radio', |
| 371 | 'class' => 'foogallery-radios-12em', |
| 372 | 'choices' => array( |
| 373 | 'true' => __( 'Center The Clicked Item', 'foogallery' ), |
| 374 | 'false' => __( 'Open The Item In Lightbox', 'foogallery' ), |
| 375 | ), |
| 376 | 'row_data' => array( |
| 377 | 'data-foogallery-change-selector' => 'input', |
| 378 | 'data-foogallery-preview' => 'shortcode' |
| 379 | ) |
| 380 | ), |
| 381 | array( |
| 382 | 'id' => 'align', |
| 383 | 'title' => __( 'Alignment', 'foogallery' ), |
| 384 | 'desc' => __( 'Visual alignment of the entire visible item set. Use Left or Right to align the whole set to that side.', 'foogallery' ), |
| 385 | 'section' => __( 'General', 'foogallery' ), |
| 386 | 'default' => 'center', |
| 387 | 'type' => 'radio', |
| 388 | 'choices' => array( |
| 389 | 'left' => __( 'Left', 'foogallery' ), |
| 390 | 'center' => __( 'Center', 'foogallery' ), |
| 391 | 'right' => __( 'Right', 'foogallery' ), |
| 392 | ), |
| 393 | 'row_data' => array( |
| 394 | 'data-foogallery-change-selector' => 'input', |
| 395 | 'data-foogallery-preview' => 'shortcode' |
| 396 | ) |
| 397 | ), |
| 398 | array( |
| 399 | 'id' => 'activePosition', |
| 400 | 'alias' => 'active_position', |
| 401 | 'title' => __( 'Active Item Position', 'foogallery' ), |
| 402 | 'desc' => __( 'Position of the active item in the visible sequence. Use Start or End to keep the active item anchored to that side during navigation.', 'foogallery' ), |
| 403 | 'section' => __( 'General', 'foogallery' ), |
| 404 | 'default' => 'center', |
| 405 | 'type' => 'radio', |
| 406 | 'choices' => array( |
| 407 | 'start' => __( 'Start', 'foogallery' ), |
| 408 | 'center' => __( 'Center', 'foogallery' ), |
| 409 | 'end' => __( 'End', 'foogallery' ), |
| 410 | ), |
| 411 | 'row_data' => array( |
| 412 | 'data-foogallery-change-selector' => 'input', |
| 413 | 'data-foogallery-preview' => 'shortcode' |
| 414 | ) |
| 415 | ), |
| 416 | array( |
| 417 | 'id' => 'autoplay_time', |
| 418 | 'title' => __( 'Autoplay Time', 'foogallery' ), |
| 419 | 'desc' => __( 'The number in seconds an item is displayed. Set to zero to turn off autoplay.', 'foogallery' ), |
| 420 | 'section' => __( 'General', 'foogallery' ), |
| 421 | 'default' => '0', |
| 422 | 'min' => 0, |
| 423 | 'type' => 'number', |
| 424 | 'row_data' => array( |
| 425 | 'data-foogallery-change-selector' => 'input', |
| 426 | 'data-foogallery-preview' => 'shortcode' |
| 427 | ) |
| 428 | ), |
| 429 | array( |
| 430 | 'id' => 'autoplay_interaction', |
| 431 | 'title' => __( 'Autoplay Mode', 'foogallery' ), |
| 432 | 'desc' => __( 'Specifies what occurs once/when a user has interacted with the carousel. Please Note: for touch devices autoplay is paused on "touchstart" and is only resumed once the user has not interacted with the carousel for the supplied time.', 'foogallery' ), |
| 433 | 'section' => __( 'General', 'foogallery' ), |
| 434 | 'default' => 'pause', |
| 435 | 'type' => 'radio', |
| 436 | 'choices' => array( |
| 437 | 'pause' => __( 'Pause - autoplay will resume a short time after the user stops interacting with the carousel', 'foogallery' ), |
| 438 | 'disable' => __( 'Disable - autoplay is simply turned off once the carousel has been interacted with', 'foogallery' ), |
| 439 | ), |
| 440 | 'row_data' => array( |
| 441 | 'data-foogallery-change-selector' => 'input', |
| 442 | 'data-foogallery-preview' => 'shortcode' |
| 443 | ) |
| 444 | ), |
| 445 | array( |
| 446 | 'id' => 'inverted', |
| 447 | 'title' => __( 'Invert Control Theme', 'foogallery' ), |
| 448 | 'desc' => __( 'Inverts the theme used for the carousel controls (paging and navigation buttons) based on the theme under appearance.', 'foogallery' ), |
| 449 | 'section' => __( 'General', 'foogallery' ), |
| 450 | 'default' => '', |
| 451 | 'type' => 'radio', |
| 452 | 'choices' => array( |
| 453 | '' => __( 'Same', 'foogallery' ), |
| 454 | 'fg-inverted' => __( 'Inverted', 'foogallery' ), |
| 455 | ), |
| 456 | 'row_data' => array( |
| 457 | 'data-foogallery-change-selector' => 'input', |
| 458 | 'data-foogallery-preview' => 'shortcode' |
| 459 | ) |
| 460 | ), |
| 461 | array( |
| 462 | 'id' => 'show_nav_arrows', |
| 463 | 'title' => __( 'Show Nav. Arrows', 'foogallery' ), |
| 464 | 'section' => __( 'General', 'foogallery' ), |
| 465 | 'default' => '', |
| 466 | 'type' => 'radio', |
| 467 | 'choices' => array( |
| 468 | '' => __( 'Shown', 'foogallery' ), |
| 469 | 'fg-carousel-hide-nav-arrows' => __( 'Hidden', 'foogallery' ), |
| 470 | ), |
| 471 | 'mobile' => true, |
| 472 | 'row_data' => array( |
| 473 | 'data-foogallery-change-selector' => 'input', |
| 474 | 'data-foogallery-preview' => 'shortcode' |
| 475 | ) |
| 476 | ), |
| 477 | array( |
| 478 | 'id' => 'show_pagination', |
| 479 | 'title' => __( 'Show Pagination Dots', 'foogallery' ), |
| 480 | 'section' => __( 'General', 'foogallery' ), |
| 481 | 'default' => '', |
| 482 | 'type' => 'radio', |
| 483 | 'choices' => array( |
| 484 | '' => __( 'Shown', 'foogallery' ), |
| 485 | 'fg-carousel-hide-pagination' => __( 'Hidden', 'foogallery' ), |
| 486 | ), |
| 487 | 'mobile' => true, |
| 488 | 'row_data' => array( |
| 489 | 'data-foogallery-change-selector' => 'input', |
| 490 | 'data-foogallery-preview' => 'shortcode' |
| 491 | ) |
| 492 | ), |
| 493 | array( |
| 494 | 'id' => 'show_progress', |
| 495 | 'title' => __( 'Show Progress Bar', 'foogallery' ), |
| 496 | 'desc' => __( 'The progress bar is only shown when the carousel is in autoplay mode (set Autoplay Time to a value greater than 0).', 'foogallery' ), |
| 497 | 'section' => __( 'General', 'foogallery' ), |
| 498 | 'default' => '', |
| 499 | 'type' => 'radio', |
| 500 | 'choices' => array( |
| 501 | '' => __( 'Shown', 'foogallery' ), |
| 502 | 'fg-carousel-hide-progress-bar' => __( 'Hidden', 'foogallery' ), |
| 503 | ), |
| 504 | 'row_data' => array( |
| 505 | 'data-foogallery-change-selector' => 'input', |
| 506 | 'data-foogallery-preview' => 'shortcode' |
| 507 | ) |
| 508 | ), |
| 509 | array( |
| 510 | 'id' => 'thumbnail_link', |
| 511 | 'title' => __( 'Thumbnail Link', 'foogallery' ), |
| 512 | 'section' => __( 'General', 'foogallery' ), |
| 513 | 'default' => 'image', |
| 514 | 'type' => 'thumb_link', |
| 515 | ), |
| 516 | array( |
| 517 | 'id' => 'lightbox', |
| 518 | 'type' => 'lightbox', |
| 519 | ), |
| 520 | ) |
| 521 | ); |
| 522 | |
| 523 | return $gallery_templates; |
| 524 | } |
| 525 | |
| 526 | /** |
| 527 | * Builds thumb dimensions from arguments |
| 528 | * |
| 529 | * @param array $dimensions |
| 530 | * @param array $arguments |
| 531 | * |
| 532 | * @return mixed |
| 533 | */ |
| 534 | function build_thumbnail_dimensions_from_arguments( $dimensions, $arguments ) { |
| 535 | if ( array_key_exists( 'thumbnail_dimensions', $arguments ) ) { |
| 536 | return array( |
| 537 | 'height' => intval( $arguments['thumbnail_dimensions']['height'] ), |
| 538 | 'width' => intval( $arguments['thumbnail_dimensions']['width'] ), |
| 539 | 'crop' => '1' |
| 540 | ); |
| 541 | } |
| 542 | |
| 543 | return null; |
| 544 | } |
| 545 | |
| 546 | /** |
| 547 | * Get the thumb dimensions arguments saved for the gallery for this gallery template |
| 548 | * |
| 549 | * @param array $dimensions |
| 550 | * @param FooGallery $foogallery |
| 551 | * |
| 552 | * @return mixed |
| 553 | */ |
| 554 | function get_thumbnail_dimensions( $dimensions, $foogallery ) { |
| 555 | $dimensions = $foogallery->get_meta( 'carousel_thumbnail_dimensions', array( |
| 556 | 'width' => 200, |
| 557 | 'height' => 200 |
| 558 | ) ); |
| 559 | $dimensions['crop'] = true; |
| 560 | |
| 561 | return $dimensions; |
| 562 | } |
| 563 | |
| 564 | /** |
| 565 | * Build up the arguments needed for rendering this gallery template |
| 566 | * |
| 567 | * @param $args |
| 568 | * |
| 569 | * @return array |
| 570 | */ |
| 571 | function build_gallery_template_arguments( $args ) { |
| 572 | $args = foogallery_gallery_template_setting( 'thumbnail_dimensions', array() ); |
| 573 | $args['crop'] = '1'; //we now force thumbs to be cropped |
| 574 | $args['link'] = foogallery_gallery_template_setting( 'thumbnail_link', 'image' ); |
| 575 | |
| 576 | return $args; |
| 577 | } |
| 578 | |
| 579 | /** |
| 580 | * Return an array of field defaults for the template |
| 581 | * |
| 582 | * @param $field_defaults |
| 583 | * |
| 584 | * @return string[] |
| 585 | */ |
| 586 | function field_defaults( $field_defaults ) { |
| 587 | return array_merge( $field_defaults, array( |
| 588 | 'theme' => 'fg-light', |
| 589 | 'hover_effect_caption_visibility' => '', |
| 590 | 'caption_visibility_no_hover_effect' => '', |
| 591 | 'border_size' => 'fg-border-medium', |
| 592 | 'drop_shadow' => 'fg-shadow-medium', |
| 593 | 'rounded_corners' => 'fg-round-small', |
| 594 | 'inner_shadow' => '', |
| 595 | 'hover_effect_icon' => 'fg-hover-circle-plus2', |
| 596 | 'hover_effect_scale' => 'fg-hover-semi-zoomed' |
| 597 | ) ); |
| 598 | } |
| 599 | |
| 600 | /** |
| 601 | * Add css to the page for the gallery |
| 602 | * |
| 603 | * @param $gallery FooGallery |
| 604 | */ |
| 605 | function add_css( $css, $gallery ) { |
| 606 | |
| 607 | $id = $gallery->container_id(); |
| 608 | $dimensions = foogallery_gallery_template_setting('thumbnail_dimensions'); |
| 609 | if ( is_array( $dimensions ) && array_key_exists( 'width', $dimensions ) && intval( $dimensions['width'] ) > 0 ) { |
| 610 | $width = intval( $dimensions['width'] ); |
| 611 | $css[] = '#' . $id . ' .fg-image { width: ' . $width . 'px; }'; |
| 612 | } |
| 613 | |
| 614 | $mobile_nav = foogallery_gallery_template_setting( 'mobile_show_nav_arrows', null ); |
| 615 | if ( is_scalar( $mobile_nav ) && in_array( (string) $mobile_nav, array( '', 'fg-carousel-hide-nav-arrows' ), true ) ) { |
| 616 | $display = 'fg-carousel-hide-nav-arrows' === $mobile_nav ? 'none' : 'flex'; |
| 617 | $size = 'fg-carousel-hide-nav-arrows' === $mobile_nav ? '0px' : '48px'; |
| 618 | $mobile_rule = '#' . $id . '.foogallery { --fg-carousel-navigation-size: ' . $size . '; } #' . $id . ' .fg-carousel-prev, #' . $id . ' .fg-carousel-next { display: ' . $display . '; }'; |
| 619 | $preview_rule = '.foogallery-preview-wrapper.viewport-mobile #' . $id . '.foogallery { --fg-carousel-navigation-size: ' . $size . '; } .foogallery-preview-wrapper.viewport-mobile #' . $id . ' .fg-carousel-prev, .foogallery-preview-wrapper.viewport-mobile #' . $id . ' .fg-carousel-next { display: ' . $display . '; }'; |
| 620 | $css[] = '@media only screen and (max-width: ' . foogallery_get_mobile_size() . 'px) { ' . $mobile_rule . ' }'; |
| 621 | $css[] = $preview_rule; |
| 622 | } |
| 623 | |
| 624 | $mobile_pagination = foogallery_gallery_template_setting( 'mobile_show_pagination', null ); |
| 625 | if ( is_scalar( $mobile_pagination ) && in_array( (string) $mobile_pagination, array( '', 'fg-carousel-hide-pagination' ), true ) ) { |
| 626 | $display = 'fg-carousel-hide-pagination' === $mobile_pagination ? 'none' : 'flex'; |
| 627 | $mobile_rule = '#' . $id . ' .fg-carousel-bottom { display: ' . $display . '; }'; |
| 628 | $preview_rule = '.foogallery-preview-wrapper.viewport-mobile #' . $id . ' .fg-carousel-bottom { display: ' . $display . '; }'; |
| 629 | $css[] = '@media only screen and (max-width: ' . foogallery_get_mobile_size() . 'px) { ' . $mobile_rule . ' }'; |
| 630 | $css[] = $preview_rule; |
| 631 | } |
| 632 | |
| 633 | return $css; |
| 634 | } |
| 635 | } |
| 636 | } |
| 637 |