Changeset 6600 for trunk/bp-core/bp-core-cssjs.php

Timestamp:

12/10/2012 12:52:16 PM (13 years ago)

Author:

johnjamesjacoby

Message:

Avatars:

• Clean up avatar code.
• When uploading a png, use the correct file extension.
• Fixes #4705.
• Enqueue Jcrop styling.

File:

• trunk/bp-core/bp-core-cssjs.php (modified) (7 diffs)

trunk/bp-core/bp-core-cssjs.php

@@ -1 +1 @@
 <?php
+
 // Exit if accessed directly
 if ( !defined( 'ABSPATH' ) ) exit;
@@ -26 +27 @@
         });
     </script>
+
 <?php
 }
@@ -39 +41 @@
  */
 function bp_core_add_jquery_cropper() {
+    wp_enqueue_style( 'jcrop' );
     wp_enqueue_script( 'jcrop', array( 'jquery' ) );
     add_action( 'wp_head', 'bp_core_add_cropper_inline_js' );
@@ -52 +55 @@
  */
 function bp_core_add_cropper_inline_js() {
-    global $bp;
 
-    $image = apply_filters( 'bp_inline_cropper_image', getimagesize( bp_core_avatar_upload_path() . $bp->avatar_admin->image->dir ) );
-    $aspect_ratio = 1;
+    // Bail if no image was uploaded
+    $image = apply_filters( 'bp_inline_cropper_image', getimagesize( bp_core_avatar_upload_path() . buddypress()->avatar_admin->image->dir ) );
+    if ( empty( $image ) )
+        return;
 
+    //
     $full_height = bp_core_avatar_full_height();
     $full_width  = bp_core_avatar_full_width();
 
     // Calculate Aspect Ratio
-    if ( $full_height && ( $full_width != $full_height ) )
+    if ( !empty( $full_height ) && ( $full_width != $full_height ) ) {
         $aspect_ratio = $full_width / $full_height;
+    } else {
+        $aspect_ratio = 1;
+    }
 
-        $width  = $image[0] / 2;
-        $height = $image[1] / 2;
-?>
+    // Default cropper coordinates
+    $crop_left   = $image[0] / 4;
+    $crop_top    = $image[1] / 4;
+    $crop_right  = $image[0] - $crop_left;
+    $crop_bottom = $image[1] - $crop_top; ?>
 
     <script type="text/javascript">
@@ -74 +84 @@
                 onSelect: showPreview,
                 onSelect: updateCoords,
-                aspectRatio: <?php echo $aspect_ratio ?>,
-                setSelect: [ 50, 50, <?php echo $width ?>, <?php echo $height ?> ]
+                aspectRatio: <?php echo $aspect_ratio; ?>,
+                setSelect: [ <?php echo $crop_left; ?>, <?php echo $crop_top; ?>, <?php echo $crop_right; ?>, <?php echo $crop_bottom; ?> ]
             });
-            updateCoords({x: 50, y: 50, w: <?php echo $width ?>, h: <?php echo $height ?>});
+            updateCoords({x: <?php echo $crop_left; ?>, y: <?php echo $crop_top; ?>, w: <?php echo $crop_right; ?>, h: <?php echo $crop_bottom; ?>});
         });
 
@@ -89 +99 @@
         function showPreview(coords) {
             if ( parseInt(coords.w) > 0 ) {
-                var rx = <?php echo $full_width; ?> / coords.w;
-                var ry = <?php echo $full_height; ?> / coords.h;
+                var fw = <?php echo $full_width; ?>;
+                var fh = <?php echo $full_height; ?>;
+                var rx = fw / coords.w;
+                var ry = fh / coords.h;
 
-                jQuery('#avatar-crop-preview').css({
-                <?php if ( $image ) : ?>
+                jQuery( '#avatar-crop-preview' ).css({
                     width: Math.round(rx * <?php echo $image[0]; ?>) + 'px',
                     height: Math.round(ry * <?php echo $image[1]; ?>) + 'px',
-                <?php endif; ?>
                     marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                     marginTop: '-' + Math.round(ry * coords.y) + 'px'
@@ -119 +129 @@
     <style type="text/css">
         .jcrop-holder { float: left; margin: 0 20px 20px 0; text-align: left; }
-        .jcrop-vline, .jcrop-hline { font-size: 0; position: absolute; background: white top left repeat url('<?php echo BP_PLUGIN_URL ?>/bp-core/images/Jcrop.gif'); }
-        .jcrop-vline { height: 100%; width: 1px !important; }
-        .jcrop-hline { width: 100%; height: 1px !important; }
-        .jcrop-handle { font-size: 1px; width: 7px !important; height: 7px !important; border: 1px #eee solid; background-color: #333; *width: 9px; *height: 9px; }
-        .jcrop-tracker { width: 100%; height: 100%; }
-        .custom .jcrop-vline, .custom .jcrop-hline { background: yellow; }
-        .custom .jcrop-handle { border-color: black; background-color: #C7BB00; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
         #avatar-crop-pane { width: <?php echo bp_core_avatar_full_width() ?>px; height: <?php echo bp_core_avatar_full_height() ?>px; overflow: hidden; }
         #avatar-crop-submit { margin: 20px 0; }
-        #avatar-upload-form img, #create-group-form img, #group-settings-form img { border: none !important; }
+        #avatar-upload-form img,
+        #create-group-form img,
+        #group-settings-form img { border: none !important; max-width: none !important; }
     </style>