vanzhiganov/clipbucket
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added:upload photo page progress bar added

Browse source
This commit is contained in:
Awais-cb 2017-05-04 16:50:05 +05:00
parent 2123c4e578
commit 0aaef9ba90
1 changed files with 242 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
upload/styles/cb_28/layout/photo_upload.html
View file

@ -1,7 +1,7 @@
{if $step == 1 || $step == ""}
<div id="uploadMessage" class=""></div>
<div class="container">
<div id="uploadMessage" class=""></div>
<div class="container">
<div class="cb-box progress-container overallProgressContainer hidden" id="overallProgressContainer">
<div class="row">
<div class="col-md-12">
@ -19,6 +19,7 @@
<!-- <div class="col-md-2">
<a id="uploadFiles" class="btn btn-success" href="javascript:;">Upload</a>
</div> -->
</div>
</div>
</div>
@ -118,6 +119,9 @@
<p><b>{lang code="selected_files"}</b>{lang code="uploading_in_progress"} <small><span id="progressNumber" style="color:#fff;">0%</span> <span style="color:#fff;">{lang code="complete_of_photo"} </span><span id="videoNumber" style="color:#fff;"></span></small></p>
</div>
</div>
<!-- the div for displaying progress bars -->
<div class="realProgressBars"></div>
<!-- the div for displaying progress bars -->
<div class="align-right hidden" id="uploadMore">
<a href="#" class="btn btn-primary uploadMoreVideos" id="uploadMoreVideos">{lang code="upload_more_photos"}</a>
</div>
@ -232,12 +236,77 @@
wrapperDiv.appendChild(oneUploadForm);
uploadForms.push(wrapperDiv);
}
// functions added
//function for real progress bar
$.each( uploadedFiles, function( key, fileNow ) {
console.log("filenow "+fileNow);
var currentTitle = fileNow.name,
plFileId = fileNow.id;
//<button class="clearfix cancel_button btn btn-danger" style="float:right; margin-top: -20px">Cancel Uploading</button>
// appends progress bar along with title
// this progress bar is later updated on realtime
// via fileprogress event of pluploader
$(".realProgressBars").append('<h5 class="realProgTitle_'+plFileId+'">'+currentTitle+'</h5><button class="clearfix cancel_button btn btn-danger" to_cancel="'+plFileId+'" style="float:right; margin-top: -8px; margin-left:10px;">Cancel Uploading</button><div class="progress"><div class="progress-bar progress-bar_'+plFileId+'" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%"><span class="sr-only">70% Complete</span><span class="realProgText_'+plFileId+'">50% completed</span></div></div>');
});
//real progress bar end function
$("#allUploadForms").html("");
$("#allUploadForms").append(uploadForms);
/*
* Trigger element when "Cancel Uploading" button is clicked
* stops uploading
* hides uploading div
*/
//function for cancel button
(function() {
$(".cancel_button").on("click",function(e) {
e.preventDefault();
var toCancel = $(this).attr('to_cancel');
var thecount = 0;
$(this).attr('disabled',true);
$(this).text("Canceled");
$.each( uploadedFiles, function( iNow, currentFile ){
if (currentFile.id == toCancel) {
uploader.removeFile(uploadedFiles[thecount]);
$(this).unbind().remove();
$(".progress-bar_"+toCancel).addClass('progress-bar-danger');
$(".realProgText_"+toCancel).text("Canceled");
$('li#'+thecount).fadeOut('slow');
totalFiles = totalFiles - 1;
}
thecount++;
});
});
})();
//function for cancel button ended
// function for UploadProgress
uploader.bind('UploadProgress', function(up, file) {
// this the unique ID assigned to each file upload
var pluploadFileId = file.id,
filePercentage = file.percent;
// update progress bar widht
$('.progress-bar_'+pluploadFileId).css("width",filePercentage+"%");
//updawte progress bar text to show percentage
$('.realProgText_'+pluploadFileId).text(filePercentage+"% Completed");
// $("#progressNumber").text(file.percent + "%");
// meaning file has completely uploaded
if (filePercentage == 100) {
// remove cancel button
$(".cancel_button[to_cancel='" + pluploadFileId + "']").fadeOut('slow');
// tunr progress bar into green to show success
$('.progress-bar_'+pluploadFileId).addClass('progress-bar-success');
}
});
// function for UploadProgress ended
// functions added ended
setTimeout(function(){
@ -253,11 +322,11 @@
$("#allUploadForms").css("display", "block");
});
uploader.bind("BeforeUpload", function(){
uploader.bind("BeforeUpload", function(){
$("#fileUploadProgress").removeClass("hidden");
$(".progress-container").removeClass("hidden");
})
})
/*
This is the event handler for UploadProgress,
@ -495,27 +564,28 @@
}
});
});
});
})(window);
</script>
});
})(window);
</script>
{/if}
{* These steps are no longer in use *}
{if $step == 2}
<h2>Enter Information</h2>
{foreach item=item from=$photos}
{include file="$style_dir/blocks/upload/photo_form.html" photo=$item}
{/foreach}
<button class="LoadMoreButton clearfix" onclick="callAjax(this);" type="button" name="insertPhotos" id="insertPhotos">Save All</button>
<h2>Enter Information</h2>
{foreach item=item from=$photos}
{include file="$style_dir/blocks/upload/photo_form.html" photo=$item}
{/foreach}
<button class="LoadMoreButton clearfix" onclick="callAjax(this);" type="button" name="insertPhotos" id="insertPhotos">Save All</button>
{/if}
{if $step == 3}
<div class="photoBox">
<div class="photoBox">
<div style="background:#FFF; text-align:center; border-bottom:1px solid #ccc; color:#666; padding:8px; font:bold 14px Arial;">{lang code="photo_success_heading"}</div>
<div class="clearfix" style="padding:8px; font:normal 11px Tahoma;">
You can manage your photos from <strong><a href="{link name='manage_photos'}">{lang code='manage_photos'}</a></strong>.
</div>
</div>
</div>
{/if}