mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-18 20:41:16 +02:00
Code Issues Releases Wiki Activity

Fix issue and PR #54 with similar solution though also remove predefined min/max image settings from ProcessPageEditImageSelect because they seem to be causing various issues, and the predefined settings are more about uploaded files.

Browse Source
This commit is contained in:
Ryan Cramer
2018-01-05 10:56:05 -05:00
parent fb39ded94d
commit de5c241b6a
3 changed files with 70 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
wire/modules/Process/ProcessPageEditImageSelect/ProcessPageEditImageSelect.js
View File

@@ -83,19 +83,20 @@ function setupExecuteVariations() {
function setupSelectedImage() { function setupSelectedImage() {
var croppingActive = false; var croppingActive = false;
var inputPixelsActive = false;
var $form = $("#selected_image_settings"); var $form = $("#selected_image_settings");
var $container = $("#selected_image_container"); var $container = $("#selected_image_container");
var $img = $("#selected_image"); var $img = $("#selected_image");
var $hidpi = $("#selected_image_hidpi"); var $hidpi = $("#selected_image_hidpi");
var fullWidth; // full/original width when not resized var fullWidth; // full/original width when not resized
var minWidth = parseInt($("#input_width").attr('min')); var minWidth = 0; //parseInt($("#input_width").data('min'));
var minHeight = parseInt($("#input_height").attr('min')); var minHeight = 0; // parseInt($("#input_height").data('min'));
function setupImage($img) { function setupImage($img) {
var originalWidth = $img.width(); var originalWidth = $img.width();
var maxWidth = $("#input_width").attr('max'); var maxWidth = 9999; // $("#input_width").data('max');
var maxHeight = $("#input_height").attr('max'); var maxHeight = 9999; // $("#input_height").data('max');
function updateHidpiCheckbox(w) { function updateHidpiCheckbox(w) {
@@ -158,8 +159,8 @@ function setupSelectedImage() {
alsoResize: "#selected_image_container", alsoResize: "#selected_image_container",
maxWidth: maxWidth, maxWidth: maxWidth,
maxHeight: maxHeight, maxHeight: maxHeight,
minWidth: minWidth < 10 ? 10 : minWidth, minWidth: 10, //minWidth < 10 ? 10 : minWidth,
minHeight: minHeight < 10 ? 10 : minHeight, minHeight: 10, //minHeight < 10 ? 10 : minHeight,
start: function() { start: function() {
$form.addClass('resizing_active'); $form.addClass('resizing_active');
}, },
@@ -299,35 +300,65 @@ function setupSelectedImage() {
} }
function inputPixelsChange() { function inputPixelsChange(event) {
if(inputPixelsActive) return;
if($(this).parents("#crop_coordinates").length) return; if($(this).parents("#crop_coordinates").length) return;
inputPixelsActive = true;
var w, h; var w, h,
abort = false,
noChange = false,
oldWidth = $img.attr('width'),
oldHeight = $img.attr('height'),
origWidth = parseInt($img.attr('data-origwidth')),
origHeight = parseInt($img.attr('data-origheight'));
oldWidth = typeof oldWidth == "undefined" ? $img.width() : parseInt(oldWidth);
oldHeight = typeof oldHeight == "undefined" ? $img.height() : parseInt(oldHeight);
if($(this).attr('id') == 'input_width') { if($(this).attr('id') == 'input_width') {
w = parseInt($(this).val()); w = parseInt($(this).val());
h = (w / $img.attr('width')) * $img.attr('height'); h = (origHeight / (origWidth / w));
if(w == oldWidth) noChange = true;
} else { } else {
h = parseInt($(this).val()); h = parseInt($(this).val());
w = (h / $img.attr('height')) * $img.attr('width'); w = Math.round((h / oldHeight) * oldWidth);
w = (origWidth / (origHeight / h));
if(h == oldHeight) noChange = true;
} }
w = Math.floor(w); if(w < 1 || h < 1 || noChange) {
h = Math.floor(h); // requested dimension too small, or image already at requested dimension
abort = 1;
if(w < 1 || h < 1 || w == $img.attr('width') || h == $img.attr('height') || w > maxWidth || (minWidth > 1 && w < minWidth) || (minHeight > 1 && h < minHeight)) { } else if(maxWidth > 0 && w > maxWidth) {
$("#input_width").val($img.attr('width')); // requested dimension exceeds maximum
$("#input_height").val($img.attr('height')); abort = 2;
} else if((minWidth > 1 && w < minWidth) || (minHeight > 1 && h < minHeight)) {
// requested dimension smaller than minimum allowed
abort = 3;
}
if(abort) {
$("#input_width").val(oldWidth);
$("#input_height").val(oldHeight);
inputPixelsActive = false;
return false; return false;
} }
var wRounded = Math.round(w);
var hRounded = Math.round(h);
setupImageResizable(); setupImageResizable();
$("#input_height").val(h); $("#input_height").val(hRounded);
$container.width(w).height(h); $container.width(w).height(h);
$img.parent('.ui-wrapper').width(w).height(h); $img.parent('.ui-wrapper').width(w).height(h);
$img.width(w).height(h).attr('width', w).attr('height', h); $img.width(w).height(h)
$img.addClass('resized'); .attr('width', wRounded).attr('height', hRounded)
.addClass('resized');
populateResizeDimensions(); populateResizeDimensions();
inputPixelsActive = false;
} }
function alignClassChange() { function alignClassChange() {
@@ -354,6 +385,10 @@ function setupSelectedImage() {
var origWidth = parseInt($img.attr('data-origwidth')); var origWidth = parseInt($img.attr('data-origwidth'));
if(origWidth > maxWidth) origWidth = maxWidth; if(origWidth > maxWidth) origWidth = maxWidth;
//console.log('origWidth=' + origWidth); //console.log('origWidth=' + origWidth);
if(origWidth > $(window).width()) {
// new width exceeds window size
$('#content').css('overflow-x', 'auto');
}
$("#input_width").val(origWidth).change(); $("#input_width").val(origWidth).change();
}); });
@@ -361,7 +396,7 @@ function setupSelectedImage() {
var imgWidth = $img.width(); var imgWidth = $img.width();
var imgHeight = $img.height(); var imgHeight = $img.height();
var windowWidth = $(window).width() - 30; var windowWidth = $(window).width() - 30;
var windowHeight = $(window).height() - $("#wrap_info").height() - 20; var windowHeight = $(window).height() - $("#wrap_info").height() - 60;
var updated = false; var updated = false;
if(imgHeight > windowHeight) { if(imgHeight > windowHeight) {
@@ -431,7 +466,7 @@ function setupSelectedImage() {
$("#wrap_description").slideDown('fast'); $("#wrap_description").slideDown('fast');
} }
}); });
/* /*
$("#rotate_right_action, #rotate_left_action").click(function() { $("#rotate_right_action, #rotate_left_action").click(function() {
$img.resizable('destroy'); $img.resizable('destroy');
@@ -495,15 +530,19 @@ function setupSelectedImage() {
} }
function fitImageToWindow() { function fitImageToWindow() {
var winwidth = $(window).width() - 30; var winwidth = $(window).width() - 30;
var winheight = $(window).height() - ($("#wrap_info").height() + 80); var winheight = $(window).height() - ($("#wrap_info").height() + 60);
if($img.width() > winwidth) { if($img.width() > winwidth) {
$img.width(winwidth).css('height', 'auto').removeAttr('height'); $img.width(winwidth).css('height', 'auto').removeAttr('height');
$img.removeAttr('height'); $img.removeAttr('height');
} }
if($img.height() > winheight) { if($img.height() > winheight) {
$img.removeAttr('width').css('width', 'auto').height(winheight); $img.removeAttr('width').css('width', 'auto').height(winheight);
} }
$container.width($img.width()).height($img.height()); $container.width($img.width()).height($img.height());
} }
@@ -555,8 +594,7 @@ function setupSelectedImage() {
} // setupSelectedImage() } // setupSelectedImage()
$(document).ready(function() { $(document).ready(function() {
var $page_id = $("#page_id");
var $page_id = $("#page_id");
if($page_id.length > 0) { if($page_id.length > 0) {
var page_id = $page_id.val(); var page_id = $page_id.val();
$page_id.bind("pageSelected", function (event, data) { $page_id.bind("pageSelected", function (event, data) {
@@ -566,11 +604,13 @@ $(document).ready(function() {
} }
if($("#selected_image").length > 0) { if($("#selected_image").length > 0) {
setupSelectedImage(); setTimeout(function() {
setupSelectedImage();
}, 250);
} else if($("#ImageVariations").length > 0) { } else if($("#ImageVariations").length > 0) {
setupExecuteVariations(); setupExecuteVariations();
} }
enablePWImageDialogButtons(); enablePWImageDialogButtons();
// prevent enter from submitting any of our forms // prevent enter from submitting any of our forms
@@ -581,5 +621,4 @@ $(document).ready(function() {
} }
}); });
}); });

2
wire/modules/Process/ProcessPageEditImageSelect/ProcessPageEditImageSelect.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
wire/modules/Process/ProcessPageEditImageSelect/ProcessPageEditImageSelect.module
View File

@@ -837,10 +837,10 @@ class ProcessPageEditImageSelect extends Process implements ConfigurableModule {
"</span>" . "</span>" .
"<span id='selected_image_pixels' class='hide_when_crop'>" . "<span id='selected_image_pixels' class='hide_when_crop'>" .
"<label><input title='$labels[width]' name='width' id='input_width' class='input_pixels' " . "<label><input title='$labels[width]' name='width' id='input_width' class='input_pixels' " .
"type='number' size='6' step='1' min='$minWidth' max='$originalWidth' value='$width' /></label>" . "type='number' size='6' step='1' data-min='$minWidth' data-max='$originalWidth' value='$width' /></label>" .
"&nbsp;<i class='fa fa-times'></i>&nbsp;" . "&nbsp;<i class='fa fa-times'></i>&nbsp;" .
"<label><input title='$labels[height]' name='height' id='input_height' class='input_pixels' " . "<label><input title='$labels[height]' name='height' id='input_height' class='input_pixels' " .
"type='number' size='6' step='1' min='$minHeight' max='$originalHeight' value='$height' /></label>" . "type='number' size='6' step='1' data-min='$minHeight' data-max='$originalHeight' value='$height' /></label>" .
"</span> " . "</span> " .
"<span id='selected_image_checkboxes' class='hide_when_crop'>" . "<span id='selected_image_checkboxes' class='hide_when_crop'>" .
"<span id='wrap_link_original' class='show_when_rte'>" . "<span id='wrap_link_original' class='show_when_rte'>" .