Skip to content

Instantly share code, notes, and snippets.

@imath imath/JetPack.BP.Avatar.patch Secret
Created Mar 31, 2015

Embed
What would you like to do?
Example of how JetPack could "extend" the suggested Avatar UI i'm working on (see #6290)
diff --git 3rd-party/buddypress.php 3rd-party/buddypress.php
index 9ae35f3..874ec34 100644
--- 3rd-party/buddypress.php
+++ 3rd-party/buddypress.php
@@ -7,3 +7,94 @@ function blobphoto( $bool ) {
return $bool;
}
+
+/**
+ * Example of how JetPack can add its content
+ * in the Suggested Avatar UI for BuddyPress 2.3
+ */
+class Jetpack_BuddyPress {
+
+ public static function start() {
+ $bp = buddypress();
+
+ if ( empty( $bp->jetpack ) ) {
+ $bp->jetpack = new self;
+ }
+
+ return $bp->jetpack;
+ }
+
+ public function __construct() {
+ $this->setup_globals();
+ $this->setup_hooks();
+ }
+
+ public function setup_globals() {
+ $this->version = '0.0.1';
+ }
+
+ public function setup_hooks() {
+ // 1) Register the Jetpack scripts/css needed
+ add_action( 'bp_enqueue_scripts', array( $this, 'register_script' ), 5 );
+
+ // 2) Include the Jetpack script if setting a user avatar
+ add_filter( 'bp_attachment_avatar_script_data', array( $this, 'include_script' ), 10, 1 );
+
+ // 3) Add a Jetpack tab to the BuddyPress Avatar UI
+ add_filter( 'bp_attachments_avatar_nav', array( $this, 'jetpack_nav' ), 10, 1 );
+
+ // 4) Add the needed javascript templates
+ add_action( 'bp_attachments_avatar_main_template', array( $this, 'js_template' ) );
+
+ // Optional add some custom strings
+ add_filter( 'bp_attachments_get_plupload_l10n', array( $this, 'custom_strings' ), 10, 1 );
+ }
+
+ public function register_script() {
+ wp_register_script( 'jetpack-bp-avatar', plugins_url( 'js/jetpack-bp-avatar.js', __FILE__ ), array( 'bp-avatar' ), $this->version, true );
+ }
+
+ public function include_script( $script_data = array() ) {
+ if ( bp_is_user() ) {
+ $script_data['extra_js'][] = 'jetpack-bp-avatar';
+ }
+
+ return $script_data;
+ }
+
+ public function jetpack_nav( $avatar_nav = array() ) {
+ if ( bp_is_user() ) {
+ $avatar_nav['jetpack'] = array(
+ 'id' => 'jetpack',
+ 'caption' => __( 'JetPack', 'jetpack' ),
+ // After local Uploads, before Camera
+ 'order' => 5,
+ );
+ }
+
+ return $avatar_nav;
+ }
+
+ public function js_template() {
+ ?>
+ <script id="tmpl-jetpack-avatar" type="text/html">
+ <div><img src="{{data.logo}}" alt="{{data.name}}" style="border:none;box-shadow:none"/></div>
+ <h3>{{data.claim}}</h3>
+ <p><a href="{{data.url}}" title="{{data.name}}" style="color:#FFF"><?php esc_html_e( 'Visit us!', 'jetpack' ) ;?></a></p>
+ </script>
+ <?php
+ }
+
+ public function custom_strings( $strings = array() ) {
+
+ $strings['jetpack'] = array(
+ 'name' => __( 'JetPack', 'jetpack' ),
+ 'claim' => __( 'Your WordPress, Connected.', 'jetpack' ),
+ 'url' => 'http://jetpack.me/',
+ 'logo' => plugins_url( 'images/jetpack-logo.png', dirname( __FILE__ ) ),
+ );
+
+ return $strings;
+ }
+}
+add_action( 'bp_init', array( 'Jetpack_BuddyPress', 'start' ) );
diff --git 3rd-party/js/jetpack-bp-avatar.js 3rd-party/js/jetpack-bp-avatar.js
index e69de29..b1b196d 100644
--- 3rd-party/js/jetpack-bp-avatar.js
+++ 3rd-party/js/jetpack-bp-avatar.js
@@ -0,0 +1,50 @@
+window.bp = window.bp || {};
+
+( function( exports, $ ) {
+
+ // Bail if not set
+ if ( typeof BP_Uploader === 'undefined' ) {
+ return;
+ }
+
+ bp.Models = bp.Models || {};
+ bp.Collections = bp.Collections || {};
+ bp.Views = bp.Views || {};
+
+ bp.JetPack = {
+ start: function() {
+ bp.Avatar.nav.on( 'bp-avatar-view:changed', _.bind( this.setView, this ) );
+ },
+
+ setView: function( view ) {
+ if ( 'jetpack' !== view ) {
+ // Stop as this is not JetPack area
+ return;
+ }
+
+ // Create a random model..
+ jetPackView = new bp.Views.JetPackAvatar( { model: new Backbone.Model(
+ _.pick( BP_Uploader.strings.jetpack, 'name', 'claim', 'url', 'logo' )
+ ) } );
+
+ // Add it to Avatar views
+ bp.Avatar.views.add( { id: 'jetpack', view: jetPackView } );
+
+ // Display it
+ jetPackView.inject( '.bp-avatar' );
+ },
+ };
+
+ // BuddyPress WebCam view
+ bp.Views.JetPackAvatar = bp.View.extend( {
+ tagName: 'div',
+ id: 'bp-jetpack-avatar',
+ template: bp.template( 'jetpack-avatar' ),
+ attributes: {
+ style: 'background:#81a844; margin:1em 0 0; text-align:center; color:#FFF;padding:1em 0 0;overflow:hidden',
+ }
+ } );
+
+ bp.JetPack.start();
+
+})( bp, jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.