Mercurial Hosting > nabble
diff src/nabble/view/web/util/image-crop.js @ 0:7ecd1a4ef557
add content
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Thu, 21 Mar 2019 19:15:52 -0600 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/nabble/view/web/util/image-crop.js Thu Mar 21 19:15:52 2019 -0600 @@ -0,0 +1,537 @@ +/* +(C) www.dhtmlgoodies.com, April 2006 +This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. +Terms of use: +You are free to use this script as long as the copyright message is kept intact. However, you may not +redistribute, sell or repost it without our permission. +Thank you! +www.dhtmlgoodies.com +Alf Magne Kalleland +*/ +var crop_script_alwaysPreserveAspectRatio = true; +var crop_script_fixedRatio = false; +var crop_script_browserIsOpera = navigator.userAgent.indexOf('Opera') >= 0 ? true : false; +var cropDiv_left = false; +var cropDiv_top = false; +var cropDiv_right = false; +var cropDiv_bottom = false; +var cropDiv_dotted = false; +var crop_currentResizeType = false; +var cropEvent_posX; +var cropEvent_posY; +var cropEvent_eventX; +var cropEvent_eventY; +var crop_resizeCounter = -1; +var crop_moveCounter = -1; +var crop_imageDiv = false; +var imageDiv_currentWidth = false; +var imageDiv_currentHeight = false; +var imageDiv_currentLeft = false; +var imageDiv_currentTop = false; +var smallSquare_tl; +var smallSquare_tc; +var smallSquare_tr; +var smallSquare_lc; +var smallSquare_rc; +var smallSquare_bl; +var smallSquare_bc; +var smallSquare_br; + +var offsetSmallSquares = Math.floor(smallSquareWidth / 2); + +var cropScriptAjaxObjects = new Array(); +var preserveAspectRatio = false; + +var cropWidthRatio = false; +// width of cropping area relative to height +function crop_createDivElements(basedir) { + crop_imageDiv = document.getElementById('imageContainer'); + + cropDiv_left = document.createElement('DIV'); + cropDiv_left.className = 'crop_transparentDiv'; + cropDiv_left.style.visibility = 'visible'; + cropDiv_left.style.left = '0px'; + cropDiv_left.style.top = '0px'; + cropDiv_left.style.height = crop_imageHeight + 'px'; + cropDiv_left.style.width = '0px'; + cropDiv_left.innerHTML = '<span></span>'; + crop_imageDiv.appendChild(cropDiv_left); + + cropDiv_top = document.createElement('DIV'); + cropDiv_top.className = 'crop_transparentDiv'; + cropDiv_top.style.visibility = 'visible'; + cropDiv_top.style.left = '0px'; + cropDiv_top.style.top = '0px'; + cropDiv_top.style.height = '0px'; + cropDiv_top.style.width = crop_imageWidth + 'px'; + cropDiv_top.innerHTML = '<span></span>'; + crop_imageDiv.appendChild(cropDiv_top); + + cropDiv_right = document.createElement('DIV'); + cropDiv_right.className = 'crop_transparentDiv'; + cropDiv_right.style.visibility = 'visible'; + cropDiv_right.style.left = (crop_imageWidth) + 'px'; + cropDiv_right.style.top = '0px'; + cropDiv_right.style.height = crop_imageHeight + 'px'; + cropDiv_right.style.width = '0px'; + cropDiv_right.innerHTML = '<span></span>'; + crop_imageDiv.appendChild(cropDiv_right); + + cropDiv_bottom = document.createElement('DIV'); + cropDiv_bottom.className = 'crop_transparentDiv'; + cropDiv_bottom.style.visibility = 'visible'; + cropDiv_bottom.style.left = '0px'; + cropDiv_bottom.style.top = (crop_imageHeight) + 'px'; + cropDiv_bottom.style.height = '0px'; + cropDiv_bottom.style.width = crop_imageWidth + 'px'; + cropDiv_bottom.innerHTML = '<span></span>'; + crop_imageDiv.appendChild(cropDiv_bottom); + + cropDiv_dotted = document.createElement('DIV'); + cropDiv_dotted.className = 'crop_dottedDiv'; + cropDiv_dotted.style.left = '0px'; + cropDiv_dotted.style.top = '0px'; + cropDiv_dotted.style.width = (crop_imageWidth - (cropToolBorderWidth * 2)) + 'px'; + cropDiv_dotted.style.height = (crop_imageHeight - (cropToolBorderWidth * 2)) + 'px'; + cropDiv_dotted.innerHTML = '<div></div>'; + cropDiv_dotted.style.cursor = 'move'; + + if (crop_script_browserIsOpera) { + var div = cropDiv_dotted.getElementsByTagName('DIV')[0]; + div.style.backgroundColor = 'transparent'; + cropDiv_bottom.style.backgroundColor = 'transparent'; + cropDiv_right.style.backgroundColor = 'transparent'; + cropDiv_top.style.backgroundColor = 'transparent'; + cropDiv_left.style.backgroundColor = 'transparent'; + } + + cropDiv_dotted.onmousedown = cropScript_initMove; + + smallSquare_tl = document.createElement('IMG'); + smallSquare_tl.src = basedir + '/images/small_square.gif'; + smallSquare_tl.style.position = 'absolute'; + smallSquare_tl.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_tl.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_tl.style.cursor = 'nw-resize'; + smallSquare_tl.id = 'nw-resize'; + smallSquare_tl.onmousedown = cropScript_initResize; + cropDiv_dotted.appendChild(smallSquare_tl); + + smallSquare_tr = document.createElement('IMG'); + smallSquare_tr.src = basedir + '/images/small_square.gif'; + smallSquare_tr.style.position = 'absolute'; + smallSquare_tr.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_tr.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_tr.style.cursor = 'ne-resize'; + smallSquare_tr.id = 'ne-resize'; + smallSquare_tr.onmousedown = cropScript_initResize; + cropDiv_dotted.appendChild(smallSquare_tr); + + smallSquare_bl = document.createElement('IMG'); + smallSquare_bl.src = basedir + '/images/small_square.gif'; + smallSquare_bl.style.position = 'absolute'; + smallSquare_bl.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_bl.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_bl.style.cursor = 'sw-resize'; + smallSquare_bl.id = 'sw-resize'; + smallSquare_bl.onmousedown = cropScript_initResize; + cropDiv_dotted.appendChild(smallSquare_bl); + + smallSquare_br = document.createElement('IMG'); + smallSquare_br.src = basedir + '/images/small_square.gif'; + smallSquare_br.style.position = 'absolute'; + smallSquare_br.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_br.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_br.style.cursor = 'se-resize'; + smallSquare_br.id = 'se-resize'; + smallSquare_br.onmousedown = cropScript_initResize; + cropDiv_dotted.appendChild(smallSquare_br); + + smallSquare_tc = document.createElement('IMG'); + smallSquare_tc.src = basedir + '/images/small_square.gif'; + smallSquare_tc.style.position = 'absolute'; + smallSquare_tc.style.left = (Math.floor(crop_imageWidth / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_tc.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_tc.style.cursor = 's-resize'; + smallSquare_tc.id = 'n-resize'; + smallSquare_tc.onmousedown = cropScript_initResize; + cropDiv_dotted.appendChild(smallSquare_tc); + + smallSquare_bc = document.createElement('IMG'); + smallSquare_bc.src = basedir + '/images/small_square.gif'; + smallSquare_bc.style.position = 'absolute'; + smallSquare_bc.style.left = (Math.floor(crop_imageWidth / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_bc.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_bc.style.cursor = 's-resize'; + smallSquare_bc.id = 's-resize'; + smallSquare_bc.onmousedown = cropScript_initResize; + cropDiv_dotted.appendChild(smallSquare_bc); + + smallSquare_lc = document.createElement('IMG'); + smallSquare_lc.src = basedir + '/images/small_square.gif'; + smallSquare_lc.style.position = 'absolute'; + smallSquare_lc.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_lc.style.top = (Math.floor(crop_imageHeight / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_lc.style.cursor = 'e-resize'; + smallSquare_lc.id = 'w-resize'; + smallSquare_lc.onmousedown = cropScript_initResize; + cropDiv_dotted.appendChild(smallSquare_lc); + + smallSquare_rc = document.createElement('IMG'); + smallSquare_rc.src = basedir + '/images/small_square.gif'; + smallSquare_rc.style.position = 'absolute'; + smallSquare_rc.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_rc.style.top = (Math.floor(crop_imageHeight / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_rc.style.cursor = 'e-resize'; + smallSquare_rc.id = 'e-resize'; + smallSquare_rc.onmousedown = cropScript_initResize; + cropDiv_dotted.appendChild(smallSquare_rc); + + crop_imageDiv.appendChild(cropDiv_dotted); +}; + +function cropScript_initMove(e) { + if (document.all)e = event; + + if (e.target) source = e.target; + else if (e.srcElement) source = e.srcElement; + if (source.nodeType == 3) // defeat Safari bug + source = source.parentNode; + + if (source.id && source.id.indexOf('resize') >= 0)return; + + imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px', '') / 1; + imageDiv_currentTop = cropDiv_dotted.style.top.replace('px', '') / 1; + imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px', '') / 1; + imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px', '') / 1; + cropEvent_eventX = e.clientX; + cropEvent_eventY = e.clientY; + + crop_moveCounter = 0; + cropScript_timerMove(); + return false; +}; + +function cropScript_timerMove() { + if (crop_moveCounter >= 0 && crop_moveCounter < 10) { + crop_moveCounter++; + setTimeout('cropScript_timerMove()', 1); + return; + } +}; + +function cropScript_initResize(e) { + if (document.all)e = event; + + cropDiv_dotted.style.cursor = 'default'; + crop_currentResizeType = this.id; + + cropEvent_eventX = e.clientX; + cropEvent_eventY = e.clientY; + crop_resizeCounter = 0; + imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px', '') / 1; + imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px', '') / 1; + imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px', '') / 1; + imageDiv_currentTop = cropDiv_dotted.style.top.replace('px', '') / 1; + + cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight; + if (crop_script_fixedRatio)cropWidthRatio = crop_script_fixedRatio; + + if (document.all) { + var div = cropDiv_dotted.getElementsByTagName('DIV')[0]; + div.style.display = 'none'; + } + + cropScript_timerResize(); + return false; +}; + +function cropScript_timerResize() +{ + if (crop_resizeCounter >= 0 && crop_resizeCounter < 10) { + crop_resizeCounter = crop_resizeCounter + 1; + setTimeout('cropScript_timerResize()', 1); + return; + } +}; + +function cropScript_executeCrop(buttonObj) +{ + buttonObj.style.visibility = 'hidden'; + var ajaxIndex = cropScriptAjaxObjects.length; + cropScriptAjaxObjects[ajaxIndex] = new sack(); + var url = crop_script_server_file + '?image_ref=' + document.getElementById('input_image_ref').value + + '&x=' + document.getElementById('input_crop_x').value + + '&y=' + document.getElementById('input_crop_y').value + + '&width=' + document.getElementById('input_crop_width').value + + '&height=' + document.getElementById('input_crop_height').value + + '&percentSize=' + document.getElementById('crop_percent_size').value + + '&convertTo=' + document.getElementById('input_convert_to').options[document.getElementById('input_convert_to').selectedIndex].value; + + cropScriptAjaxObjects[ajaxIndex].requestFile = url; + // Specifying which file to get + cropScriptAjaxObjects[ajaxIndex].onCompletion = function() { + cropScript_cropCompleted(ajaxIndex, buttonObj); + }; + cropScriptAjaxObjects[ajaxIndex].runAJAX(); +}; + +function cropScript_cropCompleted(ajaxIndex, buttonObj) +{ + buttonObj.style.visibility = ''; + eval(cropScriptAjaxObjects[ajaxIndex].response); + cropScriptAjaxObjects[ajaxIndex] = false; +}; + +function crop_cancelEvent(e) +{ + if (document.all)e = event; + if (e.target) source = e.target; + else if (e.srcElement) source = e.srcElement; + if (source.nodeType == 3) // defeat Safari bug + source = source.parentNode; + + if (source.tagName && source.tagName.toLowerCase() == 'input')return true; + return false; +}; + +var mouseMoveEventInProgress = false; +function cropScript_mouseMove(e) +{ + if (mouseMoveEventInProgress)return; + if (crop_moveCounter < 10 && crop_resizeCounter < 10)return; + if (document.all)mouseMoveEventInProgress = true; + if (document.all)e = event; + + if (crop_resizeCounter == 10) { + if (crop_currentResizeType == 'e-resize' || crop_currentResizeType == 'ne-resize' || crop_currentResizeType == 'se-resize') { + cropDiv_dotted.style.width = Math.max(crop_minimumWidthHeight, (imageDiv_currentWidth + e.clientX - cropEvent_eventX)) + 'px'; + } + if (crop_currentResizeType == 's-resize' || crop_currentResizeType == 'sw-resize' || crop_currentResizeType == 'se-resize') { + cropDiv_dotted.style.height = Math.max(crop_minimumWidthHeight, (imageDiv_currentHeight + e.clientY - cropEvent_eventY)) + 'px'; + } + + if (crop_currentResizeType == 'w-resize' || crop_currentResizeType == 'sw-resize' || crop_currentResizeType == 'nw-resize') { + var tmpTop = cropDiv_dotted.style.left.replace('px', '') / 1; + var newTop = Math.max(0, (imageDiv_currentLeft + e.clientX - cropEvent_eventX)); + if ((newTop + crop_minimumWidthHeight) > (cropDiv_dotted.style.left.replace('px', '') / 1 + cropDiv_dotted.style.width.replace('px', '') / 1)) { + newTop = (cropDiv_dotted.style.left.replace('px', '') / 1 + cropDiv_dotted.style.width.replace('px', '') / 1) - crop_minimumWidthHeight; + } + cropDiv_dotted.style.left = newTop + 'px'; + cropDiv_dotted.style.width = (cropDiv_dotted.style.width.replace('px', '') / 1 + tmpTop - cropDiv_dotted.style.left.replace('px', '') / 1) + 'px'; + } + + if (crop_currentResizeType == 'n-resize' || crop_currentResizeType == 'nw-resize' || crop_currentResizeType == 'ne-resize') { + var tmpTop = cropDiv_dotted.style.top.replace('px', '') / 1; + var newTop = Math.max(0, (imageDiv_currentTop + e.clientY - cropEvent_eventY)); + if ((newTop + crop_minimumWidthHeight) > (cropDiv_dotted.style.top.replace('px', '') / 1 + cropDiv_dotted.style.height.replace('px', '') / 1)) { + newTop = (cropDiv_dotted.style.top.replace('px', '') / 1 + cropDiv_dotted.style.height.replace('px', '') / 1) - crop_minimumWidthHeight; + } + cropDiv_dotted.style.top = newTop + 'px'; + cropDiv_dotted.style.height = (cropDiv_dotted.style.height.replace('px', '') / 1 + tmpTop - cropDiv_dotted.style.top.replace('px', '') / 1) + 'px'; + } + + if ((cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) > crop_imageHeight) + cropDiv_dotted.style.height = (crop_imageHeight - cropDiv_dotted.style.top.replace('px', '') / 1 - (cropToolBorderWidth * 2)) + 'px'; + + if ((cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) > crop_imageWidth) + cropDiv_dotted.style.width = (crop_imageWidth - cropDiv_dotted.style.left.replace('px', '') / 1 - (cropToolBorderWidth * 2)) + 'px'; + + if (e.ctrlKey || crop_script_alwaysPreserveAspectRatio)preserveAspectRatio = true; else preserveAspectRatio = false; + + if (preserveAspectRatio) { + var tmpRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight; + if (tmpRatio < cropWidthRatio) { + cropDiv_dotted.style.width = (cropDiv_dotted.style.height.replace('px', '') / 1 * cropWidthRatio) + 'px'; + } else { + cropDiv_dotted.style.height = (cropDiv_dotted.style.width.replace('px', '') / 1 / cropWidthRatio) + 'px'; + } + + if ((cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) > crop_imageHeight) { + var ratioToAdjust = (crop_imageHeight - cropDiv_dotted.style.top.replace('px', '') / 1) / (cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2)); + if (Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) >= crop_minimumWidthHeight) { + cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px'; + cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px'; + } else { + cropDiv_dotted.style.top = (crop_imageHeight - cropDiv_dotted.style.height.replace('px', '')) + 'px'; + } + } + + if ((cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) > crop_imageWidth) { + var ratioToAdjust = (crop_imageWidth - cropDiv_dotted.style.left.replace('px', '') / 1) / (cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2)); + if (Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) >= crop_minimumWidthHeight) { + cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px'; + cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px'; + } else { + cropDiv_dotted.style.left = (crop_imageWidth - cropDiv_dotted.style.width.replace('px', '')) + 'px'; + } + } + } + if (!crop_script_fixedRatio && !e.ctrlKey)cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight; + } + + if (crop_moveCounter == 10) { + var tmpLeft = imageDiv_currentLeft + e.clientX - cropEvent_eventX; + if (tmpLeft < 0)tmpLeft = 0; + if ((tmpLeft + imageDiv_currentWidth + (cropToolBorderWidth * 2)) > crop_imageWidth)tmpLeft = crop_imageWidth - imageDiv_currentWidth - (cropToolBorderWidth * 2); + cropDiv_dotted.style.left = tmpLeft + 'px'; + var tmpTop = imageDiv_currentTop + e.clientY - cropEvent_eventY; + if (tmpTop < 0)tmpTop = 0; + if ((tmpTop + imageDiv_currentHeight + (cropToolBorderWidth * 2)) > crop_imageHeight)tmpTop = crop_imageHeight - imageDiv_currentHeight - (cropToolBorderWidth * 2); + cropDiv_dotted.style.top = tmpTop + 'px'; + } + + var w = cropDiv_dotted.style.width.replace('px', '') / 1; + var h = cropDiv_dotted.style.height.replace('px', '') / 1; + if (w < 100) { + cropDiv_dotted.style.width = '100px'; + cropDiv_dotted.style.left = '0px'; + } + if (h < 100) { + cropDiv_dotted.style.height = '100px'; + cropDiv_dotted.style.top = '0px'; + } + + repositionSmallSquares(); + resizeTransparentSquares(); + if (updateFormValuesAsYouDrag)cropScript_updateFormValues(); + mouseMoveEventInProgress = false; +}; + +function repositionSmallSquares() +{ + var w = cropDiv_dotted.style.width.replace('px', '') / 1; + var h = cropDiv_dotted.style.height.replace('px', '') / 1; + smallSquare_tc.style.left = (Math.floor((w + (cropToolBorderWidth * 2)) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_bc.style.left = (Math.floor((w + (cropToolBorderWidth * 2)) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_tr.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_rc.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_br.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + + smallSquare_br.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_bc.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_bl.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_lc.style.top = (Math.floor((h + cropToolBorderWidth) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; + smallSquare_rc.style.top = (Math.floor((h + cropToolBorderWidth) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; +}; + +function resizeTransparentSquares() +{ + var w = cropDiv_dotted.style.width.replace('px', '') / 1; + cropDiv_left.style.width = cropDiv_dotted.style.left; + cropDiv_right.style.width = Math.max(0, crop_imageWidth - (cropToolBorderWidth * 2) - (w + cropDiv_dotted.style.left.replace('px', '') / 1)) + 'px'; + cropDiv_right.style.left = (w + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) + 'px'; + cropDiv_bottom.style.height = Math.max(0, crop_imageHeight - (cropToolBorderWidth * 2) - (cropDiv_dotted.style.height.replace('px', '') / 1 + cropDiv_dotted.style.top.replace('px', '') / 1)) + 'px'; + cropDiv_bottom.style.top = (cropDiv_dotted.style.height.replace('px', '') / 1 + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) + 'px'; + + cropDiv_top.style.height = cropDiv_dotted.style.top; + + cropDiv_bottom.style.left = cropDiv_dotted.style.left; + cropDiv_bottom.style.width = (w + (cropToolBorderWidth * 2)) + 'px'; + cropDiv_top.style.left = cropDiv_dotted.style.left; + cropDiv_top.style.width = (w + (cropToolBorderWidth * 2)) + 'px'; + + if (cropDiv_left.style.width == '0px')cropDiv_left.style.visibility = 'hidden'; else cropDiv_left.style.visibility = 'visible'; + if (cropDiv_right.style.width == '0px')cropDiv_right.style.visibility = 'hidden'; else cropDiv_right.style.visibility = 'visible'; + if (cropDiv_bottom.style.width == '0px')cropDiv_bottom.style.visibility = 'hidden'; else cropDiv_bottom.style.visibility = 'visible'; +}; + +function cropScript_updateFormValues() +{ + document.getElementById('input_crop_x').value = Math.round(cropDiv_dotted.style.left.replace('px', '') / 1 * (crop_originalImageWidth / crop_imageWidth)); + document.getElementById('input_crop_y').value = Math.round(cropDiv_dotted.style.top.replace('px', '') / 1 * (crop_originalImageHeight / crop_imageHeight)); + document.getElementById('input_crop_width').value = Math.round((cropDiv_dotted.style.width.replace('px', '') / 1 + (cropToolBorderWidth * 2)) * (crop_originalImageWidth / crop_imageWidth)); + document.getElementById('input_crop_height').value = Math.round((cropDiv_dotted.style.height.replace('px', '') / 1 + (cropToolBorderWidth * 2)) * (crop_originalImageHeight / crop_imageHeight)); +}; + +function cropScript_stopResizeMove() +{ + crop_resizeCounter = -1; + crop_moveCounter = -1; + cropDiv_dotted.style.cursor = 'move'; + cropScript_updateFormValues(); + if (document.all) { + var div = cropDiv_dotted.getElementsByTagName('DIV')[0]; + div.style.display = 'block'; + } +}; + +function cropScript_setCropSizeByInput() +{ + var obj_x = document.getElementById('input_crop_x'); + var obj_y = document.getElementById('input_crop_y'); + var obj_width = document.getElementById('input_crop_width'); + var obj_height = document.getElementById('input_crop_height'); + + obj_x.value = obj_x.value.replace(/[^0-9]/gi, ''); + obj_y.value = obj_y.value.replace(/[^0-9]/gi, ''); + obj_width.value = obj_width.value.replace(/[^0-9]/gi, ''); + obj_height.value = obj_height.value.replace(/[^0-9]/gi, ''); + + if (obj_x.value.length == 0)obj_x.value = 0; + if (obj_y.value.length == 0)obj_y.value = 0; + if (obj_width.value.length == 0)obj_width.value = crop_originalImageWidth; + if (obj_height.value.length == 0)obj_height.value = crop_originalImageHeight; + + if (obj_x.value > (crop_originalImageWidth - crop_minimumWidthHeight))obj_x.value = crop_originalImageWidth - crop_minimumWidthHeight; + if (obj_y.value > (crop_originalImageHeight - crop_minimumWidthHeight))obj_y.value = crop_originalImageHeight - crop_minimumWidthHeight; + + if (obj_width.value / 1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value / 1; + if (obj_height.value / 1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value / 1; + + if (obj_x.value / 1 + obj_width.value / 1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value; + if (obj_y.value / 1 + obj_height.value / 1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value; + + cropDiv_dotted.style.left = Math.round(obj_x.value / 1 * (crop_imageWidth / crop_originalImageWidth)) + 'px'; + cropDiv_dotted.style.top = Math.round(obj_y.value / 1 * (crop_imageHeight / crop_originalImageHeight)) + 'px'; + cropDiv_dotted.style.width = Math.round((obj_width.value / 1 - (cropToolBorderWidth * 2)) * (crop_imageWidth / crop_originalImageWidth)) + 'px'; + cropDiv_dotted.style.height = Math.round((obj_height.value / 1 - (cropToolBorderWidth * 2)) * (crop_imageHeight / crop_originalImageHeight)) + 'px'; + + repositionSmallSquares(); + resizeTransparentSquares(); +}; + +function cropScript_setBasicEvents() +{ + document.documentElement.ondragstart = crop_cancelEvent; + document.documentElement.onselectstart = crop_cancelEvent; + document.documentElement.onmousemove = cropScript_mouseMove; + document.documentElement.onmouseup = cropScript_stopResizeMove; + + document.getElementById('input_crop_x').onblur = cropScript_setCropSizeByInput; + document.getElementById('input_crop_y').onblur = cropScript_setCropSizeByInput; + document.getElementById('input_crop_width').onblur = cropScript_setCropSizeByInput; + document.getElementById('input_crop_height').onblur = cropScript_setCropSizeByInput; + document.getElementById('crop_percent_size').onblur = cropScript_validatePercent; +}; + +function cropScript_validatePercent() +{ + this.value = this.value.replace(/[^0-9]/gi, ''); + if (this.value.length == 0)this.value = '1'; + if (this.value / 1 > crop_maximumPercent)this.value = '100'; + if (this.value / 1 < crop_minimumPercent)this.value = crop_minimumPercent +}; + +function crop_initFixedRatio() +{ + crop_script_fixedRatio = 1; + document.getElementById('input_crop_width').value = Math.round(document.getElementById('input_crop_height').value) / crop_script_fixedRatio; + cropScript_setCropSizeByInput(); +}; + +function init_imageCrop(basedir) +{ + cropScript_setBasicEvents(); + crop_createDivElements(basedir); + cropScript_updateFormValues(); + crop_initFixedRatio(); + + cropDiv_dotted.style.left = '0px'; + cropDiv_dotted.style.top = '0px'; + cropDiv_dotted.style.width = '100px'; + cropDiv_dotted.style.height = '100px'; + repositionSmallSquares(); + resizeTransparentSquares(); +}; +