Skip to content

JS and CSS - mediafiles upload - upgrades #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DenisBotic wants to merge 1 commit into
base: master
Choose a base branch
from
Open

JS and CSS - mediafiles upload - upgrades #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 48 additions & 1 deletion src/public/css/buddykit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ input#aw-whats-new-submit[disabled=disabled] {
}
/**
* Video Player (Plyr)
* Needs .buddypress .buddypress-wrap, some themes overwrite bp buttons through
* Needs .buddypress .buddypress-wrap, some themes overwrite bp buttons through
* this selector so we need to overwrite them.
*/

Expand Down Expand Up @@ -303,3 +303,50 @@ li.buddykit-profile-tab-list-media-item:hover a.buddykit-profile-tabs-media-dele
display: block;
}

/********************************
MY UPGRADES
********************************/

/*
File processing - notification - styling
*/
.buddykit-file-processing {
display: block;
text-align: center;
}
.buddykit-file-processing .loader{
margin: 0 0 2em;
height: 100px;
width: 100%;
text-align: center;
padding: 0;
margin: 0 auto;
display: inline-block;
vertical-align: top;
}

/*
Set the color of the loading icon
*/
.buddykit-file-processing svg path,
.buddykit-file-processing svg rect{
fill: #FF6700;
}

/*
Cancel button - style disabled
*/
.activity-update-form #whats-new-submit input#aw-whats-new-reset[disabled="disabled"],
.activity-update-form #whats-new-submit input#aw-whats-new-reset[disabled="disabled"]:hover {
color: rgba(0, 0, 0, 0.3) !important;
background-color: transparent !important;
cursor: not-allowed;
}

/*
Activity textarea - error - no content
*/
.activity-update-form .textarea-empty-error {
color: white !important;
background-color: red !important;
}
193 changes: 167 additions & 26 deletions src/public/js/buddykit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,17 +165,96 @@ jQuery(document).ready(function($){

buddyKitFilesView.render();


/////////////////////////////////////
// My Upgrades
////////////////////////////////////

// Sync the files
Backbone.sync( 'read', buddyKitFiles, {
url: __buddyKit.rest_upload_uri + 'user-temporary-media',
headers: { 'X-WP-Nonce': __buddyKit.nonce },
success: function( response ) {
if (response) {
buddyKitFiles.add(response);
function syncTheFiles(){ //I've wrapped existing code in the function so it can be called later
Backbone.sync( 'read', buddyKitFiles, {
url: __buddyKit.rest_upload_uri + 'user-temporary-media',
headers: { 'X-WP-Nonce': __buddyKit.nonce },
success: function( response ) {
if (response) {
buddyKitFiles.add(response);
}
}
});
}
syncTheFiles();
// Index File End ==

////////////////////////////////////////////////////////////////////////////////////////
// On SUBMIT button click - hide Submit and Cancel buttons and display spinning loader
///////////////////////////////////////////////////////////////////////////////////////
$(document).on('click', '#aw-whats-new-submit', function(){
var textarea = $('#whats-new-textarea textarea');
var text_content = textarea.val().trim();


// Activity textarea must not be empty
if (text_content === '') {
// Mark - textarea as a problem
textarea.addClass('textarea-empty-error');

// Load and display uploaded media files again - if deleted
var chk_attached_media_files = setInterval(function(){
if ( $('#buddykit-filelist li').length == 0 ) {
syncTheFiles();
clearInterval(chk_attached_media_files);
}
// console.log('Checking if there are media files attached.');
}, 250);

return;
}


// Unmark textarea
textarea.removeClass('textarea-empty-error');



// DISPLAY SPINNER ONLY IF THERE IS NO ERROR DETECTED BY BUDDYPRESS

// On submit, hide Submit and Cancel buttons and display Spinner
$(this).hide(); //Hide submit button
$('#aw-whats-new-reset').hide(); //Hide cancel button
//Display spinner
$(this).after('<div id="buddykit-publish-spinner" class="loader"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"><path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/><path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32,8.481,24.301,9.057,26.013,10.047z"><animateTransform attributeType="xml"attributeName="transform"type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></path></svg></div>');


var chk_submit_status = setInterval(function(){
// CHECK IF SUBMIT BUTTON EL - REMOVED
if ( $('#aw-whats-new-submit').length == 0 ) {
// Submit button el removed
// There is no need to Hide or remove Spinner
// Becasue parent element has been removed
// and it is going to be recreated dynamically without spinner.
clearInterval(chk_submit_status);


// CHECK IF ERROR MESSAGE DISPLAYED
} else if($('#whats-new-form #message').length > 0){

// Hide spinner and Display Submit and Cancel buttons
$('#buddykit-publish-spinner').remove();// Hide or remove Spinner
$('#aw-whats-new-submit').show(); // Display submit button
$('#aw-whats-new-reset').show(); // Display cancel button

clearInterval(chk_submit_status);
}

// console.log('Checking submit status.');
}, 250);


});
// Index File End ==

///////////////////////////////////////////////////////////////////////



// PlUpload Script
var uploader = new plupload.Uploader({
Expand All @@ -191,15 +270,15 @@ jQuery(document).ready(function($){
{ title: "Video files", extensions: "mp4" }
]
},

unique_names: true,
headers: {
'X-WP-Nonce': __buddyKit.nonce
},
init: {
PostInit: function() {},
FileFiltered: function(up, file) {

var max_img_size = parseInt(__buddyKit.config.options.buddykit_field_max_image_size) * 1000000;
var max_vid_size = parseInt(__buddyKit.config.options.buddykit_field_max_video_size) * 1000000;

Expand All @@ -210,29 +289,31 @@ jQuery(document).ready(function($){
});

this.setOption('max_file_size', size_collection[size_collection.length-1] );

return;

},
FilesAdded: function(up, files) {
$('#buddykit-filelist-wrap').show();

// Filter maximum number of downloads.
if ( buddyKitFiles.length >= __buddyKit.config.options.buddykit_field_max_image_number ) {
alert('You have reached the allowed number of images per post.');
} else {
plupload.each( files,
plupload.each( files,
function(file) {
document.getElementById(__buddyKit.file_list_container_id ).innerHTML += '<li id="'+file.id+'" class="buddykit-filelist-item">' + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});
$('#whats-new').focus().val('').selectRange(0,0);
// It is not neccesary to clear text area after media file uploaded.
// Therefore I've disabled the line of code below.
// $('#whats-new').focus().val('').selectRange(0,0);
uploader.start();
}
},
FileUploaded: function(up, file, response) {

var __response = JSON.parse(response.response);

if ( 200 === __response.status ) {

var image = __response.image;
Expand All @@ -254,8 +335,10 @@ jQuery(document).ready(function($){
} else {
console.log('Error @uploader.FileUploaded: Zero file id.');
}

} else {
$('#'+file.id).html( __response.error_message ).addClass('error');

setTimeout(function(){
$('#'+file.id).addClass('done');
setTimeout(function(){
Expand All @@ -268,19 +351,53 @@ jQuery(document).ready(function($){
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
//Disable activity post form when uploading is going on to prevent unexpected things from happening.
$('#aw-whats-new-submit').attr('disabled', true);

/////////////////////////////////////////////////
// MY UPGRADE
/////////////////////////////////////////////////

//Disable cancel button as well
$('#aw-whats-new-reset').attr('disabled', true);


//Video processing notification - with loading spinner
if (file.percent == 100) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span class="buddykit-file-processing">Processing...<br><div class="loader"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"><path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/><path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32,8.481,24.301,9.057,26.013,10.047z"><animateTransform attributeType="xml"attributeName="transform"type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></path></svg></div></span>';

}

////////////////////////////////////////////////


},
UploadComplete: function(up, files, response) {
$('#aw-whats-new-submit').attr('disabled', false);

/////////////////////////////////////////////////
// MY UPGRADE
/////////////////////////////////////////////////

//Enable cancel button again
$('#aw-whats-new-reset').attr('disabled', false);

/////////////////////////////////////////////////
},
Error: function(up, err) {

$('#buddykit-filelist-wrap').show();

var file_el = document.getElementById(__buddyKit.file_list_container_id );
var file_id = err.file.id;

file_el.innerHTML += '<li id="'+file_id+'" class="buddykit-filelist-item error"><span>'+err.message+'</span></div>';


///////////////////////////////////////////////////////////////////////////////
// My upgrade for displaying errors - actual error will be displayed in console
//////////////////////////////////////////////////////////////////////////////
file_el.innerHTML += '<li id="'+file_id+'" class="buddykit-filelist-item error"><span>Server Error<br> try again later</span></div>';
console.log("Media file upload error: " + err.message);
// I've disabled original line of code below, responsible for displaying actuall errors in user interface
// file_el.innerHTML += '<li id="'+file_id+'" class="buddykit-filelist-item error"><span>'+err.message+'</span></div>';
/////////////////////////////////////////////////////////////////////////////

setTimeout(function(){
$('#'+file_id).addClass('done');
setTimeout(function(){
Expand All @@ -291,17 +408,25 @@ jQuery(document).ready(function($){
}
},1000);
}, 2000);

$('#aw-whats-new-submit').attr('disabled', false);

/////////////////////////////////////////////////
// MY UPGRADE
/////////////////////////////////////////////////

//Enable cancel button again
$('#aw-whats-new-reset').attr('disabled', false);

/////////////////////////////////////////////////

return;
}
}
}); // End uploaded object.

uploader.init();

});

/**
Expand Down Expand Up @@ -335,7 +460,7 @@ jQuery(document).ready(function($){
});
// auto focus textarea
$.fn.selectRange = function(start, end) {
if(!end) end = start;
if(!end) end = start;
return this.each(function() {
if (this.setSelectionRange) {
this.focus();
Expand Down Expand Up @@ -390,23 +515,23 @@ jQuery(document).ready(function($){
$(document).ajaxComplete(function(event,request,settings){

if ( settings.data ) {

var http_request_data = JSON.parse('{"' + decodeURI(settings.data.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}');

if ( typeof http_request_data === 'object') {

var valid_actions = ['activity_filter', 'post_update'];

if ( http_request_data.action ) {

// Hide the button on succesful post update
if ( valid_actions[1] === http_request_data.action ){
setTimeout(function(){
if( "bp-messages bp-feedback error" !== $('#whats-new-submit').next().attr('class') ) {
buddyKitFiles.remove(buddyKitFiles.models);
}
}, 500);

}

// Now we know that this is a BuddyPress activity object
Expand All @@ -430,3 +555,19 @@ jQuery(document).ready(function($){
}
});
});


////////////////////////////
// My Upgrades
///////////////////////////
jQuery(document).ready(function($){

// On CANCEL button click - flush all tmp. loaded files
$(document).on('click', '#aw-whats-new-reset', function(){
$('#buddykit-flush-temporary-files-btn').click();
//Remove red background - in case of previous error
$('#whats-new-textarea textarea').removeClass('textarea-empty-error');
});


});