| @@ -1,0 +1,492 @@ | ||
| 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 | + | |
| 56 | +use Automattic\Jetpack\Assets; | |
| 57 | + | |
| 58 | +if ( ! defined( 'ABSPATH' ) ) { | |
| 59 | + exit( 0 ); | |
| 60 | +} | |
| 61 | + | |
| 62 | +if ( ! 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(); | |
| 492 | +endif; | |
