Merge pull request #1401 from ultimatemember/fix/modal_resize_cropper

Debounce for window resize
This commit is contained in:
Mykyta Synelnikov
2024-01-03 15:40:49 +02:00
committed by GitHub
5 changed files with 11 additions and 8 deletions
+1 -1
View File
@@ -91,7 +91,7 @@ UM.frontend = {
}
},
destroy: function() {
if ( jQuery('.cropper-container').length > 0 ) {
if ( jQuery('.cropper-container').length > 0 && UM.frontend.cropper.obj ) {
UM.frontend.cropper.obj.destroy(); // destroy Cropper.JS method
UM.frontend.cropper.obj = null; // flush our own object
}
+1 -1
View File
@@ -1 +1 @@
"object"!=typeof window.UM&&(window.UM={}),"object"!=typeof UM.frontend&&(UM.frontend={}),UM.frontend={cropper:{obj:null,init:function(){var o=jQuery(".um-modal .um-single-image-preview img").first();if(o.length&&""!==o.attr("src")){UM.frontend.cropper.obj&&UM.frontend.cropper.destroy();var t=jQuery(".um-modal .um-single-image-preview"),r=o.parent().data("crop"),n=o.parent().data("min_width"),i=o.parent().data("min_height"),a=o.parent().data("ratio"),d=jQuery(".um-modal").find("#um_upload_single").data("ratio"),d=(d&&(a=d.split(":")[0]),jQuery(window).height()-(jQuery(".um-modal-footer a").height()+20)-50-jQuery(".um-modal-header:visible").height());o.css({height:"auto"}),t.css({height:"auto"}),jQuery(window).height()<=400?(t.css({height:d+"px","max-height":d+"px"}),o.css({height:"auto"})):(o.css({height:"auto","max-height":d+"px"}),t.css({height:o.height(),"max-height":d+"px"}));let e;"square"===r?e={minWidth:n,minHeight:i,dragCrop:!1,aspectRatio:1,zoomable:!1,rotatable:!1,dashed:!1}:"cover"===r?(0<Math.round(n/a)&&(i=Math.round(n/a)),e={minWidth:n,minHeight:i,dragCrop:!1,aspectRatio:a,zoomable:!1,rotatable:!1,dashed:!1}):"user"===r&&(e={minWidth:n,minHeight:i,dragCrop:!0,aspectRatio:"auto",zoomable:!1,rotatable:!1,dashed:!1}),e&&(UM.frontend.cropper.obj=new Cropper(o[0],e))}},destroy:function(){0<jQuery(".cropper-container").length&&(UM.frontend.cropper.obj.destroy(),UM.frontend.cropper.obj=null)}}},wp.hooks.addAction("um_remove_modal","um_common_frontend",function(){UM.frontend.cropper.destroy()}),wp.hooks.addAction("um_after_removing_preview","um_common_frontend",function(){UM.frontend.cropper.destroy()}),wp.hooks.addAction("um_window_resize","um_common_frontend",function(){UM.frontend.cropper.destroy()});
"object"!=typeof window.UM&&(window.UM={}),"object"!=typeof UM.frontend&&(UM.frontend={}),UM.frontend={cropper:{obj:null,init:function(){var o=jQuery(".um-modal .um-single-image-preview img").first();if(o.length&&""!==o.attr("src")){UM.frontend.cropper.obj&&UM.frontend.cropper.destroy();var t=jQuery(".um-modal .um-single-image-preview"),r=o.parent().data("crop"),n=o.parent().data("min_width"),i=o.parent().data("min_height"),a=o.parent().data("ratio"),d=jQuery(".um-modal").find("#um_upload_single").data("ratio"),d=(d&&(a=d.split(":")[0]),jQuery(window).height()-(jQuery(".um-modal-footer a").height()+20)-50-jQuery(".um-modal-header:visible").height());o.css({height:"auto"}),t.css({height:"auto"}),jQuery(window).height()<=400?(t.css({height:d+"px","max-height":d+"px"}),o.css({height:"auto"})):(o.css({height:"auto","max-height":d+"px"}),t.css({height:o.height(),"max-height":d+"px"}));let e;"square"===r?e={minWidth:n,minHeight:i,dragCrop:!1,aspectRatio:1,zoomable:!1,rotatable:!1,dashed:!1}:"cover"===r?(0<Math.round(n/a)&&(i=Math.round(n/a)),e={minWidth:n,minHeight:i,dragCrop:!1,aspectRatio:a,zoomable:!1,rotatable:!1,dashed:!1}):"user"===r&&(e={minWidth:n,minHeight:i,dragCrop:!0,aspectRatio:"auto",zoomable:!1,rotatable:!1,dashed:!1}),e&&(UM.frontend.cropper.obj=new Cropper(o[0],e))}},destroy:function(){0<jQuery(".cropper-container").length&&UM.frontend.cropper.obj&&(UM.frontend.cropper.obj.destroy(),UM.frontend.cropper.obj=null)}}},wp.hooks.addAction("um_remove_modal","um_common_frontend",function(){UM.frontend.cropper.destroy()}),wp.hooks.addAction("um_after_removing_preview","um_common_frontend",function(){UM.frontend.cropper.destroy()}),wp.hooks.addAction("um_window_resize","um_common_frontend",function(){UM.frontend.cropper.destroy()});
+5 -2
View File
@@ -3,14 +3,17 @@ jQuery( window ).on( 'load',function() {
um_modal_responsive();
});
jQuery(window).on( 'resize', function() {
// Resize using debounce.
// * https://medium.com/geekculture/debounce-handle-browser-resize-like-a-pro-994cd522e14b
// * https://davidwalsh.name/javascript-debounce-function
jQuery(window).on( 'resize', _.debounce( function() {
responsive_Modal();
wp.hooks.doAction( 'um_window_resize' );
um_responsive();
um_modal_responsive();
});
}, 300 ) );
wp.hooks.addAction( 'um_admin_modal_success_result', 'um_frontend_responsive', function( $adminModal ) {
// Make responsive script only when live preview,
+1 -1
View File
@@ -1 +1 @@
jQuery(window).on("load",function(){um_responsive(),um_modal_responsive()}),jQuery(window).on("resize",function(){responsive_Modal(),wp.hooks.doAction("um_window_resize"),um_responsive(),um_modal_responsive()}),wp.hooks.addAction("um_admin_modal_success_result","um_frontend_responsive",function(o){o.find(".um-admin-modal-body").find(".um").length&&um_responsive()});
jQuery(window).on("load",function(){um_responsive(),um_modal_responsive()}),jQuery(window).on("resize",_.debounce(function(){responsive_Modal(),wp.hooks.doAction("um_window_resize"),um_responsive(),um_modal_responsive()},300)),wp.hooks.addAction("um_admin_modal_success_result","um_frontend_responsive",function(o){o.find(".um-admin-modal-body").find(".um").length&&um_responsive()});
+3 -3
View File
@@ -2963,7 +2963,7 @@ if ( ! class_exists( 'um\core\Fields' ) ) {
} else {
$img_value = UM()->files()->get_download_link( $this->set_id, $key, um_user( 'ID' ) );
}
$img = '<img src="' . esc_attr( $img_value ) . '" alt="" />';
$img = '<img class="fusion-lazyload-ignore" src="' . esc_attr( $img_value ) . '" alt="" />';
} else {
$img = '';
}
@@ -2981,7 +2981,7 @@ if ( ! class_exists( 'um\core\Fields' ) ) {
if ( empty( $disabled ) ) {
$output .= '<a href="javascript:void(0);" class="cancel"><i class="um-icon-close"></i></a>';
}
$output .= '<img src="" alt="" /><div class="um-clear"></div></div>';
$output .= '<img class="fusion-lazyload-ignore" src="" alt="" /><div class="um-clear"></div></div>';
if ( empty( $disabled ) ) {
$output .= '<a href="javascript:void(0);" data-modal="um_upload_single" data-modal-size="' . esc_attr( $data['modal_size'] ) . '" data-modal-copy="1" class="um-button um-btn-auto-width">' . esc_html( $data['button_text'] ) . '</a>';
}
@@ -3014,7 +3014,7 @@ if ( ! class_exists( 'um\core\Fields' ) ) {
}
$nonce = wp_create_nonce( 'um_upload_nonce-' . $this->timestamp );
$output .= '<div class="um-single-image-preview ' . esc_attr( $data['crop_class'] ) . '" data-crop="' . esc_attr( $data['crop_data'] ) . '" data-ratio="' . esc_attr( $data['ratio'] ) . '" data-min_width="' . esc_attr( $data['min_width'] ) . '" data-min_height="' . esc_attr( $data['min_height'] ) . '" data-coord=""><a href="javascript:void(0);" class="cancel"><i class="um-icon-close"></i></a><img src="" alt="" /><div class="um-clear"></div></div><div class="um-clear"></div>';
$output .= '<div class="um-single-image-preview ' . esc_attr( $data['crop_class'] ) . '" data-crop="' . esc_attr( $data['crop_data'] ) . '" data-ratio="' . esc_attr( $data['ratio'] ) . '" data-min_width="' . esc_attr( $data['min_width'] ) . '" data-min_height="' . esc_attr( $data['min_height'] ) . '" data-coord=""><a href="javascript:void(0);" class="cancel"><i class="um-icon-close"></i></a><img class="fusion-lazyload-ignore" src="" alt="" /><div class="um-clear"></div></div><div class="um-clear"></div>';
$output .= '<div class="um-single-image-upload" data-user_id="' . esc_attr( $_um_profile_id ) . '" data-nonce="' . esc_attr( $nonce ) . '" data-timestamp="' . esc_attr( $this->timestamp ) . '" ' . $data_icon . ' data-set_id="' . esc_attr( $set_id ) . '" data-set_mode="' . esc_attr( $set_mode ) . '" data-type="' . esc_attr( $type ) . '" data-key="' . esc_attr( $key ) . '" data-max_size="' . esc_attr( $data['max_size'] ) . '" data-max_size_error="' . esc_attr( $data['max_size_error'] ) . '" data-min_size_error="' . esc_attr( $data['min_size_error'] ) . '" data-extension_error="' . esc_attr( $data['extension_error'] ) . '" data-allowed_types="' . esc_attr( $allowed_types ) . '" data-upload_text="' . esc_attr( $data['upload_text'] ) . '" data-max_files_error="' . esc_attr( $data['max_files_error'] ) . '" data-upload_help_text="' . esc_attr( $data['upload_help_text'] ) . '">' . esc_html( $data['button_text'] ) . '</div>';
$output .= '<div class="um-modal-footer">
<div class="um-modal-right">