From 079cad98196152d7cbbdedb7276057b0a4c8746d Mon Sep 17 00:00:00 2001 From: ashubawork Date: Fri, 13 Oct 2023 11:31:14 +0300 Subject: [PATCH] - fix cropper CSS --- assets/css/um-crop.css | 367 ++++++++++++++++++++------------------ assets/js/um-functions.js | 7 +- assets/js/um-modal.js | 11 +- 3 files changed, 201 insertions(+), 184 deletions(-) diff --git a/assets/css/um-crop.css b/assets/css/um-crop.css index 0440afcf..d3f5e186 100644 --- a/assets/css/um-crop.css +++ b/assets/css/um-crop.css @@ -1,271 +1,294 @@ .cropper-container { - position: relative; - overflow: hidden; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - -webkit-tap-highlight-color: transparent; - -webkit-touch-callout: none; + direction: ltr; + font-size: 0; + line-height: 0; + position: relative; + -ms-touch-action: none; + touch-action: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .cropper-container img { - width: 100%; - height: 100%; - min-width: 0 !important; - min-height: 0 !important; - max-width: none !important; - max-height: none !important; + display: block; + height: 100%; + image-orientation: 0deg; + max-height: none !important; + max-width: none !important; + min-height: 0 !important; + min-width: 0 !important; + width: 100%; } -.cropper-modal, -.cropper-canvas { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; +.cropper-wrap-box, +.cropper-canvas, +.cropper-drag-box, +.cropper-crop-box, +.cropper-modal { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; } +.cropper-wrap-box, .cropper-canvas { - background-color: #fff; - opacity: 0; - filter: alpha(opacity=0); + overflow: hidden; +} + +.cropper-drag-box { + background-color: #fff; + opacity: 0; } .cropper-modal { - background-color: #000; - opacity: .5; - filter: alpha(opacity=50); + background-color: #000; + opacity: 0.5; } -.cropper-dragger { - position: absolute; - top: 10%; - left: 10%; - width: 80%; - height: 80%; -} - -.cropper-viewer { - display: block; - width: 100%; - height: 100%; - overflow: hidden; - outline-width: 1px; - outline-style: solid; - outline-color: #69f; - outline-color: rgba(51, 102, 255, .75); +.cropper-view-box { + display: block; + height: 100%; + outline: 1px solid #39f; + outline-color: rgba(51, 153, 255, 0.75); + overflow: hidden; + width: 100%; } .cropper-dashed { - position: absolute; - display: block; - border: 0 dashed #fff; - opacity: .5; - filter: alpha(opacity=50); + border: 0 dashed #eee; + display: block; + opacity: 0.5; + position: absolute; } .cropper-dashed.dashed-h { - top: 33.3%; - left: 0; - width: 100%; - height: 33.3%; - border-top-width: 1px; - border-bottom-width: 1px; + border-bottom-width: 1px; + border-top-width: 1px; + height: calc(100% / 3); + left: 0; + top: calc(100% / 3); + width: 100%; } .cropper-dashed.dashed-v { - top: 0; - left: 33.3%; - width: 33.3%; - height: 100%; - border-right-width: 1px; - border-left-width: 1px; + border-left-width: 1px; + border-right-width: 1px; + height: 100%; + left: calc(100% / 3); + top: 0; + width: calc(100% / 3); +} + +.cropper-center { + display: block; + height: 0; + left: 50%; + opacity: 0.75; + position: absolute; + top: 50%; + width: 0; +} + +.cropper-center::before, +.cropper-center::after { + background-color: #eee; + content: ' '; + display: block; + position: absolute; +} + +.cropper-center::before { + height: 1px; + left: -3px; + top: 0; + width: 7px; +} + +.cropper-center::after { + height: 7px; + left: 0; + top: -3px; + width: 1px; } .cropper-face, .cropper-line, .cropper-point { - position: absolute; - display: block; - width: 100%; - height: 100%; - opacity: .1; - filter: alpha(opacity=10); + display: block; + height: 100%; + opacity: 0.1; + position: absolute; + width: 100%; } .cropper-face { - top: 0; - left: 0; - cursor: move; - background-color: #fff; + background-color: #fff; + left: 0; + top: 0; } .cropper-line { - background-color: #69f; + background-color: #39f; } .cropper-line.line-e { - top: 0; - right: -3px; - width: 5px; - cursor: e-resize; + cursor: ew-resize; + right: -3px; + top: 0; + width: 5px; } .cropper-line.line-n { - top: -3px; - left: 0; - height: 5px; - cursor: n-resize; + cursor: ns-resize; + height: 5px; + left: 0; + top: -3px; } .cropper-line.line-w { - top: 0; - left: -3px; - width: 5px; - cursor: w-resize; + cursor: ew-resize; + left: -3px; + top: 0; + width: 5px; } .cropper-line.line-s { - bottom: -3px; - left: 0; - height: 5px; - cursor: s-resize; + bottom: -3px; + cursor: ns-resize; + height: 5px; + left: 0; } .cropper-point { - width: 5px; - height: 5px; - background-color: #69f; - opacity: .75; - filter: alpha(opacity=75); + background-color: #39f; + height: 5px; + opacity: 0.75; + width: 5px; } .cropper-point.point-e { - top: 50%; - right: -3px; - margin-top: -3px; - cursor: e-resize; + cursor: ew-resize; + margin-top: -3px; + right: -3px; + top: 50%; } .cropper-point.point-n { - top: -3px; - left: 50%; - margin-left: -3px; - cursor: n-resize; + cursor: ns-resize; + left: 50%; + margin-left: -3px; + top: -3px; } .cropper-point.point-w { - top: 50%; - left: -3px; - margin-top: -3px; - cursor: w-resize; + cursor: ew-resize; + left: -3px; + margin-top: -3px; + top: 50%; } .cropper-point.point-s { - bottom: -3px; - left: 50%; - margin-left: -3px; - cursor: s-resize; + bottom: -3px; + cursor: s-resize; + left: 50%; + margin-left: -3px; } .cropper-point.point-ne { - top: -3px; - right: -3px; - cursor: ne-resize; + cursor: nesw-resize; + right: -3px; + top: -3px; } .cropper-point.point-nw { - top: -3px; - left: -3px; - cursor: nw-resize; + cursor: nwse-resize; + left: -3px; + top: -3px; } .cropper-point.point-sw { - bottom: -3px; - left: -3px; - cursor: sw-resize; + bottom: -3px; + cursor: nesw-resize; + left: -3px; } .cropper-point.point-se { - right: -3px; - bottom: -3px; - width: 20px; - height: 20px; - cursor: se-resize; - opacity: 1; - filter: alpha(opacity=100); -} - -.cropper-point.point-se:before { - position: absolute; - right: -50%; - bottom: -50%; - display: block; - width: 200%; - height: 200%; - content: " "; - background-color: #69f; - opacity: 0; - filter: alpha(opacity=0); + bottom: -3px; + cursor: nwse-resize; + height: 20px; + opacity: 1; + right: -3px; + width: 20px; } @media (min-width: 768px) { - .cropper-point.point-se { - width: 15px; - height: 15px; - } + .cropper-point.point-se { + height: 15px; + width: 15px; + } } @media (min-width: 992px) { - .cropper-point.point-se { - width: 10px; - height: 10px; - } + .cropper-point.point-se { + height: 10px; + width: 10px; + } } @media (min-width: 1200px) { - .cropper-point.point-se { - width: 5px; - height: 5px; - opacity: .75; - filter: alpha(opacity=75); - } + .cropper-point.point-se { + height: 5px; + opacity: 0.75; + width: 5px; + } } -/* Helper classes for JavaScript */ - -.cropper-hidden { - display: none !important; +.cropper-point.point-se::before { + background-color: #39f; + bottom: -50%; + content: ' '; + display: block; + height: 200%; + opacity: 0; + position: absolute; + right: -50%; + width: 200%; } .cropper-invisible { - position: fixed; - top: 0; - left: 0; - z-index: -1; - width: auto !important; - max-width: none !important; - height: auto !important; - max-height: none !important; - opacity: 0; - filter: alpha(opacity=0); + opacity: 0; +} + +.cropper-bg { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); +} + +.cropper-hide { + display: block; + height: 0; + position: absolute; + width: 0; +} + +.cropper-hidden { + display: none !important; } .cropper-move { - cursor: move; + cursor: move; } .cropper-crop { - cursor: crosshair; + cursor: crosshair; } -.cropper-disabled .cropper-canvas, +.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point { - cursor: not-allowed; + cursor: not-allowed; } diff --git a/assets/js/um-functions.js b/assets/js/um-functions.js index 04f9d9c4..d1ca4002 100644 --- a/assets/js/um-functions.js +++ b/assets/js/um-functions.js @@ -570,13 +570,8 @@ function initCrop_UM() { } if ( crop_data != 0 ) { - // console.log( opts ); cropper = new Cropper(target_img[0], opts); - console.log(cropper.getCropBoxData()) - // target_img.cropper( opts ); - // cropper.destroy(); - // jQuery('.um-single-image-preview img.cropper-hidden').cropper('destroy'); - // jQuery('.um-single-image-preview img.cropper-hidden').cropper.destroy(); + jQuery('.um-single-image-preview img.lazyloaded').addClass('cropper-hidden'); jQuery('.um-single-image-preview img.lazyloaded').removeClass('lazyloaded'); jQuery('.um-single-image-preview .cropper-container').append('
'); diff --git a/assets/js/um-modal.js b/assets/js/um-modal.js index b67039c3..0b478545 100644 --- a/assets/js/um-modal.js +++ b/assets/js/um-modal.js @@ -95,7 +95,7 @@ jQuery(document).ready(function() { var key = jQuery(this).attr('data-key'); var img_c = jQuery(this).parents('.um-modal-body').find('.um-single-image-preview'); var src = img_c.find('img').attr('src'); - // var coord = img_c.attr('data-coord'); + var file = img_c.find('img').data('file'); var user_id = 0; if ( jQuery(this).parents('#um_upload_single').data('user_id') ) { @@ -111,10 +111,9 @@ jQuery(document).ready(function() { mode = $formWrapper.attr('data-mode'); } - var data = cropper.getCropBoxData(); - var coord = Math.round(data.left) + ',' + Math.round(data.top) + ',' + Math.round(data.width) + ',' + Math.round(data.height); - // target_img.parent().attr('data-coord', Math.round(data.x) + ',' + Math.round(data.y) + ',' + Math.round(data.width) + ',' + Math.round(data.height) ); - console.log(coord); + var data = cropper.getData(); + var coord = Math.round(data.x) + ',' + Math.round(data.y) + ',' + Math.round(data.width) + ',' + Math.round(data.height); + if ( coord ) { jQuery(this).html( jQuery(this).attr('data-processing') ).addClass('disabled'); @@ -134,7 +133,7 @@ jQuery(document).ready(function() { nonce: um_scripts.nonce }, success: function( response ) { -console.log(response); + if ( response.success ) { d = new Date();