[ Index ]

PHP Cross Reference of BuddyPress

title

Body

[close]

/src/bp-core/js/ -> cover-image.js (source)

   1  /* global bp, BP_Uploader, _, Backbone */
   2  
   3  window.bp = window.bp || {};
   4  
   5  ( function( exports, $ ) {
   6  
   7      // Bail if not set
   8      if ( typeof BP_Uploader === 'undefined' ) {
   9          return;
  10      }
  11  
  12      bp.Models      = bp.Models || {};
  13      bp.Collections = bp.Collections || {};
  14      bp.Views       = bp.Views || {};
  15  
  16      bp.CoverImage = {
  17          start: function() {
  18  
  19              // Init some vars
  20              this.views   = new Backbone.Collection();
  21              this.warning = null;
  22  
  23              // The Cover Image Attachment object.
  24              this.Attachment = new Backbone.Model();
  25  
  26              // Set up views
  27              this.uploaderView();
  28  
  29              // Inform about the needed dimensions
  30              this.displayWarning( BP_Uploader.strings.cover_image_warnings.dimensions );
  31  
  32              // Set up the delete view if needed
  33              if ( true === BP_Uploader.settings.defaults.multipart_params.bp_params.has_cover_image ) {
  34                  this.deleteView();
  35              }
  36          },
  37  
  38          uploaderView: function() {
  39              // Listen to the Queued uploads
  40              bp.Uploader.filesQueue.on( 'add', this.uploadProgress, this );
  41  
  42              // Create the BuddyPress Uploader
  43              var uploader = new bp.Views.Uploader();
  44  
  45              // Add it to views
  46              this.views.add( { id: 'upload', view: uploader } );
  47  
  48              // Display it
  49              uploader.inject( '.bp-cover-image' );
  50          },
  51  
  52          uploadProgress: function() {
  53              // Create the Uploader status view
  54              var coverImageUploadProgress = new bp.Views.coverImageUploadProgress( { collection: bp.Uploader.filesQueue } );
  55  
  56              if ( ! _.isUndefined( this.views.get( 'status' ) ) ) {
  57                  this.views.set( { id: 'status', view: coverImageUploadProgress } );
  58              } else {
  59                  this.views.add( { id: 'status', view: coverImageUploadProgress } );
  60              }
  61  
  62              // Display it
  63              coverImageUploadProgress.inject( '.bp-cover-image-status' );
  64          },
  65  
  66          deleteView: function() {
  67              // Create the delete model
  68              var delete_model = new Backbone.Model( _.pick( BP_Uploader.settings.defaults.multipart_params.bp_params,
  69                  ['object', 'item_id', 'nonces']
  70              ) );
  71  
  72              // Do not add it if already there!
  73              if ( ! _.isUndefined( this.views.get( 'delete' ) ) ) {
  74                  return;
  75              }
  76  
  77              // Create the delete view
  78              var deleteView = new bp.Views.DeleteCoverImage( { model: delete_model } );
  79  
  80              // Add it to views
  81              this.views.add( { id: 'delete', view: deleteView } );
  82  
  83              // Display it
  84              deleteView.inject( '.bp-cover-image-manage' );
  85          },
  86  
  87          deleteCoverImage: function( model ) {
  88              var self = this,
  89                  deleteView;
  90  
  91              // Remove the delete view
  92              if ( ! _.isUndefined( this.views.get( 'delete' ) ) ) {
  93                  deleteView = this.views.get( 'delete' );
  94                  deleteView.get( 'view' ).remove();
  95                  this.views.remove( { id: 'delete', view: deleteView } );
  96              }
  97  
  98              // Remove the cover image !
  99              bp.ajax.post( 'bp_cover_image_delete', {
 100                  json:          true,
 101                  item_id:       model.get( 'item_id' ),
 102                  object:        model.get( 'object' ),
 103                  nonce:         model.get( 'nonces' ).remove
 104              } ).done( function( response ) {
 105                  var coverImageStatus = new bp.Views.CoverImageStatus( {
 106                      value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
 107                      type : 'success'
 108                  } );
 109  
 110                  self.views.add( {
 111                      id   : 'status',
 112                      view : coverImageStatus
 113                  } );
 114  
 115                  coverImageStatus.inject( '.bp-cover-image-status' );
 116  
 117                  // Reset the header of the page
 118                  if ( '' === response.reset_url ) {
 119                      $( '#header-cover-image' ).css( {
 120                          'background-image': 'none'
 121                      } );
 122                  } else {
 123                      $( '#header-cover-image' ).css( {
 124                          'background-image': 'url( ' + response.reset_url + ' )'
 125                      } );
 126                  }
 127  
 128                  // Reset the has_cover_image bp_param
 129                  BP_Uploader.settings.defaults.multipart_params.bp_params.has_cover_image = false;
 130  
 131                  /**
 132                   * Reset the Attachment object
 133                   *
 134                   * You can run extra actions once the cover image is set using:
 135                   * bp.CoverImage.Attachment.on( 'change:url', function( data ) { your code } );
 136                   *
 137                   * In this case data.attributes will include the default url for the
 138                   * cover image (most of the time: ''), the object and the item_id concerned.
 139                   */
 140                  self.Attachment.set( _.extend(
 141                      _.pick( model.attributes, ['object', 'item_id'] ),
 142                      { url: response.reset_url, action: 'deleted' }
 143                  ) );
 144  
 145              } ).fail( function( response ) {
 146                  var feedback = BP_Uploader.strings.default_error;
 147                  if ( ! _.isUndefined( response ) ) {
 148                      feedback = BP_Uploader.strings.feedback_messages[ response.feedback_code ];
 149                  }
 150  
 151                  var coverImageStatus = new bp.Views.CoverImageStatus( {
 152                      value : feedback,
 153                      type : 'error'
 154                  } );
 155  
 156                  self.views.add( {
 157                      id   : 'status',
 158                      view : coverImageStatus
 159                  } );
 160  
 161                  coverImageStatus.inject( '.bp-cover-image-status' );
 162  
 163                  // Put back the delete view
 164                  bp.CoverImage.deleteView();
 165              } );
 166          },
 167  
 168          removeWarning: function() {
 169              if ( ! _.isNull( this.warning ) ) {
 170                  this.warning.remove();
 171              }
 172          },
 173  
 174          displayWarning: function( message ) {
 175              this.removeWarning();
 176  
 177              this.warning = new bp.Views.uploaderWarning( {
 178                  value: message
 179              } );
 180  
 181              this.warning.inject( '.bp-cover-image-status' );
 182          }
 183      };
 184  
 185      // Custom Uploader Files view
 186      bp.Views.coverImageUploadProgress = bp.Views.uploaderStatus.extend( {
 187          className: 'files',
 188  
 189          initialize: function() {
 190              bp.Views.uploaderStatus.prototype.initialize.apply( this, arguments );
 191  
 192              this.collection.on( 'change:url', this.uploadResult, this );
 193          },
 194  
 195          uploadResult: function( model ) {
 196              var message, type;
 197  
 198              if ( ! _.isUndefined( model.get( 'url' ) ) ) {
 199  
 200                  // Image is too small
 201                  if ( 0 === model.get( 'feedback_code' ) ) {
 202                      message = BP_Uploader.strings.cover_image_warnings.dimensions;
 203                      type    = 'warning';
 204  
 205                  // Success, Rock n roll!
 206                  } else {
 207                      message = BP_Uploader.strings.feedback_messages[ model.get( 'feedback_code' ) ];
 208                      type = 'success';
 209                  }
 210  
 211                  this.views.set( '.bp-uploader-progress', new bp.Views.CoverImageStatus( {
 212                      value : message,
 213                      type  : type
 214                  } ) );
 215  
 216                  // Update the header of the page
 217                  $( '#header-cover-image' ).css( {
 218                      'background-image': 'url( ' + model.get( 'url' ) + ' )'
 219                  } );
 220  
 221                  // Add the delete view
 222                  bp.CoverImage.deleteView();
 223  
 224                  /**
 225                   * Set the Attachment object
 226                   *
 227                   * You can run extra actions once the cover image is set using:
 228                   * bp.CoverImage.Attachment.on( 'change:url', function( data ) { your code } );
 229                   *
 230                   * In this case data.attributes will include the url to the newly
 231                   * uploaded cover image, the object and the item_id concerned.
 232                   */
 233                  bp.CoverImage.Attachment.set( _.extend(
 234                      _.pick( BP_Uploader.settings.defaults.multipart_params.bp_params, ['object', 'item_id'] ),
 235                      { url: model.get( 'url' ), action: 'uploaded' }
 236                  ) );
 237              }
 238          }
 239      } );
 240  
 241      // BuddyPress Cover Image Feedback view
 242      bp.Views.CoverImageStatus = bp.View.extend( {
 243          tagName: 'p',
 244          className: 'updated',
 245          id: 'bp-cover-image-feedback',
 246  
 247          initialize: function() {
 248              this.el.className += ' ' + this.options.type;
 249              this.value = this.options.value;
 250          },
 251  
 252          render: function() {
 253              this.$el.html( this.value );
 254              return this;
 255          }
 256      } );
 257  
 258      // BuddyPress Cover Image Delete view
 259      bp.Views.DeleteCoverImage = bp.View.extend( {
 260          tagName: 'div',
 261          id: 'bp-delete-cover-image-container',
 262          template: bp.template( 'bp-cover-image-delete' ),
 263  
 264          events: {
 265              'click #bp-delete-cover-image': 'deleteCoverImage'
 266          },
 267  
 268          deleteCoverImage: function( event ) {
 269              event.preventDefault();
 270  
 271              bp.CoverImage.deleteCoverImage( this.model );
 272          }
 273      } );
 274  
 275      bp.CoverImage.start();
 276  
 277  })( bp, jQuery );


Generated: Tue Jul 23 01:01:40 2019 Cross-referenced by PHPXref 0.7.1