kalipso/racalmas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace fileUploader with own implementation

Browse Source
This commit is contained in:
Milan
2018-12-14 21:12:49 +01:00
parent add6c2ab1f
commit 101c192bd3
7 changed files with 121 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
website/agenda/planung/js/fileUploader.js
View File

@@ -1,237 +0,0 @@
/*
* Class: fileUploader
* Use: Upload multiple files the jQuery way
* Author: John Lanz (http://pixelcone.com)
* Version: 1.0
*/
(function($) {
$.fileUploader = {version: '1.1'};
$.fn.fileUploader = function(config){
config = $.extend({}, {
limit: '1',
imageLoader: '',
buttonUpload: '#pxUpload',
buttonClear: '#pxClear',
successOutput: 'File Uploaded',
errorOutput: 'Failed',
inputName: 'image',
inputSize: 30,
allowedExtension: 'jpg|jpeg|gif|png',
callback: function() {},
url: window.location.href
}, config);
var itr = 0; //number of files to uploaded
var $limit = 1;
//public function
$.fileUploader.change = function(e){
var fname = px.validateFile( $(e).val() );
if (fname == -1){
alert ("Invalid file!");
$(e).val("");
return false;
}
$('#px_button input').removeAttr("disabled");
var imageLoader = '';
if ($.trim(config.imageLoader) != ''){
imageLoader = '<img src="'+ config.imageLoader +'" alt="uploader" />';
}
var display = '<div class="uploadData" id="pxupload'+ itr +'_text" title="pxupload'+ itr +'">' +
'<div class="close">&nbsp;</div>' +
'<span class="fname">'+ fname +'</span>' +
'<span class="loader" style="display:none">'+ imageLoader +'</span>' +
'<div class="status"></div>'+
'</div>';
$("#px_display").append(display);
if (config.limit == '' || $limit < config.limit) {
px.appendForm();
}
$limit++;
$(e).hide();
//px.upload();
}
// To exactly match $("a.foo").live("click", fn), for example, you can write $(document).on("click", "a.foo", fn).
// $(".close").live("click", function(){
$(document).on("click", ".close", function(){
$limit--;
if ($limit == config.limit) {
px.appendForm();
}
var id = "#" + $(this).parent().attr("title");
$(id+"_frame").remove();
$(id).remove();
$(id+"_text").fadeOut("slow",function(){
$(this).remove();
});
return false;
});
//$(config.buttonClear).click(function(){
$(document).on("click", "config.buttonClear", function(){
$("#px_display").fadeOut("slow",function(){
$("#px_display").html("");
$("#pxupload_form").html("");
itr = 0;
$limit = 1;
px.appendForm();
$('#px_button input').attr("disabled","disabled");
$(this).show();
});
});
//private function
var px = {
init: function(e){
var form = $(e).parents('form');
px.formAction = $(form).attr('action');
$(form).before(' \
<div id="pxupload_form"></div> \
<div id="px_display"></div> \
<div id="px_button"></div> \
');
$(config.buttonUpload+','+config.buttonClear).appendTo('#px_button');
if ( $(e).attr('name') != '' ){
config.inputName = $(e).attr('name');
}
if ( $(e).attr('size') != '' ){
config.inputSize = $(e).attr('size');
}
$(form).hide();
$(config.buttonUpload).click(function(){
px.upload()
})
this.appendForm();
},
appendForm: function(){
itr++;
var formId = "pxupload" + itr;
var iframeId = "pxupload" + itr + "_frame";
var inputId = "pxupload" + itr + "_input";
var contents = ''
contents += '<form method="post" id="'+ formId +'" action="'+ px.formAction +'" enctype="multipart/form-data" target="'+ iframeId +'">'
if (studio_id != null) contents+='<input type="hidden" name="studio_id" value="'+studio_id+'">';
if (project_id != null) contents+='<input type="hidden" name="project_id" value="'+project_id+'">';
contents += '<label>'+loc['label_name']+'</label><br>'
contents += '<input name="name" /><br />'
contents += '<label>'+loc['label_description']+'</label><br>'
contents += '<textarea name="description" rows="3" cols="40"></textarea><br />'
contents += '<label>'+loc['label_author']+'/'+loc['label_licence']+'</label><br>'
contents += '<input name="licence" /><br />'
contents += '<label>'+loc['label_public']+'</label><br>'
contents += '<input type="checkbox" name="public"><br />'
contents += '<label>'+loc['label_file']+'</label><br>'
contents += '<input type="file" name="'+ config.inputName +'" id="'+ inputId +'" class="pxupload" size="'+ config.inputSize +'" onchange="$.fileUploader.change(this);" />'
contents += '<input name="action" value="upload" type="hidden"/>'
contents += '</form>'
contents += '<iframe id="'+ iframeId +'" name="'+ iframeId +'" src="about:blank" style="display:none"></iframe>';
$("#pxupload_form").append( contents );
},
validateFile: function(file) {
if (file.indexOf('/') > -1){
file = file.substring(file.lastIndexOf('/') + 1);
}else if (file.indexOf('\\') > -1){
file = file.substring(file.lastIndexOf('\\') + 1);
}
//var extensions = /(.jpg|.jpeg|.gif|.png)$/i;
var extensions = new RegExp(config.allowedExtension + '$', 'i');
if (extensions.test(file)){
return file;
} else {
return -1;
}
},
upload: function(){
if (itr > 0){
$('#px_button input').attr("disabled","disabled");
$("#pxupload_form form").each(function(){
e = $(this);
var id = "#" + $(e).attr("id");
var input_id = id + "_input";
var input_val = $(input_id).val();
if (input_val != ""){
$(id + "_text .status").text("Uploading...");
$(id + "_text").css("background-color", "#FFF0E1");
$(id + "_text .loader").show();
$(id + "_text .close").hide();
$(id).submit();
$(id +"_frame").load(function(){
$(id + "_text .loader").hide();
up_output = $(this).contents().find("#output").html();
var success=0;
if (up_output == "success"){
success=1;
$(id + "_text").css("background-color", "#F0F8FF");
up_output = config.successOutput;
px.redirect();
}else{
$(id + "_text").css("background-color", "#FF0000");
up_output = config.errorOutput;
}
//custom code
up_output += '<br />' + $(this).contents().find("#message").html();
//alert($(this).contents())
//console.log(JSON.stringify($(this).contents()));
$(id + "_text .status").html(up_output);
if(success==1){
var image_id=$(this).contents().find("#upload_image_id").html();
var filename=$(this).contents().find("#upload_image_filename").html();
var title =$(this).contents().find("#upload_image_title").html();
var quote="'";
//remove existing image from list
$('#imageList div.images #img_'+image_id).remove();
//add image to list
$('#imageList div.images').prepend(
'<div id="img_'+image_id+'" class="image" '
+' onclick="imageAction('+quote+filename+quote+');return false;" '
+' title="'+title+'" '
+' style="background-image:url('+quote+'/agenda_files/media/thumbs/'+filename+quote+')"'
+'>'
+' <div class="label">'+title+'</div>'
+'</div>'
);
}
//end of custom code
$(e).remove();
$(config.buttonClear).removeAttr("disabled");
config.callback($(this));
});
}
});
}
},
redirect: function(){
//window.location.replace(config.url)
//$('#pxupload_form').append('<form id="redirect" method="GET" action="'+config.url+'" />');
//$('#redirect').submit();
}
}
px.init(this);
return this;
}
})(jQuery);

111
website/agenda/planung/js/image.js
View File

@@ -202,102 +202,27 @@ function assignImage(filename, target, project_id, studio_id, series_id, event_i
$(document).ready(
function(){
$('div.images').on( 'click', 'div.image', function(){
var elem = $(this);
console.log(elem)
var filename = elem.attr("filename");
elem = elem.parent();
console.log(elem)
var target = elem.attr("target");
var projectId = elem.attr("projectId");
var studioId = elem.attr("studioId");
var seriesId = elem.attr("seriesId");
var eventId = elem.attr("eventId");
var pid = elem.attr("pid");
updateImageEditor($(this), filename, target, projectId, studioId, seriesId, eventId, pid);
return false;
});
if ( window.location.href.indexOf("&filename=") > 0)
setActiveImage();
}
);
/*
function hideContent(){
$('.editor').hide();
$(window).resize(function () {
$('.ui-dialog').css({
'width': $(window).width() - windowOffsetX,
'height': $(window).height() - windowOffsetY,
'position': 'absolute',
'left': 0,
'top': 0,
modal: true
});
var imagesPos= $('div.images').position();
var height = ( $(window).height() - imagesPos.top );
if(height<64) height = 64;
console.log("windowHeight="+$(window).height()+" div.images.pos.top="+imagesPos.top)
$('div.images').css("height", height +"px");
}).resize();
return false;
}
function showContent(){
$('.editor').show();
$('#selectImage').remove();
return false;
}
//select image load into selectImage box
function selectImageOld(project_id, studio_id, imageId, searchValue, imageUrl, series_id){
selectImageId = imageId;
searchValue = searchValue.replace(/[^a-zA-Z0-9]/g,'%');
var url="image.cgi?search="+encodeURIComponent(searchValue)+'&project_id='+project_id+'&studio_id='+studio_id;
if( (series_id!=null) && (series_id != '') ){
url+='&series_id='+series_id;
}
if(imageUrl!=null){
var filename=imageUrl.split('%2F').pop();
url+='&filename='+filename;
}
var x = $(window).width() - windowOffsetX;
var y = $(window).height() - windowOffsetY;
console.log("selectImage(), load url="+url);
$('#selectImage').remove();
$('body').append('<div id="selectImage"></div>');
$('#selectImage').load(
url,
function(){
hideContent();
$('#selectImage').dialog({
appendTo: "#content",
title: "select image",
top: 0,
left: 0,
width: x,
height: y,
close: function( event, ui ) {
showContent();
$('#selectImage').remove();
}
});
updateImageEditor(filename);
}
);
return false;
}
// set editor image and image url to selected image
function selectThisImage(filename){
$('#'+selectImageId).val(filename);
var url = 'showImage.cgi?project_id='+project_id+'&studio_id='+studio_id+'&filename=' + filename;
console.log("select image "+url);
$('#imagePreview').prop('src',url);
showContent();
return false;
}
*/

104
website/agenda/planung/js/image_upload.js
View File

@@ -1,67 +1,55 @@
// init upload
function initUploadDialog(){
//console.log("init upload dialog")
if(!$('#uploader').hasClass("init")){
$('#uploader').fileUploader();
$('#uploader').addClass("init");
//remove multiple buttons
var c=0;
$('#img_upload #px_button').each(
function(){
if (c>0){
$(this).remove();
}
c++;
}
);
}
return false;
var url='imageUpload.cgi?project_id='+ getProjectId()+"&studio_id="+getStudioId();
updateContainer("image-tabs-upload", url);
}
// prepare for new init
function closeImageUpload(){
$('#uploader').removeClass("init");
$('#pxupload_form').remove();
$('#pxupload1_frame').remove();
$('#px_display').remove();
}
function uploadImage(){
console.log("upload")
var form=$("#img_upload");
var fd = new FormData(form[0]);
var rq = $.ajax({
url: 'imageUpload.cgi',
type: 'POST',
data: fd,
cache: false,
contentType: false,
processData: false
});
rq.done( function(data){
$("#image-tabs-upload").html(data);
function insertPicture(name, description, filename) {
try {
markup='{{ thumbs//'+filename;
if (description !=''){
markup+=' | '+description;
}else{
if (name !='') markup+=' | '+name
}
markup+=' }}'
markup+="\n"
parent.$.markItUp( { replaceWith:markup } );
parent.$('#images').dialog("close");
} catch(e) {
alert("No markItUp! Editor found");
}
}
var image_id = $("#upload_image_id").html();
var filename = $("#upload_image_filename").html();
var title = $("#upload_image_title").html();
var quote = "'";
//remove existing image from list
$('#imageList div.images #img_'+image_id).remove();
function image_upload_dialog(){
$('#img_upload').dialog({
title:"image upload",
width:600,
height:320
});
return false;
}
var url='showImage.cgi?project_id='+getProjectId()+'&studioId='+getStudioId()+'&type=icon&filename='+filename;
function image_upload_callback(result){
result.contents().find("#message").html();
var output = '<br />' + $(this).contents().find("#message").html();
$(id + "_text .status").html(output);
}
var html = '<div';
html += ' id="img_' + image_id + '"';
html += ' class="image" ';
html += ' title="' + title + '" ';
html += ' style="background-image:url(' + url + ')"';
html += ' filename="' + filename + '"';
html += '>';
html += ' <div class="label">'+title+'</div>';
html += '</div>';
$(document).ready(
function() {
//$('#uploader').fileUploader();
}
)
//add image to list
$('#imageList div.images').prepend(html);
console.log("done")
return false;
});
rq.fail( function(){
console.log("Fail")
});
return false;
};