Code Coverage
 
Lines
Functions and Methods
Classes and Traits
Total
29.41%
65 / 221
0.00%
0 / 5
 CRAP
0.00%
0 / 1
Presentations
29.95%
65 / 217
0.00%
0 / 5
 773.22
0.00%
0 / 1
 __construct
0.00%
0 / 5
0.00%
0 / 1
 2
 add_scripts
0.00%
0 / 26
0.00%
0 / 1
 56
 presentation_shortcode
82.28%
65 / 79
0.00%
0 / 1
 13.94
 slide_shortcode
0.00%
0 / 67
0.00%
0 / 1
 272
 get_coords
0.00%
0 / 40
0.00%
0 / 1
 90
1<?php //phpcs:ignore WordPress.Files.FileName.InvalidClassFileName
2/**
3 * Presentations
4 * Presentations plugin based on the work done by <a href="http://darylkoop.com/">Daryl Koopersmith</a>. Powered by jmpress.js
5 *
6 * HOW TO: How the plugin settings are organized and which features are supported.
7 *
8 * The entire presentation should be wrapped with a [presentation] shortcode, and every
9 * individual slide should be wrapped with a [slide] shortcode. Any settings supported
10 * by [slide] can be set into [presentation], which will apply that setting for the entire
11 * presentation unless overridden by individual slides.
12 *
13 * - [presentation] only settings:
14 *     - duration: transition durations, default is one second.
15 *     - height:   content height, default is 400px
16 *     - width:    content width, default is 550px
17 *     - autoplay: delay between transitions in seconds, default 3s
18 *                 when set the presentation will automatically transition between slides
19 *                 as long as the presentation remains in focus
20 *
21 * - [slide] settings:
22 *     - transition: specifies where the next slide will be placed relative
23 *                   to the last one before it. Supported values are "up", "down"
24 *                   "left", "right", or "none". Default value is "down".
25 *
26 *     - scale:      scales the content relative to other slides, default value is one
27 *
28 *     - rotate:     rotates the content by the specified degrees, default is zero
29 *
30 *     - fade:       slides will fade in and out during transition. Values of "on" or
31 *                   "true" will enable fading, while values of "no" or "false" will
32 *                   disable it. Default value is "on"
33 *
34 *     - bgcolor:    specifies a background color for the slides. Any CSS valid value
35 *                   is permitted. Default color is transparent.
36 *
37 *     - bgimg:      specifies an image url which will fill the background. Image is
38 *                   set to fill the background 100% width and height
39 *
40 *     - fadebullets: any html <li> tags will start out with an opacity of 0 and any
41 *                    subsequent slide transitions will show the bullets one by one
42 *
43 * Known issues:
44 *
45 * - IE 7/8 are not supported by jmpress and presentations will not work
46 * - IE 9 will not animate transitions at all, though it's possible to at least
47 *   switch between slides.
48 * - Infinite Scroll themes will not load presentations properly unless the post
49 *   happens to be on the first loaded page. The permalink page will function
50 *   properly, however.
51 * - Exiting fullscreen mode will not properly reset the scroll locations in Safari
52 *
53 * @package automattic/jetpack
54 */
55
56use Automattic\Jetpack\Assets;
57
58if ( ! defined( 'ABSPATH' ) ) {
59    exit( 0 );
60}
61
62if ( ! class_exists( 'Presentations' ) ) :
63    /**
64     * Create a shortcode to display Presentations and slides.
65     */
66    class Presentations {
67
68        /**
69         * Presentation settings.
70         *
71         * @var array
72         */
73        private $presentation_settings;
74        /**
75         * Do we have a Presentation shortcode to be displayed.
76         *
77         * @var bool
78         */
79        private $presentation_initialized;
80        /**
81         * Were scripts and styles enqueued already.
82         *
83         * @var bool
84         */
85        private $scripts_and_style_included;
86
87        /**
88         * Constructor
89         */
90        public function __construct() {
91            $this->presentation_initialized   = false;
92            $this->scripts_and_style_included = false;
93
94            // Registers shortcodes.
95            add_action( 'wp_head', array( $this, 'add_scripts' ), 1 );
96
97            add_shortcode( 'presentation', array( $this, 'presentation_shortcode' ) );
98            add_shortcode( 'slide', array( $this, 'slide_shortcode' ) );
99        }
100
101        /**
102         * Enqueue all scripts and styles.
103         */
104        public function add_scripts() {
105            $this->scripts_and_style_included = false;
106
107            if ( empty( $GLOBALS['posts'] ) || ! is_array( $GLOBALS['posts'] ) ) {
108                return;
109            }
110
111            foreach ( $GLOBALS['posts'] as $p ) {
112                if ( isset( $p->post_content ) && has_shortcode( $p->post_content, 'presentation' ) ) {
113                    $this->scripts_and_style_included = true;
114                    break;
115                }
116            }
117
118            if ( ! $this->scripts_and_style_included ) {
119                return;
120            }
121
122            $plugin = plugin_dir_url( __FILE__ );
123            // Add CSS.
124            wp_enqueue_style( 'presentations', $plugin . 'css/style.css', array(), JETPACK__VERSION );
125            // Add JavaScript.
126            wp_enqueue_script( 'jquery' );
127            wp_register_script(
128                'jetpack-shortcode-deps',
129                plugins_url( '_inc/build/shortcodes/js/dependencies.min.js', JETPACK__PLUGIN_FILE ),
130                array( 'jquery' ),
131                '20251030',
132                true
133            );
134            wp_enqueue_script(
135                'presentations',
136                Assets::get_file_url_for_environment( '_inc/build/shortcodes/js/main.min.js', 'modules/shortcodes/js/main.js' ),
137                array( 'jquery', 'jetpack-shortcode-deps' ),
138                JETPACK__VERSION,
139                true
140            );
141        }
142
143        /**
144         * Main Presentation shortcode.
145         *
146         * @param array  $atts    Shortcode attributes.
147         * @param string $content Post content.
148         */
149        public function presentation_shortcode( $atts, $content = '' ) {
150            // Mark that we've found a valid [presentation] shortcode.
151            $this->presentation_initialized = true;
152
153            $atts = shortcode_atts(
154                array(
155                    'duration'    => '',
156                    'height'      => '',
157                    'width'       => '',
158                    'bgcolor'     => '',
159                    'bgimg'       => '',
160                    'autoplay'    => '',
161
162                    // Settings.
163                    'transition'  => '',
164                    'scale'       => '',
165                    'rotate'      => '',
166                    'fade'        => '',
167                    'fadebullets' => '',
168                ),
169                $atts,
170                'presentation'
171            );
172
173            $this->presentation_settings = array(
174                'transition'  => 'down',
175                'scale'       => 1,
176                'rotate'      => 0,
177                'fade'        => 'on',
178                'fadebullets' => 0,
179                'last'        => array(
180                    'x'      => 0,
181                    'y'      => 0,
182                    'scale'  => 1,
183                    'rotate' => 0,
184                ),
185            );
186
187            // Set the presentation-wide settings.
188            if ( '' !== trim( $atts['transition'] ) ) {
189                $this->presentation_settings['transition'] = $atts['transition'];
190            }
191
192            if ( '' !== trim( $atts['scale'] ) ) {
193                $this->presentation_settings['scale'] = (float) $atts['scale'];
194            }
195
196            if ( '' !== trim( $atts['rotate'] ) ) {
197                $this->presentation_settings['rotate'] = (float) $atts['rotate'];
198            }
199
200            if ( '' !== trim( $atts['fade'] ) ) {
201                $this->presentation_settings['fade'] = $atts['fade'];
202            }
203
204            if ( '' !== trim( $atts['fadebullets'] ) ) {
205                $this->presentation_settings['fadebullets'] = $atts['fadebullets'];
206            }
207
208            // Set any settings the slides don't care about.
209            if ( '' !== trim( $atts['duration'] ) ) {
210                $duration = (float) $atts['duration'] . 's';
211            } else {
212                $duration = '1s';
213            }
214
215            // Autoplay durations are set in milliseconds.
216            if ( '' !== trim( $atts['autoplay'] ) ) {
217                $autoplay = (float) $atts['autoplay'] * 1000;
218            } else {
219                $autoplay = 0;
220            } // No autoplay
221
222            // Set the presentation size as specified or with some nicely sized dimensions.
223            if ( '' !== trim( $atts['width'] ) ) {
224                $this->presentation_settings['width'] = (int) $atts['width'];
225            } else {
226                $this->presentation_settings['width'] = 480;
227            }
228
229            if ( '' !== trim( $atts['height'] ) ) {
230                $this->presentation_settings['height'] = (int) $atts['height'];
231            } else {
232                $this->presentation_settings['height'] = 370;
233            }
234
235            // Hide the content by default in case the scripts fail.
236            $style = 'display: none; width: ' . $this->presentation_settings['width'] . 'px; height: ' . $this->presentation_settings['height'] . 'px;';
237
238            /*
239             * Check for background color XOR background image
240             * Use a white background if nothing specified
241             */
242            if ( preg_match( '/https?\:\/\/[^\'"\s]*/', $atts['bgimg'], $matches ) ) {
243                $style .= ' background-image: url("' . esc_url( $matches[0] ) . '");';
244            } elseif ( '' !== trim( $atts['bgcolor'] ) ) {
245                $style .= ' background-color: ' . esc_attr( $atts['bgcolor'] ) . ';';
246            } else {
247                $style .= ' background-color: #fff;';
248            }
249
250            // Not supported message style is inlined incase the style sheet doesn't get included.
251            $out  = "<section class='presentation-wrapper'>";
252            $out .= "<p class='not-supported-msg' style='display: inherit; padding: 25%; text-align: center;'>";
253            $out .= __( 'This slideshow could not be started. Try refreshing the page or viewing it in another browser.', 'jetpack' ) . '</p>';
254
255            $out .= sprintf(
256                '<div class="presentation" duration="%s" data-autoplay="%s" style="%s">',
257                esc_attr( $duration ),
258                esc_attr( $autoplay ),
259                esc_attr( $style )
260            );
261            $out .= "<div class='nav-arrow-left'></div>";
262            $out .= "<div class='nav-arrow-right'></div>";
263            $out .= "<div class='nav-fullscreen-button'></div>";
264
265            if ( $autoplay ) {
266                $out .= '<div class="autoplay-overlay" style="display: none;"><p class="overlay-msg">';
267                $out .= __( 'Click to autoplay the presentation!', 'jetpack' );
268                $out .= '</p></div>';
269            }
270
271            $out .= do_shortcode( $content );
272
273            $out .= '</section>';
274
275            $this->presentation_initialized = false;
276
277            return $out;
278        }
279
280        /**
281         * Slide shortcode.
282         *
283         * @param array  $atts    Shortcode attributes.
284         * @param string $content Post content.
285         */
286        public function slide_shortcode( $atts, $content = '' ) {
287            // Bail out unless wrapped by a [presentation] shortcode.
288            if ( ! $this->presentation_initialized ) {
289                return $content;
290            }
291
292            $atts = shortcode_atts(
293                array(
294                    'transition'  => '',
295                    'scale'       => '',
296                    'rotate'      => '',
297                    'fade'        => '',
298                    'fadebullets' => '',
299                    'bgcolor'     => '',
300                    'bgimg'       => '',
301                ),
302                $atts,
303                'slide'
304            );
305
306            // Determine positioning based on transition.
307            if ( '' === trim( $atts['transition'] ) ) {
308                $atts['transition'] = $this->presentation_settings['transition'];
309            }
310
311            // Setting the content scale.
312            if ( '' === trim( $atts['scale'] ) ) {
313                $atts['scale'] = $this->presentation_settings['scale'];
314            }
315
316            if ( '' === trim( $atts['scale'] ) ) {
317                $scale = 1;
318            } else {
319                $scale = (float) $atts['scale'];
320            }
321
322            if ( $scale < 0 ) {
323                $scale *= -1;
324            }
325
326            // Setting the content rotation.
327            if ( '' === trim( $atts['rotate'] ) ) {
328                $atts['rotate'] = $this->presentation_settings['rotate'];
329            }
330
331            if ( '' === trim( $atts['rotate'] ) ) {
332                $rotate = 0;
333            } else {
334                $rotate = (float) $atts['rotate'];
335            }
336
337            // Setting if the content should fade.
338            if ( '' === trim( $atts['fade'] ) ) {
339                $atts['fade'] = $this->presentation_settings['fade'];
340            }
341
342            if ( 'on' === $atts['fade'] || 'true' === $atts['fade'] ) {
343                $fade = 'fade';
344            } else {
345                $fade = '';
346            }
347
348            // Setting if bullets should fade on step changes.
349            if ( '' === trim( $atts['fadebullets'] ) ) {
350                $atts['fadebullets'] = $this->presentation_settings['fadebullets'];
351            }
352
353            if ( 'on' === $atts['fadebullets'] || 'true' === $atts['fadebullets'] ) {
354                $fadebullets = 'fadebullets';
355            } else {
356                $fadebullets = '';
357            }
358
359            $coords = $this->get_coords(
360                array(
361                    'transition' => $atts['transition'],
362                    'scale'      => $scale,
363                    'rotate'     => $rotate,
364                )
365            );
366
367            $x = $coords['x'];
368            $y = $coords['y'];
369
370            /*
371             * Check for background color XOR background image
372             * Use a white background if nothing specified
373             */
374            if ( preg_match( '/https?\:\/\/[^\'"\s]*/', $atts['bgimg'], $matches ) ) {
375                $style = 'background-image: url("' . esc_url( $matches[0] ) . '");';
376            } elseif ( '' !== trim( $atts['bgcolor'] ) ) {
377                $style = 'background-color: ' . esc_attr( $atts['bgcolor'] ) . ';';
378            } else {
379                $style = '';
380            }
381
382            // Put everything together and let jmpress do the magic!
383            $out = sprintf(
384                '<div class="step %s %s" data-x="%s" data-y="%s" data-scale="%s" data-rotate="%s" style="%s">',
385                esc_attr( $fade ),
386                esc_attr( $fadebullets ),
387                esc_attr( $x ),
388                esc_attr( $y ),
389                esc_attr( $scale ),
390                esc_attr( $rotate ),
391                esc_attr( $style )
392            );
393
394            $out .= '<div class="slide-content">';
395            $out .= do_shortcode( $content );
396            $out .= '</div></div>';
397
398            return $out;
399        }
400
401        /**
402         * Determines the position of the next slide based on the position and scaling of the previous slide.
403         *
404         * @param array $args {
405         * Array of key-value pairs.
406         *
407         *  @type string $transition: the transition name, "up", "down", "left", or "right".
408         *  @type float $scale: the scale of the next slide (used to determine the position of the slide after that).
409         * }
410         *
411         * @return array with the 'x' and 'y' coordinates of the slide.
412         */
413        private function get_coords( $args ) {
414            if ( 0 === $args['scale'] ) {
415                $args['scale'] = 1;
416            }
417
418            $width  = $this->presentation_settings['width'];
419            $height = $this->presentation_settings['height'];
420            $last   = $this->presentation_settings['last'];
421            $scale  = $last['scale'];
422
423            $next = array(
424                'x'      => $last['x'],
425                'y'      => $last['y'],
426                'scale'  => $args['scale'],
427                'rotate' => $args['rotate'],
428            );
429
430            // All angles are measured from the vertical axis, so everything is backwards!
431            $diag_angle = atan2( $width, $height );
432            $diagonal   = sqrt( pow( $width, 2 ) + pow( $height, 2 ) );
433
434            /*
435             * We offset the angles by the angle formed by the diagonal so that
436             * we can multiply the sines directly against the diagonal length
437             */
438            $theta = deg2rad( $last['rotate'] ) - $diag_angle;
439            $phi   = deg2rad( $next['rotate'] ) - $diag_angle;
440
441            // We start by displacing by the slide dimensions.
442            $total_horiz_disp = $width * $scale;
443            $total_vert_disp  = $height * $scale;
444
445            /*
446             * If the previous slide was rotated, we add the incremental offset from the rotation
447             * Namely the difference between the regular dimension (no rotation) and the component
448             * of the diagonal for that angle
449             */
450            $total_horiz_disp += ( ( ( abs( sin( $theta ) ) * $diagonal ) - $width ) / 2 ) * $scale;
451            $total_vert_disp  += ( ( ( abs( cos( $theta ) ) * $diagonal ) - $height ) / 2 ) * $scale;
452
453            /*
454             * Similarly, we check if the current slide has been rotated and add whatever additional
455             * offset has been added. This is so that two rotated corners don't clash with each other.
456             * Note: we are checking the raw angle relative to the vertical axis, NOT the diagonal angle.
457             */
458            if ( 0 !== $next['rotate'] % 180 ) {
459                $total_horiz_disp += ( abs( ( sin( $phi ) * $diagonal ) - $width ) / 2 ) * $next['scale'];
460                $total_vert_disp  += ( abs( ( cos( $phi ) * $diagonal ) - $height ) / 2 ) * $next['scale'];
461            }
462
463            switch ( trim( $args['transition'] ) ) {
464                case 'none':
465                    break;
466
467                case 'left':
468                    $next['x'] -= $total_horiz_disp;
469                    break;
470
471                case 'right':
472                    $next['x'] += $total_horiz_disp;
473                    break;
474
475                case 'up':
476                    $next['y'] -= $total_vert_disp;
477                    break;
478
479                case 'down':
480                default:
481                    $next['y'] += $total_vert_disp;
482                    break;
483            }
484
485            $this->presentation_settings['last'] = $next;
486
487            return $next;
488        }
489    }
490
491    $GLOBALS['presentations'] = new Presentations();
492endif;