diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js index 043d064..770445a 100644 --- a/public/js/crop_editor.js +++ b/public/js/crop_editor.js @@ -87,48 +87,52 @@ class CropEditor { this.image_container.appendChild(this.original_image); } - setInputValues() { + setDefaultCrop(cropAspectRatio, cropMethod) { + let source = this.original_image; + let sourceAspectRatio = source.naturalWidth / source.naturalHeight; + + // Cropping from the centre? + if (cropMethod === "c") { + // Crop vertically from the centre, using the entire width. + if (sourceAspectRatio < cropAspectRatio) { + this.crop_width.value = source.naturalWidth; + this.crop_height.value = Math.ceil(source.naturalWidth / cropAspectRatio); + this.source_x.value = 0; + this.source_y.value = Math.ceil((source.naturalHeight - this.crop_height.value) / 2); + } + // Crop horizontally from the centre, using the entire height. + else { + this.crop_width.value = Math.ceil(cropAspectRatio * source.naturalHeight); + this.crop_height.value = source.naturalHeight; + this.source_x.value = Math.ceil((source.naturalWidth - this.crop_width.value) / 2); + this.source_y.value = 0; + } + } + // Cropping a top or bottom slice? + else { + // Can we actually take a top or bottom slice from the original image? + if (sourceAspectRatio < cropAspectRatio) { + this.crop_width.value = source.naturalWidth; + this.crop_height.value = Math.floor(source.naturalHeight / cropAspectRatio); + this.source_x.value = "0"; + this.source_y.value = cropMethod.indexOf("t") !== -1 ? "0" : source.naturalHeight - this.crop_height.value; + } + // Otherwise, take a vertical slice from the centre. + else { + this.crop_width.value = Math.floor(source.naturalHeight * cropAspectRatio); + this.crop_height.value = source.naturalHeight; + this.source_x.value = Math.floor((source.naturalWidth - this.crop_width.value) / 2); + this.source_y.value = "0"; + } + } + } + + setPositionFormValues() { let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset; if (typeof current.crop_region === "undefined") { - let source_ratio = this.original_image.naturalWidth / this.original_image.naturalHeight, - crop_ratio = current.crop_width / current.crop_height, - min_dim = Math.min(this.original_image.naturalWidth, this.original_image.naturalHeight); - - // Cropping from the centre? - if (current.crop_method === "c") { - // Crop vertically from the centre, using the entire width. - if (source_ratio < crop_ratio) { - this.crop_width.value = this.original_image.naturalWidth; - this.crop_height.value = Math.ceil(this.original_image.naturalWidth / crop_ratio); - this.source_x.value = 0; - this.source_y.value = Math.ceil((this.original_image.naturalHeight - this.crop_height.value) / 2); - } - // Crop horizontally from the centre, using the entire height. - else { - this.crop_width.value = Math.ceil(current.crop_width * this.original_image.naturalHeight / current.crop_height); - this.crop_height.value = this.original_image.naturalHeight; - this.source_x.value = Math.ceil((this.original_image.naturalWidth - this.crop_width.value) / 2); - this.source_y.value = 0; - } - } - // Cropping a top or bottom slice? - else { - // Can we actually take a top or bottom slice from the original image? - if (source_ratio < crop_ratio) { - this.crop_width.value = this.original_image.naturalWidth; - this.crop_height.value = Math.floor(this.original_image.naturalHeight / crop_ratio); - this.source_x.value = "0"; - this.source_y.value = current.crop_method.indexOf("t") !== -1 ? "0" : this.original_image.naturalHeight - this.crop_height.value; - } - // Otherwise, take a vertical slice from the centre. - else { - this.crop_width.value = Math.floor(this.original_image.naturalHeight * crop_ratio); - this.crop_height.value = this.original_image.naturalHeight; - this.source_x.value = Math.floor((this.original_image.naturalWidth - this.crop_width.value) / 2); - this.source_y.value = "0"; - } - } + let aspectRatio = current.crop_width / current.crop_height; + this.setDefaultCrop(aspectRatio, current.crop_method); } else { let region = current.crop_region.split(','); this.crop_width.value = region[0]; @@ -140,7 +144,7 @@ class CropEditor { showContainer() { this.container.style.display = ''; - this.setInputValues(); + this.setPositionFormValues(); this.positionBoundary(); this.addEvents(); }