presentations.php
| 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_enqueue_script( |
| 128 | 'jmpress', |
| 129 | Assets::get_file_url_for_environment( '_inc/build/shortcodes/js/jmpress.min.js', 'modules/shortcodes/js/jmpress.js' ), |
| 130 | array( 'jquery' ), |
| 131 | JETPACK__VERSION, |
| 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', 'jmpress' ), |
| 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; |
| 493 |