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