[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Core component CSS & JS.
   4   *
   5   * @package BuddyPress
   6   * @subpackage Core
   7   * @since 1.0.0
   8   */
   9  
  10  // Exit if accessed directly.
  11  defined( 'ABSPATH' ) || exit;
  12  
  13  /**
  14   * Register scripts commonly used by BuddyPress.
  15   *
  16   * @since 2.1.0
  17   */
  18  function bp_core_register_common_scripts() {
  19      $min = bp_core_get_minified_asset_suffix();
  20      $url = buddypress()->plugin_url . 'bp-core/js/';
  21  
  22      /*
  23       * Moment.js locale.
  24       *
  25       * Try to map current WordPress locale to a moment.js locale file for loading.
  26       *
  27       * eg. French (France) locale for WP is fr_FR. Here, we try to find fr-fr.js
  28       *     (this file doesn't exist).
  29       */
  30      $wp_locale = sanitize_file_name( strtolower( get_locale() ) );
  31  
  32      // WP uses ISO 639-2 or -3 codes for some locales, which we must translate back to ISO 639-1.
  33      $iso_locales = array(
  34          'bel' => 'be',
  35          'bre' => 'br',
  36          'kir' => 'ky',
  37          'mri' => 'mi',
  38          'ssw' => 'ss',
  39      );
  40  
  41      if ( isset( $iso_locales[ $wp_locale ] ) ) {
  42          $locale = $iso_locales[ $wp_locale ];
  43      } else {
  44          $locale = $wp_locale;
  45      }
  46  
  47      $locale = str_replace( '_', '-', $locale );
  48      if ( file_exists( buddypress()->core->path . "bp-core/js/vendor/moment-js/locale/{$locale}{$min}.js" ) ) {
  49          $moment_locale_url = $url . "vendor/moment-js/locale/{$locale}{$min}.js";
  50  
  51      /*
  52       * Try to find the short-form locale.
  53       *
  54       * eg. French (France) locale for WP is fr_FR. Here, we try to find fr.js
  55       *     (this exists).
  56       */
  57      } else {
  58          $locale = substr( $locale, 0, strpos( $locale, '-' ) );
  59          if ( file_exists( buddypress()->core->path . "bp-core/js/vendor/moment-js/locale/{$locale}{$min}.js" ) ) {
  60              $moment_locale_url = $url . "vendor/moment-js/locale/{$locale}{$min}.js";
  61          }
  62      }
  63  
  64      // Set up default scripts to register.
  65      $scripts = array(
  66          // Legacy.
  67          'bp-confirm'        => array( 'file' => "{$url}confirm{$min}.js", 'dependencies' => array( 'jquery' ), 'footer' => false ),
  68          'bp-widget-members' => array( 'file' => "{$url}widget-members{$min}.js", 'dependencies' => array( 'jquery' ), 'footer' => false ),
  69          'bp-jquery-query'   => array( 'file' => "{$url}jquery-query{$min}.js", 'dependencies' => array( 'jquery' ), 'footer' => false ),
  70          'bp-jquery-cookie'  => array( 'file' => "{$url}vendor/jquery-cookie{$min}.js", 'dependencies' => array( 'jquery' ), 'footer' => false ),
  71          'bp-jquery-scroll-to' => array( 'file' => "{$url}vendor/jquery-scroll-to{$min}.js", 'dependencies' => array( 'jquery' ), 'footer' => false ),
  72  
  73          // Version 2.1.
  74          'jquery-caret' => array( 'file' => "{$url}vendor/jquery.caret{$min}.js", 'dependencies' => array( 'jquery' ), 'footer' => true ),
  75          'jquery-atwho' => array( 'file' => "{$url}vendor/jquery.atwho{$min}.js", 'dependencies' => array( 'jquery', 'jquery-caret' ), 'footer' => true ),
  76  
  77          // Version 2.3.
  78          'bp-plupload' => array( 'file' => "{$url}bp-plupload{$min}.js", 'dependencies' => array( 'plupload', 'jquery', 'json2', 'wp-backbone' ), 'footer' => true ),
  79          'bp-avatar'   => array( 'file' => "{$url}avatar{$min}.js", 'dependencies' => array( 'jcrop' ), 'footer' => true ),
  80          'bp-webcam'   => array( 'file' => "{$url}webcam{$min}.js", 'dependencies' => array( 'bp-avatar' ), 'footer' => true ),
  81  
  82          // Version 2.4.
  83          'bp-cover-image' => array( 'file' => "{$url}cover-image{$min}.js", 'dependencies' => array(), 'footer' => true ),
  84  
  85          // Version 2.7.
  86          'bp-moment'    => array( 'file' => "{$url}vendor/moment-js/moment{$min}.js", 'dependencies' => array(), 'footer' => true ),
  87          'bp-livestamp' => array( 'file' => "{$url}vendor/livestamp{$min}.js", 'dependencies' => array( 'jquery', 'bp-moment' ), 'footer' => true ),
  88      );
  89  
  90      // Version 2.7 - Add Moment.js locale to our $scripts array if we found one.
  91      if ( isset( $moment_locale_url ) ) {
  92          $scripts['bp-moment-locale'] = array( 'file' => esc_url( $moment_locale_url ), 'dependencies' => array( 'bp-moment' ), 'footer' => true );
  93      }
  94  
  95      /**
  96       * Filters the BuddyPress Core javascript files to register.
  97       *
  98       * Default handles include 'bp-confirm', 'bp-widget-members',
  99       * 'bp-jquery-query', 'bp-jquery-cookie', and 'bp-jquery-scroll-to'.
 100       *
 101       * @since 2.1.0 'jquery-caret', 'jquery-atwho' added.
 102       * @since 2.3.0 'bp-plupload', 'bp-avatar', 'bp-webcam' added.
 103       * @since 2.4.0 'bp-cover-image' added.
 104       * @since 2.7.0 'bp-moment', 'bp-livestamp' added.
 105       *              'bp-moment-locale' is added conditionally if a moment.js locale file is found.
 106       *
 107       * @param array $value Array of javascript file information to register.
 108       */
 109      $scripts = apply_filters( 'bp_core_register_common_scripts', $scripts );
 110  
 111  
 112      $version = bp_get_version();
 113      foreach ( $scripts as $id => $script ) {
 114          wp_register_script( $id, $script['file'], $script['dependencies'], $version, $script['footer'] );
 115      }
 116  }
 117  add_action( 'bp_enqueue_scripts',       'bp_core_register_common_scripts', 1 );
 118  add_action( 'bp_admin_enqueue_scripts', 'bp_core_register_common_scripts', 1 );
 119  
 120  /**
 121   * Register styles commonly used by BuddyPress.
 122   *
 123   * @since 2.1.0
 124   */
 125  function bp_core_register_common_styles() {
 126      $min = bp_core_get_minified_asset_suffix();
 127      $url = buddypress()->plugin_url . 'bp-core/css/';
 128  
 129      /**
 130       * Filters the URL for the Admin Bar stylesheet.
 131       *
 132       * @since 1.1.0
 133       *
 134       * @param string $value URL for the Admin Bar stylesheet.
 135       */
 136      $admin_bar_file = apply_filters( 'bp_core_admin_bar_css', "{$url}admin-bar{$min}.css" );
 137  
 138      /**
 139       * Filters the BuddyPress Core stylesheet files to register.
 140       *
 141       * @since 2.1.0
 142       *
 143       * @param array $value Array of stylesheet file information to register.
 144       */
 145      $styles = apply_filters( 'bp_core_register_common_styles', array(
 146          'bp-admin-bar' => array(
 147              'file'         => $admin_bar_file,
 148              'dependencies' => array( 'admin-bar' )
 149          ),
 150          'bp-avatar' => array(
 151              'file'         => "{$url}avatar{$min}.css",
 152              'dependencies' => array( 'jcrop' )
 153          ),
 154      ) );
 155  
 156      foreach ( $styles as $id => $style ) {
 157          wp_register_style( $id, $style['file'], $style['dependencies'], bp_get_version() );
 158  
 159          wp_style_add_data( $id, 'rtl', 'replace' );
 160          if ( $min ) {
 161              wp_style_add_data( $id, 'suffix', $min );
 162          }
 163      }
 164  }
 165  add_action( 'bp_enqueue_scripts',       'bp_core_register_common_styles', 1 );
 166  add_action( 'bp_admin_enqueue_scripts', 'bp_core_register_common_styles', 1 );
 167  
 168  /**
 169   * Load the JS for "Are you sure?" confirm links.
 170   *
 171   * @since 1.1.0
 172   */
 173  function bp_core_confirmation_js() {
 174      if ( is_multisite() && ! bp_is_root_blog() ) {
 175          return false;
 176      }
 177  
 178      wp_enqueue_script( 'bp-confirm' );
 179  
 180      wp_localize_script( 'bp-confirm', 'BP_Confirm', array(
 181          'are_you_sure' => __( 'Are you sure?', 'buddypress' ),
 182      ) );
 183  
 184  }
 185  add_action( 'bp_enqueue_scripts',       'bp_core_confirmation_js' );
 186  add_action( 'bp_admin_enqueue_scripts', 'bp_core_confirmation_js' );
 187  
 188  /**
 189   * Enqueues the css and js required by the Avatar UI.
 190   *
 191   * @since 2.3.0
 192   */
 193  function bp_core_avatar_scripts() {
 194      if ( ! bp_avatar_is_front_edit() ) {
 195          return false;
 196      }
 197  
 198      // Enqueue the Attachments scripts for the Avatar UI.
 199      bp_attachments_enqueue_scripts( 'BP_Attachment_Avatar' );
 200  
 201      // Add Some actions for Theme backcompat.
 202      add_action( 'bp_after_profile_avatar_upload_content', 'bp_avatar_template_check' );
 203      add_action( 'bp_after_group_admin_content',           'bp_avatar_template_check' );
 204      add_action( 'bp_after_group_avatar_creation_step',    'bp_avatar_template_check' );
 205  }
 206  add_action( 'bp_enqueue_scripts', 'bp_core_avatar_scripts' );
 207  
 208  /**
 209   * Enqueues the css and js required by the Cover Image UI.
 210   *
 211   * @since 2.4.0
 212   */
 213  function bp_core_cover_image_scripts() {
 214      if ( ! bp_attachments_cover_image_is_edit() ) {
 215          return false;
 216      }
 217  
 218      // Enqueue the Attachments scripts for the Cover Image UI.
 219      bp_attachments_enqueue_scripts( 'BP_Attachment_Cover_Image' );
 220  }
 221  add_action( 'bp_enqueue_scripts', 'bp_core_cover_image_scripts' );
 222  
 223  /**
 224   * Enqueues jCrop library and hooks BP's custom cropper JS.
 225   *
 226   * @since 1.1.0
 227   */
 228  function bp_core_add_jquery_cropper() {
 229      wp_enqueue_style( 'jcrop' );
 230      wp_enqueue_script( 'jcrop', array( 'jquery' ) );
 231      add_action( 'wp_head', 'bp_core_add_cropper_inline_js' );
 232      add_action( 'wp_head', 'bp_core_add_cropper_inline_css' );
 233  }
 234  
 235  /**
 236   * Output the inline JS needed for the cropper to work on a per-page basis.
 237   *
 238   * @since 1.1.0
 239   */
 240  function bp_core_add_cropper_inline_js() {
 241  
 242      /**
 243       * Filters the return value of getimagesize to determine if an image was uploaded.
 244       *
 245       * @since 1.1.0
 246       *
 247       * @param array $value Array of data found by getimagesize.
 248       */
 249      $image = apply_filters( 'bp_inline_cropper_image', getimagesize( bp_core_avatar_upload_path() . buddypress()->avatar_admin->image->dir ) );
 250      if ( empty( $image ) ) {
 251          return;
 252      }
 253  
 254      // Get avatar full width and height.
 255      $full_height = bp_core_avatar_full_height();
 256      $full_width  = bp_core_avatar_full_width();
 257  
 258      // Calculate Aspect Ratio.
 259      if ( !empty( $full_height ) && ( $full_width != $full_height ) ) {
 260          $aspect_ratio = $full_width / $full_height;
 261      } else {
 262          $aspect_ratio = 1;
 263      }
 264  
 265      // Default cropper coordinates.
 266      // Smaller than full-width: cropper defaults to entire image.
 267      if ( $image[0] < $full_width ) {
 268          $crop_left  = 0;
 269          $crop_right = $image[0];
 270  
 271      // Less than 2x full-width: cropper defaults to full-width.
 272      } elseif ( $image[0] < ( $full_width * 2 ) ) {
 273          $padding_w  = round( ( $image[0] - $full_width ) / 2 );
 274          $crop_left  = $padding_w;
 275          $crop_right = $image[0] - $padding_w;
 276  
 277      // Larger than 2x full-width: cropper defaults to 1/2 image width.
 278      } else {
 279          $crop_left  = round( $image[0] / 4 );
 280          $crop_right = $image[0] - $crop_left;
 281      }
 282  
 283      // Smaller than full-height: cropper defaults to entire image.
 284      if ( $image[1] < $full_height ) {
 285          $crop_top    = 0;
 286          $crop_bottom = $image[1];
 287  
 288      // Less than double full-height: cropper defaults to full-height.
 289      } elseif ( $image[1] < ( $full_height * 2 ) ) {
 290          $padding_h   = round( ( $image[1] - $full_height ) / 2 );
 291          $crop_top    = $padding_h;
 292          $crop_bottom = $image[1] - $padding_h;
 293  
 294      // Larger than 2x full-height: cropper defaults to 1/2 image height.
 295      } else {
 296          $crop_top    = round( $image[1] / 4 );
 297          $crop_bottom = $image[1] - $crop_top;
 298      }
 299  
 300      ?>
 301  
 302      <script type="text/javascript">
 303          jQuery( window ).on( 'load', function() {
 304              jQuery( '#avatar-to-crop' ).Jcrop( {
 305                  onChange: showPreview,
 306                  onSelect: updateCoords,
 307                  aspectRatio: <?php echo (int) $aspect_ratio; ?>,
 308                  setSelect: [ <?php echo (int) $crop_left; ?>, <?php echo (int) $crop_top; ?>, <?php echo (int) $crop_right; ?>, <?php echo (int) $crop_bottom; ?> ]
 309              } );
 310          } );
 311  
 312  		function updateCoords(c) {
 313              jQuery('#x').val(c.x);
 314              jQuery('#y').val(c.y);
 315              jQuery('#w').val(c.w);
 316              jQuery('#h').val(c.h);
 317          }
 318  
 319  		function showPreview(coords) {
 320              if ( parseInt(coords.w) > 0 ) {
 321                  var fw = <?php echo (int) $full_width; ?>;
 322                  var fh = <?php echo (int) $full_height; ?>;
 323                  var rx = fw / coords.w;
 324                  var ry = fh / coords.h;
 325  
 326                  jQuery( '#avatar-crop-preview' ).css({
 327                      width: Math.round(rx * <?php echo (int) $image[0]; ?>) + 'px',
 328                      height: Math.round(ry * <?php echo (int) $image[1]; ?>) + 'px',
 329                      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
 330                      marginTop: '-' + Math.round(ry * coords.y) + 'px'
 331                  });
 332              }
 333          }
 334      </script>
 335  
 336  <?php
 337  }
 338  
 339  /**
 340   * Output the inline CSS for the BP image cropper.
 341   *
 342   * @since 1.1.0
 343   */
 344  function bp_core_add_cropper_inline_css() {
 345  ?>
 346  
 347      <style type="text/css">
 348          .jcrop-holder { float: left; margin: 0 20px 20px 0; text-align: left; }
 349          #avatar-crop-pane { width: <?php echo bp_core_avatar_full_width() ?>px; height: <?php echo bp_core_avatar_full_height() ?>px; overflow: hidden; }
 350          #avatar-crop-submit { margin: 20px 0; }
 351          .jcrop-holder img,
 352          #avatar-crop-pane img,
 353          #avatar-upload-form img,
 354          #create-group-form img,
 355          #group-settings-form img { border: none !important; max-width: none !important; }
 356      </style>
 357  
 358  <?php
 359  }
 360  
 361  /**
 362   * Define the 'ajaxurl' JS variable, used by themes as an AJAX endpoint.
 363   *
 364   * @since 1.1.0
 365   */
 366  function bp_core_add_ajax_url_js() {
 367  ?>
 368  
 369      <script type="text/javascript">var ajaxurl = '<?php echo bp_core_ajax_url(); ?>';</script>
 370  
 371  <?php
 372  }
 373  add_action( 'wp_head', 'bp_core_add_ajax_url_js' );
 374  
 375  /**
 376   * Get the proper value for BP's ajaxurl.
 377   *
 378   * Designed to be sensitive to FORCE_SSL_ADMIN and non-standard multisite
 379   * configurations.
 380   *
 381   * @since 1.7.0
 382   *
 383   * @return string AJAX endpoint URL.
 384   */
 385  function bp_core_ajax_url() {
 386  
 387      /**
 388       * Filters the proper value for BuddyPress' ajaxurl.
 389       *
 390       * @since 1.7.0
 391       *
 392       * @param string $value Proper ajaxurl value for BuddyPress.
 393       */
 394      return apply_filters( 'bp_core_ajax_url', admin_url( 'admin-ajax.php', is_ssl() ? 'admin' : 'http' ) );
 395  }
 396  
 397  /**
 398   * Get the JavaScript dependencies for buddypress.js.
 399   *
 400   * @since 2.0.0
 401   *
 402   * @return array The JavaScript dependencies.
 403   */
 404  function bp_core_get_js_dependencies() {
 405  
 406      /**
 407       * Filters the javascript dependencies for buddypress.js.
 408       *
 409       * @since 2.0.0
 410       *
 411       * @param array $value Array of javascript dependencies for buddypress.js.
 412       */
 413      return apply_filters( 'bp_core_get_js_dependencies', array(
 414          'jquery',
 415          'bp-confirm',
 416          'bp-widget-members',
 417          'bp-jquery-query',
 418          'bp-jquery-cookie',
 419          'bp-jquery-scroll-to'
 420      ) );
 421  }
 422  
 423  /**
 424   * Add inline css to display the component's single item cover image.
 425   *
 426   * @since 2.4.0
 427   *
 428   * @param bool $return True to get the inline css.
 429   * @return null|array|false The inline css or an associative array containing
 430   *                          the css rules and the style handle.
 431   */
 432  function bp_add_cover_image_inline_css( $return = false ) {
 433      $bp = buddypress();
 434  
 435      // Find the component of the current item.
 436      if ( bp_is_user() ) {
 437  
 438          // User is not allowed to upload cover images
 439          // no need to carry on.
 440          if ( bp_disable_cover_image_uploads() ) {
 441              return;
 442          }
 443  
 444          $cover_image_object = array(
 445              'component' => 'members',
 446              'object' => $bp->displayed_user
 447          );
 448      } elseif ( bp_is_group() ) {
 449  
 450          // Users are not allowed to upload cover images for their groups
 451          // no need to carry on.
 452          if ( bp_disable_group_cover_image_uploads() ) {
 453              return;
 454          }
 455  
 456          $cover_image_object = array(
 457              'component' =>'groups',
 458              'object' => $bp->groups->current_group
 459          );
 460      } else {
 461          $cover_image_object = apply_filters( 'bp_current_cover_image_object_inline_css', array() );
 462      }
 463  
 464      // Bail if no component were found.
 465      if ( empty( $cover_image_object['component'] ) || empty( $cover_image_object['object'] ) || ! bp_is_active( $cover_image_object['component'], 'cover_image' ) ) {
 466          return;
 467      }
 468  
 469      // Get the settings of the cover image feature for the current component.
 470      $params = bp_attachments_get_cover_image_settings( $cover_image_object['component'] );
 471  
 472      // Bail if no params.
 473      if ( empty( $params ) ) {
 474          return;
 475      }
 476  
 477      // Try to call the callback.
 478      if ( is_callable( $params['callback'] ) ) {
 479  
 480          $object_dir = $cover_image_object['component'];
 481  
 482          if ( 'members' === $object_dir ) {
 483              $object_dir = 'members';
 484          }
 485  
 486          $cover_image = bp_attachments_get_attachment( 'url', array(
 487              'object_dir' => $object_dir,
 488              'item_id'    => $cover_image_object['object']->id,
 489          ) );
 490  
 491          if ( empty( $cover_image ) ) {
 492              if ( ! empty( $params['default_cover'] ) ) {
 493                  $cover_image = $params['default_cover'];
 494              }
 495          }
 496  
 497          $inline_css = call_user_func_array( $params['callback'], array( array(
 498              'cover_image' => esc_url_raw( $cover_image ),
 499              'component'   => sanitize_key( $cover_image_object['component'] ),
 500              'object_id'   => (int) $cover_image_object['object']->id,
 501              'width'       => (int) $params['width'],
 502              'height'      => (int) $params['height'],
 503          ) ) );
 504  
 505          // Finally add the inline css to the handle.
 506          if ( ! empty( $inline_css ) ) {
 507  
 508              // Used to get the css when Ajax setting the cover image.
 509              if ( true === $return ) {
 510                  return array(
 511                      'css_rules' => '<style type="text/css">' . "\n" . $inline_css . "\n" . '</style>',
 512                      'handle'    => $params['theme_handle'],
 513                  );
 514              }
 515  
 516              wp_add_inline_style( $params['theme_handle'], $inline_css );
 517          } else {
 518              return false;
 519          }
 520      }
 521  }
 522  add_action( 'bp_enqueue_scripts', 'bp_add_cover_image_inline_css', 11 );
 523  
 524  /**
 525   * Enqueues livestamp.js on BuddyPress pages.
 526   *
 527   * @since 2.7.0
 528   */
 529  function bp_core_add_livestamp() {
 530      if ( ! is_buddypress() ) {
 531          return;
 532      }
 533  
 534      bp_core_enqueue_livestamp();
 535  }
 536  add_action( 'bp_enqueue_scripts', 'bp_core_add_livestamp' );
 537  
 538  /**
 539   * Enqueue and localize livestamp.js script.
 540   *
 541   * @since 2.7.0
 542   */
 543  function bp_core_enqueue_livestamp() {
 544      // If bp-livestamp isn't enqueued, do it now.
 545      if ( wp_script_is( 'bp-livestamp' ) ) {
 546          return;
 547      }
 548  
 549      /*
 550       * Only enqueue Moment.js locale if we registered it in
 551       * bp_core_register_common_scripts().
 552       */
 553      if ( wp_script_is( 'bp-moment-locale', 'registered' ) ) {
 554          wp_enqueue_script( 'bp-moment-locale' );
 555          wp_add_inline_script ( 'bp-livestamp', bp_core_moment_js_config() );
 556      }
 557  
 558      wp_enqueue_script( 'bp-livestamp' );
 559  }
 560  
 561  /**
 562   * Return moment.js config.
 563   *
 564   * @since 2.7.0
 565   *
 566   * @return string
 567   */
 568  function bp_core_moment_js_config() {
 569      // Grab the locale from the enqueued JS.
 570      $moment_locale = wp_scripts()->query( 'bp-moment-locale' );
 571      $moment_locale = substr( $moment_locale->src, strpos( $moment_locale->src, '/moment-js/locale/' ) + 18 );
 572      $moment_locale = str_replace( '.js', '', $moment_locale );
 573  
 574      $inline_js = <<<EOD
 575  jQuery(function() {
 576      moment.locale( '{$moment_locale}' );
 577  });
 578  EOD;
 579  
 580      return $inline_js;
 581  }