1MAX_CHAR_NUM = 40; 2MAX_CHAR_NUM_MOBILE = 20; 3MAX_UPLOADED_PHOTOS_NUM = 10; 4DOWNLOAD_EVENT_NAME = 'resizer_premium_download'; 5REQUEST_URL = '/resize-action'; 6// local const variables 7const SAVE_RESIZER_PARAMETERS_COOKIE = 'SAVE_RESIZER_PARAMETERS_COOKIE', 8 CROP_REQUEST_URL = '/image-crop-and-resize-action', DEFAULT_BACKGROUND = 'BLUR'; 9// local let variables 10let SAVE_RESIZER_PARAMETERS_COOKIE_VALUE, resizeMethod, shortName, width, height, newWidth, newHeight, imageResolution, 11 imageSize, imageWidth, imageHeight, isFormSubmitting = false, isPercentMethodSelected = true, fileNamesArray = [], 12 strings64BaseArray = [], uploadedImages = [], uploadedResolutions = [], 13 prevBtn = document.querySelector('.default-active'), 14 prevImg = null, prevColor = '', backgroundColor = DEFAULT_BACKGROUND, areInputsAdjustable = true, cropper = '', 15 cropperFrameAspectRatio; 16 17// inputs 18const rangeSlider = document.getElementById('percent-slider-input-id') 19const radioInputs = document.getElementsByName('form-radio-name'); 20const percentRadioInput = document.getElementById('percentage-method-id') 21const dimensionRadioInput = document.getElementById('dimensions-method-id') 22const resizeParametersInputs = document.getElementById('resize-params-id') 23const resizerWidthInput = document.getElementById('width-input-id') 24const resizerHeightInput = document.getElementById('height-input-id') 25const aspectRatioCheckbox = document.getElementById('keep-aspect-ratio-checkbox-id') 26// rest of the elements 27const aspectRatioWrapper = document.getElementById('aspect-ratio-wrapper-id') 28const rangeSliderWrapper = document.getElementById('percent-range-slider-id') 29const percentValue = document.getElementById('percent-value-id') 30 31const percentageMethodSelected = () => { 32 showElement(rangeSliderWrapper) 33 hideElement(resizeParametersInputs) 34 hideElement(aspectRatioWrapper) 35} 36 37const dimensionMethodSelected = () => { 38 showInlineElement(resizeParametersInputs) 39 showElement(aspectRatioWrapper) 40 hideElement(rangeSliderWrapper) 41} 42 43const checkRadioInputValidation = () => { 44 if (percentRadioInput.checked) { 45 percentageMethodSelected(); 46 } else { 47 dimensionMethodSelected() 48 } 49} 50 51const showUploadedImages = () => { 52 uploadedImageContainer.innerHTML = ''; 53 if (uploadedImages.length <= MAX_UPLOADED_PHOTOS_NUM) { 54 55 for (let i = 0; i < uploadedImages.length; i++) { 56 let fileName = uploadedImages[i].name; 57 if (fileName.length > 5) { 58 shortName = shortenFileName(fileName, MAX_CHAR_NUM_MOBILE) 59 } 60 if (!isFileNameInList(fileNamesArray, fileName)) { 61 fileNamesArray.push(fileName) 62 } 63 64 let uploadedImageObj = { 65 name: shortName, index: i, 66 widthIn: resizerWidthInput, heightIn: resizerHeightInput 67 } 68 appendUploadedImageWithResolutionAndSize(uploadedImageObj); 69 70 resizeAndDisplayImagesInModal(uploadedImages[i]) 71 } 72 } 73 if (uploadedImages.length === 0) { 74 pageReload(); 75 } 76} 77 78const showResizedImages = (imageContainer, response) => { 79 imageContainer.innerHTML = ''; 80 for (let i = 0; i < uploadedImages.length; i++) { 81 let fileName = response.fileName[i]; 82 if (fileName.length > 7) { 83 shortName = shortenFileName(fileName) 84 } 85 86 let originName = uploadedImages[i].name 87 let uploadedImage = response.originUrl[i] 88 let optimizedImage = response.downloadUrl[i] 89 let sizeAfter = response.sizeAfter[i].toUpperCase() 90 let sizeBefore = response.sizeBefore[i].toUpperCase() 91 let resolutionBefore = `${uploadedResolutions[i]} px` 92 let savings = response.savedSize[i] 93 let savedPercentage = response.savedPercentage[i] 94 let resolutionAfter 95 let resolutionAndSizeAfter 96 97 if (response.resAfter) { 98 resolutionAfter = `${response.resAfter[i]} px` 99 resolutionAndSizeAfter = `${response.resAfter[i]} px (${sizeAfter})` 100 } else { 101 let width = resizerWidthInput.value 102 let height = resizerHeightInput.value 103 resolutionAfter = `${width} x ${height} px` 104 resolutionAndSizeAfter = `${resolutionAfter} (${sizeAfter})` 105 } 106 107 let compareUrlObj = { 108 originImg: uploadedImage, 109 originName: originName, 110 originResolution: resolutionBefore, 111 originSize: sizeBefore, 112 optimizedImg: optimizedImage, 113 optimizedName: fileName, 114 optimizedResolution: resolutionAfter, 115 optimizedSize: sizeAfter 116 } 117 let compareUrl = createComparePageURL(compareUrlObj) 118 119 let optimizedImageObj = { 120 imgContainer: imageContainer, 121 fileName: fileName, 122 index: i, 123 optimizedImg: optimizedImage, 124 compareUrl: compareUrl, 125 resBefore: resolutionBefore, 126 resAfter: resolutionAfter, 127 sizeBefore: sizeBefore, 128 sizeAfter: sizeAfter, 129 savings: savings, 130 savedPercentage: savedPercentage 131 } 132 appendCroppedAndResizedImages(optimizedImageObj); 133 } 134} 135 136const POSTRequest = async () => { 137 hideElement(uploadedFilesValidationPopup) 138 hideElement(uploadedImageContainer) 139 resetSuccessScreen() 140 imageActionAnimation() 141 142 let requestBody = { 143 resizeMethodKey: getCheckedRadioInputValue(radioInputs), 144 percentValueKey: rangeSlider.value, 145 widthValueKey: resizerWidthInput.value, 146 heightValueKey: resizerHeightInput.value, 147 uploadedFilesDataKey: { 148 fileNamesArrayKey: fileNamesArray,
149 strings64BaseArrayKey: strings64BaseArray, 150 } 151 } 152 eventResizeParameters(getImageResizeParameters(width, height, rangeSlider.value, percentRadioInput), '') 153 154 try { 155 const res = await fetchPOSTRequest(REQUEST_URL, requestBody) 156 onSuccessResponse(res) 157 createResizerParametersCookie(width, height, percentValue, '', SAVE_RESIZER_PARAMETERS_COOKIE) 158 } catch (error) { 159 showPOSTRequestServerError() 160 console.error("Error:", error); 161 } 162} 163 164// handle POST request when aspect ratio of uploaded image&chosen params is not preserved 165const aspectRatioPOSTRequest = async (requestURL) => { 166 hideElement(aspectRatioPopup) 167 hideElement(uploadedFilesValidationPopup) 168 hideElement(uploadedImageContainer) 169 resetSuccessScreen() 170 imageActionAnimation() 171 172 targetFormat = [] 173 174 let resizeMethod = getCheckedRadioInputValue(radioInputs) 175 176 let requestBody = { 177 resizeMethodKey: resizeMethod, 178 percentValueKey: rangeSlider.value, 179 selectedResolutionWidthValueKey: resizerWidthInput.value, 180 selectedResolutionHeightValueKey: resizerHeightInput.value, 181 targetResolutionKey: `${resizerWidthInput.value}_${resizerHeightInput.value}`, 182 backgroundColorKey: backgroundColor, 183 targetFormatKey: targetFormat, 184 uploadedFilesDataKey: { 185 fileNamesArrayKey: fileNamesArray, 186 strings64BaseArrayKey: strings64BaseArray, 187 } 188 } 189 190 try { 191 const res = await fetchPOSTRequest(requestURL, requestBody) 192 onSuccessResponse(res) 193 } catch (error) { 194 console.error("Error:", error); 195 } 196} 197 198const updateTxtContentOfAspectRatioPopup = () => { 199 let width = resizerWidthInput.value 200 let height = resizerHeightInput.value 201 202 updateInnerTxtOfDOMElement(chosenResolutionSpan, `${width} x ${height} px`) 203 if (cropToolTitle) { 204 if (resizerJpUrls.includes(pageUrl)) { 205 updateInnerTxtOfDOMElement(cropToolTitle, `åãæããµã¤ãº: ${width} x ${height} px`) 206 } else { 207 updateInnerTxtOfDOMElement(cropToolTitle, `Crop to: ${width} x ${height} px`) 208 } 209 } 210} 211 212const srollToTopIfNeeded = () => { 213 if (uploadedImages.length >= 4) { 214 scrollToTopOfPage() 215 } 216} 217 218const submitPOSTRequest = async () => { 219 srollToTopIfNeeded() 220 if (isFormSubmitting) return; 221 if (uploadedImages.length !== 0) { 222 isFormSubmitting = true; 223 if (strings64BaseArray.length > uploadedImages.length) { 224 limitUploadedFilesNumber(strings64BaseArray, uploadedImages.length); 225 } 226 let resizeMethod = getCheckedRadioInputValue(radioInputs) 227 try { 228 if (resizeMethod === 'PERCENTAGE_METHOD') { 229 await POSTRequest() 230 } else { 231 width = resizerWidthInput.value 232 height = resizerHeightInput.value 233 if (isAspectRatioCompatible()) { 234 await POSTRequest() 235 } else { 236 updateAndDisplayAspectRatioModal() 237 } 238 } 239 240 } catch (error) { 241 console.error("Request Error:", error); 242 } 243 } else { 244 showErrorMsg() 245 } 246 isFormSubmitting = false 247} 248 249const cropPOSTRequest = async () => { 250 cropImageAnimation( 251 resizedImageContainer, 252 cropLoadingBtn, 253 submitCropBtn, 254 selectImageBtn, 255 cropperImageContainer, 256 cropUploadImageAnimationContainer, 257 uploadedImages, 258 cropUploadImageAnimationTxt, 259 resizerJpUrls.includes(pageUrl) ? 'ããªãã³ã°ä¸...' : 'Cropping image...', 260 cropProgressBar, 261 cropProgressBarPercent 262 ) 263 let width = resizerWidthInput.value 264 let height = resizerHeightInput.value 265 let requestBody = { 266 strings64BaseArrayKey: strings64BaseArray, 267 fileNameKey: fileNamesArray, 268 cropperDetailsKey: cropperDetailsInput.value, 269 targetResolutionKey: `${resizerWidthInput.value}_${resizerHeightInput.value}`, 270 targetWidthKey: width, 271 targetHeightKey: height, 272 targetFormatKey: [], 273 } 274 let requestURL = CROP_REQUEST_URL 275 eventResizeParameters(`res: ${width} x ${height}`, '') 276 277 try {
278 const res = await fetchPOSTRequest(requestURL, requestBody) 279 onCropSuccessResponse(res) 280 } catch (error) { 281 console.error("Error:", error); 282 } 283} 284 285const addEventListenersOnDOMLoaded = () => { 286 eventHandler(submitBtn, TYPE_CLICK, submitPOSTRequest) 287 eventHandler(submitCropBtn, TYPE_CLICK, submitCropPOSTRequest) 288 eventHandler(aspectRatioCheckbox, TYPE_CHANGE, isCheckboxChecked, aspectRatioCheckbox) 289 290 fileInput.addEventListener(TYPE_CHANGE, (e) => { 291 addImages(e.target.files) 292 convertUploadedImageToBytes(e.target.files, strings64BaseArray) 293 }) 294 295 resizerWidthInput.addEventListener(TYPE_INPUT, () => { 296 updateInputWithNewWidthBasedOnAspectRatio(resizerHeightInput, resizerWidthInput, aspectRatioCheckbox, imageWidth, imageHeight) 297 }) 298 299 resizerHeightInput.addEventListener(TYPE_INPUT, () => { 300 updateInputWithNewHeightBasedOnAspectRatio(resizerWidthInput, resizerHeightInput, aspectRatioCheckbox, imageWidth, imageHeight) 301 }) 302} 303eventHandler(document, TYPE_DOM_LOADED, addEventListenersOnDOMLoaded) 304 305checkRadioInputValidation() 306listenOnRadioInputChange(radioInputs, checkRadioInputValidation) 307updateRangeSliderValue(percentValue, rangeSlider) 308readCookieValue(SAVE_RESIZER_PARAMETERS_COOKIE, updateResizerInputValues, null)
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.