874 lines
19 KiB
JavaScript
874 lines
19 KiB
JavaScript
|
/*
|
||
|
|
* 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;
|
||
|
|
};
|