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