2016-03-16 17:30:07 +05:00
{if $step == 1 || $step == ""}
< 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" >
< 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 class="col - md - 2">
< a id = "uploadFiles" class = "btn btn-success" href = "javascript:;" > Upload< / a >
< / div > -->
< / div >
< / div >
< / div >
2016-04-05 20:06:32 +05:00
< div class = "clearfix photoupload-block" >
< div class = "cb-box container" id = "mainUploadContainer" >
< div class = "pad-bottom video-info-container flat-tabs" >
2016-03-16 17:30:07 +05:00
< ul class = "nav nav-tabs uploaderTabs" >
< li class = "active" > < a href = "#file-upload" data-toggle = "tab" > Photo Upload< / a > < / li >
< / ul >
< div class = "tab-content uploadFormDiv" >
< div class = "tab-pane fade in active clearfix" id = "file-upload" >
< div class = "instructions alert alert-block alert-info" >
{lang code='upload_right_guide_photo'}
< / div >
< div class = "clearfix" id = "uploaderContainer" >
{if $c}
< div class = "alert alert-info" role = "alert" >
Photo will be uploaded into < strong > < i > {$c.collection_name}< / i > < / strong > Collection
< / div >
{else}
< h4 class = "h4" > Select Collection< / h4 >
< div class = "row" >
< div id = "SelectionDIV" class = "col-md-9" >
{if $collections}
2016-04-05 20:06:32 +05:00
< div class = "form-group clearfix custom-elements" >
2016-03-16 17:30:07 +05:00
< select class = "form-control" id = "collectionSelection" name = "collectionSelection" >
{foreach from=$collections item=item}
< option value = "{$item.collection_id}" > {$item.collection_name}< / option >
{/foreach}
< / select >
< / div >
{else}
< p class = "alert alert-danger" > No Collection Found! You must create a collection before uploading any photo< / p >
< div class = "form-group" >
< label > Select Collection< / label >
< select class = "form-control" id = "collectionSelection" name = "collectionSelection" >
< option value = "0" > no collection found< / option >
< / select >
< / div >
{/if}
< / div >
< div class = "col-md-3 text-center" >
2016-04-05 20:06:32 +05:00
< a href = "#" class = "btn btn-ghost btn-lg" id = "createNewCollection" > Create New Collection< / a >
2016-03-16 17:30:07 +05:00
< / div >
< / div >
{/if}
< div class = "row" >
< div class = "col-md-10 col-md-offset-1" >
< div class = "manageCollection" >
< div id = "CollectionDIV" style = "display:none" >
< form action = "#" type = "post" >
< h3 > Create New Collection< / h3 >
{assign var='reqFields' value=$cbcollection->load_required_fields()}
{foreach from=$reqFields item=field}
{if $field.id != 'type'}
< div class = "form-group" >
< label for = "{$field.id}" > {$field.title}< / label >
{$field.class = 'form-control'}
{if $field.type == 'checkbox'}
{$field.label_class = 'checkbox'}
{$field.notShowSeprator = true}
{/if}
{$formObj->createField($field)}
< / div >
{/if}
{/foreach}
< div class = "moveR" style = "float:left; margin:0px 5px 0 5px" ; >
< button type = "button" id = "addNewCollection" class = "btn btn-success" > Add Collection< / button >
< / div >
< div style = "float:left; margin:0px 5px 0 5px;" >
< button type = "button" id = "cancelAddCollection" class = "btn btn-success" > Cancel< / button >
< / div >
< / form >
< / div >
< / div >
< / div >
< / div >
{if $collections}
< div class = "upload-area col-md-12 clearfix" >
< div class = "fileUploaderForm" >
< div class = "dragDropContainer clearfix" id = "dragDrop" >
< span class = "upload-logo" > < / span >
< strong class = "block-title" > Drag & Drop Files Here< / strong >
< p > Photo can be 2 MB in size and any common valid image format< / p >
< / div >
< div class = "selectButtonContainer" >
< a id = "selectFiles" href = "javascript:;" class = "btn btn-primary btn-lg selectFiles" > Select Photos< / a >
< / div >
< / div >
< / div >
{/if}
< / div >
< div id = "uploadDataContainer" class = "uploadDataContainer clearfix marginTop" >
< div class = "uploadingProgressContainer clearfix hidden" >
< div class = "alert alert-block alert-info" >
< p > < b > Selected Files< / b > Uploading in progress < small > < span id = "progressNumber" style = "color:#fff;" > 0%< / span > < span style = "color:#fff;" > Complete of Photo < / span > < span id = "videoNumber" style = "color:#fff;" > < / span > < / small > < / p >
< / div >
< / div >
< div class = "align-right hidden" id = "uploadMore" >
< a href = "#" class = "btn btn-primary uploadMoreVideos" id = "uploadMoreVideos" > Upload More Photos< / a >
< / div >
< div class = "marginTop" >
< div id = "files" class = "" > < / div >
< div id = "allUploadForms" class = "tab-content allUploadForms" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div id = "photoForm" class = "hidden" >
{include file="$style_dir/blocks/upload/photo_form.html" }
< / div >
<!-- Following hidden field is used to store Collection ID. -->
{if $c}
< input type = "hidden" name = "cid" id = "cid" class = "cid" value = "{$c.collection_id}" >
{/if}
< script type = "text/javascript" >
(function(window){
$(document).ready(function(){
var baseurl = '{$baseurl}';
var photo_extensions = '{","|implode:$cbphoto->exts}';
/* files uploading */
$.get("{$theme}/js/plupload/js/plupload.full.min.js", function(e){
var files = [];
var filesIndex = 0;
var uploader = new plupload.Uploader({
browse_button: 'selectFiles',
runtimes : 'html5,flash,silverlight,html4',
url : uploadScriptPath,
browse_button: 'selectFiles',
dragdrop: true,
drop_element: "dragDrop",
filters: {
mime_types : [
{ title : "Image files", extensions : photo_extensions },
]
}
});
// initialize the uploader
uploader.init();
uploader.bind('FilesAdded', function(up, uploadedFiles) {
for(var i = 0; i < uploadedFiles.length ; i + + ) {
files.push(uploadedFiles[i]);
}
$("#selectedFiles").toggle("display");
$("#uploadMore").addClass("hidden");
// 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 = "active";
}else{
li.className = "";
}
var link = document.createElement("a");
link.href = "#tab"+index;
link.setAttribute("data-toggle", "tab");
if(files.length < 8 ) {
link.innerHTML = "(" + (index + 1) + ") " + file.name.substring(0, 10);
}else{
link.innerHTML = "(" + (index + 1) + ") ";
}
li.id = index++;
li.appendChild(link);
ul.appendChild(li);
});
$("#files").html("");
$("#files").append(ul);
var totalFiles = files.length;
var oneFile = false;
var uploadForm = $("#photoForm form").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 photoFormContainer";
}else{
wrapperDiv.className = "tab-pane photoFormContainer";
}
wrapperDiv.id = "tab"+i;
oneUploadForm.className = "";
$(oneUploadForm).find("input[name='photo_title']").val(files[i].name);
$(oneUploadForm).find("textarea#photo_description").val(files[i].name);
$(oneUploadForm).find("input[name='category[]']:first").attr('checked', 'checked');
if(typeof files[i]['photoThumb'] !== "undefined"){
$(oneUploadForm).find("img").attr("src", files[i]['photoThumb']);
}
wrapperDiv.appendChild(oneUploadForm);
uploadForms.push(wrapperDiv);
}
$("#allUploadForms").html("");
$("#allUploadForms").append(uploadForms);
setTimeout(function(){
$("#uploaderContainer").addClass("hidden");
$("#uploadDataContainer").removeClass("hidden");
$(".uploadingProgressContainer").removeClass("hidden");
$("#uploadedFilesInfo").text("Uploaded 0 of " + files.length);
$(".allProgress").removeClass("hidden");
$("#overallProgressContainer").removeClass("hidden");
uploader.start();
}, 1000);
// updating file title in the form
$("#allUploadForms").css("display", "block");
});
uploader.bind("BeforeUpload", function(){
$("#fileUploadProgress").removeClass("hidden");
$(".progress-container").removeClass("hidden");
})
/*
This is the event handler for UploadProgress,
It fires regularly after a certain amount of time when the the files are being uploaded
*/
var totalUploaded = 0;
/*
This is the event handler for UploadProgress,
It fires regularly after a certain amount of time when the the files are being uploaded
*/
var filesUploaded = 0;
var totalPercentage = 0;
uploader.bind('UploadProgress', function(up, file) {
$("#progressNumber").text(file.percent + "%");
$("#videoNumber").text(file.name);
});
/*
This is the event handler for FileUploaded,
it fires when the uploading of the files is completed
*/
var currentFileIndex = 0;
uploader.bind('FileUploaded', function(plupload, fileDetails, response){
$("#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 = $("#tab"+currentFileIndex+" form");
totalUploaded++;
/*
Insert the video in the database and get the video db id from the
database which will be sent with the final form
*/
var collectionId;
var collection_id = '{$c.collection_id}';
if (collection_id )
{
collectionId = collection_id;
}
else
{
collectionId = $("#SelectionDIV select").val();
}
var fileId = false;
var stored_cid = collectionId;
$.ajax({
url : baseurl + "/actions/photo_uploader.php",
type : "post",
data : {
insertPhoto : "yes",
title : fileDetails.name,
file_name : fileName,
collection_id: collectionId,
ext: serverResponse.extension,
},
dataType: "JSON",
}).success(function(msg){
//creating the hidden form fields
$(uploadForm).find("img").attr("src", msg.photoPreview);
$(".submitPhoto").removeAttr("disabled");
if(typeof files[(currentFileIndex - 1)] !== "undefined"){
files[(totalUploaded-1)]['photoThumb'] = msg.photoPreview;
}
var hiddenPhotoIdField = document.createElement('input');
hiddenPhotoIdField.name = 'photo_id';
hiddenPhotoIdField.type = 'hidden';
hiddenPhotoIdField.value = msg.photoID;
uploadForm.append(hiddenPhotoIdField);
});
/*
Submit the form with all the video details and options
to update the video information in the system
*/
$(uploadForm).find(".submitPhoto").on({
click: function(e){
e.preventDefault();
var cid = $('.cid').val();
var collectionId = $("#SelectionDIV select").val();
if(cid !== '')
{
collectionId = cid;
}
var self = $(this).parents("form");
var data = $(self).serialize();
data += "&collection_id="+stored_cid;
data += "&server_url=undefined&folder=undefined&updatePhoto=yes";
$.ajax({
url : baseurl + "/actions/photo_uploader.php",
type : "post",
data : data
}).success(function(msg){
$("#uploadMessage").removeClass("hidden");
$("#uploadMessage").html("Picture details are successfully updated").attr("class", "alert alert-success");
setTimeout(function(){
$("#uploadMessage").addClass("hidden");
}, 5000);
}).fail(function(err){
console.log(err);
});
}
});
currentFileIndex++;
});
uploader.bind("UploadComplete", function(plupload, files){
$("#fileUploadProgress").addClass("hidden");
$("#uploadMore").removeClass("hidden");
$(".uploadingProgressContainer").addClass("hidden");
uploader.refresh();
$("#uploadMessage").html("All Files are uploaded Successfully").attr("class", "alert alert-success");
setTimeout(function(){
$("#uploadMessage").addClass("hidden");
}, 5000);
});
uploader.bind('Error', function(up, err) {
$("#uploadMessage").removeClass("hidden");
if(err){
$("#uploadMessage").html(err.message).attr("class", "alert alert-danger");
}
setTimeout(function(){
$("#uploadMessage").addClass("hidden");
}, 8000);
});
$("#addNewCollection").on({
click: function(e){
e.preventDefault();
var formData = $(this).parents("form").serialize();
formData += "&mode=add_collection";
var collectionName = $(this).parents("form").find("#collection_name").val();
$.ajax({
type: "post",
url: baseurl + "/ajax.php",
data: formData,
}).success(function(msg){
msg = $.parseJSON(msg);
if(msg.err === null){
var newCollectionElement = document.createElement('option');
newCollectionElement.value = parseInt(msg.id);
newCollectionElement.innerHTML = collectionName;
newCollectionElement.selected = true;
$("#collectionSelection").get(0).appendChild(newCollectionElement);
$("#CollectionDIV").toggle("slow");
$("#uploadMessage").html(msg.msg).attr("class", "alert alert-success").removeClass("hidden");
$(".upload-area").show();
$("#createNewCollection").show();
$(".h4").show();
$(".instructions").show();
$("#SelectionDIV").show();
setTimeout(function(){
$("#uploadMessage").addClass("hidden");
}, 5000);
}else{
$("#uploadMessage").html(msg.err).attr("class", "alert alert-danger").removeClass("hidden");
setTimeout(function(){
$("#uploadMessage").addClass("hidden");
}, 5000);
}
});
}
});
$("#createNewCollection").on({
click: function(e){
e.preventDefault();
$("#CollectionDIV").toggle("fast");
$("#createNewCollection").hide();
$(".h4").hide();
$("#SelectionDIV").hide();
$(".upload-area").hide();
$(".instructions").hide();
}
});
$("#cancelAddCollection").on({
click: function(e){
e.preventDefault();
$("#CollectionDIV").hide();
$("#createNewCollection").show();
$(".h4").show();
$("#SelectionDIV").show();
$(".upload-area").show();
$(".instructions").show();
}
});
$("#selectedFilesList a").on({
click: function(e){
e.preventDefault();
$(this).tab("show");
}
});
$("#SelectionDIV select").on({
change: function(e){
var collectionField = $("#collectionId");
if(collectionField){
$(collectionField).val(this.value);
}else{
var newField = document.createElement("input");
newField.type = "hidden";
newField.name = "collection_id";
newField.value = this.value;
$("#allUploadForms form").each(function(index, value){
$(value).get(0).appendChild(newField);
});
}
}
});
$("#uploadMoreVideos").on({
click: function(e){
e.preventDefault();
$("#uploaderContainer").removeClass("hidden");
$("#uploadDataContainer").addClass("hidden");
/*$(this).addClass("hidden");*/
}
});
});
});
})(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 >
{/if}
{if $step == 3}
< 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 >
{/if}
