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

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;
}