$(document).ready(function(){
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
$('.photo-back-button').on('click', function(event){
fileUploadShowMedia();
event.preventDefault();
});
});
var bindFileUploadChoose = function(formElement, callbackFunc){
var closeBtn = $($(formElement).find('.cr-close-media-btn'));
closeBtn.on('click', function(e){
$('.dropfile-parts').hide();
$('.dropfile-parts.dropfilewrap').show();
e.preventDefault();
});
$(formElement).find('.add-more-people').on('click',
function(event){
fileUploadShowMedia();
event.preventDefault();
});
$(formElement).find('.drop-btn-delete').on('click',
function(e){
if(callbackFunc)
callbackFunc('clear', null);
fileUploadReset(formElement);
e.preventDefault();
});
$(formElement).find('.drop-btn-edit').on('click',
function(e){
$(formElement).find('.icon-obi-check').toggleClass('off');
if($(formElement).find('.icon-obi-check').hasClass('off')){
$(this).html('Edit');
$(formElement).find('.obi-edit-menu').addClass('off');
}else{
$(this).html('Cancel');
$(formElement).find('.obi-edit-menu').removeClass('off');
}
e.preventDefault();
});
}
var fileUploadReset = function(formElement){
$(formElement).find('.dropfile-parts').hide();
$(formElement).find('.dropfile-parts.dropfilewrap').show();
}
var croppieInstance = [];
var dropfile_reset = function(formElement){
fileUploadReset();
var remove = [];
for(var i = 0; i < croppieInstance.length; i++){
var id = croppieInstance[i][0];
if(id == formElement)
remove[remove.length] = i;
}
for(var i = 0; i < remove.length; i++){
croppieInstance.splice(i, 1);
}
}
var fileUploadShowMedia = function(){
$('.dropfile-parts').hide();
$('.dropfile-parts.dropfilechoosemedia').show();
$.get('/x/medialist').done(function(html){
$('.dropfile-parts.dropfilechoosemedia .pp-add-media').html(html);
});
}
var bindFileUpload = function(formElement, callbackFunc, flavour){
//var overall = 0;
//var knobs = new Array();
/*$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});*/
var shape = 'square';
var width = 200;
var height = 200;
if(flavour == 'profile'){
shape = 'circle';
}else if(flavour == 'post'){
width = 250;
height = 122;
}else if(flavour == 'sip'){
width = 250;
height = 160;
}
var fileCount = 0;
var viewport = { width: width, height: height, type: shape };
bindFileUploadChoose(formElement, callbackFunc);
// Initialize the jQuery File Upload plugin
//$('#upload').fileupload({
$(formElement).fileupload({
url: '/content/upload/',
// This element will accept file drag/drop uploading
dropZone: $(formElement).find('.add-photo-section'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
//var ul = $('#upload ul');
var ul = $(formElement).find('ul.uploadprogress');
var progressInput = $(formElement).find('.progressInput');
if(!progressInput.length){
var tpl = $('
'+
''+
'Uploading..
');
// Append the file name and file size
//tpl.find('p').text(data.files[0].name)
// .append('' + formatFileSize(data.files[0].size) + '');
// Add the HTML to the UL element
//data.context = tpl.appendTo(ul);
tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob({"fgColor":"#b31a00"});
// Listen for clicks on the cancel icon
/*tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});*/
}
dropfile_callback('start', data);
if(callbackFunc)
callbackFunc('start', data);
fileCount++;
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progressall: function(e, data){
var progress = parseInt(data.loaded / data.total * 100, 10);
$(formElement).find('.progressInput').val(progress).change();
},
done: function(e, data){
dropfile_callback('one', data);
if(callbackFunc)
callbackFunc('one', data);
if(--fileCount == 0){
dropfile_callback('all', data);
if(callbackFunc)
callbackFunc('all', data);
}
},
fail: function(e, data){
// Something has gone wrong
dropfile_callback('fail', data);
if(callbackFunc)
callbackFunc('fail', data);
}
});
var dropfile_callback = function(event, data){
if(event == 'start'){
$(formElement).find('.file-upload-intro').hide();
}else if(event == 'one'){
}else if(event == 'all'){
$(formElement).find('ul.uploadprogress').empty();
$(formElement).find('.file-upload-intro').show();
var response = jQuery.parseJSON(data.jqXHR.responseText);
if(response.status == 'success'){
dropfile_showcropper(viewport, formElement, response.ident, callbackFunc);
}
}
}
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
};
var dropfile_showcropper = function(viewport, formElement, imageIdent, cbFunc){
var ins = null;
var i = 0;
for(i; i < croppieInstance.length; i++){
if(croppieInstance[i][0] == formElement){
if(croppieInstance[i][1]){
ins = croppieInstance[i][1];
break;
}
}
}
if(ins){
console.log('reusing for: '+'/content/'+imageIdent+'/hires');
//ins.destroy();
//croppieInstance.splice(i, 1);
ins.bind({url:'/content/'+imageIdent+'/hires'});
}else{
//
var match = $(formElement).find('.dropfile-parts.image-position img');
console.log(match.length + ' croppies');
var img = $(formElement).find('.dropfile-parts.image-position img')[0];
$(img).attr('src', '/content/'+imageIdent+'/hires');
ins = new Croppie(img,
{
viewport: viewport,
update: function (data) {
if(cbFunc){
data.viewport = viewport;
cbFunc('crop', data);
}
}
}
);
croppieInstance[croppieInstance.length] = [
formElement,
ins
];
}
for(i = 0; i < croppieInstance.length; i++){
console.log(i+': '+croppieInstance[i][0]+'/'+croppieInstance[i][1]);
}
$(formElement).find('.dropfile-parts').hide();
$(formElement).find('.dropfile-parts.image-position').show();
return ins;
}
var fileUploadAttach = function(formElement, endpoint, params, callbackFunc){
var fileCount = 0;
var fileList = [];
if(!params)
params = [];
$(formElement).fileupload({
url: endpoint,
formData: params,
// This element will accept file drag/drop uploading
dropZone: $(formElement).find('.drag-drop-zone'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
fileCount++;
saveFile(data.files[0]);
if(callbackFunc)
callbackFunc('start', {file: retrieveFile(data.files[0]), jqXHR:jqXHR});
},
/*progressall: function(e, data){
var progress = parseInt(data.loaded / data.total * 100, 10);
$(formElement).find('.progressInput').val(progress).change();
if(callbackFunc)
callbackFunc('progress', data);
},*/
progress: function(e, data){
if(callbackFunc)
callbackFunc('progress', {
file: retrieveFile(data.files[0]),
progress: parseInt(data._progress.loaded / data._progress.total * 100, 10)
});
},
done: function(e, data){
if(callbackFunc)
callbackFunc('one', {file: retrieveFile(data.files[0]), jqXHR : data.jqXHR});
if(--fileCount == 0)
if(callbackFunc)
callbackFunc('all', data);
},
fail: function(e, data){
if(callbackFunc)
callbackFunc('fail', data);
}
});
var saveFile = function(file){
fileList[fileList.length] = {name:file.name, ref: Math.floor(Math.random()*10000)};
}
var retrieveFile = function(file){
var match = null;
for(var i = 0; i < fileList.length; i++){
if(fileList[i].name == file.name){
match = fileList[i];
break;
}
}
return match;
}
}