ACC SHELL
/*
* author: Logan Cai
* Email: cailongqun [at] yahoo [dot] com [dot] cn
* Website: www.phpletter.com
* Created At: 21/April/2007
*/
/**
* get current selected mode value
*/
function getModeValue()
{
//check if an mode has been selected or selected first one be default
var CheckedElem = null;
for(var i = 0; i < document.formAction.mode.length; i++)
{
if(document.formAction.mode[i].checked || i == 0)
{
CheckedElem = document.formAction.mode[i];
}
}
CheckedElem.checked = true;
return CheckedElem.value;
};
/**
* get fired when mode changed
* fire according function
*/
function changeMode(restore, force)
{
var mode = getModeValue();
var imageMode = $('#image_mode');
if(mode != $(imageMode).val() || (typeof(restore) == "boolean"))
{
/**
* confirm it when there has been some changes before go further
*/
if(isImageHistoryExist() || typeof(force) == 'boolean')
{
if(typeof(restore) == "boolean" || typeof(force) == 'boolean' )
{
if(!restoreToOriginal(restore))
{
return false;
}
clearImageHistory();
}
else if(!window.confirm(warningLostChanges))
{
cancelChangeMode();
return false;
}else
{
restoreToOriginal(false);
clearImageHistory();
}
}else if((typeof(restore) == "boolean" && restore))
{
return false;
}
initPositionHandler();
switch(mode)
{
case "resize":
switch($('#image_mode').val())
{
case "crop":
disableCrop();
break;
case "rotate":
disableRotate();
break;
case "flip":
disableFlip();
break;
default:
disableRotate();
}
enableResize(document.formAction.constraint.checked);
break;
case "crop":
switch($('#image_mode').val())
{
case "resize":
disableResize();
break;
case "rotate":
disableRotate();
break;
case "flip":
disableFlip();
break;
default:
disableRotate();
}
enableCrop();
break;
case "rotate":
switch($('#image_mode').val())
{
case "resize":
disableResize();
break;
case "crop":
disableCrop();
break;
case "flip":
disableFlip();
break;
default:
//do nothing
}
enableRotate();
break;
case "flip":
switch($('#image_mode').val())
{
case "resize":
disableResize();
break;
case "crop":
disableCrop();
break;
case "rotate":
disableRotate();
break;
default:
//do nothing
}
enableFlip();
break;
default:
alert('Unexpected Operation!');
return false;
}
$('#image_mode').val(mode);
}
};
function resetEditor()
{
if(isImageHistoryExist())
{
changeMode(true);
}else
{
alert(warningResetEmpty);
}
return false;
};
/**
* enable to crop function
*/
function enableCrop()
{
var widthField = $('#width');
var heightField = $('#height');
var topField = $('#y');
var leftField = $('#x');
var imageToResize = getImageElement();
var imageWidth = $(imageToResize).attr('width');
var imageHeight = $(imageToResize).attr('height');
var overlay = $('#resizeMe');
var imageContainer = $('#imageContainer');
var imageContainerTop = parseInt($(imageContainer).css('top').replace('px', ''));
var imageContainerLeft = parseInt($(imageContainer).css('left').replace('px', ''));
//Init Container
$(imageContainer).css('width', imageWidth + 'px');
$(imageContainer).css('height', imageHeight + 'px');
$(imageToResize).css('opacity', '.5');
//Init Overlay
overlay.css('background-image', 'url('+ $(imageToResize).attr('src')+')');
overlay.css('width', imageWidth + 'px');
overlay.css('height', imageHeight + 'px');
//Init Form
widthField.val(imageWidth);
heightField.val(imageHeight);
topField.val(0);
leftField.val(0);
$(overlay).Resizable(
{
minWidth: 10,
minHeight: 10,
maxWidth: imageWidth,
maxHeight: imageHeight,
minTop: imageContainerTop,
minLeft: imageContainerLeft,
maxRight: (parseInt(imageWidth) + imageContainerLeft),
maxBottom: (parseInt(imageHeight) + imageContainerTop),
dragHandle: true,
onDrag: function(x, y)
{
this.style.backgroundPosition = '-' + (x - imageContainerLeft) + 'px -' + (y - imageContainerTop) + 'px';
$(topField).val(Math.round(y - imageContainerTop));
$(leftField).val(Math.round(x - imageContainerLeft));
addImageHistory();
},
handlers: {
se: '#resizeSE',
e: '#resizeE',
ne: '#resizeNE',
n: '#resizeN',
nw: '#resizeNW',
w: '#resizeW',
sw: '#resizeSW',
s: '#resizeS'
},
onResize : function(size, position) {
this.style.backgroundPosition = '-' + (position.left - imageContainerLeft) + 'px -' + (position.top - imageContainerTop) + 'px';
$(widthField).val(Math.round(size.width));
$(heightField).val(Math.round(size.height));
$(topField).val(Math.round(position.top - imageContainerTop));
$(leftField).val(Math.round(position.left - imageContainerLeft));
addImageHistory();
$('#ratio').val($(overlay).ResizableRatio() );
}
}
);
enableConstraint();
toggleConstraint();
disableRotate();
};
/*
* disable crop function
*/
function disableCrop()
{
$('#resizeMe').ResizableDestroy();
hideHandlers();
};
/**
* disable resize function
*/
function disableResize()
{
$('#resizeMe').ResizableDestroy();
hideHandlers();
};
/**
* hide all handlers
*/
function hideHandlers()
{
$('#resizeSE').hide();
$('#resizeE').hide();
$('#resizeNE').hide();
$('#resizeN').hide();
$('#resizeNW').hide();
$('#resizeW').hide();
$('#resizeSW').hide();
$('#resizeS').hide();
};
/**
*
* enable to resize the image
*/
function enableResize(constraint)
{
hideHandlers();
var imageToResize = getImageElement();
var imageContainer = $('#imageContainer');
var imageContainerTop = parseInt($(imageContainer).css('top').replace('px', ''));
var imageContainerLeft = parseInt($(imageContainer).css('left').replace('px', ''));
var resizeMe = $('#resizeMe');
var width = $('#width');
var height = $('#height');
//ensure the container has same size with the image
$(imageContainer).css('width', $(imageToResize).attr('width') + 'px');
$(imageContainer).css('height', $(imageToResize).attr('height') + 'px');
$(resizeMe).css('width', $(imageToResize).attr('width') + 'px');
$(resizeMe).css('height', $(imageToResize).attr('height') + 'px');
$('#width').val($(imageToResize).attr('width'));
$('#height').val($(imageToResize).attr('height'));
$('#x').val(0);
$('#y').val(0);
$(resizeMe).Resizable(
{
minWidth: 10,
minHeight: 10,
maxWidth: 2000,
maxHeight: 2000,
minTop: imageContainerTop,
minLeft: imageContainerLeft,
maxRight: 2000,
maxBottom: 2000,
handlers: {
s: '#resizeS',
se: '#resizeSE',
e: '#resizeE'
},
onResize: function(size)
{
$(imageToResize).attr('height', Math.round(size.height).toString());
$(imageToResize).attr('width', Math.round(size.width).toString());
$(width).val(Math.round(size.width));
$(height).val(Math.round(size.height));
$(imageContainer).css('width', $(imageToResize).attr('width') + 'px');
$(imageContainer).css('height', $(imageToResize).attr('height') + 'px');
$('#ratio').val($(resizeMe).ResizableRatio() );
addImageHistory();
}
}
);
$(resizeMe).ResizeConstraint(constraint);
if(typeof(constraint) == 'boolean' && constraint)
{
$('#resizeS').hide();
$('#resizeE').hide();
}else
{
$('#resizeS').show();
$('#resizeE').show();
}
$('#resizeSE').show();
$('#ratio').val($(resizeMe).ResizableRatio() );
};
/**
* initiate the position of handler
*/
function initPositionHandler()
{
var widthField = $('#width');
var heightField = $('#height');
var topField = $('#x');
var leftField = $('#y');
var imageToResize = getImageElement();
var imageWidth = $(imageToResize).attr('width');
var imageHeight = $(imageToResize).attr('height');
var overlay = $('#resizeMe');
var imageContainer = $('#imageContainer');
var imageContainerTop = parseInt($(imageContainer).css('top').replace('px', ''));
var imageContainerLeft = parseInt($(imageContainer).css('left').replace('px', ''));
//Init Container
$(imageContainer).css('width', imageWidth + 'px');
$(imageContainer).css('height', imageHeight + 'px');
//Init Overlay
$(imageToResize).css('opacity', '100');
$(overlay).css('width', imageWidth + 'px');
$(overlay).css('height', imageHeight + 'px');
$(overlay).css('background-image', '');
$(overlay).css('backgroundPosition', '0 0');
$(overlay).css('left', imageContainerLeft);
$(overlay).css('top', imageContainerTop);
//Init Form
$(widthField).val(imageWidth);
$(heightField).val(imageHeight);
$(topField).val(0);
$(leftField).val(0);
$('#angle').val(0);
$('#flip_angle').val('');
};
/**
* enable rotate function
*/
function enableRotate()
{
hideHandlers();
toggleDisabledButton('actionRotateLeft', false);
toggleDisabledButton('actionRotateRight', false);
};
/**
* disable rotation function
*/
function disableRotate()
{
toggleDisabledButton('actionRotateLeft', true);
toggleDisabledButton('actionRotateRight', true);
};
function enableConstraint()
{
$('#constraint').removeAttr('disabled');
};
function disableConstraint()
{
$('#constraint').attr('disabled', 'disabled');
};
function ShowHandlers()
{
$('#resizeSE').show();
$('#resizeE').show();
$('#resizeNE').show();
$('#resizeN').show();
$('#resizeNW').show();
$('#resizeW').show();
$('#resizeSW').show();
$('#resizeS').show();
} ;
/**
* turn constraint on or off
*/
function toggleConstraint()
{
hideHandlers();
if(document.formAction.constraint.checked)
{
$('#resizeMe').ResizeConstraint(true);
switch(getModeValue())
{
case "resize":
$('#resizeSE').show();
break;
case "crop":
$('#resizeSE').show();
$('#resizeNE').show();
$('#resizeNW').show();
$('#resizeSW').show();
break;
case "rotate":
break;
}
}else
{
$('#resizeMe').ResizeConstraint(false);
switch(getModeValue())
{
case "resize":
$('#resizeSE').show();
$('#resizeE').show();
$('#resizeS').show();
break;
case "crop":
ShowHandlers();
break;
case "rotate":
break;
}
}
};
/**
* restore to the state the image was
*/
function restoreToOriginal(warning)
{
if(typeof(warning) == "boolean" && warning)
{
if(!window.confirm(warningReset))
{
return false;
}
}
$("#imageContainer").empty();
$("#hiddenImage img").clone().appendTo("#imageContainer");
return true;
};
/*
* left rotate
*/
function leftRotate()
{
var imageToResize = getImageElement();
$(imageToResize).rotate(-90);
swapWidthWithHeight();
addImageHistory();
var angle = $('#angle');
var angleDegree = (parseInt($(angle).val()) + 90);
angleDegree = ((angleDegree == 360)?angleDegree:angleDegree%360);
$(angle).val((angleDegree ));
return false;
};
/**
* cancel mode change
*/
function cancelChangeMode()
{
$('#formAction input[@value=' + $('#image_mode').val() + ']').attr('checked', 'checked');
};
/**
* get the image element which is going to be modified
*/
function getImageElement()
{
var imageElement = null;
var imageContainer = document.getElementById('imageContainer');
for(var i = 0; i < imageContainer.childNodes.length; i++)
{
if((typeof(imageContainer.childNodes[i].name) != "undefined" && imageContainer.childNodes[i].name.toLowerCase() == 'image') || (typeof(imageContainer.childNodes[i].tagName) != "undefined" && (imageContainer.childNodes[i].tagName.toLowerCase() == 'canvas' || imageContainer.childNodes[i].tagName.toLowerCase() == 'img')) )
{
imageElement = imageContainer.childNodes[i];
}
}
return imageElement;
};
/*
right rotate
*/
function rightRotate()
{
var imageToResize = getImageElement();
$(imageToResize).rotate(90);
swapWidthWithHeight();
addImageHistory();
var angle = $('#angle');
var angleDegree = (parseInt($(angle).val()) - 90 );
if(angleDegree < 0)
{
angleDegree += 360;
}
angleDegree = ((angleDegree == 360)?angleDegree:angleDegree%360);
$(angle).val((angleDegree ));
return false;
} ;
/**
* swap image width with height when rotation fired
*/
function swapWidthWithHeight()
{
var imageContainer = $('#imageContainer');
var resizeMe = $('#resizeMe');
var width = $('#width');
var height = $('#height');
var imageToResize = getImageElement();
var newWidth = 0;
var newHeight = 0;
newWidth = $(imageToResize).attr('width');
newHeight = $(imageToResize).attr('height');
$(imageContainer).css('width', newWidth + 'px');
$(imageContainer).css('height', newHeight + 'px');
$(width).val(newWidth);
$(height).val(newHeight);
$(resizeMe).css('width', newWidth + 'px');
$(resizeMe).css('height', newHeight + 'px');
};
/**
* records all change mede to the image
* this features will be implemented next release
*/
function addImageHistory()
{
imageHistory = true;
initDisabledButtons(false);
};
/**
* cleare all records
* this features will be implemented next release
*/
function clearImageHistory()
{
imageHistory = false;
initDisabledButtons(true);
};
function initDisabledButtons(forceDisable)
{
if(numSessionHistory)
{
toggleDisabledButton('actionUndo', false);
}else
{
toggleDisabledButton('actionUndo', true);
}
if(imageHistory)
{
toggleDisabledButton('actionSave', false);
toggleDisabledButton('actionReset', false);
}else
{
toggleDisabledButton('actionSave', true);
toggleDisabledButton('actionReset', true);
}
};
/**
* return record
* this features will be implemented next release
*/
function getImageHistory()
{
return imageHistory;
};
/**
* check if there exists any changes
* this features will be implemented next release
*/
function isImageHistoryExist()
{
return imageHistory;
};
function flipHorizontal()
{
if(window.confirm(warningFlipHorizotal))
{
addImageHistory();
$('#flip_angle').val('horizontal');
$('#mode').val('flip');
saveImage();
}
return false;
};
function flipVertical()
{
if(window.confirm(warningFlipVertical))
{
addImageHistory();
$('#flip_angle').val('vertical');
$('#mode').val('flip');
saveImage();
}
return false;
};
function enableFlip()
{
toggleDisabledButton('actionFlipH', false);
toggleDisabledButton('actionFlipV', false);
};
function toggleDisabledButton(buttonId, forceDisable)
{
var disabledButton = $('#' + buttonId);
var newClass = '';
var changeRequired = true;
var toBeDisabled = false;
var currentClass = $(disabledButton).attr('class') ;
if(typeof(forceDisable) == 'boolean')
{
if(forceDisable && currentClass == 'button')
{
newClass = 'disabledButton';
$(disabledButton).attr('disabled', 'disabled');
}else if(!forceDisable && currentClass == 'disabledButton')
{
newClass = 'button';
$(disabledButton).removeAttr('disabled');
}else
{
changeRequired = false;
}
}
else if(currentClass == 'button')
{
newClass = 'disabledButton';
$(disabledButton).attr('disabled', 'disabled');
}else
{
newClass = 'button';
$(disabledButton).removeAttr('disabled');
}
if(changeRequired)
{
$(disabledButton).removeClass('button disabledButton');
$(disabledButton).addClass(newClass);
}
};
function disableFlip()
{
toggleDisabledButton('actionFlipH', true);
toggleDisabledButton('actionFlipV', true);
};
function undoImage()
{
if(numSessionHistory < 1)
{
alert(warningResetEmpty);
}else
{
if(window.confirm(warningUndoImage))
{
processImage('formAction');
}
}
return false;
};
function processImage(formId)
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
var options =
{
dataType: 'json',
error: function (data, status, e)
{
alert(e);
},
success: function(data)
{
if(typeof(data.error) == 'undefined')
{
alert('Unexpected information ');
}
else if(data.error != '')
{
alert(data.error);
}else
{
$("#loading").show();
currentFolder = data.folder_path;
if(data.save_as == '1')
{
numSessionHistory = 0;
}else
{
numSessionHistory = parseInt(data.history);
}
$('#file_path').val(data.path);
$('#path').val(data.path);
var preImage = new Image();
preImage.width = data.width;
preImage.height = data.height;
preImage.onload = function()
{
$('#hiddenImage').empty();
$(preImage).appendTo('#hiddenImage');
changeMode(false, true);
$('#loading').hide();
$('#windowSaveAs').jqm({modal: true}).jqmHide();
};
var now = new Date();
preImage.src = data.path + "?" + now.getTime();
}
}
};
$('#' + formId).ajaxSubmit(options);
return false;
};
function saveAsImagePre()
{
$('#windowSaveAs').jqm({modal: true}).jqmShow();
var saveTo = $('#save_to');
$(saveTo).removeOption(/./);
$(saveTo).ajaxAddOption(urlGetFolderList, {}, false,
function()
{
$(saveTo).selectOptions(currentFolder);
});
return false;
};
function saveAsImage()
{
var pattern=/^[A-Za-z0-9_ \-]+$/i;
var newName = $('#new_name');
var saveAs = $('#save_to').get(0);
//alert($(saveAs).val());
if(!pattern.test($(newName).val()))
{
alert(warningInvalidNewName);
}else if(saveAs.selectedIndex < 0)
{
alert(warningNoFolderSelected);
}else
{
$('#hidden_new_name').val($(newName).val());
$('#hidden_save_to').val(saveAs.options[saveAs.selectedIndex].value);
if(saveImage(true))
{
}
}
return false;
};
function saveImage(saveAs)
{
if(typeof(saveAs) == 'boolean' && saveAs)
{
}else
{//remove new name if just normal save
$('#hidden_new_name').val('');
$('#hidden_save_to').val('');
}
if (!isImageHistoryExist() && (typeof(saveAs) == 'undefined' || !saveAs))
{
alert(noChangeMadeBeforeSave);
}else
{
if(processImage('formImageInfo'))
{
return true;
}
}
return false;
};
function editorClose()
{
if(window.confirm(warningEditorClose))
{
window.close();
}
return false;
};
ACC SHELL 2018