/* global BP_Uploader, _, Backbone */ window.bp = window.bp || {}; ( function( bp, $ ) { // Bail if not set. if ( typeof BP_Uploader === 'undefined' ) { return; } bp.Models = bp.Models || {}; bp.Collections = bp.Collections || {}; bp.Views = bp.Views || {}; bp.CoverImage = { start: function() { // Init some vars. this.views = new Backbone.Collection(); this.warning = null; // The Cover Image Attachment object. this.Attachment = new Backbone.Model(); // Set up views. this.uploaderView(); // Inform about the needed dimensions. this.displayWarning( BP_Uploader.strings.cover_image_warnings.dimensions ); // Set up the delete view if needed. if ( true === BP_Uploader.settings.defaults.multipart_params.bp_params.has_cover_image ) { this.deleteView(); } }, uploaderView: function() { // Listen to the Queued uploads. bp.Uploader.filesQueue.on( 'add', this.uploadProgress, this ); // Create the BuddyPress Uploader. var uploader = new bp.Views.Uploader(); // Add it to views. this.views.add( { id: 'upload', view: uploader } ); // Display it. uploader.inject( '.bp-cover-image' ); }, uploadProgress: function() { // Create the Uploader status view. var coverImageUploadProgress = new bp.Views.coverImageUploadProgress( { collection: bp.Uploader.filesQueue } ); if ( ! _.isUndefined( this.views.get( 'status' ) ) ) { this.views.set( { id: 'status', view: coverImageUploadProgress } ); } else { this.views.add( { id: 'status', view: coverImageUploadProgress } ); } // Display it. coverImageUploadProgress.inject( '.bp-cover-image-status' ); }, deleteView: function() { // Create the delete model. var delete_model = new Backbone.Model( _.pick( BP_Uploader.settings.defaults.multipart_params.bp_params, ['object', 'item_id', 'nonces'] ) ); // Do not add it if already there! if ( ! _.isUndefined( this.views.get( 'delete' ) ) ) { return; } // Create the delete view. var deleteView = new bp.Views.DeleteCoverImage( { model: delete_model } ); // Add it to views. this.views.add( { id: 'delete', view: deleteView } ); // Display it. deleteView.inject( '.bp-cover-image-manage' ); }, deleteCoverImage: function( model ) { var self = this, deleteView; // Remove the delete view. if ( ! _.isUndefined( this.views.get( 'delete' ) ) ) { deleteView = this.views.get( 'delete' ); deleteView.get( 'view' ).remove(); this.views.remove( { id: 'delete', view: deleteView } ); } // Remove the cover image ! bp.ajax.post( 'bp_cover_image_delete', { json: true, item_id: model.get( 'item_id' ), object: model.get( 'object' ), nonce: model.get( 'nonces' ).remove } ).done( function( response ) { var coverImageStatus = new bp.Views.CoverImageStatus( { value : BP_Uploader.strings.feedback_messages[ response.feedback_code ], type : 'success' } ); self.views.add( { id : 'status', view : coverImageStatus } ); coverImageStatus.inject( '.bp-cover-image-status' ); // Reset the header of the page. if ( '' === response.reset_url ) { $( '#header-cover-image' ).css( { 'background-image': 'none' } ); } else { $( '#header-cover-image' ).css( { 'background-image': 'url( ' + response.reset_url + ' )' } ); } // Reset the has_cover_image bp_param. BP_Uploader.settings.defaults.multipart_params.bp_params.has_cover_image = false; /** * Reset the Attachment object. * * You can run extra actions once the cover image is set using: * bp.CoverImage.Attachment.on( 'change:url', function( data ) { your code } ); * * In this case data.attributes will include the default url for the * cover image (most of the time: ''), the object and the item_id concerned. */ self.Attachment.set( _.extend( _.pick( model.attributes, ['object', 'item_id'] ), { url: response.reset_url, action: 'deleted' } ) ); } ).fail( function( response ) { var feedback = BP_Uploader.strings.default_error; if ( ! _.isUndefined( response ) ) { feedback = BP_Uploader.strings.feedback_messages[ response.feedback_code ]; } var coverImageStatus = new bp.Views.CoverImageStatus( { value : feedback, type : 'error' } ); self.views.add( { id : 'status', view : coverImageStatus } ); coverImageStatus.inject( '.bp-cover-image-status' ); // Put back the delete view bp.CoverImage.deleteView(); } ); }, removeWarning: function() { if ( ! _.isNull( this.warning ) ) { this.warning.remove(); } }, displayWarning: function( message ) { this.removeWarning(); this.warning = new bp.Views.uploaderWarning( { value: message } ); this.warning.inject( '.bp-cover-image-status' ); } }; // Custom Uploader Files view. bp.Views.coverImageUploadProgress = bp.Views.uploaderStatus.extend( { className: 'files', initialize: function() { bp.Views.uploaderStatus.prototype.initialize.apply( this, arguments ); this.collection.on( 'change:url', this.uploadResult, this ); }, uploadResult: function( model ) { var feedbackCode, feedbackViews = []; if ( ! _.isUndefined( model.get( 'url' ) ) ) { feedbackCode = model.get( 'feedback_code' ); // Image is too small. if ( 0 === feedbackCode ) { feedbackCode = 1; feedbackViews.push( new bp.Views.CoverImageStatus( { value : BP_Uploader.strings.cover_image_warnings.dimensions, type : 'warning' } ) ); } feedbackViews.unshift( new bp.Views.CoverImageStatus( { value : BP_Uploader.strings.feedback_messages[ feedbackCode ], type : 'success' } ) ); // Success, Rock n roll! this.views.set( '.bp-uploader-progress', feedbackViews ); // Update the header of the page. $( '#header-cover-image' ).css( { 'background-image': 'url( ' + model.get( 'url' ) + ' )' } ); // Add the delete view. bp.CoverImage.deleteView(); /** * Set the Attachment object. * * You can run extra actions once the cover image is set using: * bp.CoverImage.Attachment.on( 'change:url', function( data ) { your code } ); * * In this case data.attributes will include the url to the newly * uploaded cover image, the object and the item_id concerned. */ bp.CoverImage.Attachment.set( _.extend( _.pick( BP_Uploader.settings.defaults.multipart_params.bp_params, ['object', 'item_id'] ), { url: model.get( 'url' ), action: 'uploaded' } ) ); } } } ); // BuddyPress Cover Image Feedback view. bp.Views.CoverImageStatus = bp.View.extend( { tagName: 'p', className: 'updated', id: 'bp-cover-image-feedback', initialize: function() { this.el.className += ' ' + this.options.type; this.value = this.options.value; }, render: function() { this.$el.html( this.value ); return this; } } ); // BuddyPress Cover Image Delete view. bp.Views.DeleteCoverImage = bp.View.extend( { tagName: 'div', id: 'bp-delete-cover-image-container', template: bp.template( 'bp-cover-image-delete' ), events: { 'click #bp-delete-cover-image': 'deleteCoverImage' }, deleteCoverImage: function( event ) { event.preventDefault(); bp.CoverImage.deleteCoverImage( this.model ); } } ); bp.CoverImage.start(); })( window.bp, jQuery );