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

rewrite image editor, make images editable at projects and studios

Browse Source
This commit is contained in:
Milan
2018-05-14 23:11:32 +02:00
parent b97fe15f7a
commit 41d209f05a
47 changed files with 1152 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
website/agenda/planung/js/datetime.js
View File

@@ -135,6 +135,11 @@ function showYearPicker(selector, options){
function parseDateTime(datetime){
if (! datetime){
console.log("datetime.js parseDateTime() is undefined or null");
return null;
}
var dateTime = datetime.split(/[ T]+/);
var date = dateTime[0].split("-");
@@ -207,6 +212,8 @@ function addDays(datetime, days){
var weekdays=['Mo','Di','Mi','Do','Fr','Sa','So'];
function getWeekday(date){
if (!date) return '?';
if (loc['weekday_Mo']!=null) weekdays[0]=loc['weekday_Mo'];
if (loc['weekday_Tu']!=null) weekdays[1]=loc['weekday_Tu'];
if (loc['weekday_We']!=null) weekdays[2]=loc['weekday_We'];

23
website/agenda/planung/js/edit_image.js
View File

@@ -1,25 +1,6 @@
function editImage(filename){
$("#img_editor").load('image.cgi?show='+filename+'&template=image_edit.html',
function(){
$('#img_editor').dialog({
width:920,
height:330
});
}
);
}
function showImage(url){
$("#img_image").html('<img src="'+url+'" onclick="$(\'#img_image\').dialog(\'close\');return false;"/>');
$("#img_image").dialog({
width:640,
height:640
});
}
/*
function hideImageDetails(id,filename){
try{$('#img_editor').dialog('close');}catch(e){}
try{$('#img_image').dialog("close");}catch(e){}
$("#"+id).load('image.cgi?show='+filename+'&template=image_single.html');
return false;
@@ -61,4 +42,4 @@ function showImageUrl(id){
return false;
}
*/

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

@@ -115,18 +115,30 @@
var formId = "pxupload" + itr;
var iframeId = "pxupload" + itr + "_frame";
var inputId = "pxupload" + itr + "_input";
var contents =
'<form method="post" id="'+ formId +'" action="'+ px.formAction +'" enctype="multipart/form-data" target="'+ iframeId +'">'
+'<br/>'+loc['label_name']+'<br /><input name="name" />'
+'<br/>'+loc['label_description']+'<br /><textarea name="description" rows="3" cols="40"></textarea>'
;
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+=
'<input type="file" name="'+ config.inputName +'" id="'+ inputId +'" class="pxupload" size="'+ config.inputSize +'" onchange="$.fileUploader.change(this);" />'
+'<input name="action" value="upload" type="hidden"/>'
+'</form>'
+'<iframe id="'+ iframeId +'" name="'+ iframeId +'" src="about:blank" style="display:none"></iframe>';
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 );
},

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

@@ -2,70 +2,44 @@
var windowOffsetX=32;
var windowOffsetY=32;
// choose action depending on selected tab
function imageAction(filename){
if(selectedImageTab=='select'){
selectThisImage(filename);
return false;
}
if(selectedImageTab=='edit'){
editImage(filename);
return false;
}
}
// get current selected tab by tabs-id
function getSelectedTab(id){
var selector='#'+id+" li.ui-tabs-active a";
var tabValue=$(selector).attr("value");
var selector = '#'+id+" li.ui-tabs-active a";
var tabValue = $(selector).attr("value");
return tabValue;
}
//select image load into selectImage box
function selectImage(project_id, studio_id, id, value, imageUrl, series_id){
selectImageId=id;
value=value.replace(/[^a-zA-Z0-9]/g,'%');
var url="image.cgi?search="+encodeURIComponent(value)+'&project_id='+project_id+'&studio_id='+studio_id;
if((series_id!=null)&&(series_id != '')){
url+='&series_id='+series_id;
function setActiveImage(elem){
$('div.image').removeClass("active");
if (elem){
$(elem).addClass("active");
}else{
$('div.image').first().addClass("active");
}
}
if(imageUrl!=null){
var filename=imageUrl.split('%2F').pop();
url+='&filename='+filename;
}
var x=$(window).width() - windowOffsetX;
var y=$(window).height() - windowOffsetY;
hideContent();
$('#selectImage').load(url);
$('#selectImage').dialog({
appendTo: "#content",
title:"select image",
width:x,
height:y,
close: function( event, ui ) {
showContent();
}
});
return false;
// open dialog to show or edit image properties
function updateImageEditor(filename, elem){
var url='image.cgi?show='+filename+'&template=image_edit.html&project_id='+project_id+'&studio_id='+studio_id
console.log("updateImageEditor "+url);
$("#img_editor").load(
url,
function(){
setActiveImage(elem);
}
);
}
// 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(url);
console.log("select image "+url);
$('#imagePreview').prop('src',url);
try{
$('#selectImage').dialog('close');
}catch(e){
$('#selectImage').parent().remove();
$('html').append('<div id="selectImage"></div>');
};
showContent();
return false;
}
@@ -77,15 +51,18 @@ function searchImage(){
value=value.replace(/[^a-zA-Z0-9]/g,'%');
if (value!=null) url+='&search='+encodeURIComponent(value)
value=$('#image_manager input[name=filename]').val();
if (value!=null) url+='&filename='+encodeURIComponent(value);
var filename=$('#image_manager input[name=filename]').val();
var filename = filename.replace(/^.*[\\\/]/, '')
if (filename!=null) url+='&filename='+encodeURIComponent(filename);
if(selectedImageTab=='edit'){
url+='#image-tabs-edit'
if(selectedImageTab!='upload'){
url+='#image-tabs-select'
}
updateContainer('selectImage',url, function(){
console.log("searchImage(), load url="+url)
updateContainer('selectImage', url, function(){
$( "#image-tabs" ).tabs();
$( "#image-tabs" ).tabs( "option", "active", 1 );
if (filename!=null) updateImageEditor(encodeURIComponent(filename));
});
return false;
}
@@ -97,92 +74,62 @@ function hideContent(){
'width': $(window).width() - windowOffsetX,
'height': $(window).height() - windowOffsetY,
'left': windowOffsetX/2+'px',
'top': windowOffsetY/2+'px'
'top': windowOffsetY/2+'px',
modal: true
});
}).resize();
/*
$('.editor').each(
function(){
$(this).hide();
}
);
*/
return false;
}
function showContent(){
/*
$('.editor').each(
function(){
$(this).show();
}
);
*/
$('#selectImage').remove();
return false;
}
// open dialog to edit image properties
function editImage(filename){
$("#img_editor").load(
'image.cgi?show='+filename+'&template=image_edit.html&project_id='+project_id+'&studio_id='+studio_id,
function(){
var x=$(window).width() - windowOffsetX;
var y=$(window).height() - windowOffsetY;
hideContent();
$('#img_editor').dialog({
appendTo: "#content",
width:x,
height:y,
close: function( event, ui ) {
showContent();
}
});
}
);
}
// open dialog to show image preview
function showImage(url){
$("#img_image").html('<img src="'+url+'" onclick="$(\'#img_image\').dialog(\'close\');return false;"/>');
var x=$(window).width() - windowOffsetX;
var y=$(window).height() - windowOffsetY;
hideContent();
$("#img_image").dialog({
appendTo: "#content",
width:x,
height:y,
close: function( event, ui ) {
showContent();
}
});
}
// save image
function saveImage(id, filename) {
$('#imageEditor #status').html('');
console.log("save image "+id);
var url='image.cgi?save_image='+filename+'&project_id='+project_id+'&studio_id='+studio_id;
//remove error field
if($('#image-tabs .error').length>0){
$('#image-tabs div.error').remove();
}
if (url!='') $.post(
$.post(
url,
$("#save_img_"+id).serialize(),
function(data){
var errorFound=0;
var lines=data.split(/\n/);
for (index in lines){
var line=lines[index];
if(contains(line,'ERROR:')){
//add error field
if( $('#image-tabs .error').length==0 ){
$('#image-tabs').append('<div class="error"></div>');
if( $('#imageEditor #status .error').length==0 ){
$('#imageEditor #status').append('<div class="error"></div>');
}
$('#image-tabs div.error').append(line);
$('#imageEditor #status div.error').append(line);
errorFound++;
}
};
//console.log(data);
console.log("save "+id);
if (errorFound==0){
$('#imageEditor #status').append('<div class="ok">saved</div>');
}
hideImageDetails('img_'+id, filename);
}
);
@@ -191,7 +138,11 @@ function saveImage(id, filename) {
// delete image
function askDeleteImage(id, filename) {
commitAction("delete image", function(){ deleteImage(id, filename) } );
commitAction("delete image",
function(){
deleteImage(id, filename)
}
);
}
// delete image
@@ -204,28 +155,12 @@ function deleteImage(id, filename) {
}
// close all open dialogs
function hideImageDetails(id,filename){
function hideImageDetails(id, filename){
try{$('#img_editor').dialog('close');}catch(e){}
try{$('#img_image').dialog("close");}catch(e){}
$("#"+id).load('image.cgi?show='+filename+'&template=image_single.html&project_id='+project_id+'&studio_id='+studio_id);
return false;
}
// show image url
function showImageUrl(id){
var el=document.getElementById(id);
var input_id=id+'_input';
var text='<input id="'+input_id+'" value="{{'+id+'|title}}" title="3fach-Klick zum Markieren!">';
if (el.innerHTML==text){
el.innerHTML='';
}else{
el.innerHTML=text;
var input=document.getElementById(input_id);
input.focus();
input.select();
input.createTextRange().execCommand("Copy");
}
var url='image.cgi?show='+filename+'&template=image_single.html&project_id='+project_id+'&studio_id='+studio_id;
console.log("hideImageDetails, load url="+url)
$("#"+id).load(url);
return false;
}
@@ -254,3 +189,49 @@ function decreaseImageSize(){
}
//select image load into selectImage box
function selectImage(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",
width:x,
height:y,
close: function( event, ui ) {
showContent();
$('.ui-dialog').remove();
}
});
updateImageEditor(filename);
}
);
return false;
}