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