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

updated: video upload page

Browse source
This commit is contained in:
sajjadcb 2014-04-02 11:11:28 +00:00
parent b52a3f3f13
commit b973c17d62
3 changed files with 226 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
upload/styles/cb_2014/layout/global_header.html
View file

@ -61,6 +61,7 @@
<link href="{$theme}/css/jquery.mCustomScrollbar.css" rel="stylesheet" />
<link rel="stylesheet" href="{$theme}/css/font-awesome.min.css">
<link rel="stylesheet" href="{$theme}/css/uploader.css">
{if in_dev()}
<link rel="stylesheet/less" href="{$theme}/less/main.less?cache={$cache_buster}" />

156
upload/styles/cb_2014/layout/upload.html
View file

@ -1,4 +1,3 @@
{if $msg}
<div class="alert alert-info">
{$msg}
@ -6,10 +5,23 @@
{/if}
<div id="uploadMessage" class=""></div>
<div class="container uploadVideos">
<div class="cb-box pad-bottom-sm progress-container allProgress">
<div class="row">
<div class="col-md-2" id="uploadedFilesInfo">
<p>Uploaded 0 of 0</p>
</div>
<div class="col-md-10">
<div class="progress">
<div id="overallProgress" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</div>
</div>
<div class="cb-box" id="mainUploadContainer">
<div class="pad-bottom video-info-container">
<ul class="nav nav-tabs">
<ul class="nav nav-tabs uploaderTabs">
{assign var=opt_list value=$Upload->load_upload_options()}
{$counter = 1}
{foreach from=$opt_list item=opt key=divid}
@ -30,23 +42,7 @@
{assign var=uploadOptId value=$opt.load_func}
{if $Cbucket->configs.$uploadOptId=='yes'}
{if $counter == 1}{$class = "active"}{else}{$class = ""}{/if}
<div class="tab-pane fade in clearfix {$class}" id="{$divid}">
{if $counter == 1}
<div class="cb-box pad-bottom-sm progress-container hidden">
<div class="row">
<div class="col-md-2" id="uploadedFilesInfo">
<p>Uploaded 0 of 0</p>
</div>
<div class="col-md-10">
<div class="progress">
<div id="overallProgress" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</div>
</div>
{/if}
<div class="tab-pane fade in clearfix {$class} uploadForm" id="{$divid}">
{load_form name=$opt.load_func button_class='cb_button_2' class='upload_form'}
</div>
{/if}
@ -89,21 +85,26 @@
for(var i = 0; i < uploadedFiles.length; i++){
files.push(uploadedFiles[i]);
}
//console.log(files);
// creating the selected files list
var ul = document.createElement('ul');
ul.id = "selectedFilesList";
ul.className = "nav nav-tabs";
var li = false;
var index = 0;
plupload.each(files, function(file) {
li = document.createElement('li');
if(index === 0){
li.className = "selectedFile btn btn-primary";
li.className = "active";
}else{
li.className = "btn btn-primary";
li.className = "";
}
var link = document.createElement("a");
link.href = "#tab"+index;
link.setAttribute("data-toggle", "tab");
// link.innerHTML = file.name + " (" + plupload.formatSize(file.size) + ")";
link.innerHTML = "(" + (index + 1) + ") " + file.name;
li.id = index++;
li.innerHTML = file.name + " (" + plupload.formatSize(file.size) + ")<b></b>";
li.appendChild(link);
ul.appendChild(li);
});
@ -131,7 +132,30 @@
var oneFile = false;
$("#uploadFormContainer"+filesIndex).addClass("selectedFileDiv").find("input[name='title']").val(files[filesIndex].name);
var uploadForm = $("#updateVideoInfoForm").clone();
var uploadForms = [];
for (var i = 0; i < totalFiles; i++ ){
var oneUploadForm = $(uploadForm).clone().get(0);
var wrapperDiv = document.createElement("div");
if(i == 0){
wrapperDiv.className = "tab-pane active uploadFormContainer";
}else{
wrapperDiv.className = "tab-pane uploadFormContainer";
}
wrapperDiv.id = "tab"+i;
oneUploadForm.className = "";
$(oneUploadForm).find("input[name='title']").val(files[i].name);
$(oneUploadForm).find("textarea#desc").val(files[i].name);
$(oneUploadForm).find("input[name='category[]']:first").attr('checked', 'checked');
wrapperDiv.appendChild(oneUploadForm);
uploadForms.push(wrapperDiv);
}
$("#allUploadForms").append(uploadForms);
/*$("#uploadFormContainer"+filesIndex).addClass("selectedFileDiv").find("input[name='title']").val(files[filesIndex].name);
$("#uploadFormContainer"+filesIndex).find("textarea#desc").val(files[filesIndex].name);
$("#uploadFormContainer"+filesIndex).find("input[name='category[]']:first").attr('checked', 'checked');
var loop = totalFiles - uploadedFiles.length;
@ -149,9 +173,24 @@
//console.log(oneFileForm);
}
}*/
$(".formSection h4").on({
click: function(e){
e.preventDefault();
if($(this).find("i").hasClass("glyphicon-chevron-down")){
$(this).find("i").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
$(this).next().toggleClass("hidden");
}else{
$(this).find("i").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
$(this).next().toggleClass("hidden");
}
}
});
setTimeout(function(){
$("#uploaderContainer").toggleClass("hidden");
$("#uploadDataContainer").toggleClass("hidden");
uploader.start();
}, 1000);
// updating file title in the form
@ -160,7 +199,7 @@
uploader.bind("BeforeUpload", function(){
$("#fileUploadProgress").removeClass("hidden");
$(".progress-container").removeClass("hidden");
})
});
/*
This is the event handler for UploadProgress,
@ -170,13 +209,17 @@
var filesUploaded = 0;
uploader.bind('UploadProgress', function(up, file) {
var progressContainer = document.getElementById("fileUploadProgress");
var progressBar = progressContainer.getElementsByTagName("progress")[0];
progressBar.style.display = "block";
var fileName = progressContainer.getElementsByTagName('h5')[0];
fileName.innerHTML = "Uploading "+file.name;
var percent = file.percent/100;
progressBar.value = percent;
// var progressContainer = document.getElementById("fileUploadProgress");
// var progressBar = progressContainer.getElementsByTagName("progress")[0];
// progressBar.style.display = "block";
// var fileName = progressContainer.getElementsByTagName('h5')[0];
// fileName.innerHTML = "Uploading "+file.name;
// var percent = file.percent/100;
// progressBar.value = percent;
var overallProgress = $("#overallProgress");
var totalFiles = files.length;
var percent = file.percent/(100*totalFiles);
$("#overallProgress").css("width", (percent)+"%");
});
@ -188,12 +231,11 @@
var currentFileIndex = 0;
uploader.bind('FileUploaded', function(plupload, fileDetails, response){
//$(".fileUploaderForm").css("display", "none");
$("#overallProgress").css("width", ((100/files.length)*(++filesUploaded))+"%");
$("#overallProgress").parents(".row").find("#uploadedFilesInfo").text("Uploaded " + (filesUploaded) + " of " + files.length);
var serverResponse = $.parseJSON(response.response);
var fileName = serverResponse.file_name;
var uploadForm = $("#uploadFormContainer"+currentFileIndex+" form");
var uploadForm = $("#tab"+currentFileIndex+" form");
/*
@ -239,7 +281,7 @@
Submit the form with all the video details and options
to update the video information in the system
*/
$("#mainUploadContainer form").on({
$(uploadForm).on({
submit: function(e){
e.preventDefault();
var self = this;
@ -249,7 +291,6 @@
type : "post",
data : data
}).success(function(msg){
//console.log(msg);
msg = $.parseJSON(msg);
$("#uploadMessage").removeClass("hidden");
if(msg.error){
@ -290,49 +331,24 @@
//console.log(err);
});
$('#uploadFiles').on({
/*$('#uploadFiles').on({
click : function(e){
e.preventDefault();
$("#overallProgress").parents(".row").find("#uploadedFilesInfo").text("Uploaded " + (filesUploaded) + " of " + files.length);
uploader.start();
}
});*/
$("#files a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
});
});
})(window);
</script>
<style>
.uploadFormContainer{
display: none;
}
.selectedFileDiv{
display: block;
}
.uploadedFilesList ul{
overflow: hidden;
}
.uploadedFilesList li{
/*background-color: #CCCCCC;
font-size: 0.9em;
margin-right: 10px;
padding: 6px;*/
cursor: pointer;
display: block;
margin-right: 10px;
float: left;
width: auto;
margin-bottom: 5px;
}
.uploadedFilesList li.selectedFile{
/*background-color: #aaa;*/
background-color: #3276B1;
}
</style>

127
upload/styles/cb_2014/theme/css/uploader.css Normal file
View file

@ -0,0 +1,127 @@
.uploadFormContainer{
/*display: none;*/
}
.uploadFormDiv{
border: solid 1px #CBCFD2;
padding: 20px 10px 10px 10px;
position: relative;
bottom: 2px;
z-index: 1;
margin-bottom: 10px;
}
.uploadForm{
}
.uploadForm .uploaderContainer{
background-color: #F3F3F3;
padding: 10px;
border-radius: 5px;
}
.selectedFileDiv{
display: block;
}
.uploadedFilesList ul{
overflow: hidden;
}
.uploadedFilesList li{
/*background-color: #CCCCCC;
font-size: 0.9em;
margin-right: 10px;
padding: 6px;*/
cursor: pointer;
display: block;
margin-right: 10px;
float: left;
width: auto;
margin-bottom: 5px;
}
.uploadedFilesList li.selectedFile{
/*background-color: #aaa;*/
background-color: #3276B1;
}
.allProgress{
padding-top: 22px;
margin-top: 10px;
}
.uploaderTabs{
background-color: #fff;
position: relative;
z-index: 100;
border-bottom: solid 1px #CBCFD2;
}
.uploaderTabs li{
margin: 0;
}
.uploaderTabs li a{
border-radius: 0;
margin: 0;
position: relative;
}
.uploaderTabs li.active a, .uploaderTabs li.active a:focus, .uploaderTabs li.active a:hover{
border-top: solid 2px #4E8EBE;
border-left: solid 1px #CBCFD2;
border-right: solid 1px #CBCFD2;
outline: none;
position: relative;
top: 1px;
}
.dragDropContainer{
width: 60%;
margin: 10px auto 10px;
background-color: #E0DEDF;
border: dashed 3px #C5C3C4;
padding: 30px;
text-align: center;
color: #555;
font-size: 1.2em;
}
.selectButtonContainer{
text-align: center;
}
.selectButtonContainer p{
margin-top: 5px;
font-size: 0.85em;
color: #666;
}
.selectFiles{
padding: 10px 80px;
text-align: center;
font-weight: bold;
}
.allUploadForms{
margin-top: 10px;
}
.categoriesContainer{
overflow-y: scroll;
height: 300px;
}
.formSection{
margin-top: 20px;
}
.formSection h4{
background-color: #E8E8E8;
padding: 8px 12px;
font-size: 1em;
color: #666;
cursor: pointer;
}