From 91148e5993f1255ecdb5bdeb68241e2656e3111f Mon Sep 17 00:00:00 2001 From: xrander24 Date: Thu, 18 Apr 2024 22:56:43 +0300 Subject: [PATCH 1/3] added resize module --- static/examples/editAvatar/editAvatar.html | 15 +- static/examples/resizeImage/resizeImage.html | 32 + static/examples/resizeImage/resizeImage.js | 596 +++++++++++++++++++ static/examples/resizeImage/styles.css | 443 ++++++++++++++ static/index.html | 1 + 5 files changed, 1080 insertions(+), 7 deletions(-) create mode 100644 static/examples/resizeImage/resizeImage.html create mode 100644 static/examples/resizeImage/resizeImage.js create mode 100644 static/examples/resizeImage/styles.css diff --git a/static/examples/editAvatar/editAvatar.html b/static/examples/editAvatar/editAvatar.html index 703b2a1..44b1e72 100644 --- a/static/examples/editAvatar/editAvatar.html +++ b/static/examples/editAvatar/editAvatar.html @@ -14,24 +14,25 @@ + -

Изменение аватарки

+

Изменение аватарки

-
+ - + -

Аватарка:

+

Аватарка:

- + - + -
+ diff --git a/static/examples/resizeImage/resizeImage.html b/static/examples/resizeImage/resizeImage.html new file mode 100644 index 0000000..96a3019 --- /dev/null +++ b/static/examples/resizeImage/resizeImage.html @@ -0,0 +1,32 @@ + + + + + + + Шаблон компонента + + + + + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/examples/resizeImage/resizeImage.js b/static/examples/resizeImage/resizeImage.js new file mode 100644 index 0000000..eac6b40 --- /dev/null +++ b/static/examples/resizeImage/resizeImage.js @@ -0,0 +1,596 @@ +(function () { + const initHTML = () => { + + const body = document.body; + body.innerHTML += + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
Ваша фотография
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '

Выбранная область будет показываться на вашей странице

\n' + + '

Вы можете изменять размер изображения при помощи колёсика мыши

\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '

Выбранная область будет показываться на вашей странице

\n' + + '

Вы можете изменять размер изображения при помощи стягивания углов

\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '

Выбранная область будет показываться на вашей странице

\n' + + '

Вы можете выбрать необходимый участок изображения

\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + ' Сохранить изменения\n' + + '
\n' + + '
\n' + + ' Вернуться назад\n' + + '
\n' + + '
\n' + + ' \n' + + '
\n' + + '
' + } + initHTML(); + + const form = document.querySelector('form.editAvatar'); + const dt = new DataTransfer(); + let targetWidth; + let targetHeight; + + let img; + let initImageWidth; + let initImageHeight; + let imageWidth; + let imageHeight; + + let zoom = 1; + let zoomDelta = 0; + let zoomVariant = "area"; + let imagePosX = 0, imagePosY = 0; + + const backImageTypeWheel = document.querySelector(".refactor-container__file_place-back_t_w"); + const frontImageTypeWheel = document.querySelector(".refactor-container__file_place-front_t_w"); + + const backImageTypeArrows = document.querySelector(".refactor-container__file_place-back_t_a"); + const frontImageTypeArrows = document.querySelector(".refactor-container__file_place-front_t_a"); + + const backImageTypeArea = document.querySelector(".refactor-container__file_place-back_t_area"); + const frontImageTypeArea = document.querySelector(".refactor-container__file_place-front_t_area"); + + let areaTop = 0; + let areaLeft = 0; + let areaBot = 0; + let areaRight = 0; + + const imageRefactorPage = document.querySelector(".refactor-page"); + const refactorBody = document.querySelector(".refactor-container__body_type_area"); + + const fileReader = new FileReader(); + + const refactorContainers = document.querySelectorAll("[data-type]"); + let scrollInterval; + + const imageRefactorMethod = () => { + //let imageBox = document.querySelector(".image_refactor_box"); + let mousePosX, mousePosY; + + let scrollDirection = 0; + + const arrowsEvents = () => { + const imageScrollWithArrows = (event) => { + { + zoom = 1 + zoomDelta + ((event.clientX - mousePosX) + (event.clientY - mousePosY)) + / (100 + Math.sqrt((event.clientX - mousePosX) * (event.clientX - mousePosX) + + (event.clientY - mousePosY) * (event.clientY - mousePosY))); + } + if (scrollDirection === 4) { + zoom = 1 + zoomDelta - ((event.clientX - mousePosX) + (event.clientY - mousePosY)) + / (100 + Math.sqrt((event.clientX - mousePosX) * (event.clientX - mousePosX) + + (event.clientY - mousePosY) * (event.clientY - mousePosY))); + } + + if (initImageWidth * zoom < targetWidth || initImageHeight * zoom < targetHeight) { + zoom = targetWidth / Math.min(initImageWidth, initImageHeight); + zoomDelta = zoom - 1; + } + + imageWidth = initImageWidth * zoom; + imageHeight = initImageHeight * zoom; + + document.querySelector(".refactor-container__zoom-button_place_top").style.margin = (32 * zoom + 4) / (zoom + 4) + "px"; + document.querySelector(".refactor-container__zoom-button_place_bottom").style.margin = (32 * zoom + 4) / (zoom + 4) + "px"; + makePositionValid(); + setImagesWidth(imageWidth); + } + + const arrowClickDown = (event) => { + mousePosX = event.clientX; + mousePosY = event.clientY; + + document.addEventListener("mousemove", imageScrollWithArrows); + } + + document.querySelector(".refactor-container__zoom-button_place_top") + .addEventListener("mousedown", (event) => { + scrollDirection = 2; + arrowClickDown(event); + }); + document.querySelector(".refactor-container__zoom-button_place_bottom") + .addEventListener("mousedown", (event) => { + scrollDirection = 4; + arrowClickDown(event); + }); + + const imageClickUp = () => { + zoomDelta = zoom - 1; + document.removeEventListener("mousemove", imageScrollWithArrows); + } + + document.addEventListener("mouseup", imageClickUp); + + } + arrowsEvents(); + + const wheelEvents = () => { + const imageScrollWithWheel = (event) => { + zoom -= event.deltaY / 2400; + if (initImageWidth * zoom >= targetWidth && initImageHeight * zoom >= targetHeight) { + imageWidth = initImageWidth * zoom; + imageHeight = initImageHeight * zoom; + } else { + zoom += event.deltaY / 2400; + } + makePositionValid(); + setImagesWidth(imageWidth); + } + + if ('onwheel' in document) { + backImageTypeWheel.addEventListener("wheel", imageScrollWithWheel); + } else if ('onmousewheel' in document) { + backImageTypeWheel.addEventListener("mousewheel", imageScrollWithWheel); + } else { + backImageTypeWheel.addEventListener("MozMousePixelScroll", imageScrollWithWheel); + } + } + wheelEvents(); + + const areaEvents = () => { + const imageScrollWithArea = (event) => { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + let viewportImageAreaOffset = backImageTypeArea.getBoundingClientRect(); + let refactorBodyOffset = refactorBody.getBoundingClientRect(); + + let clX, clY; + if (event.touches != null) { + clX = event.touches[0].clientX; + clY = event.touches[0].clientY; + } else { + clX = event.clientX; + clY = event.clientY; + } + + let scrollX = 0, scrollY = 0; + if (clY - refactorBodyOffset.top <= 100) { + scrollY = -((100 - clY + refactorBodyOffset.top) / 5); + } + if (refactorBodyOffset.height + refactorBodyOffset.top - clY <= 100) { + scrollY = ((100 - refactorBodyOffset.height - refactorBodyOffset.top + clY) / 5); + } + if (clX - refactorBodyOffset.left <= 100) { + scrollX = -((100 - clX + refactorBodyOffset.left) / 5); + } + if (refactorBodyOffset.width + refactorBodyOffset.left - clX <= 100) { + scrollX = ((100 - refactorBodyOffset.width - refactorBodyOffset.left + clX) / 5); + } + + if (scrollY !== 0 || scrollX !== 0) { + if (scrollY < 0) { + refactorBody.scrollTop = Math.max(refactorBody.scrollTop + scrollY, 0); + } + if (scrollY > 0) { + refactorBody.scrollTop = Math.min(refactorBody.scrollTop + scrollY, initImageHeight - refactorBodyOffset.top); + } + if (scrollX < 0) { + refactorBody.scrollLeft = Math.max(refactorBody.scrollLeft + scrollX, 0); + } + if (scrollX > 0) { + refactorBody.scrollLeft = Math.min(refactorBody.scrollLeft + scrollX, initImageWidth - refactorBodyOffset.left); + } + clearInterval(scrollInterval); + scrollInterval = setInterval(imageMoveEvent, 50, refactorBodyOffset, scrollX, scrollY); + } else { + clearInterval(scrollInterval); + } + + + console.log(clY - refactorBodyOffset.top) + console.log(clY, refactorBodyOffset.top, refactorBody.scrollTop); + + if (scrollDirection === 1 || scrollDirection === 2) { + areaTop = clY - viewportImageOffset.top; + if (areaTop < 0) { + areaTop = 0; + } else if (areaTop + 50 > viewportImageAreaOffset.height - areaBot) { + areaTop = viewportImageAreaOffset.height - areaBot - 50; + } + } + + if (scrollDirection === 3 || scrollDirection === 4) { + areaBot = viewportImageOffset.top + viewportImageOffset.height - clY; + if (areaBot < 0) { + areaBot = 0; + } else if (areaBot + 50 > viewportImageAreaOffset.height - areaTop) { + areaBot = viewportImageAreaOffset.height - areaTop - 50; + } + } + + if (scrollDirection === 2 || scrollDirection === 3) { + areaLeft = clX - viewportImageOffset.left; + if (areaLeft < 0) { + areaLeft = 0; + } else if (areaLeft + 50 > viewportImageAreaOffset.width - areaRight) { + areaLeft = viewportImageAreaOffset.width - areaRight - 50; + } + } + if (scrollDirection === 4 || scrollDirection === 1) { + areaRight = viewportImageOffset.left + viewportImageOffset.width - clX; + if (areaRight < 0) { + areaRight = 0; + } else if (areaRight + 50 > viewportImageAreaOffset.width - areaLeft) { + areaRight = viewportImageAreaOffset.width - areaLeft - 50; + } + } + + setImagesWidth(imageWidth); + setImagesPosition(imagePosX, imagePosY); + } + + document.querySelector(".scale-cube_pos_tr").addEventListener("touchstart", () => { + scrollDirection = 1; + document.addEventListener("touchmove", imageScrollWithArea); + }) + document.querySelector(".scale-cube_pos_tl").addEventListener("touchstart", () => { + scrollDirection = 2; + document.addEventListener("touchmove", imageScrollWithArea); + }) + document.querySelector(".scale-cube_pos_bl").addEventListener("touchstart", () => { + scrollDirection = 3; + document.addEventListener("touchmove", imageScrollWithArea); + }) + document.querySelector(".scale-cube_pos_br").addEventListener("touchstart", () => { + scrollDirection = 4; + document.addEventListener("touchmove", imageScrollWithArea); + }) + + document.querySelector(".scale-cube_pos_tr").addEventListener("mousedown", () => { + scrollDirection = 1; + document.addEventListener("mousemove", imageScrollWithArea); + }) + document.querySelector(".scale-cube_pos_tl").addEventListener("mousedown", () => { + scrollDirection = 2; + document.addEventListener("mousemove", imageScrollWithArea); + }) + document.querySelector(".scale-cube_pos_bl").addEventListener("mousedown", () => { + scrollDirection = 3; + document.addEventListener("mousemove", imageScrollWithArea); + }) + document.querySelector(".scale-cube_pos_br").addEventListener("mousedown", () => { + scrollDirection = 4; + document.addEventListener("mousemove", imageScrollWithArea); + }) + + const imageClickUp = () => { + clearInterval(scrollInterval); + document.removeEventListener("mousemove", imageScrollWithArea); + } + + const imageMoveEvent = (refactorBodyOffset, deltaX, deltaY) => { + if (deltaY < 0) { + refactorBody.scrollTop = Math.max(refactorBody.scrollTop + deltaY, 0); + } + if (deltaY > 0) { + refactorBody.scrollTop = Math.min(refactorBody.scrollTop + deltaY, initImageHeight - refactorBodyOffset.top); + } + if (scrollX < 0) { + refactorBody.scrollLeft = Math.max(refactorBody.scrollLeft + scrollX, 0); + } + if (scrollX > 0) { + refactorBody.scrollLeft = Math.min(refactorBody.scrollLeft + scrollX, initImageWidth - refactorBodyOffset.left); + } + } + document.addEventListener("mouseup", imageClickUp); + } + areaEvents(); + + const makePositionValid = () => { + if (2 * imagePosX + targetWidth > imageWidth) { + imagePosX = imageWidth / 2 - targetWidth / 2; + } else if (2 * imagePosX - targetWidth < -imageWidth) { + imagePosX = -imageWidth / 2 + targetWidth / 2; + } + + if (2 * imagePosY + targetHeight > imageHeight) { + imagePosY = imageHeight / 2 - targetHeight / 2; + } else if (2 * imagePosY - targetHeight < -imageHeight) { + imagePosY = -imageHeight / 2 + targetHeight / 2; + } + const posX = "calc(50% + " + imagePosX + "px)"; + const posY = "calc(50% + " + imagePosY + "px)"; + + setImagesPosition(posX, posY) + } + + const imageMoveEvents = () => { + const imageMove = (event) => { + const deltaX = event.clientX; + const deltaY = event.clientY; + + imagePosX = (deltaX - mousePosX); + imagePosY = (deltaY - mousePosY); + + makePositionValid(); + } + + const imageClickDown = (event) => { + mousePosX = event.clientX - imagePosX; + mousePosY = event.clientY - imagePosY; + + document.addEventListener("mousemove", imageMove); + } + + backImageTypeWheel.addEventListener("mousedown", imageClickDown); + backImageTypeArrows.addEventListener("mousedown", imageClickDown); + backImageTypeArea.addEventListener("mousedown", imageClickDown); + + const imageClickUp = () => { + document.removeEventListener("mousemove", imageMove); + } + + document.addEventListener("mouseup", imageClickUp); + } + imageMoveEvents(); + + const refactorStartEvents = () => { + + } + refactorStartEvents(); + } + const imageInputChangeMethod = () => { + const fileInput = document.querySelector(".imageResizeAndCrop"); + targetWidth = Number(fileInput.getAttribute('data-target-width')); + targetHeight = Number(fileInput.getAttribute('data-target-height')); + const fileChange = function () { + imageRefactorPage.classList.remove("disable"); + + fileReader.readAsDataURL(fileInput.files[0]); + fileReader.addEventListener("load", () => { + img = new Image; + img.src = fileReader.result; + getImageData(); + + window.addEventListener("resize", updateImageAfterWindowResize); + }) + + setEnableZoomVariant("area"); + }; + fileInput.addEventListener("change", fileChange); + const getImageData = async () => { + initImageWidth = img.naturalWidth; + initImageHeight = img.naturalHeight; + + while (initImageWidth * initImageHeight === 0) { + initImageWidth = img.naturalWidth; + initImageHeight = img.naturalHeight; + await new Promise(r => setTimeout(r, 300)); + } + + backImageTypeWheel.style.backgroundImage = "url('" + fileReader.result + "')"; + frontImageTypeWheel.style.backgroundImage = "url('" + fileReader.result + "')"; + + backImageTypeArrows.style.backgroundImage = "url('" + fileReader.result + "')"; + frontImageTypeArrows.style.backgroundImage = "url('" + fileReader.result + "')"; + + let dw = initImageWidth / Math.min(window.innerWidth, 900); + let dh = initImageHeight / Math.min(window.innerHeight - 200, 600); + + let dRes = Math.min(dw, dh); + + backImageTypeArea.style.width = (initImageWidth / dRes - 88) + "px"; + backImageTypeArea.style.height = (initImageHeight / dRes - 88) + "px"; + backImageTypeArea.style.backgroundSize = (initImageWidth / dRes - 88) + "px " + (initImageHeight / dRes - 88) + "px"; + backImageTypeArea.style.backgroundImage = "url('" + fileReader.result + "')"; + + areaLeft = 0; + areaTop = 0; + areaRight = 0; + areaBot = 0; + + imagePosY = 0; + imagePosX = 0; + zoom = targetWidth / Math.min(initImageWidth, initImageHeight); + + zoomDelta = 0; + imageWidth = initImageWidth * zoom; + imageHeight = initImageHeight * zoom; + + setImagesWidth(imageWidth); + setImagesPosition("50%", "50%") + } + const updateImageAfterWindowResize = () => { + if (window.innerWidth <= 720) { + zoomVariant = "area"; + setEnableZoomVariant(); + } + getImageData(); + } + window.removeEventListener("resize", updateImageAfterWindowResize); + + const setEnableZoomVariant = () => { + for (let el of refactorContainers) { + let type = el.dataset.type + document.querySelector(".refactor-container__body_type_" + type).style.display = "none"; + document.querySelector(".zoom-variant-item_type_" + type).style.backgroundColor = "transparent"; + } + document.querySelector(".refactor-container__body_type_" + zoomVariant) + .style.display = "flex"; + document.querySelector(".zoom-variant-item_type_" + zoomVariant).style.backgroundColor = "var(--color-active)"; + } + const setDifferentScaleTypesMethod = () => { + for (let el of refactorContainers) { + let type = el.dataset.type + document.querySelector(".zoom-variant-item_type_" + type) + .addEventListener("click", () => { + zoomVariant = type; + setEnableZoomVariant(); + }, type); + } + } + setDifferentScaleTypesMethod(); + + const saveUpdatedImageEvent = () => { + const crop_button = document.querySelector(".refactor-container__button_type-confirm"); + const canvas = document.querySelector('.canvas_crop'); + + crop_button.addEventListener("click", () => { + if (zoomVariant === "area") { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + let viewportImageAreaOffset = backImageTypeArea.getBoundingClientRect(); + + const dx = initImageWidth / viewportImageOffset.width; + const dy = initImageHeight / viewportImageOffset.height; + + canvas.width = (viewportImageOffset.width - areaLeft - areaRight) * dx; + canvas.height = (viewportImageOffset.height - areaTop - areaBot) * dy; + let context = canvas.getContext('2d'); + + context.drawImage(img, areaLeft * dx, areaTop * dy, initImageWidth - areaLeft * dx - areaRight * dx, initImageHeight - areaTop * dy - areaBot * dy, 0, 0, canvas.width, canvas.height); + } else { + const dx = Math.min(initImageWidth / targetWidth, initImageHeight / targetHeight); + canvas.width = targetWidth * dx; + canvas.height = targetHeight * dx; + let context = canvas.getContext('2d'); + + const sourceX = initImageWidth / 2 - imagePosX / zoom - (targetWidth / 2) / zoom; + const sourceY = initImageHeight / 2 - imagePosY / zoom - (targetHeight / 2) / zoom; + + const sourceWidth = targetWidth / zoom; + const sourceHeight = targetHeight / zoom; + context.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.width, canvas.height); + } + canvas.toBlob(function (blob) { + console.log(blob); + dt.items.clear(); + dt.items.add(new File([blob], 'ava.png', {type: "image/png"})); + form.requestSubmit(); + }); + }); + } + saveUpdatedImageEvent(); + const denyUpdatedImageEvent = () => { + window.removeEventListener("resize", updateImageAfterWindowResize); + + const removeUpdates = () => { + imageRefactorPage.classList.add("disable"); + } + + document.querySelector(".refactor-container__button_type-deny").addEventListener("click", removeUpdates); + document.querySelector(".refactor-container__close-button").addEventListener("click", removeUpdates); + } + denyUpdatedImageEvent(); + } + const setImagesWidth = (width) => { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + let viewportImageAreaOffset = backImageTypeArea.getBoundingClientRect(); + + backImageTypeWheel.style.backgroundSize = width + "px"; + frontImageTypeWheel.style.backgroundSize = width + "px"; + + backImageTypeArrows.style.backgroundSize = width + "px"; + frontImageTypeArrows.style.backgroundSize = width + "px"; + + frontImageTypeArea.style.height = (viewportImageOffset.height - areaTop - areaBot) + "px"; + frontImageTypeArea.style.width = (viewportImageOffset.width - areaLeft - areaRight) + "px"; + + document.querySelector(".refactor-container__background_pos_t").style.height = areaTop + "px"; + document.querySelector(".refactor-container__background_pos_b").style.height = areaBot + "px"; + + document.querySelector(".refactor-container__background_pos_l").style.top = areaTop + "px"; + document.querySelector(".refactor-container__background_pos_l").style.bottom = areaBot + "px"; + document.querySelector(".refactor-container__background_pos_l").style.width = areaLeft + "px"; + + document.querySelector(".refactor-container__background_pos_r").style.top = areaTop + "px"; + document.querySelector(".refactor-container__background_pos_r").style.bottom = areaBot + "px"; + document.querySelector(".refactor-container__background_pos_r").style.width = areaRight + "px"; + } + const setImagesPosition = (posX, posY) => { + backImageTypeWheel.style.backgroundPosition = posX + " " + posY; + frontImageTypeWheel.style.backgroundPosition = posX + " " + posY; + + backImageTypeArrows.style.backgroundPosition = posX + " " + posY; + frontImageTypeArrows.style.backgroundPosition = posX + " " + posY; + + frontImageTypeArea.style.backgroundPosition = -areaLeft + "px " + -areaTop + "px"; + frontImageTypeArea.style.left = areaLeft + "px"; + frontImageTypeArea.style.right = areaRight + "px"; + frontImageTypeArea.style.top = areaTop + "px"; + frontImageTypeArea.style.bottom = areaBot + "px"; + } + + + form.addEventListener('submit', async (evt) => { + evt.preventDefault(); + const username = document.querySelector('section.auth').dataset.username; + form.querySelector('input[name="username"]').setAttribute('value', username); + const file_list = dt.files; + console.log('Коллекция файлов создана:'); + console.dir(file_list); + form.querySelector('input[name="avatar"]').files = file_list; + const response = await window.acomicsLegacyClient.sendFormAndParseHtml(evt.target); + console.log(response); + }); + imageInputChangeMethod(); + imageRefactorMethod(); +})(); + + diff --git a/static/examples/resizeImage/styles.css b/static/examples/resizeImage/styles.css new file mode 100644 index 0000000..8ae2053 --- /dev/null +++ b/static/examples/resizeImage/styles.css @@ -0,0 +1,443 @@ +:root { + --color-interface: rgb(240, 240, 240); + --color-resizeBox: rgb(241, 235, 227); + --color-text-main: rgb(45, 45, 45); + --color-text-main__hover: rgb(65, 65, 65); + --color-text-second: rgb(231, 225, 217); + --color-text-second__hover: rgb(211, 205, 197); + --color-active: rgb(239, 168, 33); + --color-active__hover: rgb(211, 19, 53); + + --hover-delay-midle: 0.5s; +} + +* { + margin: 0; + padding: 0; +} + +body { + overflow: hidden; + font-family: Arial, sans-serif; +} +.upload-button { + position: relative; + width: 160px; + height: 240px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 64px; +} + +.upload-input { + position: absolute; + opacity: 0; + width: 100%; + height: 100%; +} + +.upload-container { + position: relative; + display: flex; + align-items: flex-end; + width: calc(100% - 4px); + height: 200px; + border: 1px solid var(--color-text-main); + border-radius: 4px; + background: var(--color-text-second); +} + +.upload-container__hidden-icon { + position: absolute; + width: 100%; + height: 100%; + background: url("../images/upload_file_icon.webp") no-repeat center center / 60%; + opacity: 0; + transition: var(--hover-delay-midle); +} + +.upload-button:hover .upload-container__hidden-icon { + opacity: 0.5; +} + +.upload-container__text { + width: 100%; + text-align: center; + margin: 8px; + font-size: 18px; +} + +.page { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} + +.fixed { + position: fixed; + top: 0; + left: 0; +} + +.disable { + display: none; +} + +.refactor-background { + position: absolute; + width: 100%; + height: 100%; + opacity: 0.8; + background-color: var(--color-text-main); +} + +.refactor-container { + position: absolute; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + max-width: 100vw; + max-height: 100%; + border-radius: 8px; + background-color: var(--color-resizeBox); +} +.refactor-container__header { + width: calc(100% - 36px); + height: 90px; + display: flex; + justify-content: space-between; + align-items: center; + color: var(--color-text-main); +} +.refactor-container__header-text { + font-size: 20px; + margin: 16px; +} +.refactor-container__close-button { + height: 30px; + width: 30px; + background: url("../images/cross_grey.png") no-repeat center center / 50%; +} +.refactor-container__close-button:hover { + background-size: 65%; +} +.refactor-container__body { + flex-direction: column; + min-width: 760px; + width: 100%; + height: 100%; + padding: 16px 0 0 0; + border-top: 2px solid var(--color-text-second__hover); + border-bottom: 2px solid var(--color-text-second__hover); + color: var(--color-text-main); + overflow: scroll; +} +.refactor-container__body_type_wheel { + align-items: center; +} +.refactor-container__body_type_arrows { + align-items: center; +} +.refactor-container__body_type_area { + align-items: flex-start; +} +.refactor-container__body-text { + width: calc(100% - 24px); + text-align: center; + color: var(--color-text-main__hover); + font-size: 16px; + margin-top: 6px; +} +.refactor-container__body-paragraph { + width: calc(100% - 24px); + text-align: center; + color: var(--color-text-main__hover); + font-size: 14px; + margin-top: 6px; +} + +.refactor-container__body-box { + margin-top: 16px; + justify-content: center; + position: relative; +} +.refactor-container__body-box_type_wheel { + width: 500px; +} +.refactor-container__body-box_type_arrows { + width: 500px +} +.refactor-container__body-box_type_area { + padding: 0 24px 16px 24px; +} +.refactor-container__background-box { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} +.refactor-container__background { + position: absolute; + background: rgba(211, 205, 197, 0.3); +} +.refactor-container__background_pos_t { + top: 0; + left: 0; + right: 0; +} +.refactor-container__background_pos_b { + bottom: 0; + left: 0; + right: 0; +} +.refactor-container__background_pos_l { + left: 0; +} +.refactor-container__background_pos_r { + right: 0; +} +.refactor-container__body-file { + position: absolute; + width: 100%; + height: 100%; + background-repeat: no-repeat; +} + +.refactor-container__body-image { + position: relative; + background-position: center; + margin: 12px; + +} +.refactor-container__body-image-area { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: 0.5px solid var(--color-text-main__hover); +} + +.scale-cube { + position: absolute; + width: 24px; + height: 24px; + background: rgba(231, 225, 217, 0.8); + border: 0.5px solid var(--color-text-main__hover); + transition: var(--hover-delay-midle); +} + +.scale-cube:hover { + background: rgba(231, 225, 217, 0.2); +} +.scale-cube:active { + background: rgba(231, 225, 217, 0.2); +} + +.scale-cube_pos_tl { + left: -12px; + top: -12px; +} + +.scale-cube_pos_tr { + right: -12px; + top: -12px; +} + +.scale-cube_pos_bl { + left: -12px; + bottom: -12px; +} + +.scale-cube_pos_br { + right: -12px; + bottom: -12px; +} + +.refactor-container__file_place-back { + position: absolute; + opacity: 0.2; +} + +.refactor-container__circle-box { + position: relative; + width: 500px; + height: 500px; + border-radius: 50%; + overflow: hidden; + pointer-events: none; +} + +.refactor-container__file_place-front { + position: absolute; +} + +.refactor-container__footer { + display: flex; + justify-content: center; + align-items: center; +} +.refactor-container__button { + display: flex; + justify-content: center; + align-items: center; + height: 36px; + border-radius: 8px; + transition: background var(--hover-delay-midle); +} +.refactor-container__button_type-confirm { + width: 220px; + background: var(--color-active); + color: white; + margin: 8px; +} +.refactor-container__button_type-confirm:hover { + background: var(--color-active__hover); +} +.refactor-container__button_type-deny { + width: 180px; + background: var(--color-text-second); + color: var(--color-text-main); + margin: 8px; +} +.refactor-container__button_type-deny:hover { + background: var(--color-text-second__hover); +} + +.refactor-container__zoom-arrows { + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; +} +.refactor-container__zoom-button { + position: absolute; + background: url("../images/double-arrow.png") no-repeat center center / cover; + cursor: nwse-resize; + transition: background var(--hover-delay-midle); + pointer-events: all; +} +.refactor-container__zoom-arrows:hover > div { + background: url("../images/double-arrow-active.png") no-repeat center center / cover; +} +.refactor-container__zoom-arrows:active > div { + background: url("../images/double-arrow-active.png") no-repeat center center / cover; +} + +.refactor-container__zoom-button_place_top { + left: 16px; + top: 16px; + width: 32px; + height: 32px; + transform: rotate(225deg); + margin: 8px; +} +.refactor-container__zoom-button_place_top:hover + .refactor-container__zoom-button_place_bottom{ + background: url("../images/double-arrow-active.png") no-repeat center center / cover; +} + +.refactor-container__zoom-button_place_bottom { + right: 16px; + bottom: 36px; + width: 32px; + height: 32px; + transform: rotate(45deg); + margin: 8px; +} +.refactor-container__zoom-button_place_bottom:hover + .refactor-container__zoom-button_place_top{ + background: url("../images/double-arrow-active.png") no-repeat center center / cover; +} + +.zoom-variant-container { + position: absolute; + top: 120px; + left: -52px; + width: 36px; + height: 112px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + border: 2px solid black; + border-radius: 4px; + background: var(--color-resizeBox); + z-index: 5 +} +.zoom-variant-item { + width: 26px; + height: 26px; + border: 1px solid transparent; + transition: var(--hover-delay-midle); +} + +.zoom-variant-item:hover { + border: 1px solid black; +} + +.zoom-variant-item_type_wheel { + background: url("../images/scale-wheel.png") no-repeat center center / 80%; +} + +.zoom-variant-item_type_arrows { + background: url("../images/scale-arrows.png") no-repeat center center / 80%; +} + +.zoom-variant-item_type_area { + background: url("../images/scale-area.png") no-repeat center center / 80%; +} + +.canvas_crop { + display: none; +} +@media (max-width: 1048px){ + .zoom-variant-container { + height: 36px; + width: 112px; + flex-direction: row; + top: 72px; + left: 16px; + } +} +@media (max-width: 720px){ + .zoom-variant-container { + display: none; + } + .refactor-container { + width: 100%; + height: 100%; + border-radius: 0; + } + .refactor-container__header { + width: 100%; + } + .refactor-container__header-text { + font-size: 18px; + } + .refactor-container__close-button { + height: 60px; + width: 60px; + background: url("../images/cross_grey.png") no-repeat center center / 50%; + } + .refactor-container__body { + min-width: 0; + } + .refactor-container__body-box { + margin-top: 6px; + } + .refactor-container__footer { + flex-direction: column; + width: calc(100% - 12px); + } + .refactor-container__button { + font-size: 18px; + width: 100%; + height: 64px; + } +} diff --git a/static/index.html b/static/index.html index 527cddb..ab37a8c 100644 --- a/static/index.html +++ b/static/index.html @@ -19,6 +19,7 @@

Примеры:

  • Изменение категорий комикса
  • Добавление страницы комикса
  • Изменение аватарки
    • +
  • Ресайз изображений
    • From adb782fc32c2a590a55b35a5806158ecf4ed8f2d Mon Sep 17 00:00:00 2001 From: xrander24 Date: Thu, 2 May 2024 18:50:15 +0300 Subject: [PATCH 2/3] fix html generation and form --- static/examples/editAvatar/editAvatar.html | 7 +- .../resizeImage.js | 100 ++++++-------- .../{resizeImage => editAvatar}/styles.css | 127 ++++++++---------- static/examples/resizeImage/resizeImage.html | 32 ----- static/index.html | 1 - 5 files changed, 97 insertions(+), 170 deletions(-) rename static/examples/{resizeImage => editAvatar}/resizeImage.js (90%) rename static/examples/{resizeImage => editAvatar}/styles.css (85%) delete mode 100644 static/examples/resizeImage/resizeImage.html diff --git a/static/examples/editAvatar/editAvatar.html b/static/examples/editAvatar/editAvatar.html index 44b1e72..79d0fa8 100644 --- a/static/examples/editAvatar/editAvatar.html +++ b/static/examples/editAvatar/editAvatar.html @@ -14,7 +14,9 @@ - + + + @@ -26,7 +28,8 @@

    Изменение аватарки

    -

    Аватарка:

    +

    Аватарка:

    diff --git a/static/examples/resizeImage/resizeImage.js b/static/examples/editAvatar/resizeImage.js similarity index 90% rename from static/examples/resizeImage/resizeImage.js rename to static/examples/editAvatar/resizeImage.js index eac6b40..46bfa78 100644 --- a/static/examples/resizeImage/resizeImage.js +++ b/static/examples/editAvatar/resizeImage.js @@ -1,11 +1,11 @@ (function () { - const initHTML = () => { - const body = document.body; - body.innerHTML += - '
    \n' + + const imageRefactorPage = document.createElement('div'); + const initHTML = () => { + imageRefactorPage.className = 'resize-image-page resize-image-page_disabled'; + const htmlString = '
    \n' + - '
    \n' + + '
    \n' + '
    \n' + '
    Ваша фотография
    \n' + '
    \n' + @@ -68,22 +68,23 @@ '
    \n' + '
    \n' + ' \n' + - '
    \n' + - '
    ' + ' ' + imageRefactorPage.insertAdjacentHTML('beforeend', htmlString); + document.body.appendChild(imageRefactorPage); } initHTML(); - const form = document.querySelector('form.editAvatar'); const dt = new DataTransfer(); - let targetWidth; - let targetHeight; + const resizeWindowWidth = 500; + const resizeWindowHeight = 500; let img; let initImageWidth; let initImageHeight; let imageWidth; let imageHeight; - + let targetWidth; + let targetHeight; let zoom = 1; let zoomDelta = 0; let zoomVariant = "area"; @@ -103,7 +104,6 @@ let areaBot = 0; let areaRight = 0; - const imageRefactorPage = document.querySelector(".refactor-page"); const refactorBody = document.querySelector(".refactor-container__body_type_area"); const fileReader = new FileReader(); @@ -130,8 +130,8 @@ (event.clientY - mousePosY) * (event.clientY - mousePosY))); } - if (initImageWidth * zoom < targetWidth || initImageHeight * zoom < targetHeight) { - zoom = targetWidth / Math.min(initImageWidth, initImageHeight); + if (initImageWidth * zoom < resizeWindowWidth || initImageHeight * zoom < resizeWindowHeight) { + zoom = resizeWindowWidth / Math.min(initImageWidth, initImageHeight); zoomDelta = zoom - 1; } @@ -175,7 +175,7 @@ const wheelEvents = () => { const imageScrollWithWheel = (event) => { zoom -= event.deltaY / 2400; - if (initImageWidth * zoom >= targetWidth && initImageHeight * zoom >= targetHeight) { + if (initImageWidth * zoom >= resizeWindowWidth && initImageHeight * zoom >= resizeWindowHeight) { imageWidth = initImageWidth * zoom; imageHeight = initImageHeight * zoom; } else { @@ -243,10 +243,6 @@ clearInterval(scrollInterval); } - - console.log(clY - refactorBodyOffset.top) - console.log(clY, refactorBodyOffset.top, refactorBody.scrollTop); - if (scrollDirection === 1 || scrollDirection === 2) { areaTop = clY - viewportImageOffset.top; if (areaTop < 0) { @@ -344,16 +340,16 @@ areaEvents(); const makePositionValid = () => { - if (2 * imagePosX + targetWidth > imageWidth) { - imagePosX = imageWidth / 2 - targetWidth / 2; - } else if (2 * imagePosX - targetWidth < -imageWidth) { - imagePosX = -imageWidth / 2 + targetWidth / 2; + if (2 * imagePosX + resizeWindowWidth > imageWidth) { + imagePosX = imageWidth / 2 - resizeWindowWidth / 2; + } else if (2 * imagePosX - resizeWindowWidth < -imageWidth) { + imagePosX = -imageWidth / 2 + resizeWindowWidth / 2; } - if (2 * imagePosY + targetHeight > imageHeight) { - imagePosY = imageHeight / 2 - targetHeight / 2; - } else if (2 * imagePosY - targetHeight < -imageHeight) { - imagePosY = -imageHeight / 2 + targetHeight / 2; + if (2 * imagePosY + resizeWindowHeight > imageHeight) { + imagePosY = imageHeight / 2 - resizeWindowHeight / 2; + } else if (2 * imagePosY - resizeWindowHeight < -imageHeight) { + imagePosY = -imageHeight / 2 + resizeWindowHeight / 2; } const posX = "calc(50% + " + imagePosX + "px)"; const posY = "calc(50% + " + imagePosY + "px)"; @@ -368,7 +364,6 @@ imagePosX = (deltaX - mousePosX); imagePosY = (deltaY - mousePosY); - makePositionValid(); } @@ -390,22 +385,17 @@ document.addEventListener("mouseup", imageClickUp); } imageMoveEvents(); - - const refactorStartEvents = () => { - - } - refactorStartEvents(); } const imageInputChangeMethod = () => { - const fileInput = document.querySelector(".imageResizeAndCrop"); + const fileInput = document.querySelector('input[name="avatar"]'); targetWidth = Number(fileInput.getAttribute('data-target-width')); targetHeight = Number(fileInput.getAttribute('data-target-height')); const fileChange = function () { - imageRefactorPage.classList.remove("disable"); + imageRefactorPage.classList.remove('resize-image-page_disabled'); fileReader.readAsDataURL(fileInput.files[0]); fileReader.addEventListener("load", () => { - img = new Image; + img = new Image(); img.src = fileReader.result; getImageData(); @@ -448,7 +438,7 @@ imagePosY = 0; imagePosX = 0; - zoom = targetWidth / Math.min(initImageWidth, initImageHeight); + zoom = (resizeWindowWidth * Math.max((resizeWindowWidth / targetWidth), 1)) / Math.min(initImageWidth, initImageHeight); zoomDelta = 0; imageWidth = initImageWidth * zoom; @@ -468,7 +458,7 @@ const setEnableZoomVariant = () => { for (let el of refactorContainers) { - let type = el.dataset.type + let type = el.dataset.type; document.querySelector(".refactor-container__body_type_" + type).style.display = "none"; document.querySelector(".zoom-variant-item_type_" + type).style.backgroundColor = "transparent"; } @@ -483,16 +473,16 @@ .addEventListener("click", () => { zoomVariant = type; setEnableZoomVariant(); - }, type); + }); } } setDifferentScaleTypesMethod(); const saveUpdatedImageEvent = () => { - const crop_button = document.querySelector(".refactor-container__button_type-confirm"); + const cropButton = document.querySelector(".refactor-container__button_type-confirm"); const canvas = document.querySelector('.canvas_crop'); - crop_button.addEventListener("click", () => { + cropButton.addEventListener("click", () => { if (zoomVariant === "area") { let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); let viewportImageAreaOffset = backImageTypeArea.getBoundingClientRect(); @@ -506,23 +496,23 @@ context.drawImage(img, areaLeft * dx, areaTop * dy, initImageWidth - areaLeft * dx - areaRight * dx, initImageHeight - areaTop * dy - areaBot * dy, 0, 0, canvas.width, canvas.height); } else { - const dx = Math.min(initImageWidth / targetWidth, initImageHeight / targetHeight); + const dx = Math.min(initImageWidth / resizeWindowWidth, initImageHeight / resizeWindowHeight); canvas.width = targetWidth * dx; canvas.height = targetHeight * dx; let context = canvas.getContext('2d'); - const sourceX = initImageWidth / 2 - imagePosX / zoom - (targetWidth / 2) / zoom; - const sourceY = initImageHeight / 2 - imagePosY / zoom - (targetHeight / 2) / zoom; + const sourceX = initImageWidth / 2 - imagePosX / zoom - (resizeWindowWidth / 2) / zoom; + const sourceY = initImageHeight / 2 - imagePosY / zoom - (resizeWindowHeight / 2) / zoom; - const sourceWidth = targetWidth / zoom; - const sourceHeight = targetHeight / zoom; + const sourceWidth = resizeWindowWidth / zoom; + const sourceHeight = resizeWindowHeight / zoom; context.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.width, canvas.height); } canvas.toBlob(function (blob) { - console.log(blob); dt.items.clear(); dt.items.add(new File([blob], 'ava.png', {type: "image/png"})); - form.requestSubmit(); + document.querySelector('input[name="avatar"]').files = dt.files; + imageRefactorPage.classList.add('resize-image-page_disabled') }); }); } @@ -531,7 +521,7 @@ window.removeEventListener("resize", updateImageAfterWindowResize); const removeUpdates = () => { - imageRefactorPage.classList.add("disable"); + imageRefactorPage.classList.add('resize-image-page_disabled') } document.querySelector(".refactor-container__button_type-deny").addEventListener("click", removeUpdates); @@ -577,18 +567,6 @@ frontImageTypeArea.style.bottom = areaBot + "px"; } - - form.addEventListener('submit', async (evt) => { - evt.preventDefault(); - const username = document.querySelector('section.auth').dataset.username; - form.querySelector('input[name="username"]').setAttribute('value', username); - const file_list = dt.files; - console.log('Коллекция файлов создана:'); - console.dir(file_list); - form.querySelector('input[name="avatar"]').files = file_list; - const response = await window.acomicsLegacyClient.sendFormAndParseHtml(evt.target); - console.log(response); - }); imageInputChangeMethod(); imageRefactorMethod(); })(); diff --git a/static/examples/resizeImage/styles.css b/static/examples/editAvatar/styles.css similarity index 85% rename from static/examples/resizeImage/styles.css rename to static/examples/editAvatar/styles.css index 8ae2053..d8efea7 100644 --- a/static/examples/resizeImage/styles.css +++ b/static/examples/editAvatar/styles.css @@ -16,74 +16,19 @@ padding: 0; } -body { - overflow: hidden; - font-family: Arial, sans-serif; -} -.upload-button { - position: relative; - width: 160px; - height: 240px; - display: flex; - flex-direction: column; - justify-content: space-between; - margin: 64px; -} - -.upload-input { - position: absolute; - opacity: 0; - width: 100%; - height: 100%; -} - -.upload-container { - position: relative; - display: flex; - align-items: flex-end; - width: calc(100% - 4px); - height: 200px; - border: 1px solid var(--color-text-main); - border-radius: 4px; - background: var(--color-text-second); -} - -.upload-container__hidden-icon { - position: absolute; - width: 100%; - height: 100%; - background: url("../images/upload_file_icon.webp") no-repeat center center / 60%; - opacity: 0; - transition: var(--hover-delay-midle); -} - -.upload-button:hover .upload-container__hidden-icon { - opacity: 0.5; -} - -.upload-container__text { - width: 100%; - text-align: center; - margin: 8px; - font-size: 18px; -} - -.page { +.resize-image-page { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; -} - -.fixed { position: fixed; top: 0; left: 0; } -.disable { +.resize-image-page_disabled { display: none; } @@ -106,6 +51,7 @@ body { border-radius: 8px; background-color: var(--color-resizeBox); } + .refactor-container__header { width: calc(100% - 36px); height: 90px; @@ -114,18 +60,22 @@ body { align-items: center; color: var(--color-text-main); } + .refactor-container__header-text { font-size: 20px; margin: 16px; } + .refactor-container__close-button { height: 30px; width: 30px; background: url("../images/cross_grey.png") no-repeat center center / 50%; } + .refactor-container__close-button:hover { background-size: 65%; } + .refactor-container__body { flex-direction: column; min-width: 760px; @@ -137,15 +87,19 @@ body { color: var(--color-text-main); overflow: scroll; } + .refactor-container__body_type_wheel { align-items: center; } + .refactor-container__body_type_arrows { align-items: center; } + .refactor-container__body_type_area { align-items: flex-start; } + .refactor-container__body-text { width: calc(100% - 24px); text-align: center; @@ -153,6 +107,7 @@ body { font-size: 16px; margin-top: 6px; } + .refactor-container__body-paragraph { width: calc(100% - 24px); text-align: center; @@ -166,15 +121,19 @@ body { justify-content: center; position: relative; } + .refactor-container__body-box_type_wheel { width: 500px; } + .refactor-container__body-box_type_arrows { width: 500px } + .refactor-container__body-box_type_area { padding: 0 24px 16px 24px; } + .refactor-container__background-box { position: absolute; left: 0; @@ -182,26 +141,32 @@ body { right: 0; bottom: 0; } + .refactor-container__background { position: absolute; background: rgba(211, 205, 197, 0.3); } + .refactor-container__background_pos_t { top: 0; left: 0; right: 0; } + .refactor-container__background_pos_b { bottom: 0; left: 0; right: 0; } + .refactor-container__background_pos_l { left: 0; } + .refactor-container__background_pos_r { right: 0; } + .refactor-container__body-file { position: absolute; width: 100%; @@ -215,6 +180,7 @@ body { margin: 12px; } + .refactor-container__body-image-area { position: absolute; left: 0; @@ -236,6 +202,7 @@ body { .scale-cube:hover { background: rgba(231, 225, 217, 0.2); } + .scale-cube:active { background: rgba(231, 225, 217, 0.2); } @@ -283,6 +250,7 @@ body { justify-content: center; align-items: center; } + .refactor-container__button { display: flex; justify-content: center; @@ -291,21 +259,25 @@ body { border-radius: 8px; transition: background var(--hover-delay-midle); } + .refactor-container__button_type-confirm { width: 220px; background: var(--color-active); color: white; margin: 8px; } + .refactor-container__button_type-confirm:hover { background: var(--color-active__hover); } + .refactor-container__button_type-deny { width: 180px; background: var(--color-text-second); color: var(--color-text-main); margin: 8px; } + .refactor-container__button_type-deny:hover { background: var(--color-text-second__hover); } @@ -317,6 +289,7 @@ body { height: 100%; pointer-events: none; } + .refactor-container__zoom-button { position: absolute; background: url("../images/double-arrow.png") no-repeat center center / cover; @@ -324,9 +297,11 @@ body { transition: background var(--hover-delay-midle); pointer-events: all; } + .refactor-container__zoom-arrows:hover > div { background: url("../images/double-arrow-active.png") no-repeat center center / cover; } + .refactor-container__zoom-arrows:active > div { background: url("../images/double-arrow-active.png") no-repeat center center / cover; } @@ -339,7 +314,8 @@ body { transform: rotate(225deg); margin: 8px; } -.refactor-container__zoom-button_place_top:hover + .refactor-container__zoom-button_place_bottom{ + +.refactor-container__zoom-button_place_top:hover + .refactor-container__zoom-button_place_bottom { background: url("../images/double-arrow-active.png") no-repeat center center / cover; } @@ -351,18 +327,19 @@ body { transform: rotate(45deg); margin: 8px; } -.refactor-container__zoom-button_place_bottom:hover + .refactor-container__zoom-button_place_top{ + +.refactor-container__zoom-button_place_bottom:hover + .refactor-container__zoom-button_place_top { background: url("../images/double-arrow-active.png") no-repeat center center / cover; } .zoom-variant-container { position: absolute; - top: 120px; - left: -52px; - width: 36px; - height: 112px; + top: 72px; + left: 16px; + width: 112px; + height: 36px; display: flex; - flex-direction: column; + flex-direction: row; justify-content: space-around; align-items: center; border: 2px solid black; @@ -370,6 +347,7 @@ body { background: var(--color-resizeBox); z-index: 5 } + .zoom-variant-item { width: 26px; height: 26px; @@ -396,45 +374,46 @@ body { .canvas_crop { display: none; } -@media (max-width: 1048px){ - .zoom-variant-container { - height: 36px; - width: 112px; - flex-direction: row; - top: 72px; - left: 16px; - } -} -@media (max-width: 720px){ + + +@media (max-width: 720px) { .zoom-variant-container { display: none; } + .refactor-container { width: 100%; height: 100%; border-radius: 0; } + .refactor-container__header { width: 100%; } + .refactor-container__header-text { font-size: 18px; } + .refactor-container__close-button { height: 60px; width: 60px; background: url("../images/cross_grey.png") no-repeat center center / 50%; } + .refactor-container__body { min-width: 0; } + .refactor-container__body-box { margin-top: 6px; } + .refactor-container__footer { flex-direction: column; width: calc(100% - 12px); } + .refactor-container__button { font-size: 18px; width: 100%; diff --git a/static/examples/resizeImage/resizeImage.html b/static/examples/resizeImage/resizeImage.html deleted file mode 100644 index 96a3019..0000000 --- a/static/examples/resizeImage/resizeImage.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - Шаблон компонента - - - - - - - - - - - - - -
    - - - - - -
    - - - - diff --git a/static/index.html b/static/index.html index ab37a8c..527cddb 100644 --- a/static/index.html +++ b/static/index.html @@ -19,7 +19,6 @@

    Примеры:

  • Изменение категорий комикса
  • Добавление страницы комикса
  • Изменение аватарки
    • -
  • Ресайз изображений
    • From 2a90be9f80deb671a547877d40e644c72b1db745 Mon Sep 17 00:00:00 2001 From: xrander24 Date: Thu, 2 May 2024 22:05:32 +0300 Subject: [PATCH 3/3] merge 2 branches + fix area bug --- static/examples/editAvatar/resizeImage.js | 475 ++++++++++++---------- static/examples/editAvatar/styles.css | 188 ++++----- 2 files changed, 331 insertions(+), 332 deletions(-) diff --git a/static/examples/editAvatar/resizeImage.js b/static/examples/editAvatar/resizeImage.js index 46bfa78..7769f3e 100644 --- a/static/examples/editAvatar/resizeImage.js +++ b/static/examples/editAvatar/resizeImage.js @@ -2,55 +2,55 @@ const imageRefactorPage = document.createElement('div'); const initHTML = () => { - imageRefactorPage.className = 'resize-image-page resize-image-page_disabled'; + imageRefactorPage.className = 'resize-module resize-module_disable'; const htmlString = - '
    \n' + - '
    \n' + - '
    \n' + - '
    Ваша фотография
    \n' + - '
    \n' + + '
    \n' + + '
    \n' + + '
    \n' + + '
    Ваша фотография
    \n' + + '
    \n' + '
    \n' + '
    \n' + '
    \n' + '
    \n' + '
    \n' + '
    \n' + - '
    \n' + - '

    Выбранная область будет показываться на вашей странице

    \n' + - '

    Вы можете изменять размер изображения при помощи колёсика мыши

    \n' + - '
    \n' + - '
    \n' + - '
    \n' + - '
    \n' + + '
    \n' + + '

    Выбранная область будет показываться на вашей странице

    \n' + + '

    Вы можете изменять размер изображения при помощи колёсика мыши

    \n' + + '
    \n' + + '
    \n' + + '
    \n' + + '
    \n' + '
    \n' + '
    \n' + '
    \n' + - '
    \n' + - '

    Выбранная область будет показываться на вашей странице

    \n' + - '

    Вы можете изменять размер изображения при помощи стягивания углов

    \n' + - '
    \n' + - '
    \n' + - '
    \n' + - '
    \n' + + '
    \n' + + '

    Выбранная область будет показываться на вашей странице

    \n' + + '

    Вы можете изменять размер изображения при помощи стягивания углов

    \n' + + '
    \n' + + '
    \n' + + '
    \n' + + '
    \n' + '
    \n' + - '
    \n' + - '
    \n' + - '
    \n' + + '
    \n' + + '
    \n' + + '
    \n' + '
    \n' + '
    \n' + '
    \n' + - '
    \n' + - '

    Выбранная область будет показываться на вашей странице

    \n' + - '

    Вы можете выбрать необходимый участок изображения

    \n' + - '
    \n' + - '
    \n' + - '
    \n' + - '
    \n' + - '
    \n' + - '
    \n' + - '
    \n' + + '
    \n' + + '

    Выбранная область будет показываться на вашей странице

    \n' + + '

    Вы можете выбрать необходимый участок изображения

    \n' + + '
    \n' + + '
    \n' + + '
    \n' + + '
    \n' + + '
    \n' + + '
    \n' + + '
    \n' + '
    \n' + - '
    \n' + + '
    \n' + '
    \n' + '
    \n' + '
    \n' + @@ -59,11 +59,11 @@ '
    \n' + '
    \n' + '
    \n' + - '
    \n' + - '
    \n' + + '
    \n' + + '
    \n' + ' Сохранить изменения\n' + '
    \n' + - '
    \n' + + '
    \n' + ' Вернуться назад\n' + '
    \n' + '
    \n' + @@ -74,6 +74,9 @@ } initHTML(); + const fileInput = document.querySelector('input[name="avatar"]'); + const targetWidth = Number(fileInput.getAttribute('data-target-width')); + const targetHeight = Number(fileInput.getAttribute('data-target-height')); const dt = new DataTransfer(); const resizeWindowWidth = 500; const resizeWindowHeight = 500; @@ -83,51 +86,66 @@ let initImageHeight; let imageWidth; let imageHeight; - let targetWidth; - let targetHeight; let zoom = 1; let zoomDelta = 0; let zoomVariant = "area"; let imagePosX = 0, imagePosY = 0; - const backImageTypeWheel = document.querySelector(".refactor-container__file_place-back_t_w"); - const frontImageTypeWheel = document.querySelector(".refactor-container__file_place-front_t_w"); + const backImageTypeWheel = document.querySelector(".resize-module-container__file_place-back_t_w"); + const frontImageTypeWheel = document.querySelector(".resize-module-container__file_place-front_t_w"); - const backImageTypeArrows = document.querySelector(".refactor-container__file_place-back_t_a"); - const frontImageTypeArrows = document.querySelector(".refactor-container__file_place-front_t_a"); + const backImageTypeArrows = document.querySelector(".resize-module-container__file_place-back_t_a"); + const frontImageTypeArrows = document.querySelector(".resize-module-container__file_place-front_t_a"); - const backImageTypeArea = document.querySelector(".refactor-container__file_place-back_t_area"); - const frontImageTypeArea = document.querySelector(".refactor-container__file_place-front_t_area"); + const backImageTypeArea = document.querySelector(".resize-module-container__file_place-back_t_area"); + const frontImageTypeArea = document.querySelector(".resize-module-container__file_place-front_t_area"); let areaTop = 0; let areaLeft = 0; let areaBot = 0; let areaRight = 0; - const refactorBody = document.querySelector(".refactor-container__body_type_area"); + + imageRefactorPage.addEventListener("selectstart", (evt) => evt.preventDefault()); + const resizeModuleBody = document.querySelector(".resize-module-container__body_type_area"); const fileReader = new FileReader(); - const refactorContainers = document.querySelectorAll("[data-type]"); - let scrollInterval; + const resizeModuleContainers = document.querySelectorAll("[data-type]"); + + const compressImage = async (file, {quality = 1, type = file.type}) => { + // Get as image data + const imageBitmap = await createImageBitmap(file); + + // Draw to canvas + const canvas = document.createElement('canvas'); + canvas.width = imageBitmap.width; + canvas.height = imageBitmap.height; + const ctx = canvas.getContext('2d'); + ctx.drawImage(imageBitmap, 0, 0); + + // Turn into Blob + return await new Promise((resolve) => + canvas.toBlob(resolve, type, quality) + ); + }; const imageRefactorMethod = () => { - //let imageBox = document.querySelector(".image_refactor_box"); let mousePosX, mousePosY; let scrollDirection = 0; const arrowsEvents = () => { - const imageScrollWithArrows = (event) => { + const imageScrollWithArrows = (evt) => { { - zoom = 1 + zoomDelta + ((event.clientX - mousePosX) + (event.clientY - mousePosY)) - / (100 + Math.sqrt((event.clientX - mousePosX) * (event.clientX - mousePosX) + - (event.clientY - mousePosY) * (event.clientY - mousePosY))); + zoom = 1 + zoomDelta + ((evt.clientX - mousePosX) + (evt.clientY - mousePosY)) + / (100 + Math.sqrt((evt.clientX - mousePosX) * (evt.clientX - mousePosX) + + (evt.clientY - mousePosY) * (evt.clientY - mousePosY))); } if (scrollDirection === 4) { - zoom = 1 + zoomDelta - ((event.clientX - mousePosX) + (event.clientY - mousePosY)) - / (100 + Math.sqrt((event.clientX - mousePosX) * (event.clientX - mousePosX) + - (event.clientY - mousePosY) * (event.clientY - mousePosY))); + zoom = 1 + zoomDelta - ((evt.clientX - mousePosX) + (evt.clientY - mousePosY)) + / (100 + Math.sqrt((evt.clientX - mousePosX) * (evt.clientX - mousePosX) + + (evt.clientY - mousePosY) * (evt.clientY - mousePosY))); } if (initImageWidth * zoom < resizeWindowWidth || initImageHeight * zoom < resizeWindowHeight) { @@ -138,25 +156,25 @@ imageWidth = initImageWidth * zoom; imageHeight = initImageHeight * zoom; - document.querySelector(".refactor-container__zoom-button_place_top").style.margin = (32 * zoom + 4) / (zoom + 4) + "px"; - document.querySelector(".refactor-container__zoom-button_place_bottom").style.margin = (32 * zoom + 4) / (zoom + 4) + "px"; + document.querySelector(".resize-module-container__zoom-button_place_top").style.margin = (32 * zoom + 4) / (zoom + 4) + "px"; + document.querySelector(".resize-module-container__zoom-button_place_bottom").style.margin = (32 * zoom + 4) / (zoom + 4) + "px"; makePositionValid(); setImagesWidth(imageWidth); } - const arrowClickDown = (event) => { - mousePosX = event.clientX; - mousePosY = event.clientY; + const arrowClickDown = (evt) => { + mousePosX = evt.clientX; + mousePosY = evt.clientY; document.addEventListener("mousemove", imageScrollWithArrows); } - document.querySelector(".refactor-container__zoom-button_place_top") + document.querySelector(".resize-module-container__zoom-button_place_top") .addEventListener("mousedown", (event) => { scrollDirection = 2; arrowClickDown(event); }); - document.querySelector(".refactor-container__zoom-button_place_bottom") + document.querySelector(".resize-module-container__zoom-button_place_bottom") .addEventListener("mousedown", (event) => { scrollDirection = 4; arrowClickDown(event); @@ -173,13 +191,13 @@ arrowsEvents(); const wheelEvents = () => { - const imageScrollWithWheel = (event) => { - zoom -= event.deltaY / 2400; + const imageScrollWithWheel = (evt) => { + zoom -= evt.deltaY / 2400; if (initImageWidth * zoom >= resizeWindowWidth && initImageHeight * zoom >= resizeWindowHeight) { imageWidth = initImageWidth * zoom; imageHeight = initImageHeight * zoom; } else { - zoom += event.deltaY / 2400; + zoom += evt.deltaY / 2400; } makePositionValid(); setImagesWidth(imageWidth); @@ -196,59 +214,101 @@ wheelEvents(); const areaEvents = () => { - const imageScrollWithArea = (event) => { - let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); - let viewportImageAreaOffset = backImageTypeArea.getBoundingClientRect(); - let refactorBodyOffset = refactorBody.getBoundingClientRect(); - - let clX, clY; - if (event.touches != null) { - clX = event.touches[0].clientX; - clY = event.touches[0].clientY; + let clX, clY; + let prevX, prevY; + const getTouchCoords = (evt) => { + prevX = clX; + prevY = clY; + if (evt.touches != null) { + clX = evt.touches[0].clientX; + clY = evt.touches[0].clientY; } else { - clX = event.clientX; - clY = event.clientY; + clX = evt.clientX; + clY = evt.clientY; + } + } + const checkBorders = () => { + if (areaTop < 0) { + areaBot += areaTop; + areaTop = 0; + } + if (areaLeft < 0) { + areaRight += areaLeft; + areaLeft = 0; } + if (areaBot < 0) { + areaTop += areaBot; + areaBot = 0; + } + if (areaRight < 0) { + areaLeft += areaRight; + areaRight = 0; + } + } + const imageSelectViewArea = (evt) => { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + getTouchCoords(evt); - let scrollX = 0, scrollY = 0; - if (clY - refactorBodyOffset.top <= 100) { - scrollY = -((100 - clY + refactorBodyOffset.top) / 5); + areaTop = clY - viewportImageOffset.top - 125; + areaBot = viewportImageOffset.height - areaTop - 250; + areaLeft = clX - viewportImageOffset.left - 125; + areaRight = viewportImageOffset.width - areaLeft - 250; + + checkBorders(); + + setImagesWidth(imageWidth); + setImagesPosition(imagePosX, imagePosY); + } + resizeModuleBody.addEventListener("dblclick", imageSelectViewArea); + const imageSetAreaPos = (evt) => { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + getTouchCoords(evt); + + let tx = 0; + let ty = 0; + const viewportHeight_pt = (viewportImageOffset.height - areaTop - areaBot) / 5; + const viewportWidth_pt = (viewportImageOffset.width - areaLeft - areaRight) / 5; + if (areaTop >= clY - viewportImageOffset.top - viewportHeight_pt) { + ty = -1; } - if (refactorBodyOffset.height + refactorBodyOffset.top - clY <= 100) { - scrollY = ((100 - refactorBodyOffset.height - refactorBodyOffset.top + clY) / 5); + if (areaBot > viewportImageOffset.top + viewportImageOffset.height - clY - viewportHeight_pt) { + ty = 1; } - if (clX - refactorBodyOffset.left <= 100) { - scrollX = -((100 - clX + refactorBodyOffset.left) / 5); + if (areaLeft >= clX - viewportImageOffset.left - viewportWidth_pt) { + tx = -1; } - if (refactorBodyOffset.width + refactorBodyOffset.left - clX <= 100) { - scrollX = ((100 - refactorBodyOffset.width - refactorBodyOffset.left + clX) / 5); + if (areaRight > viewportImageOffset.left + viewportImageOffset.width - clX - viewportWidth_pt) { + tx = 1; } - if (scrollY !== 0 || scrollX !== 0) { - if (scrollY < 0) { - refactorBody.scrollTop = Math.max(refactorBody.scrollTop + scrollY, 0); - } - if (scrollY > 0) { - refactorBody.scrollTop = Math.min(refactorBody.scrollTop + scrollY, initImageHeight - refactorBodyOffset.top); - } - if (scrollX < 0) { - refactorBody.scrollLeft = Math.max(refactorBody.scrollLeft + scrollX, 0); - } - if (scrollX > 0) { - refactorBody.scrollLeft = Math.min(refactorBody.scrollLeft + scrollX, initImageWidth - refactorBodyOffset.left); - } - clearInterval(scrollInterval); - scrollInterval = setInterval(imageMoveEvent, 50, refactorBodyOffset, scrollX, scrollY); + if (tx === 1 && ty === -1) { + scrollDirection = 1; + } else if (tx === -1 && ty === -1) { + scrollDirection = 2; + } else if (tx === -1 && ty === 1) { + scrollDirection = 3; + } else if (tx === 1 && ty === 1) { + scrollDirection = 4; + } else if (tx === 0 && ty === 0) { + scrollDirection = 0; } else { - clearInterval(scrollInterval); + scrollDirection = -1; } + document.addEventListener("touchmove", imageScrollWithArea); + document.addEventListener("mousemove", imageScrollWithArea); + } + backImageTypeArea.addEventListener("mousedown", imageSetAreaPos); + const imageScrollWithArea = (evt) => { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + getTouchCoords(evt); + if (scrollDirection === 1 || scrollDirection === 2) { areaTop = clY - viewportImageOffset.top; if (areaTop < 0) { areaTop = 0; - } else if (areaTop + 50 > viewportImageAreaOffset.height - areaBot) { - areaTop = viewportImageAreaOffset.height - areaBot - 50; + } else if (areaTop + 50 > viewportImageOffset.height - areaBot) { + areaTop = viewportImageOffset.height - areaBot - 50; } } @@ -256,8 +316,8 @@ areaBot = viewportImageOffset.top + viewportImageOffset.height - clY; if (areaBot < 0) { areaBot = 0; - } else if (areaBot + 50 > viewportImageAreaOffset.height - areaTop) { - areaBot = viewportImageAreaOffset.height - areaTop - 50; + } else if (areaBot + 50 > viewportImageOffset.height - areaTop) { + areaBot = viewportImageOffset.height - areaTop - 50; } } @@ -265,76 +325,64 @@ areaLeft = clX - viewportImageOffset.left; if (areaLeft < 0) { areaLeft = 0; - } else if (areaLeft + 50 > viewportImageAreaOffset.width - areaRight) { - areaLeft = viewportImageAreaOffset.width - areaRight - 50; + } else if (areaLeft + 50 > viewportImageOffset.width - areaRight) { + areaLeft = viewportImageOffset.width - areaRight - 50; } } if (scrollDirection === 4 || scrollDirection === 1) { areaRight = viewportImageOffset.left + viewportImageOffset.width - clX; if (areaRight < 0) { areaRight = 0; - } else if (areaRight + 50 > viewportImageAreaOffset.width - areaLeft) { - areaRight = viewportImageAreaOffset.width - areaLeft - 50; + } else if (areaRight + 50 > viewportImageOffset.width - areaLeft) { + areaRight = viewportImageOffset.width - areaLeft - 50; } } - setImagesWidth(imageWidth); - setImagesPosition(imagePosX, imagePosY); - } + const dw = viewportImageOffset.width - areaLeft - areaRight; + const dh = viewportImageOffset.height - areaTop - areaBot; - document.querySelector(".scale-cube_pos_tr").addEventListener("touchstart", () => { - scrollDirection = 1; - document.addEventListener("touchmove", imageScrollWithArea); - }) - document.querySelector(".scale-cube_pos_tl").addEventListener("touchstart", () => { - scrollDirection = 2; - document.addEventListener("touchmove", imageScrollWithArea); - }) - document.querySelector(".scale-cube_pos_bl").addEventListener("touchstart", () => { - scrollDirection = 3; - document.addEventListener("touchmove", imageScrollWithArea); - }) - document.querySelector(".scale-cube_pos_br").addEventListener("touchstart", () => { - scrollDirection = 4; - document.addEventListener("touchmove", imageScrollWithArea); - }) + if (scrollDirection === 1) { + if (dw <= dh) { + areaTop += dh - dw; + } else { + areaRight += dw - dh; + } + } else if (scrollDirection === 2) { + if (dw <= dh) { + areaTop += dh - dw; + } else { + areaLeft += dw - dh; + } + } else if (scrollDirection === 3) { + if (dw <= dh) { + areaBot += dh - dw; + } else { + areaLeft += dw - dh; + } + } else if (scrollDirection === 4) { + if (dw <= dh) { + areaBot += dh - dw; + } else { + areaRight += dw - dh; + } + } else if (scrollDirection === 0) { + areaLeft += clX - prevX; + areaRight -= clX - prevX; + areaTop += clY - prevY; + areaBot -= clY - prevY; + + prevX = clX; + prevY = clY; + } - document.querySelector(".scale-cube_pos_tr").addEventListener("mousedown", () => { - scrollDirection = 1; - document.addEventListener("mousemove", imageScrollWithArea); - }) - document.querySelector(".scale-cube_pos_tl").addEventListener("mousedown", () => { - scrollDirection = 2; - document.addEventListener("mousemove", imageScrollWithArea); - }) - document.querySelector(".scale-cube_pos_bl").addEventListener("mousedown", () => { - scrollDirection = 3; - document.addEventListener("mousemove", imageScrollWithArea); - }) - document.querySelector(".scale-cube_pos_br").addEventListener("mousedown", () => { - scrollDirection = 4; - document.addEventListener("mousemove", imageScrollWithArea); - }) + checkBorders(); + setImagesWidth(imageWidth); + setImagesPosition(imagePosX, imagePosY); + } const imageClickUp = () => { - clearInterval(scrollInterval); document.removeEventListener("mousemove", imageScrollWithArea); } - - const imageMoveEvent = (refactorBodyOffset, deltaX, deltaY) => { - if (deltaY < 0) { - refactorBody.scrollTop = Math.max(refactorBody.scrollTop + deltaY, 0); - } - if (deltaY > 0) { - refactorBody.scrollTop = Math.min(refactorBody.scrollTop + deltaY, initImageHeight - refactorBodyOffset.top); - } - if (scrollX < 0) { - refactorBody.scrollLeft = Math.max(refactorBody.scrollLeft + scrollX, 0); - } - if (scrollX > 0) { - refactorBody.scrollLeft = Math.min(refactorBody.scrollLeft + scrollX, initImageWidth - refactorBodyOffset.left); - } - } document.addEventListener("mouseup", imageClickUp); } areaEvents(); @@ -358,18 +406,18 @@ } const imageMoveEvents = () => { - const imageMove = (event) => { - const deltaX = event.clientX; - const deltaY = event.clientY; + const imageMove = (evt) => { + const deltaX = evt.clientX; + const deltaY = evt.clientY; imagePosX = (deltaX - mousePosX); imagePosY = (deltaY - mousePosY); makePositionValid(); } - const imageClickDown = (event) => { - mousePosX = event.clientX - imagePosX; - mousePosY = event.clientY - imagePosY; + const imageClickDown = (evt) => { + mousePosX = evt.clientX - imagePosX; + mousePosY = evt.clientY - imagePosY; document.addEventListener("mousemove", imageMove); } @@ -387,34 +435,33 @@ imageMoveEvents(); } const imageInputChangeMethod = () => { - const fileInput = document.querySelector('input[name="avatar"]'); - targetWidth = Number(fileInput.getAttribute('data-target-width')); - targetHeight = Number(fileInput.getAttribute('data-target-height')); - const fileChange = function () { - imageRefactorPage.classList.remove('resize-image-page_disabled'); - fileReader.readAsDataURL(fileInput.files[0]); + const fileChange = async function () { + imageRefactorPage.classList.remove("resize-module_disable"); + + let file = fileInput.files[0]; + + let compressedFile = await compressImage(file, { + quality: Math.min(1, (2097152 / file.size)), + type: 'image/jpeg', + }); + + fileReader.readAsDataURL(compressedFile); fileReader.addEventListener("load", () => { img = new Image(); img.src = fileReader.result; - getImageData(); + img.addEventListener("load", getImageData); window.addEventListener("resize", updateImageAfterWindowResize); - }) + }); setEnableZoomVariant("area"); }; fileInput.addEventListener("change", fileChange); - const getImageData = async () => { + const getImageData = () => { initImageWidth = img.naturalWidth; initImageHeight = img.naturalHeight; - while (initImageWidth * initImageHeight === 0) { - initImageWidth = img.naturalWidth; - initImageHeight = img.naturalHeight; - await new Promise(r => setTimeout(r, 300)); - } - backImageTypeWheel.style.backgroundImage = "url('" + fileReader.result + "')"; frontImageTypeWheel.style.backgroundImage = "url('" + fileReader.result + "')"; @@ -431,10 +478,11 @@ backImageTypeArea.style.backgroundSize = (initImageWidth / dRes - 88) + "px " + (initImageHeight / dRes - 88) + "px"; backImageTypeArea.style.backgroundImage = "url('" + fileReader.result + "')"; - areaLeft = 0; - areaTop = 0; - areaRight = 0; - areaBot = 0; + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + areaLeft = 50; + areaTop = 50; + areaRight = viewportImageOffset.width - 300; + areaBot = viewportImageOffset.height - 300; imagePosY = 0; imagePosX = 0; @@ -457,18 +505,20 @@ window.removeEventListener("resize", updateImageAfterWindowResize); const setEnableZoomVariant = () => { - for (let el of refactorContainers) { - let type = el.dataset.type; - document.querySelector(".refactor-container__body_type_" + type).style.display = "none"; - document.querySelector(".zoom-variant-item_type_" + type).style.backgroundColor = "transparent"; + for (let el of resizeModuleContainers) { + const type = el.dataset.type; + if (type === zoomVariant) { + document.querySelector(".resize-module-container__body_type_" + zoomVariant).style.display = "flex"; + document.querySelector(".zoom-variant-item_type_" + zoomVariant).style.backgroundColor = "var(--color-active)"; + } else { + document.querySelector(".resize-module-container__body_type_" + type).style.display = "none"; + document.querySelector(".zoom-variant-item_type_" + type).style.backgroundColor = "transparent"; + } } - document.querySelector(".refactor-container__body_type_" + zoomVariant) - .style.display = "flex"; - document.querySelector(".zoom-variant-item_type_" + zoomVariant).style.backgroundColor = "var(--color-active)"; } const setDifferentScaleTypesMethod = () => { - for (let el of refactorContainers) { - let type = el.dataset.type + for (let el of resizeModuleContainers) { + const type = el.dataset.type document.querySelector(".zoom-variant-item_type_" + type) .addEventListener("click", () => { zoomVariant = type; @@ -479,19 +529,18 @@ setDifferentScaleTypesMethod(); const saveUpdatedImageEvent = () => { - const cropButton = document.querySelector(".refactor-container__button_type-confirm"); + const cropButton = document.querySelector(".resize-module-container__button_type-confirm"); const canvas = document.querySelector('.canvas_crop'); cropButton.addEventListener("click", () => { if (zoomVariant === "area") { let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); - let viewportImageAreaOffset = backImageTypeArea.getBoundingClientRect(); const dx = initImageWidth / viewportImageOffset.width; const dy = initImageHeight / viewportImageOffset.height; - canvas.width = (viewportImageOffset.width - areaLeft - areaRight) * dx; - canvas.height = (viewportImageOffset.height - areaTop - areaBot) * dy; + canvas.width = targetWidth * dx; + canvas.height = targetHeight * dy; let context = canvas.getContext('2d'); context.drawImage(img, areaLeft * dx, areaTop * dy, initImageWidth - areaLeft * dx - areaRight * dx, initImageHeight - areaTop * dy - areaBot * dy, 0, 0, canvas.width, canvas.height); @@ -511,8 +560,9 @@ canvas.toBlob(function (blob) { dt.items.clear(); dt.items.add(new File([blob], 'ava.png', {type: "image/png"})); - document.querySelector('input[name="avatar"]').files = dt.files; - imageRefactorPage.classList.add('resize-image-page_disabled') + console.log(dt); + fileInput.files = dt.files; + imageRefactorPage.classList.add('resize-module_disable') }); }); } @@ -521,17 +571,16 @@ window.removeEventListener("resize", updateImageAfterWindowResize); const removeUpdates = () => { - imageRefactorPage.classList.add('resize-image-page_disabled') + imageRefactorPage.classList.add('resize-module_disable') } - document.querySelector(".refactor-container__button_type-deny").addEventListener("click", removeUpdates); - document.querySelector(".refactor-container__close-button").addEventListener("click", removeUpdates); + document.querySelector(".resize-module-container__button_type-deny").addEventListener("click", removeUpdates); + document.querySelector(".resize-module-container__close-button").addEventListener("click", removeUpdates); } denyUpdatedImageEvent(); } const setImagesWidth = (width) => { let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); - let viewportImageAreaOffset = backImageTypeArea.getBoundingClientRect(); backImageTypeWheel.style.backgroundSize = width + "px"; frontImageTypeWheel.style.backgroundSize = width + "px"; @@ -542,16 +591,16 @@ frontImageTypeArea.style.height = (viewportImageOffset.height - areaTop - areaBot) + "px"; frontImageTypeArea.style.width = (viewportImageOffset.width - areaLeft - areaRight) + "px"; - document.querySelector(".refactor-container__background_pos_t").style.height = areaTop + "px"; - document.querySelector(".refactor-container__background_pos_b").style.height = areaBot + "px"; + document.querySelector(".resize-module-container__background_pos_t").style.height = areaTop + "px"; + document.querySelector(".resize-module-container__background_pos_b").style.height = areaBot + "px"; - document.querySelector(".refactor-container__background_pos_l").style.top = areaTop + "px"; - document.querySelector(".refactor-container__background_pos_l").style.bottom = areaBot + "px"; - document.querySelector(".refactor-container__background_pos_l").style.width = areaLeft + "px"; + document.querySelector(".resize-module-container__background_pos_l").style.top = areaTop + "px"; + document.querySelector(".resize-module-container__background_pos_l").style.bottom = areaBot + "px"; + document.querySelector(".resize-module-container__background_pos_l").style.width = areaLeft + "px"; - document.querySelector(".refactor-container__background_pos_r").style.top = areaTop + "px"; - document.querySelector(".refactor-container__background_pos_r").style.bottom = areaBot + "px"; - document.querySelector(".refactor-container__background_pos_r").style.width = areaRight + "px"; + document.querySelector(".resize-module-container__background_pos_r").style.top = areaTop + "px"; + document.querySelector(".resize-module-container__background_pos_r").style.bottom = areaBot + "px"; + document.querySelector(".resize-module-container__background_pos_r").style.width = areaRight + "px"; } const setImagesPosition = (posX, posY) => { backImageTypeWheel.style.backgroundPosition = posX + " " + posY; diff --git a/static/examples/editAvatar/styles.css b/static/examples/editAvatar/styles.css index d8efea7..46cdc6a 100644 --- a/static/examples/editAvatar/styles.css +++ b/static/examples/editAvatar/styles.css @@ -16,7 +16,7 @@ padding: 0; } -.resize-image-page { +.resize-module { width: 100%; height: 100%; display: flex; @@ -28,11 +28,11 @@ left: 0; } -.resize-image-page_disabled { +.resize-module_disable { display: none; } -.refactor-background { +.resize-module-background { position: absolute; width: 100%; height: 100%; @@ -40,19 +40,18 @@ background-color: var(--color-text-main); } -.refactor-container { +.resize-module-container { position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-items: center; - max-width: 100vw; - max-height: 100%; + max-width: min(calc(100vw - 20px), 900px); + max-height: calc(100vh - 20px); border-radius: 8px; background-color: var(--color-resizeBox); } - -.refactor-container__header { +.resize-module-container__header { width: calc(100% - 36px); height: 90px; display: flex; @@ -60,128 +59,101 @@ align-items: center; color: var(--color-text-main); } - -.refactor-container__header-text { +.resize-module-container__header-text { font-size: 20px; margin: 16px; } - -.refactor-container__close-button { - height: 30px; - width: 30px; +.resize-module-container__close-button { + height: 60px; + width: 60px; background: url("../images/cross_grey.png") no-repeat center center / 50%; } - -.refactor-container__close-button:hover { +.resize-module-container__close-button:hover { background-size: 65%; } - -.refactor-container__body { +.resize-module-container__body { flex-direction: column; - min-width: 760px; - width: 100%; + min-width: 720px; + max-width: 100%; + max-height: calc(100vh - 258px); height: 100%; padding: 16px 0 0 0; border-top: 2px solid var(--color-text-second__hover); border-bottom: 2px solid var(--color-text-second__hover); color: var(--color-text-main); - overflow: scroll; } - -.refactor-container__body_type_wheel { +.resize-module-container__body_type_wheel { align-items: center; } - -.refactor-container__body_type_arrows { +.resize-module-container__body_type_arrows { align-items: center; } - -.refactor-container__body_type_area { +.resize-module-container__body_type_area { align-items: flex-start; } - -.refactor-container__body-text { - width: calc(100% - 24px); - text-align: center; +.resize-module-container__body-text { color: var(--color-text-main__hover); font-size: 16px; margin-top: 6px; + align-self: center; } - -.refactor-container__body-paragraph { - width: calc(100% - 24px); +.resize-module-container__body-paragraph { text-align: center; color: var(--color-text-main__hover); font-size: 14px; margin-top: 6px; + align-self: center; } -.refactor-container__body-box { - margin-top: 16px; - justify-content: center; +.resize-module-container__body-box { position: relative; } - -.refactor-container__body-box_type_wheel { - width: 500px; -} - -.refactor-container__body-box_type_arrows { - width: 500px -} - -.refactor-container__body-box_type_area { - padding: 0 24px 16px 24px; +.resize-module-container__body-box_type_area { + width: 100%; + height: calc(100vh - 240px); + overflow: scroll; } - -.refactor-container__background-box { +.resize-module-container__background-box { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } - -.refactor-container__background { +.resize-module-container__background { position: absolute; background: rgba(211, 205, 197, 0.3); } - -.refactor-container__background_pos_t { +.resize-module-container__background_pos_t { top: 0; left: 0; right: 0; } - -.refactor-container__background_pos_b { +.resize-module-container__background_pos_b { bottom: 0; left: 0; right: 0; } - -.refactor-container__background_pos_l { +.resize-module-container__background_pos_l { left: 0; } - -.refactor-container__background_pos_r { +.resize-module-container__background_pos_r { right: 0; } - -.refactor-container__body-file { +.resize-module-container__body-file { position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; } -.refactor-container__body-image { +.resize-module-container__body-image { position: relative; background-position: center; - margin: 12px; + margin: 14px; } - -.refactor-container__body-image-area { +.resize-module-container__body-image-area { position: absolute; left: 0; right: 0; @@ -202,7 +174,6 @@ .scale-cube:hover { background: rgba(231, 225, 217, 0.2); } - .scale-cube:active { background: rgba(231, 225, 217, 0.2); } @@ -227,12 +198,12 @@ bottom: -12px; } -.refactor-container__file_place-back { +.resize-module-container__file_place-back { position: absolute; opacity: 0.2; } -.refactor-container__circle-box { +.resize-module-container__circle-box { position: relative; width: 500px; height: 500px; @@ -241,17 +212,16 @@ pointer-events: none; } -.refactor-container__file_place-front { +.resize-module-container__file_place-front { position: absolute; } -.refactor-container__footer { +.resize-module-container__footer { display: flex; justify-content: center; align-items: center; } - -.refactor-container__button { +.resize-module-container__button { display: flex; justify-content: center; align-items: center; @@ -259,54 +229,47 @@ border-radius: 8px; transition: background var(--hover-delay-midle); } - -.refactor-container__button_type-confirm { +.resize-module-container__button_type-confirm { width: 220px; background: var(--color-active); color: white; margin: 8px; } - -.refactor-container__button_type-confirm:hover { +.resize-module-container__button_type-confirm:hover { background: var(--color-active__hover); } - -.refactor-container__button_type-deny { +.resize-module-container__button_type-deny { width: 180px; background: var(--color-text-second); color: var(--color-text-main); margin: 8px; } - -.refactor-container__button_type-deny:hover { +.resize-module-container__button_type-deny:hover { background: var(--color-text-second__hover); } -.refactor-container__zoom-arrows { +.resize-module-container__zoom-arrows { position: absolute; top: 0; width: 100%; height: 100%; pointer-events: none; } - -.refactor-container__zoom-button { +.resize-module-container__zoom-button { position: absolute; background: url("../images/double-arrow.png") no-repeat center center / cover; cursor: nwse-resize; transition: background var(--hover-delay-midle); pointer-events: all; } - -.refactor-container__zoom-arrows:hover > div { +.resize-module-container__zoom-arrows:hover > div { background: url("../images/double-arrow-active.png") no-repeat center center / cover; } - -.refactor-container__zoom-arrows:active > div { +.resize-module-container__zoom-arrows:active > div { background: url("../images/double-arrow-active.png") no-repeat center center / cover; } -.refactor-container__zoom-button_place_top { +.resize-module-container__zoom-button_place_top { left: 16px; top: 16px; width: 32px; @@ -314,12 +277,11 @@ transform: rotate(225deg); margin: 8px; } - -.refactor-container__zoom-button_place_top:hover + .refactor-container__zoom-button_place_bottom { +.resize-module-container__zoom-button_place_top:hover + .resize-module-container__zoom-button_place_bottom{ background: url("../images/double-arrow-active.png") no-repeat center center / cover; } -.refactor-container__zoom-button_place_bottom { +.resize-module-container__zoom-button_place_bottom { right: 16px; bottom: 36px; width: 32px; @@ -327,27 +289,25 @@ transform: rotate(45deg); margin: 8px; } - -.refactor-container__zoom-button_place_bottom:hover + .refactor-container__zoom-button_place_top { +.resize-module-container__zoom-button_place_bottom:hover + .resize-module-container__zoom-button_place_top{ background: url("../images/double-arrow-active.png") no-repeat center center / cover; } .zoom-variant-container { position: absolute; + height: 36px; + width: 112px; top: 72px; left: 16px; - width: 112px; - height: 36px; display: flex; flex-direction: row; justify-content: space-around; align-items: center; - border: 2px solid black; + border: 2px solid var(--color-text-second__hover); border-radius: 4px; background: var(--color-resizeBox); z-index: 5 } - .zoom-variant-item { width: 26px; height: 26px; @@ -374,47 +334,37 @@ .canvas_crop { display: none; } - - -@media (max-width: 720px) { +@media (max-width: 720px){ .zoom-variant-container { display: none; } - - .refactor-container { + .resize-module-container { width: 100%; height: 100%; + max-width: 100vw; + max-height: 100vh; border-radius: 0; } - - .refactor-container__header { + .resize-module-container__header { width: 100%; } - - .refactor-container__header-text { + .resize-module-container__header-text { font-size: 18px; } - - .refactor-container__close-button { + .resize-module-container__close-button { height: 60px; width: 60px; background: url("../images/cross_grey.png") no-repeat center center / 50%; } - - .refactor-container__body { + .resize-module-container__body { min-width: 0; + max-height: calc(100vh - 240px); } - - .refactor-container__body-box { - margin-top: 6px; - } - - .refactor-container__footer { + .resize-module-container__footer { flex-direction: column; width: calc(100% - 12px); } - - .refactor-container__button { + .resize-module-container__button { font-size: 18px; width: 100%; height: 64px;