[Summary view] [Print] [Text view]

   1  /* global BP_Uploader, _, Backbone */
   2  
   3  window.bp = window.bp || {};
   4  
   5  ( function( bp, $ ) {
   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 feedbackCode, feedbackViews = [];
 197  
 198              if ( ! _.isUndefined( model.get( 'url' ) ) ) {
 199                  feedbackCode = model.get( 'feedback_code' );
 200  
 201                  // Image is too small.
 202                  if ( 0 === feedbackCode ) {
 203                      feedbackCode = 1;
 204                      feedbackViews.push(
 205                          new bp.Views.CoverImageStatus( {
 206                              value : BP_Uploader.strings.cover_image_warnings.dimensions,
 207                              type  : 'warning'
 208                          } )
 209                      );
 210                  }
 211  
 212                  feedbackViews.unshift(
 213                      new bp.Views.CoverImageStatus( {
 214                          value : BP_Uploader.strings.feedback_messages[ feedbackCode ],
 215                          type  : 'success'
 216                      } )
 217                  );
 218  
 219                  // Success, Rock n roll!
 220                  this.views.set( '.bp-uploader-progress', feedbackViews );
 221  
 222                  // Update the header of the page.
 223                  $( '#header-cover-image' ).css( {
 224                      'background-image': 'url( ' + model.get( 'url' ) + ' )'
 225                  } );
 226  
 227                  // Add the delete view.
 228                  bp.CoverImage.deleteView();
 229  
 230                  /**
 231                   * Set the Attachment object.
 232                   *
 233                   * You can run extra actions once the cover image is set using:
 234                   * bp.CoverImage.Attachment.on( 'change:url', function( data ) { your code } );
 235                   *
 236                   * In this case data.attributes will include the url to the newly
 237                   * uploaded cover image, the object and the item_id concerned.
 238                   */
 239                  bp.CoverImage.Attachment.set( _.extend(
 240                      _.pick( BP_Uploader.settings.defaults.multipart_params.bp_params, ['object', 'item_id'] ),
 241                      { url: model.get( 'url' ), action: 'uploaded' }
 242                  ) );
 243              }
 244          }
 245      } );
 246  
 247      // BuddyPress Cover Image Feedback view.
 248      bp.Views.CoverImageStatus = bp.View.extend( {
 249          tagName: 'p',
 250          className: 'updated',
 251          id: 'bp-cover-image-feedback',
 252  
 253          initialize: function() {
 254              this.el.className += ' ' + this.options.type;
 255              this.value = this.options.value;
 256          },
 257  
 258          render: function() {
 259              this.$el.html( this.value );
 260              return this;
 261          }
 262      } );
 263  
 264      // BuddyPress Cover Image Delete view.
 265      bp.Views.DeleteCoverImage = bp.View.extend( {
 266          tagName: 'div',
 267          id: 'bp-delete-cover-image-container',
 268          template: bp.template( 'bp-cover-image-delete' ),
 269  
 270          events: {
 271              'click #bp-delete-cover-image': 'deleteCoverImage'
 272          },
 273  
 274          deleteCoverImage: function( event ) {
 275              event.preventDefault();
 276  
 277              bp.CoverImage.deleteCoverImage( this.model );
 278          }
 279      } );
 280  
 281      bp.CoverImage.start();
 282  
 283  })( window.bp, jQuery );