diff --git a/wire/core/Pageimage.php b/wire/core/Pageimage.php
index adef3009..056cbf6f 100644
--- a/wire/core/Pageimage.php
+++ b/wire/core/Pageimage.php
@@ -579,6 +579,7 @@ class Pageimage extends Pagefile {
'nameWidth' => null, // override width to use for filename, int when populated
'nameHeight' => null, // override height to use for filename, int when populated
'focus' => true, // allow single dimension resizes to use focus area?
+ 'zoom' => null, // zoom override, used only if focus is applicable, int when populated
);
$this->error = '';
@@ -593,7 +594,8 @@ class Pageimage extends Pagefile {
if($options['cropping'] === true && empty($options['cropExtra']) && $options['focus'] && $this->hasFocus && $width && $height) {
// crop to focus area
- $focus = $this->focus();
+ $focus = $this->focus();
+ if(is_int($options['zoom'])) $focus['zoom'] = $options['zoom']; // override
$options['cropping'] = array("$focus[left]%", "$focus[top]%", "$focus[zoom]");
$crop = ''; // do not add suffix
diff --git a/wire/core/ProcessWire.php b/wire/core/ProcessWire.php
index 7be5de8b..ac2eedc4 100644
--- a/wire/core/ProcessWire.php
+++ b/wire/core/ProcessWire.php
@@ -45,7 +45,7 @@ class ProcessWire extends Wire {
* Reversion revision number
*
*/
- const versionRevision = 91;
+ const versionRevision = 92;
/**
* Version suffix string (when applicable)
diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js
index 01bd0eb2..97bec46a 100755
--- a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js
+++ b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js
@@ -30,9 +30,6 @@ function InputfieldImage($) {
// grid items to retry for sizing by setGridSize() methods
var retryGridItems = [];
- // whether or not zoom-focus feature is available
- var useZoomFocus = false;
-
/**
* Whether or not AJAX drag/drop upload is allowed?
*
@@ -370,14 +367,15 @@ function InputfieldImage($) {
function startFocus($edit) {
var $img, $el, $thumb, $input, $focusArea, $focusCircle, $inputfield,
- focusData = null, gridSize, mode,
- $zoomSlider, $zoomBox, lastZoomPercent = 0,
- lastZoomVisual = 0, startZoomVisual = -1;
+ focusData = null, gridSize, mode, $zoomSlider, $zoomBox, lastZoomPercent = 0,
+ useZoomFocus = false;
$inputfield = $edit.closest('.Inputfield');
gridSize = getCookieData($inputfield, 'size');
mode = getCookieData($inputfield, 'mode');
+ if($inputfield.hasClass('InputfieldImageFocusZoom')) useZoomFocus = true;
+
if($edit.hasClass('gridImage')) {
// list mode
$el = $edit;
@@ -443,8 +441,8 @@ function InputfieldImage($) {
var $overlay = $focusCircle.parent();
var w = $overlay.width();
var h = $overlay.height();
- var x = Math.round(((focus.left / 100) * w) - ($focusCircle.width() / 1.7));
- var y = Math.round(((focus.top / 100) * h) - ($focusCircle.height() / 2.3));
+ var x = Math.round(((focus.left / 100) * w) - ($focusCircle.width() / 2)); // 1.7
+ var y = Math.round(((focus.top / 100) * h) - ($focusCircle.height() / 2)); // 2.3
if(x < 0) x = 0;
if(y < 0) y = 0;
$focusCircle.css({
@@ -477,63 +475,52 @@ function InputfieldImage($) {
// set the initial position for the focus circle
setFocusDragPosition();
- // function called whenever the slider is moved
+ // function called whenever the slider is moved or circle is dragged with zoom active
var zoomSlide = function(zoomPercent) {
+
+ var zoomBoxSize, focusCircleSize, focus, top, left, scale, faWidth, faHeight;
+
+ // if no zoomPercent argument provided, use the last one
if(typeof zoomPercent == "undefined") zoomPercent = lastZoomPercent;
lastZoomPercent = zoomPercent;
- var w = (100 - zoomPercent) + '%';
- $zoomBox.width(w);
- var zoomBoxSize = $zoomBox.width();
- var focusCircleSize = $focusCircle.height();
- $zoomBox.height(zoomBoxSize)
+ faWidth = $focusArea.width();
+ faHeight = $focusArea.height();
+
+ if(faWidth > faHeight) {
+ $zoomBox.height((100 - zoomPercent) + '%'); // set width in percent
+ zoomBoxSize = $zoomBox.height(); // get width in pixels
+ $zoomBox.width(zoomBoxSize); // match width to ensure square zoom box
+ } else {
+ $zoomBox.width((100 - zoomPercent) + '%'); // set width in percent
+ zoomBoxSize = $zoomBox.width(); // get width in pixels
+ $zoomBox.height(zoomBoxSize); // match width to ensure square zoom box
+ }
- var zoom = zoomPercent;
- var top = parseInt($focusCircle.css('top')); // top of drag item
- top += Math.floor(focusCircleSize / 2); // plus half the height of drag item
- top -= Math.ceil(zoomBoxSize / 2) - 3; // minus half the height of the zoom box (-3)
-
- var left = parseInt($focusCircle.css('left'));
- left += Math.floor(focusCircleSize / 2);
- left -= Math.ceil(zoomBoxSize / 2) - 3;
-
- if(top < 0) top = 0;
- if(left < 0) left = 0;
- // constrain to corners
- if(top + zoomBoxSize > $focusArea.height()) top = $focusArea.height() - zoomBoxSize;
- if(left + zoomBoxSize > $focusArea.width()) left = $focusArea.width() - zoomBoxSize;
-
- $zoomBox.css({
- top: top + 'px',
- left: left + 'px'
+ // apply the zoom box position
+ focus = getFocus();
+ var crop = getFocusZoomCropDimensions(focus.left, focus.top, zoomPercent, faWidth, faHeight, zoomBoxSize, zoomBoxSize);
+ $zoomBox.css({
+ top: crop.top + 'px',
+ left: crop.left + 'px',
});
- setFocusProperty('zoom', zoomPercent);
-
- // determine when to visually start showing zoom (in grid mode)
- var zoomVisual = zoomPercent;
- if(zoomBoxSize > $img.height() || zoomBoxSize > $img.width()) {
- zoomVisual = 0;
- } else {
- if(!lastZoomVisual) startZoomVisual = zoomVisual;
- zoomVisual = (zoomVisual - startZoomVisual)+1;
- }
- if(mode == 'grid') setGridSizeItem($thumb.parent(), gridSize, false, zoomVisual);
- lastZoomVisual = zoomVisual;
- /*
- console.log('lastZoomVisual=' + lastZoomVisual + ', startZoomVisual=' + startZoomVisual +
- ', img.height=' + $img.height() + ', img.width=' + $img.width() +
- ', zoomBoxSize=' + zoomBoxSize + ', zoomVisual=' + zoomVisual);
- */
+ // save zoom percent
+ focus.zoom = crop.zoom; // crop.zoom may have been adjusted to prevent upscaling
+ setFocusProperty('zoom', crop.zoom);
+
+ // update the preview if in gride mode
+ if(mode == 'grid') setGridSizeItem($thumb.parent(), gridSize, false, focus);
+
}; // zoomSlide
// function called when the focus item is dragged
var dragEvent = function(event, ui) {
var $this = $(this);
+ var circleSize = $this.outerHeight();
var w = $this.parent().width();
var h = $this.parent().height();
- var t = ui.position.top > 0 ? ui.position.top + ($this.width() / 2) : 0;
- var l = ui.position.left > 0 ? ui.position.left + ($this.height() / 2) : 0;
- var oldFocus = getFocus();
+ var t = ui.position.top > 0 ? ui.position.top + (circleSize / 2) : 0;
+ var l = ui.position.left > 0 ? ui.position.left + (circleSize / 2) : 0;
var newFocus = {
'top': t > 0 ? ((t / h) * 100) : 0,
'left': l > 0 ? ((l / w) * 100) : 0,
@@ -541,9 +528,9 @@ function InputfieldImage($) {
};
setFocus(newFocus);
if(useZoomFocus) {
- zoomSlide();
+ zoomSlide(newFocus.zoom);
} else if(mode == 'grid') {
- setGridSizeItem($thumb.parent(), gridSize, false);
+ setGridSizeItem($thumb.parent(), gridSize, false, newFocus);
}
}; // dragEvent
@@ -562,15 +549,15 @@ function InputfieldImage($) {
});
$zoomBox = $("").addClass('focusZoomBox').css({
'position': 'absolute',
- 'background': 'rgba(0,0,0,0.5)',
- 'box-shadow': '0 0 20px rgba(0,0,0,.9)'
+ 'background': 'rgba(0,0,0,0.5)'
+ //'box-shadow': '0 0 20px rgba(0,0,0,.9)'
});
$focusArea.prepend($zoomBox);
$img.after($zoomSlider);
$thumb.attr('src', $img.attr('src'));
$zoomSlider.slider({
min: 0,
- max: 80,
+ max: 50,
value: zoom,
range: 'max',
slide: function(event, ui) {
@@ -601,6 +588,92 @@ function InputfieldImage($) {
}
}
}
+
+ /**
+ * Get focus zoom position for either X or Y (duplicated from Horst’s PHP version in ImageSizerEngine)
+ *
+ * @param focus Left or Top percentage
+ * @param sourceDimension Width or Height of source image
+ * @param cropDimension Width or Height of cropped image
+ * @returns {number}
+ *
+ */
+ function getFocusZoomPosition(focus, sourceDimension, cropDimension) {
+ focus = parseInt(focus); // string with float value and percent char, (needs to be converted to integer)
+ var source = 100; // the source-dimensions percent-value (100)
+ var target = (cropDimension / sourceDimension * 100); // the crop-dimensions percent-value
+ var rest = source - target; // the unused dimension-part-value in percent
+ var tmp = focus + (target / 2); // temp value
+ var position = 0;
+
+ // calculate the position in pixel !
+ if(tmp >= 100) {
+ position = sourceDimension - cropDimension;
+ } else if(tmp <= Math.floor(rest / 2)) {
+ position = 0;
+ } else {
+ position = Math.ceil((sourceDimension - cropDimension) / 100 * focus);
+ }
+
+ return position;
+ }
+
+ /**
+ * Get focus zoom crop dimensions (duplicated from Horst’s PHP version in ImageSizerEngine)
+ *
+ * @param left Left percent
+ * @param top Top percent
+ * @param zoom Zoom percent
+ * @param fullWidth Width of full size image
+ * @param fullHeight Height of full size image
+ * @param finalWidth Width of target cropped image
+ * @param finalHeight Height of target cropped image
+ * @returns {{left: number, top: number, width: number, height: number}}
+ *
+ */
+ function getFocusZoomCropDimensions(left, top, zoom, fullWidth, fullHeight, finalWidth, finalHeight) {
+ // calculate the max crop dimensions
+ var ratioFinal = finalWidth / finalHeight; // get the ratio of the requested crop
+ var percentW = finalWidth / fullWidth * 100; // calculate percentage of the crop width in regard of the original width
+ var percentH = finalHeight / fullHeight * 100; // calculate percentage of the crop height in regard of the original height
+
+ if(percentW >= percentH) { // check wich one is greater
+ var maxW = fullWidth; // if percentW is greater, maxW becomes the original Width
+ var maxH = fullWidth / ratioFinal; // ... and maxH gets calculated via the ratio
+ } else {
+ var maxH = fullHeight; // if percentH is greater, maxH becomes the original Height
+ var maxW = fullHeight * ratioFinal; // ... and maxW gets calculated via the ratio
+ }
+
+ // calculate the zoomed dimensions
+ var cropW = maxW - (maxW * zoom / 100); // to get the final crop Width and Height, the amount for zoom-in
+ var cropH = maxH - (maxH * zoom / 100); // needs to get stripped out
+
+ // validate against the minimal dimensions
+ var upscaling = true;
+ if(!upscaling) { // if upscaling isn't allowed, we decrease the zoom, so that we get a crop with the min-Dimensions
+ if(cropW < finalWidth) {
+ cropW = finalWidth;
+ cropH = finalWidth / ratioFinal;
+ }
+ if(cropH < finalHeight) {
+ cropH = finalHeight;
+ cropW = finalHeight * ratioFinal;
+ }
+ }
+
+ // calculate the crop positions
+ var tmpX = getFocusZoomPosition(left, fullWidth, cropW); // calculate the x-position
+ var tmpY = getFocusZoomPosition(top, fullHeight, cropH); // calculate the y-position
+
+ return {
+ 'left': tmpX,
+ 'top': tmpY,
+ 'width': cropW,
+ 'height': cropH,
+ 'zoom': zoom // adjusted zoom
+ };
+ }
/**
* Tear down the InputfieldImageEdit panel
@@ -989,10 +1062,10 @@ function InputfieldImage($) {
* @param $item
* @param gridSize
* @param ragged
- * @param zoom
+ * @param focus optional
*
*/
- function setGridSizeItem($item, gridSize, ragged, zoom) {
+ function setGridSizeItem($item, gridSize, ragged, focus) {
if($item.hasClass('gridImage__overflow')) {
var $img = $item.children('img');
@@ -1009,9 +1082,7 @@ function InputfieldImage($) {
return;
}
- if(typeof zoom == "undefined") zoom = 0;
-
- var focus = {};
+ var zoom = 0;
var w = $img.width();
var h = $img.height();
var dataW = parseInt($img.attr('data-w'));
@@ -1019,7 +1090,7 @@ function InputfieldImage($) {
if(!w) w = dataW;
if(!h) h = dataH;
- if(!ragged) {
+ if(!ragged && typeof focus == "undefined") {
var focusStr = $img.attr('data-focus');
if(typeof focusStr == "undefined") focusStr = '50.0 50.0 0';
var focusArray = focusStr.split(' ');
@@ -1029,6 +1100,7 @@ function InputfieldImage($) {
zoom: parseInt(focusArray[2])
};
}
+ if(!ragged) zoom = focus.zoom;
if(ragged) {
// show full thumbnail (not square)
@@ -1041,44 +1113,33 @@ function InputfieldImage($) {
'transform': 'translate3d(-50%, -50%, 0)'
});
- } else if(zoom > 0 && useZoomFocus) {
+ } else if(zoom > 0 && $item.closest('.InputfieldImageFocusZoom').length) {
// focus with zoom
if(w >= h) {
- $img.attr('height', gridSize).removeAttr('width');
var maxHeight = '100%';
var maxWidth = 'none';
} else {
var maxHeight = 'none';
var maxWidth = '100%';
- $img.attr('width', gridSize).removeAttr('height');
}
+ var scale = 1 + ((zoom / 100) * 2);
var top = focus.top;
var left = focus.left;
- var scale = 1 + (zoom / 25); //(zoom * 0.037);
- if(scale < 0) scale = 0;
- if(left < 1.0) left = 0.001;
- if(top < 1.0) top = 0.001;
- if(left >= 55) {
- left += (left * 0.15);
- } else if(left <= 45) {
- left -= (left * 0.15);
- }
- if(top > 50) {
- top += (top * 0.1);
- } else if(top < 50) {
- top -= (top * 0.1);
- }
- if(left > 100) left = 100;
- if(top > 100) top = 100;
+ if(top > 92 || top > 100) top = 100;
+ if(left > 92 || left > 100) left = 100;
+ if(top < 0) top = 0;
+ if(left < 0) left = 0;
+ var crop = getFocusZoomCropDimensions(left, top, zoom, w, h, gridSize, gridSize);
+
$img.css({
- 'max-height': maxHeight,
- 'max-width': maxWidth,
'top': top + '%',
'left': left + '%',
- 'transform-origin': 'top left',
- 'transform': 'scale(' + scale + ') translate3d(-' + (left) + '%, -' + (top) + '%, 0)'
+ 'transform-origin': 'top left',
+ 'transform': 'scale(' + scale + ') translate3d(-' + left + '%, -' + top + '%, 0)',
+ 'max-width': maxWidth,
+ 'max-height': maxHeight
});
- // console.log("top=" + top + ", left=" + left + ", scale=" + scale);
+ // console.log("top=" + top + "%, left=" + left + "%, zoom=" + zoom + ", scale=" + scale);
} else if(w >= h) {
// image width greater than height
@@ -1171,6 +1232,7 @@ function InputfieldImage($) {
$aPrev.removeClass(activeClass);
$a.addClass(activeClass);
+ stopFocus($inputfield);
if(href == 'list') {
if(!$inputfield.hasClass('InputfieldImageEditAll')) {
diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.min.js b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.min.js
index f1714154..8751c04e 100644
--- a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.min.js
+++ b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.min.js
@@ -1 +1 @@
-function InputfieldImage(x){var l=null;var b={file:"",item:null,edit:null};var I={type:"image",closeOnContentClick:true,closeBtnInside:true};var c=null;var s=[];var k=false;function u(){var P=window.File&&window.FileList&&window.FileReader;var O=x(".InputfieldAllowAjaxUpload").length>0;var Q=x("#PageIDIndicator").length>0;return(P&&(Q||O))}function A(Q,O,P){O||(O=250);var R,S;return function(){var V=P||this;var U=+new Date(),T=arguments;if(R&&U .gridImage",start:function(T,S){var R=H(P.closest(".Inputfield"),"size");S.placeholder.append(x("").css({display:"block",height:R+"px",width:R+"px"}));Q=window.setTimeout(function(){J(P,null)},100);P.addClass("InputfieldImageSorting")},stop:function(T,R){var S=x(this);if(Q!==null){R.item.find(".InputfieldImageEdit__edit").click();clearTimeout(Q)}S.children("li").each(function(V){var U=x(this).find(".InputfieldFileSort");if(U.val()!=V){U.val(V).change()}});P.removeClass("InputfieldImageSorting")},cancel:".InputfieldImageEdit,.focusArea,input,textarea,button,select,option"};P.sortable(O)}function q(P){var O=x.extend(true,{},I);O.callbacks={elementParse:function(Q){var R=x(Q.el).attr("data-original");if(typeof R=="undefined"||!R){R=x(Q.el).attr("src")}Q.src=R}};O.gallery={enabled:true};P.find("img").magnificPopup(O)}function v(P){var O=x.extend(true,{},I);O.callbacks={elementParse:function(Q){Q.src=x(Q.el).attr("src")}};O.gallery={enabled:false};P.find("img").magnificPopup(O)}function F(O){return O.find(".InputfieldImageEdit--active")}function w(O){return x("#"+O.find(".InputfieldImageEdit__edit").attr("data-current"))}function G(Q){var O=Q.is(":checked");var P=Q.parents(".gridImages").find(".gridImage__deletebox");if(O){P.prop("checked","checked").change()}else{P.removeAttr("checked").change()}}function M(P){if(typeof P=="undefined"){var O=x(".gridImages")}else{var O=P.find(".gridImages")}O.each(function(){var Q=x(this),R=F(Q);if(R.length){i(w(R),R)}})}function y(O){var R=[];var W=[];var T=[];var Q=0,V=0,P=0;var U;if(typeof O=="undefined"){U=x(".InputfieldImage.Inputfield")}else{U=O}U.removeClass("InputfieldImageNarrow InputfieldImageMedium InputfieldImageWide");U.each(function(){var Y=x(this);var Z=Y.width();if(Z<1){return}if(Z<=500){R[Q]=Y;Q++}else{if(Z<=900){W[V]=Y;V++}else{T[P]=Y;P++}}});for(var S=0;S").addClass("focusArea");X.after(ai)}ai.css({height:X.height()+"px",width:X.width()+"px"}).addClass("focusActive");Z=ai.find(".focusCircle");if(!Z.length){Z=x("").addClass("focusCircle");ai.append(Z)}X.parent().addClass("focusWrap");ae();var af=function(av){if(typeof av=="undefined"){av=Q}Q=av;var ao=(100-av)+"%";V.width(ao);var an=V.width();var aq=Z.height();V.height(an);var ap=av;var au=parseInt(Z.css("top"));au+=Math.floor(aq/2);au-=Math.ceil(an/2)-3;var at=parseInt(Z.css("left"));at+=Math.floor(aq/2);at-=Math.ceil(an/2)-3;if(au<0){au=0}if(at<0){at=0}if(au+an>ai.height()){au=ai.height()-an}if(at+an>ai.width()){at=ai.width()-an}V.css({top:au+"px",left:at+"px"});aa("zoom",av);var ar=av;if(an>X.height()||an>X.width()){ar=0}else{if(!W){aj=ar}ar=(ar-aj)+1}if(ad=="grid"){h(ab.parent(),ac,false,ar)}W=ar};var Y=function(an,au){var at=x(this);var av=at.parent().width();var ar=at.parent().height();var aw=au.position.top>0?au.position.top+(at.width()/2):0;var aq=au.position.left>0?au.position.left+(at.height()/2):0;var ao=R();var ap={top:aw>0?((aw/ar)*100):0,left:aq>0?((aq/av)*100):0,zoom:U("zoom")};P(ap);if(k){af()}else{if(ad=="grid"){h(ab.parent(),ac,false)}}};Z.draggable({containment:"parent",drag:Y,stop:Y});if(k){var O=U("zoom");al=x("").addClass("focusZoomSlider").css({"margin-top":"5px"});V=x("").addClass("focusZoomBox").css({position:"absolute",background:"rgba(0,0,0,0.5)","box-shadow":"0 0 20px rgba(0,0,0,.9)"});ai.prepend(V);X.after(al);ab.attr("src",X.attr("src"));al.slider({min:0,max:80,value:O,range:"max",slide:function(an,ao){af(ao.value)}});af(O)}else{ai.css("background-color","rgba(0,0,0,0.5)")}}function C(O){$focusCircle=O.find(".focusCircle");if($focusCircle.length){var P=$focusCircle.closest(".focusWrap");P.find(".focusZoomSlider").slider("destroy").remove();P.find(".focusZoomBox").remove();P.removeClass("focusWrap");$focusCircle.draggable("destroy");$focusCircle.parent().removeClass("focusActive");$focusCircle.remove();var Q=O.find(".InputfieldImageButtonFocus");if(Q.length){$icon=Q.find("i");$icon.removeClass("focusIconActive").toggleClass($icon.attr("data-toggle"))}}}function n(O){C(O);O.off("click",".InputfieldImageButtonFocus");$inputArea=O.find(".InputfieldImageEdit__edit");if($inputArea.children().not(".InputfieldFileSort").length){var P=$inputArea.children();x("#"+$inputArea.attr("data-current")).find(".ImageData").append(P)}}function J(Q,P){var O;if(Q){O=Q.find(".InputfieldImageEdit--active")}else{if(P){O=x(".InputfieldImageEdit--active").not(P.find(".InputfieldImageEdit--active"))}else{O=x(".InputfieldImageEdit--active")}}if(O.length){n(O);O.removeClass("InputfieldImageEdit--active").removeAttr("id");x("#"+O.attr("data-for")).removeClass("gridImageEditing")}x(".InputfieldImageEdit__replace").removeClass("InputfieldImageEdit__replace")}function i(R,P){if(!R||!R.length){return}var O=R.parent().children().not(".InputfieldImageEdit");var S=0;var T=false;var U=null;O.each(function(){if(U){return}var V=x(this);var W=V.offset().top;if(T&&W!=S){U=V}else{if(V.attr("id")==R.attr("id")){T=true}}S=W});if(U){P.insertBefore(U)}else{P.insertAfter(O.eq(O.length-1))}var Q=P.find(".InputfieldImageEdit__arrow");if(Q.length){Q.css("left",R.position().left+(R.outerWidth()/2)+"px")}}function z(){x(window).resize(A(g,200));x(document).on("click dblclick",".gridImage__trash",function(O){var P=x(this).find("input");P.prop("checked",f).change();if(O.type=="dblclick"){G(P);O.preventDefault();O.stopPropagation()}});x(document).on("change",".gridImage__deletebox",function(){p(x(this))});x(document).on("click",".gridImage__edit",function(R){var P=x(this).closest(".gridImage");if(!P.length){return}if(P.closest(".InputfieldImageEditAll").length){return false}var Q=P.closest(".gridImages");var O=Q.find(".InputfieldImageEdit");if(P.hasClass("gridImageEditing")){O.find(".InputfieldImageEdit__close").click()}else{i(P,O);n(O);d(P,O);O.addClass("InputfieldImageEdit--active").attr("data-for",P.attr("id"));Q.find(".gridImageEditing").removeClass("gridImageEditing");P.addClass("gridImageEditing")}}).on("click",".InputfieldImageEditAll img",function(Q){Q.stopPropagation();Q.preventDefault();x.magnificPopup.close();var O=x.extend(true,{},I);var P=x(this);O.items={src:P.attr("data-original"),title:P.attr("alt")};x.magnificPopup.open(O);return true}).on("click",".InputfieldImageButtonFocus",function(){var R=x(this);var O=R.find("i");var P=R.closest(".InputfieldImageEdit, .gridImage");var Q=P.find(".focusCircle");if(Q.length){C(P)}else{t(P);O.addClass("focusIconActive");O.toggleClass(O.attr("data-toggle"))}});x(document).on("click",function(P){var O=x(P.target);if(O.closest(".InputfieldImageEdit").length){J(null,O.parents(".gridImages"))}else{if(O.is("input, textarea")&&O.closest(".InputfieldImageEditAll").length){O.focus().one("blur",function(){O.closest(".gridImages").sortable("enable")});O.closest(".gridImages").sortable("disable")}else{if(O.closest(".gridImage__inner").length){J(null,O.parents(".gridImages"))}else{if(O.closest(".mfp-container").length){return}else{if(O.closest(".ui-dialog").length){return}else{if(O.is(".mfp-close")){return}else{if(O.is("a.remove")){return}else{J(null,null)}}}}}}}});x(document).on("click",".InputfieldImageEdit__close",function(O){J(x(this).parents(".gridImages"),null)});x(document).on("change",".InputfieldImage",function(){x(this).find(".InputfieldImageButtonCrop:not(.pw-modal-dblclick)").addClass("pw-modal-dblclick ui-state-disabled")}).on("click",".InputfieldImageButtonCrop.ui-state-disabled",function(Q){var P=x(this);var O=P.closest(".gridImages");if(!O.hasClass("gridImagesAlerted")){ProcessWire.alert(ProcessWire.config.InputfieldImage.labels.changes);O.addClass("gridImagesAlerted")}setTimeout(function(){P.removeClass("ui-state-active")},500);return false});x(".ImagesGrid").on("click","button.pw-modal",function(O){O.preventDefault()});r();y()}function r(){x(document).on("click",".InputfieldImageEdit__name",function(Q){var O=x(this).children("span");var R=O.closest(".gridImage, .InputfieldImageEdit").find(".InputfieldFileRename");var P=O.closest(".gridImages");P.sortable("disable");R.val(O.text());O.on("keypress",function(S){if(S.which==13){O.blur();return false}return true});O.attr("autocomplete","off").attr("autocorrect","off").attr("autocapitalize","off").attr("spellcheck","false");O.focus().on("blur",function(){var S=x(this).text();if(x.trim(S).length<1){O.text(R.val())}else{if(S!=R.val()){R.val(S).change();P.closest(".Inputfield").trigger("change")}}O.off("keypress");P.sortable("enable")})})}function m(O,P){P=Math.floor(P);O.find(".gridImage__overflow").each(function(){var Q=100-P;var R=x(this);R.css("width",P+"%");R.siblings(".ImageData").css("width",Q+"%");R.find("img").css({top:0,left:0,transform:"none"})});e(O,"listSize",P)}function j(S,O,Q){if(!O){return}var P=O+"px";var R=S.find(".gridImages");if(typeof Q=="undefined"||Q==null){Q=R.attr("data-ragged")?true:false}if(Q){R.attr("data-ragged",1)}else{R.removeAttr("data-ragged")}R.find(".gridImage__overflow").each(function(){h(x(this),O,Q)});R.find(".gridImage__edit, .gridImage__resize").css("line-height",P);R.attr("data-size",O);e(S,"size",O);if(s.length){setTimeout(function(){while(s.length){var T=s.pop();h(T,O,Q)}},150)}}function h(P,T,S,O){if(P.hasClass("gridImage__overflow")){var R=P.children("img")}else{if(P.is("img")){var R=P;P=R.closest(".gridImage__overflow")}else{return}}if(!T){R.removeAttr("width").removeAttr("height");P.width("auto").height("auto");return}if(typeof O=="undefined"){O=0}var Y={};var U=R.width();var ac=R.height();var V=parseInt(R.attr("data-w"));var ad=parseInt(R.attr("data-h"));if(!U){U=V}if(!ac){ac=ad}if(!S){var Z=R.attr("data-focus");if(typeof Z=="undefined"){Z="50.0 50.0 0"}var ab=Z.split(" ");Y={top:parseFloat(ab[0]),left:parseFloat(ab[1]),zoom:parseInt(ab[2])}}if(S){R.attr("height",T).removeAttr("width");R.css({"max-height":"100%","max-width":"none",top:"50%",left:"50%",transform:"translate3d(-50%, -50%, 0)"})}else{if(O>0&&k){if(U>=ac){R.attr("height",T).removeAttr("width");var aa="100%";var ae="none"}else{var aa="none";var ae="100%";R.attr("width",T).removeAttr("height")}var X=Y.top;var Q=Y.left;var af=1+(O/25);if(af<0){af=0}if(Q<1){Q=0.001}if(X<1){X=0.001}if(Q>=55){Q+=(Q*0.15)}else{if(Q<=45){Q-=(Q*0.15)}}if(X>50){X+=(X*0.1)}else{if(X<50){X-=(X*0.1)}}if(Q>100){Q=100}if(X>100){X=100}R.css({"max-height":aa,"max-width":ae,top:X+"%",left:Q+"%","transform-origin":"top left",transform:"scale("+af+") translate3d(-"+(Q)+"%, -"+(X)+"%, 0)"})}else{if(U>=ac){R.attr("height",T).removeAttr("width");if(Y.left<1){Y.left=0.001}R.css({"max-height":"100%","max-width":"none",top:"50%",left:Y.left+"%",transform:"translate3d(-"+Y.left+"%, -50%, 0)"})}else{if(ac>U){R.attr("width",T).removeAttr("height");if(Y.top<1){Y.top=0.001}R.css({"max-height":"none","max-width":"100%",top:Y.top+"%",left:"50%",transform:"translate3d(-50%, -"+Y.top+"%, 0)"})}else{R.css({"max-height":"100%","max-width":"none",top:"50%",left:"50%",transform:"translate3d(-50%, -50%, 0)"});R.removeAttr("width").attr("height",T)}}}}var U=R.width();if(U){P.css({width:(S?U+"px":T+"px"),height:T+"px"})}else{var W=P.attr("data-tries");if(!W){W=0}if(typeof W=="undefined"){W=0}W=parseInt(W);if(W>3){P.css({width:T+"px",height:T+"px"})}else{s.push(P);P.attr("data-tries",W+1)}}}function D(P){if(P.find(".InputfieldImageListToggle").length){return}var S=x("").append("");var U=x("").append("");var O=x("").append("");var T="InputfieldImageListToggle--active";var R="";var Q=function(aa){var Z=x(this);var X=Z.closest(".Inputfield");var V=Z.attr("href");var W;var ab=Z.parent().children("."+T);var Y=ab.attr("href");ab.removeClass(T);Z.addClass(T);if(V=="list"){if(!X.hasClass("InputfieldImageEditAll")){X.find(".InputfieldImageEdit--active .InputfieldImageEdit__close").click();X.addClass("InputfieldImageEditAll")}W=H(X,"listSize");m(X,W);e(X,"mode","list")}else{if(V=="left"){X.removeClass("InputfieldImageEditAll");W=H(X,"size");j(X,W,true);e(X,"mode","left");M()}else{if(V=="grid"){X.removeClass("InputfieldImageEditAll");W=H(X,"size");j(X,W,false);e(X,"mode","grid");if(Y=="left"){setTimeout(function(){j(X,W,false)},100)}}}}E(X.find(".gridImages"));Z.blur();return false};S.click(Q);U.click(Q);O.click(Q);if(P.hasClass("InputfieldImage")){P.find(".InputfieldHeader").append(S).append(U).append(O);R=H(P,"mode")}else{x(".InputfieldImage .InputfieldHeader",P).append(S).append(U).append(O)}if(R=="list"){S.click()}else{if(R=="left"){U.click()}else{}}}function B(T){var Q=T.children(".InputfieldHeader");if(Q.children(".InputfieldImageSizeSlider").length){return}var S=T.find(".gridImages");var P=S.attr("data-gridsize");var R=P/2;var O=P*2;var U=x('');Q.append(U);U.slider({min:R,max:O,value:H(T,"size"),range:"min",slide:function(X,Z){var Y=Z.value;var aa=15;var ab=Math.floor(P/aa);var V=Y-R;var W=Math.floor(aa+(V/ab));if(T.hasClass("InputfieldImageEditAll")){e(T,"size",Y);m(T,W)}else{e(T,"listSize",W);j(T,Y)}},start:function(V,W){if(T.find(".InputfieldImageEdit:visible").length){T.find(".InputfieldImageEdit__close").click()}},stop:function(V,W){M(T)}})}function e(P,S,R){var Q=H(P);var T=P.attr("id");var O=T?T.replace("wrap_Inputfield_",""):"";if(!O.length||typeof R=="undefined"){return}if(Q[O][S]==R){return}Q[O][S]=R;x.cookie("InputfieldImage",Q);c=Q}function H(P,S){if(c&&typeof S=="undefined"){return c}var T=P.attr("id");var O=T?T.replace("wrap_Inputfield_",""):"na";var R=c?c:x.cookie("InputfieldImage");var Q=null;if(!R){var R={}}if(typeof R[O]=="undefined"){R[O]={}}if(typeof R[O].size=="undefined"){R[O].size=parseInt(P.find(".gridImages").attr("data-size"))}if(typeof R[O].listSize=="undefined"){R[O].listSize=23}if(typeof R[O].mode=="undefined"){R[O].mode=P.find(".gridImages").attr("data-gridMode")}if(c==null){c=R}if(typeof S=="undefined"){Q=R}else{if(S===true){Q=R[O]}else{if(typeof R[O][S]!="undefined"){Q=R[O][S]}}}return Q}function a(S){if(S.hasClass("InputfieldStateCollapsed")){return}var T=parseInt(S.find(".InputfieldImageMaxFiles").val());var R=S.find(".gridImages");var Q=H(S,"size");var U=H(S,"mode");var P=U=="left"?true:false;if(!Q){Q=R.attr("data-gridsize")}Q=parseInt(Q);if(S.hasClass("InputfieldImageEditAll")||U=="list"){var O=H(S,"listSize");m(S,O)}else{j(S,Q,P)}if(!S.hasClass("InputfieldImageInit")){S.addClass("InputfieldImageInit");if(S.hasClass("InputfieldRenderValueMode")){return q(S)}else{if(T==1){S.addClass("InputfieldImageMax1");v(S)}else{E(R)}}D(S);B(S)}y(S);S.on("change",".InputfieldFileActionSelect",function(){var V=x(this).next(".InputfieldFileActionNote");if(x(this).val().length){V.fadeIn()}else{V.hide()}})}function L(){x("body").addClass("ie-no-drop");x(".InputfieldImage.InputfieldFileMultiple").each(function(){var P=x(this),R=parseInt(P.find(".InputfieldFileMaxFiles").val()),O=P.find(".gridImages"),Q=P.find(".InputfieldImageUpload");Q.on("change","input[type=file]",function(){var V=x(this),T=V.parent(".InputMask");if(V.val().length>1){T.addClass("ui-state-disabled")}else{T.removeClass("ui-state-disabled")}if(V.next("input.InputfieldFile").length>0){return}var S=O.children("li").length+Q.find("input[type=file]").length+1;if(R>0&&S>=R){return}Q.find(".InputMask").not(":last").each(function(){var W=x(this);if(W.find("input[type=file]").val()<1){W.remove()}});var U=T.clone().removeClass("ui-state-disabled");U.children("input[type=file]").val("");U.insertAfter(T)})})}function N(Q){var P;if(Q.length>0){P=Q.find(".InputfieldImageUpload")}else{P=x(".InputfieldImageUpload")}P.each(function(T){var U=x(this);var S=U.closest(".InputfieldContent");if(U.hasClass("InputfieldImageInitUpload")){return}R(S,T);U.addClass("InputfieldImageInitUpload")});function R(ab,an){var aa=ab.parents("form");var S=ab.closest(".InputfieldRepeaterItem");var W=S.length?S.attr("data-editUrl"):aa.attr("action");W+=(W.indexOf("?")>-1?"&":"?")+"InputfieldFileAjax=1";var at=aa.find("input._post_token");var Z=at.attr("name");var ae=at.val();var ad=ab.find(".InputfieldImageErrors").first();var V=ab.find(".InputfieldImageUpload").data("fieldname");V=V.slice(0,-2);var al=ab.closest(".Inputfield.InputfieldImage");var ar=ab.find(".InputfieldImageUpload").data("extensions").toLowerCase();var ak=ab.find(".InputfieldImageUpload").data("maxfilesize");var ac=ab.find("input[type=file]").get(0);var U=ab.find(".gridImages");var ao=U.get(0);var ag=U.data("gridsize");var ah=null;var af=parseInt(ab.find(".InputfieldImageMaxFiles").val());var aq=o(al);var am=aq.maxWidth>0||aq.maxHeight>0||aq.maxSize>0;ap(ab);if(af!=1){aj(U)}U.children().addClass("InputfieldFileItemExisting");al.on("pwimageupload",function(au,av){ai([av.file],av.xhr)});function Y(av,au){if(typeof au!=="undefined"){av=""+au+": "+av}return""+av+""}function T(av){var au=new String(av).substring(av.lastIndexOf("/")+1);if(au.lastIndexOf(".")!=-1){au=au.substring(0,au.lastIndexOf("."))}return au}function ap(av){if(av.hasClass("InputfieldImageDropzoneInit")){return}var ay=av.get(0);var ax=av.closest(".Inputfield");function au(){if(ax.hasClass("pw-drag-in-file")){return}av.addClass("ui-state-hover");ax.addClass("pw-drag-in-file")}function aw(){if(!ax.hasClass("pw-drag-in-file")){return}av.removeClass("ui-state-hover");ax.removeClass("pw-drag-in-file")}ay.addEventListener("dragleave",function(){aw()},false);ay.addEventListener("dragenter",function(az){az.preventDefault();au()},false);ay.addEventListener("dragover",function(az){if(!av.is("ui-state-hover")){au()}az.preventDefault();az.stopPropagation();return false},false);ay.addEventListener("drop",function(az){ai(az.dataTransfer.files);aw();az.preventDefault();az.stopPropagation();return false},false);av.addClass("InputfieldImageDropzoneInit")}function aj(aC){var aG=null;var aE=false;var av=null;var au=aC.closest(".Inputfield");function az(){au.addClass("pw-drag-in-file")}function aF(){au.removeClass("pw-drag-in-file")}function ay(aI){var aM=aI.offset();var aJ=aI.width();var aH=aI.height();var aL=aM.left+aJ/2;var aK=aM.top+aH/2;return{clientX:aL,clientY:aK}}function aB(){return aC.find(".InputfieldImageEdit--active").length>0}function aA(aI){if(aB()){return}aI.preventDefault();aI.stopPropagation();az();aE=false;if(aG==null){var aH=aC.attr("data-size")+"px";var aJ=x("").addClass("gridImage__overflow");if(aC.closest(".InputfieldImageEditAll").length){aJ.css({width:"100%",height:aH})}else{aJ.css({width:aH,height:aH})}aG=x("").addClass("ImageOuter gridImage gridImagePlaceholder").append(aJ);aC.append(aG)}var aK=ay(aG);aG.simulate("mousedown",aK)}function aD(aH){if(aB()){return}aH.preventDefault();aH.stopPropagation();az();aE=false;if(aG==null){return}var aI={clientX:aH.originalEvent.clientX,clientY:aH.originalEvent.clientY};aG.simulate("mousemove",aI)}function ax(aH){if(aB()){return}aH.preventDefault();aH.stopPropagation();if(aG==null){return false}aE=true;if(av){clearTimeout(av)}av=setTimeout(function(){if(!aE||aG==null){return}aG.remove();aG=null;aF()},1000)}function aw(aH){if(aB()){return}aF();aE=false;var aI={clientX:aH.clientX,clientY:aH.clientY};aG.simulate("mouseup",aI);l=aG.next(".gridImage");aG.remove();aG=null}if(aC.length&&!aC.hasClass("gridImagesInitDropInPlace")){aC.on("dragenter",aA);aC.on("dragover",aD);aC.on("dragleave",ax);aC.on("drop",aw);aC.addClass("gridImagesInitDropInPlace")}}function X(aT,aH,aD){var aQ=ProcessWire.config.InputfieldImage.labels;var aA=parseInt(aT.size/1024,10)+" kB";var aS='";var aV=x(''),aN=x(aS),aB=x(''),au=x(''),aK=x(""),aM=x(""),aP=x(' '),aO=x('
'),av,aF,aU,aI=URL.createObjectURL(aT),aw=al.find(".gridImages"),ay=af==1,aL=H(al,"size"),az=H(al,"listSize"),ax=al.hasClass("InputfieldImageEditAll"),aE=x('![]()
');aB.append(aE);aK.find(".gridImage__inner").append(aP);aK.find(".gridImage__inner").append(aO.css("display","none"));aK.find(".gridImage__inner").append(aM);au.append(x(''+aA+""));if(ax){aB.css("width",az+"%");au.css("width",(100-az)+"%")}else{aB.css({width:aL+"px",height:aL+"px"})}aV.append(aN).append(aB).append(aK).append(au);aE.attr({src:aI,"data-original":aI});img=new Image();img.addEventListener("load",function(){aN.find(".dimensions").html(this.width+" × "+this.height);var aW=Math.min(this.width,this.height)/aL;aE.attr({width:this.width/aW,height:this.height/aW})},false);img.src=aI;if(typeof aD!="undefined"){aF=aD}else{aF=new XMLHttpRequest()}function aG(aW){if(typeof aW!="undefined"){if(!aW.lengthComputable){return}aM.attr("value",parseInt((aW.loaded/aW.total)*100))}x("body").addClass("pw-uploading");aO.css("display","block")}aF.upload.addEventListener("progress",aG,false);aF.addEventListener("load",function(){aF.getAllResponseHeaders();var aZ=x.parseJSON(aF.responseText);if(typeof aZ.ajaxResponse!="undefined"){aZ=aZ.ajaxResponse}var aX=aZ.length>1;if(aZ.error!==undefined){aZ=[aZ]}for(var aY=0;aY-1){a2=a2.substring(0,a2.indexOf("?"))}var a0=a2.substring(a2.lastIndexOf(".")+1).toLowerCase();a2=a2.substring(0,a2.lastIndexOf("."));if(a0==a6){a7.children("span").text(a2).removeAttr("contenteditable")}a1.find(".gridImage__edit").click()}b.file="";b.item=null;b.edit=null}if(ah){clearTimeout(ah)}l=null;ah=setTimeout(function(){if(af!=1){E(aw)}else{v(al)}x("body").removeClass("pw-uploading");aw.trigger("AjaxUploadDone")},500);al.trigger("change").removeClass("InputfieldFileEmpty")},false);if(b.edit){b.edit.find(".InputfieldImageEdit__close").click()}else{if(al.find(".InputfieldImageEdit:visible").length){al.find(".InputfieldImageEdit__close").click()}}if(b.item){b.item.replaceWith(aV);b.item=aV}else{if(l&&l.length){l.before(aV)}else{aw.append(aV)}}function aR(aW,aY){if(typeof aD=="undefined"){aF.open("POST",W,true)}aF.setRequestHeader("X-FILENAME",encodeURIComponent(aW.name));aF.setRequestHeader("X-FIELDNAME",V);if(b.item){aF.setRequestHeader("X-REPLACENAME",b.file)}aF.setRequestHeader("Content-Type","application/octet-stream");aF.setRequestHeader("X-"+Z,ae);aF.setRequestHeader("X-REQUESTED-WITH","XMLHttpRequest");if(typeof aY!="undefined"&&aY!=false){aF.send(aY)}else{aF.send(aW)}M();al.trigger("change");var aX=al.find(".InputfieldFileItem").length;if(aX==1){al.removeClass("InputfieldFileEmpty").removeClass("InputfieldFileMultiple").addClass("InputfieldFileSingle")}else{if(aX>1){al.removeClass("InputfieldFileEmpty").removeClass("InputfieldFileSingle").addClass("InputfieldFileMultiple")}}}aG();var aC=aT.name.substring(aT.name.lastIndexOf(".")+1).toLowerCase();if(am&&(aC=="jpg"||aC=="jpeg"||aC=="png"||aC=="gif")){var aJ=new PWImageResizer(aq);aO.addClass("pw-resizing");aJ.resize(aT,function(aW){aO.removeClass("pw-resizing");aR(aT,aW)})}else{aR(aT)}}function ai(au,aB){var az=function(aD){return parseInt(aD/1024,10)};if(typeof au==="undefined"){ao.innerHTML="No support for the File API in this web browser";return}for(var ax=0,aw=au.length;axak&&ak>2000000){var av=az(au[ax].size),ay=az(ak);aC="Filesize "+av+" kb is too big. Maximum allowed is "+ay+" kb";ad.append(Y(aC,au[ax].name))}else{if(typeof aB!="undefined"){X(au[ax],aA,aB)}else{X(au[ax],aA)}}}if(af==1){break}}}ac.addEventListener("change",function(au){ai(this.files);au.preventDefault();au.stopPropagation();this.value=""},false)}function O(){var S=".InputfieldImageEdit__imagewrapper img";x(document).on("dragenter",S,function(){var V=x(this);if(V.closest(".InputfieldImageMax1").length){return}var W=V.attr("src");var T=V.closest(".InputfieldImageEdit");var U=V.closest(".InputfieldImageEdit__imagewrapper");U.addClass("InputfieldImageEdit__replace");b.file=new String(W).substring(W.lastIndexOf("/")+1);b.item=x("#"+T.attr("data-for"));b.edit=T}).on("dragleave",S,function(){var U=x(this);if(U.closest(".InputfieldImageMax1").length){return}var T=U.closest(".InputfieldImageEdit__imagewrapper");T.removeClass("InputfieldImageEdit__replace");b.file="";b.item=null;b.edit=null})}O()}function o(P){var O={maxWidth:0,maxHeight:0,maxSize:0,quality:1,autoRotate:true,debug:ProcessWire.config.debug};var Q=P.attr("data-resize");if(typeof Q!="undefined"&&Q.length){Q=Q.split(";");O.maxWidth=parseInt(Q[0]);O.maxHeight=parseInt(Q[1]);O.maxSize=parseFloat(Q[2]);O.quality=parseFloat(Q[3])}return O}function K(){x(".InputfieldImage.Inputfield").each(function(){a(x(this))});z();if(u()){N("")}else{L()}x(document).on("reloaded",".InputfieldImage",function(){var O=x(this);a(O);N(O)}).on("wiretabclick",function(Q,P,O){P.find(".InputfieldImage").each(function(){a(x(this))})}).on("opened",".InputfieldImage",function(){a(x(this))})}K()}jQuery(document).ready(function(a){InputfieldImage(a)});
\ No newline at end of file
+function InputfieldImage(x){var l=null;var c={file:"",item:null,edit:null};var J={type:"image",closeOnContentClick:true,closeBtnInside:true};var d=null;var s=[];function u(){var Q=window.File&&window.FileList&&window.FileReader;var P=x(".InputfieldAllowAjaxUpload").length>0;var R=x("#PageIDIndicator").length>0;return(Q&&(R||P))}function B(R,P,Q){P||(P=250);var S,T;return function(){var W=Q||this;var V=+new Date(),U=arguments;if(S&&V .gridImage",start:function(U,T){var S=I(Q.closest(".Inputfield"),"size");T.placeholder.append(x("").css({display:"block",height:S+"px",width:S+"px"}));R=window.setTimeout(function(){K(Q,null)},100);Q.addClass("InputfieldImageSorting")},stop:function(U,S){var T=x(this);if(R!==null){S.item.find(".InputfieldImageEdit__edit").click();clearTimeout(R)}T.children("li").each(function(W){var V=x(this).find(".InputfieldFileSort");if(V.val()!=W){V.val(W).change()}});Q.removeClass("InputfieldImageSorting")},cancel:".InputfieldImageEdit,.focusArea,input,textarea,button,select,option"};Q.sortable(P)}function q(Q){var P=x.extend(true,{},J);P.callbacks={elementParse:function(R){var S=x(R.el).attr("data-original");if(typeof S=="undefined"||!S){S=x(R.el).attr("src")}R.src=S}};P.gallery={enabled:true};Q.find("img").magnificPopup(P)}function v(Q){var P=x.extend(true,{},J);P.callbacks={elementParse:function(R){R.src=x(R.el).attr("src")}};P.gallery={enabled:false};Q.find("img").magnificPopup(P)}function G(P){return P.find(".InputfieldImageEdit--active")}function w(P){return x("#"+P.find(".InputfieldImageEdit__edit").attr("data-current"))}function H(R){var P=R.is(":checked");var Q=R.parents(".gridImages").find(".gridImage__deletebox");if(P){Q.prop("checked","checked").change()}else{Q.removeAttr("checked").change()}}function N(Q){if(typeof Q=="undefined"){var P=x(".gridImages")}else{var P=Q.find(".gridImages")}P.each(function(){var R=x(this),S=G(R);if(S.length){j(w(S),S)}})}function y(P){var S=[];var X=[];var U=[];var R=0,W=0,Q=0;var V;if(typeof P=="undefined"){V=x(".InputfieldImage.Inputfield")}else{V=P}V.removeClass("InputfieldImageNarrow InputfieldImageMedium InputfieldImageWide");V.each(function(){var Z=x(this);var aa=Z.width();if(aa<1){return}if(aa<=500){S[R]=Z;R++}else{if(aa<=900){X[W]=Z;W++}else{U[Q]=Z;Q++}}});for(var T=0;T").addClass("focusArea");X.after(aj)}aj.css({height:X.height()+"px",width:X.width()+"px"}).addClass("focusActive");Z=aj.find(".focusCircle");if(!Z.length){Z=x("").addClass("focusCircle");aj.append(Z)}X.parent().addClass("focusWrap");ae();var af=function(ar){var av,au,ax,at,ao,ap,aw,an;if(typeof ar=="undefined"){ar=R}R=ar;aw=aj.width();an=aj.height();if(aw>an){W.height((100-ar)+"%");av=W.height();W.width(av)}else{W.width((100-ar)+"%");av=W.width();W.height(av)}ax=S();var aq=b(ax.left,ax.top,ar,aw,an,av,av);W.css({top:aq.top+"px",left:aq.left+"px"});ax.zoom=aq.zoom;aa("zoom",aq.zoom);if(ad=="grid"){i(ab.parent(),ac,false,ax)}};var Y=function(ao,au){var at=x(this);var an=at.outerHeight();var av=at.parent().width();var ar=at.parent().height();var aw=au.position.top>0?au.position.top+(an/2):0;var aq=au.position.left>0?au.position.left+(an/2):0;var ap={top:aw>0?((aw/ar)*100):0,left:aq>0?((aq/av)*100):0,zoom:V("zoom")};Q(ap);if(ah){af(ap.zoom)}else{if(ad=="grid"){i(ab.parent(),ac,false,ap)}}};Z.draggable({containment:"parent",drag:Y,stop:Y});if(ah){var P=V("zoom");al=x("").addClass("focusZoomSlider").css({"margin-top":"5px"});W=x("").addClass("focusZoomBox").css({position:"absolute",background:"rgba(0,0,0,0.5)"});aj.prepend(W);X.after(al);ab.attr("src",X.attr("src"));al.slider({min:0,max:50,value:P,range:"max",slide:function(an,ao){af(ao.value)}});af(P)}else{aj.css("background-color","rgba(0,0,0,0.5)")}}function D(P){$focusCircle=P.find(".focusCircle");if($focusCircle.length){var Q=$focusCircle.closest(".focusWrap");Q.find(".focusZoomSlider").slider("destroy").remove();Q.find(".focusZoomBox").remove();Q.removeClass("focusWrap");$focusCircle.draggable("destroy");$focusCircle.parent().removeClass("focusActive");$focusCircle.remove();var R=P.find(".InputfieldImageButtonFocus");if(R.length){$icon=R.find("i");$icon.removeClass("focusIconActive").toggleClass($icon.attr("data-toggle"))}}}function z(R,Q,W){R=parseInt(R);var U=100;var V=(W/Q*100);var T=U-V;var S=R+(V/2);var P=0;if(S>=100){P=Q-W}else{if(S<=Math.floor(T/2)){P=0}else{P=Math.ceil((Q-W)/100*R)}}return P}function b(T,Z,af,ad,ac,U,R){var ae=U/R;var V=U/ad*100;var S=R/ac*100;if(V>=S){var Q=ad;var ab=ad/ae}else{var ab=ac;var Q=ac*ae}var P=Q-(Q*af/100);var Y=ab-(ab*af/100);var aa=true;if(!aa){if(P0&&Q.closest(".InputfieldImageFocusZoom").length){if(W>=ae){var ac="100%";var ag="none"}else{var ac="none";var ag="100%"}var ah=1+((P/100)*2);var Z=aa.top;var S=aa.left;if(Z>92||Z>100){Z=100}if(S>92||S>100){S=100}if(Z<0){Z=0}if(S<0){S=0}var R=b(S,Z,P,W,ae,V,V);T.css({top:Z+"%",left:S+"%","transform-origin":"top left",transform:"scale("+ah+") translate3d(-"+S+"%, -"+Z+"%, 0)","max-width":ag,"max-height":ac})}else{if(W>=ae){T.attr("height",V).removeAttr("width");if(aa.left<1){aa.left=0.001}T.css({"max-height":"100%","max-width":"none",top:"50%",left:aa.left+"%",transform:"translate3d(-"+aa.left+"%, -50%, 0)"})}else{if(ae>W){T.attr("width",V).removeAttr("height");if(aa.top<1){aa.top=0.001}T.css({"max-height":"none","max-width":"100%",top:aa.top+"%",left:"50%",transform:"translate3d(-50%, -"+aa.top+"%, 0)"})}else{T.css({"max-height":"100%","max-width":"none",top:"50%",left:"50%",transform:"translate3d(-50%, -50%, 0)"});T.removeAttr("width").attr("height",V)}}}}var W=T.width();if(W){Q.css({width:(U?W+"px":V+"px"),height:V+"px"})}else{var Y=Q.attr("data-tries");if(!Y){Y=0}if(typeof Y=="undefined"){Y=0}Y=parseInt(Y);if(Y>3){Q.css({width:V+"px",height:V+"px"})}else{s.push(Q);Q.attr("data-tries",Y+1)}}}function E(Q){if(Q.find(".InputfieldImageListToggle").length){return}var T=x("").append("");var V=x("").append("");var P=x("").append("");var U="InputfieldImageListToggle--active";var S="";var R=function(ab){var aa=x(this);var Y=aa.closest(".Inputfield");var W=aa.attr("href");var X;var ac=aa.parent().children("."+U);var Z=ac.attr("href");ac.removeClass(U);aa.addClass(U);D(Y);if(W=="list"){if(!Y.hasClass("InputfieldImageEditAll")){Y.find(".InputfieldImageEdit--active .InputfieldImageEdit__close").click();Y.addClass("InputfieldImageEditAll")}X=I(Y,"listSize");m(Y,X);f(Y,"mode","list")}else{if(W=="left"){Y.removeClass("InputfieldImageEditAll");X=I(Y,"size");k(Y,X,true);f(Y,"mode","left");N()}else{if(W=="grid"){Y.removeClass("InputfieldImageEditAll");X=I(Y,"size");k(Y,X,false);f(Y,"mode","grid");if(Z=="left"){setTimeout(function(){k(Y,X,false)},100)}}}}F(Y.find(".gridImages"));aa.blur();return false};T.click(R);V.click(R);P.click(R);if(Q.hasClass("InputfieldImage")){Q.find(".InputfieldHeader").append(T).append(V).append(P);S=I(Q,"mode")}else{x(".InputfieldImage .InputfieldHeader",Q).append(T).append(V).append(P)}if(S=="list"){T.click()}else{if(S=="left"){V.click()}else{}}}function C(U){var R=U.children(".InputfieldHeader");if(R.children(".InputfieldImageSizeSlider").length){return}var T=U.find(".gridImages");var Q=T.attr("data-gridsize");var S=Q/2;var P=Q*2;var V=x('');R.append(V);V.slider({min:S,max:P,value:I(U,"size"),range:"min",slide:function(Y,aa){var Z=aa.value;var ab=15;var ac=Math.floor(Q/ab);var W=Z-S;var X=Math.floor(ab+(W/ac));if(U.hasClass("InputfieldImageEditAll")){f(U,"size",Z);m(U,X)}else{f(U,"listSize",X);k(U,Z)}},start:function(W,X){if(U.find(".InputfieldImageEdit:visible").length){U.find(".InputfieldImageEdit__close").click()}},stop:function(W,X){N(U)}})}function f(Q,T,S){var R=I(Q);var U=Q.attr("id");var P=U?U.replace("wrap_Inputfield_",""):"";if(!P.length||typeof S=="undefined"){return}if(R[P][T]==S){return}R[P][T]=S;x.cookie("InputfieldImage",R);d=R}function I(Q,T){if(d&&typeof T=="undefined"){return d}var U=Q.attr("id");var P=U?U.replace("wrap_Inputfield_",""):"na";var S=d?d:x.cookie("InputfieldImage");var R=null;if(!S){var S={}}if(typeof S[P]=="undefined"){S[P]={}}if(typeof S[P].size=="undefined"){S[P].size=parseInt(Q.find(".gridImages").attr("data-size"))}if(typeof S[P].listSize=="undefined"){S[P].listSize=23}if(typeof S[P].mode=="undefined"){S[P].mode=Q.find(".gridImages").attr("data-gridMode")}if(d==null){d=S}if(typeof T=="undefined"){R=S}else{if(T===true){R=S[P]}else{if(typeof S[P][T]!="undefined"){R=S[P][T]}}}return R}function a(T){if(T.hasClass("InputfieldStateCollapsed")){return}var U=parseInt(T.find(".InputfieldImageMaxFiles").val());var S=T.find(".gridImages");var R=I(T,"size");var V=I(T,"mode");var Q=V=="left"?true:false;if(!R){R=S.attr("data-gridsize")}R=parseInt(R);if(T.hasClass("InputfieldImageEditAll")||V=="list"){var P=I(T,"listSize");m(T,P)}else{k(T,R,Q)}if(!T.hasClass("InputfieldImageInit")){T.addClass("InputfieldImageInit");if(T.hasClass("InputfieldRenderValueMode")){return q(T)}else{if(U==1){T.addClass("InputfieldImageMax1");v(T)}else{F(S)}}E(T);C(T)}y(T);T.on("change",".InputfieldFileActionSelect",function(){var W=x(this).next(".InputfieldFileActionNote");if(x(this).val().length){W.fadeIn()}else{W.hide()}})}function M(){x("body").addClass("ie-no-drop");x(".InputfieldImage.InputfieldFileMultiple").each(function(){var Q=x(this),S=parseInt(Q.find(".InputfieldFileMaxFiles").val()),P=Q.find(".gridImages"),R=Q.find(".InputfieldImageUpload");R.on("change","input[type=file]",function(){var W=x(this),U=W.parent(".InputMask");if(W.val().length>1){U.addClass("ui-state-disabled")}else{U.removeClass("ui-state-disabled")}if(W.next("input.InputfieldFile").length>0){return}var T=P.children("li").length+R.find("input[type=file]").length+1;if(S>0&&T>=S){return}R.find(".InputMask").not(":last").each(function(){var X=x(this);if(X.find("input[type=file]").val()<1){X.remove()}});var V=U.clone().removeClass("ui-state-disabled");V.children("input[type=file]").val("");V.insertAfter(U)})})}function O(R){var Q;if(R.length>0){Q=R.find(".InputfieldImageUpload")}else{Q=x(".InputfieldImageUpload")}Q.each(function(U){var V=x(this);var T=V.closest(".InputfieldContent");if(V.hasClass("InputfieldImageInitUpload")){return}S(T,U);V.addClass("InputfieldImageInitUpload")});function S(ac,ao){var ab=ac.parents("form");var T=ac.closest(".InputfieldRepeaterItem");var X=T.length?T.attr("data-editUrl"):ab.attr("action");X+=(X.indexOf("?")>-1?"&":"?")+"InputfieldFileAjax=1";var au=ab.find("input._post_token");var aa=au.attr("name");var af=au.val();var ae=ac.find(".InputfieldImageErrors").first();var W=ac.find(".InputfieldImageUpload").data("fieldname");W=W.slice(0,-2);var am=ac.closest(".Inputfield.InputfieldImage");var at=ac.find(".InputfieldImageUpload").data("extensions").toLowerCase();var al=ac.find(".InputfieldImageUpload").data("maxfilesize");var ad=ac.find("input[type=file]").get(0);var V=ac.find(".gridImages");var ap=V.get(0);var ah=V.data("gridsize");var ai=null;var ag=parseInt(ac.find(".InputfieldImageMaxFiles").val());var ar=o(am);var an=ar.maxWidth>0||ar.maxHeight>0||ar.maxSize>0;aq(ac);if(ag!=1){ak(V)}V.children().addClass("InputfieldFileItemExisting");am.on("pwimageupload",function(av,aw){aj([aw.file],aw.xhr)});function Z(aw,av){if(typeof av!=="undefined"){aw=""+av+": "+aw}return""+aw+""}function U(aw){var av=new String(aw).substring(aw.lastIndexOf("/")+1);if(av.lastIndexOf(".")!=-1){av=av.substring(0,av.lastIndexOf("."))}return av}function aq(aw){if(aw.hasClass("InputfieldImageDropzoneInit")){return}var az=aw.get(0);var ay=aw.closest(".Inputfield");function av(){if(ay.hasClass("pw-drag-in-file")){return}aw.addClass("ui-state-hover");ay.addClass("pw-drag-in-file")}function ax(){if(!ay.hasClass("pw-drag-in-file")){return}aw.removeClass("ui-state-hover");ay.removeClass("pw-drag-in-file")}az.addEventListener("dragleave",function(){ax()},false);az.addEventListener("dragenter",function(aA){aA.preventDefault();av()},false);az.addEventListener("dragover",function(aA){if(!aw.is("ui-state-hover")){av()}aA.preventDefault();aA.stopPropagation();return false},false);az.addEventListener("drop",function(aA){aj(aA.dataTransfer.files);ax();aA.preventDefault();aA.stopPropagation();return false},false);aw.addClass("InputfieldImageDropzoneInit")}function ak(aD){var aH=null;var aF=false;var aw=null;var av=aD.closest(".Inputfield");function aA(){av.addClass("pw-drag-in-file")}function aG(){av.removeClass("pw-drag-in-file")}function az(aJ){var aN=aJ.offset();var aK=aJ.width();var aI=aJ.height();var aM=aN.left+aK/2;var aL=aN.top+aI/2;return{clientX:aM,clientY:aL}}function aC(){return aD.find(".InputfieldImageEdit--active").length>0}function aB(aJ){if(aC()){return}aJ.preventDefault();aJ.stopPropagation();aA();aF=false;if(aH==null){var aI=aD.attr("data-size")+"px";var aK=x("").addClass("gridImage__overflow");if(aD.closest(".InputfieldImageEditAll").length){aK.css({width:"100%",height:aI})}else{aK.css({width:aI,height:aI})}aH=x("").addClass("ImageOuter gridImage gridImagePlaceholder").append(aK);aD.append(aH)}var aL=az(aH);aH.simulate("mousedown",aL)}function aE(aI){if(aC()){return}aI.preventDefault();aI.stopPropagation();aA();aF=false;if(aH==null){return}var aJ={clientX:aI.originalEvent.clientX,clientY:aI.originalEvent.clientY};aH.simulate("mousemove",aJ)}function ay(aI){if(aC()){return}aI.preventDefault();aI.stopPropagation();if(aH==null){return false}aF=true;if(aw){clearTimeout(aw)}aw=setTimeout(function(){if(!aF||aH==null){return}aH.remove();aH=null;aG()},1000)}function ax(aI){if(aC()){return}aG();aF=false;var aJ={clientX:aI.clientX,clientY:aI.clientY};aH.simulate("mouseup",aJ);l=aH.next(".gridImage");aH.remove();aH=null}if(aD.length&&!aD.hasClass("gridImagesInitDropInPlace")){aD.on("dragenter",aB);aD.on("dragover",aE);aD.on("dragleave",ay);aD.on("drop",ax);aD.addClass("gridImagesInitDropInPlace")}}function Y(aU,aI,aE){var aR=ProcessWire.config.InputfieldImage.labels;var aB=parseInt(aU.size/1024,10)+" kB";var aT='";var aW=x(''),aO=x(aT),aC=x(''),av=x(''),aL=x(""),aN=x(""),aQ=x(' '),aP=x('
'),aw,aG,aV,aJ=URL.createObjectURL(aU),ax=am.find(".gridImages"),az=ag==1,aM=I(am,"size"),aA=I(am,"listSize"),ay=am.hasClass("InputfieldImageEditAll"),aF=x('![]()
');aC.append(aF);aL.find(".gridImage__inner").append(aQ);aL.find(".gridImage__inner").append(aP.css("display","none"));aL.find(".gridImage__inner").append(aN);av.append(x(''+aB+""));if(ay){aC.css("width",aA+"%");av.css("width",(100-aA)+"%")}else{aC.css({width:aM+"px",height:aM+"px"})}aW.append(aO).append(aC).append(aL).append(av);aF.attr({src:aJ,"data-original":aJ});img=new Image();img.addEventListener("load",function(){aO.find(".dimensions").html(this.width+" × "+this.height);var aX=Math.min(this.width,this.height)/aM;aF.attr({width:this.width/aX,height:this.height/aX})},false);img.src=aJ;if(typeof aE!="undefined"){aG=aE}else{aG=new XMLHttpRequest()}function aH(aX){if(typeof aX!="undefined"){if(!aX.lengthComputable){return}aN.attr("value",parseInt((aX.loaded/aX.total)*100))}x("body").addClass("pw-uploading");aP.css("display","block")}aG.upload.addEventListener("progress",aH,false);aG.addEventListener("load",function(){aG.getAllResponseHeaders();var a0=x.parseJSON(aG.responseText);if(typeof a0.ajaxResponse!="undefined"){a0=a0.ajaxResponse}var aY=a0.length>1;if(a0.error!==undefined){a0=[a0]}for(var aZ=0;aZ-1){a3=a3.substring(0,a3.indexOf("?"))}var a1=a3.substring(a3.lastIndexOf(".")+1).toLowerCase();a3=a3.substring(0,a3.lastIndexOf("."));if(a1==a7){a8.children("span").text(a3).removeAttr("contenteditable")}a2.find(".gridImage__edit").click()}c.file="";c.item=null;c.edit=null}if(ai){clearTimeout(ai)}l=null;ai=setTimeout(function(){if(ag!=1){F(ax)}else{v(am)}x("body").removeClass("pw-uploading");ax.trigger("AjaxUploadDone")},500);am.trigger("change").removeClass("InputfieldFileEmpty")},false);if(c.edit){c.edit.find(".InputfieldImageEdit__close").click()}else{if(am.find(".InputfieldImageEdit:visible").length){am.find(".InputfieldImageEdit__close").click()}}if(c.item){c.item.replaceWith(aW);c.item=aW}else{if(l&&l.length){l.before(aW)}else{ax.append(aW)}}function aS(aX,aZ){if(typeof aE=="undefined"){aG.open("POST",X,true)}aG.setRequestHeader("X-FILENAME",encodeURIComponent(aX.name));aG.setRequestHeader("X-FIELDNAME",W);if(c.item){aG.setRequestHeader("X-REPLACENAME",c.file)}aG.setRequestHeader("Content-Type","application/octet-stream");aG.setRequestHeader("X-"+aa,af);aG.setRequestHeader("X-REQUESTED-WITH","XMLHttpRequest");if(typeof aZ!="undefined"&&aZ!=false){aG.send(aZ)}else{aG.send(aX)}N();am.trigger("change");var aY=am.find(".InputfieldFileItem").length;if(aY==1){am.removeClass("InputfieldFileEmpty").removeClass("InputfieldFileMultiple").addClass("InputfieldFileSingle")}else{if(aY>1){am.removeClass("InputfieldFileEmpty").removeClass("InputfieldFileSingle").addClass("InputfieldFileMultiple")}}}aH();var aD=aU.name.substring(aU.name.lastIndexOf(".")+1).toLowerCase();if(an&&(aD=="jpg"||aD=="jpeg"||aD=="png"||aD=="gif")){var aK=new PWImageResizer(ar);aP.addClass("pw-resizing");aK.resize(aU,function(aX){aP.removeClass("pw-resizing");aS(aU,aX)})}else{aS(aU)}}function aj(av,aC){var aA=function(aE){return parseInt(aE/1024,10)};if(typeof av==="undefined"){ap.innerHTML="No support for the File API in this web browser";return}for(var ay=0,ax=av.length;ayal&&al>2000000){var aw=aA(av[ay].size),az=aA(al);aD="Filesize "+aw+" kb is too big. Maximum allowed is "+az+" kb";ae.append(Z(aD,av[ay].name))}else{if(typeof aC!="undefined"){Y(av[ay],aB,aC)}else{Y(av[ay],aB)}}}if(ag==1){break}}}ad.addEventListener("change",function(av){aj(this.files);av.preventDefault();av.stopPropagation();this.value=""},false)}function P(){var T=".InputfieldImageEdit__imagewrapper img";x(document).on("dragenter",T,function(){var W=x(this);if(W.closest(".InputfieldImageMax1").length){return}var X=W.attr("src");var U=W.closest(".InputfieldImageEdit");var V=W.closest(".InputfieldImageEdit__imagewrapper");V.addClass("InputfieldImageEdit__replace");c.file=new String(X).substring(X.lastIndexOf("/")+1);c.item=x("#"+U.attr("data-for"));c.edit=U}).on("dragleave",T,function(){var V=x(this);if(V.closest(".InputfieldImageMax1").length){return}var U=V.closest(".InputfieldImageEdit__imagewrapper");U.removeClass("InputfieldImageEdit__replace");c.file="";c.item=null;c.edit=null})}P()}function o(Q){var P={maxWidth:0,maxHeight:0,maxSize:0,quality:1,autoRotate:true,debug:ProcessWire.config.debug};var R=Q.attr("data-resize");if(typeof R!="undefined"&&R.length){R=R.split(";");P.maxWidth=parseInt(R[0]);P.maxHeight=parseInt(R[1]);P.maxSize=parseFloat(R[2]);P.quality=parseFloat(R[3])}return P}function L(){x(".InputfieldImage.Inputfield").each(function(){a(x(this))});A();if(u()){O("")}else{M()}x(document).on("reloaded",".InputfieldImage",function(){var P=x(this);a(P);O(P)}).on("wiretabclick",function(R,Q,P){Q.find(".InputfieldImage").each(function(){a(x(this))})}).on("opened",".InputfieldImage",function(){a(x(this))})}L()}jQuery(document).ready(function(a){InputfieldImage(a)});
\ No newline at end of file
diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.module b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.module
index a1eee887..d3c8e17e 100755
--- a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.module
+++ b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.module
@@ -108,6 +108,7 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu
if($gridSize >= (self::defaultGridSize * 2)) $gridSize = self::defaultGridSize; // establish max of 259
$this->set('gridSize', $gridSize);
$this->set('gridMode', 'grid'); // one of "grid", "left" or "list"
+ $this->set('focusMode', 'on'); // One of "on", "zoom" or "off"
// adminThumbScale is no longer in use (here in case descending module using it)
$this->set('adminThumbScale', empty($options['scale']) ? 1.0 : (float) $options['scale']);
@@ -175,6 +176,10 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu
$jqueryCore->use('cookie');
$modules->loadModuleFileAssets('InputfieldFile');
$modules->getInstall("JqueryMagnific");
+
+ if(!$renderValueMode && $this->focusMode == 'zoom') {
+ $this->addClass('InputfieldImageFocusZoom', 'wrapClass');
+ }
$config->js('InputfieldImage', array(
'labels' => $this->labels,
@@ -776,10 +781,12 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu
$out .= "";
// Focus
- $iconA = $pagefile->hasFocus ? 'fa-check-circle-o' : 'fa-circle-o';
- $iconB = $pagefile->hasFocus ? 'fa-check-circle' : 'fa-dot-circle-o';
- $buttonText = str_replace('{out}', " $labels[focus]", $this->themeSettings['buttonText']);
- $out .= "";
+ if($this->focusMode && $this->focusMode != 'off') {
+ $iconA = $pagefile->hasFocus ? 'fa-check-circle-o' : 'fa-circle-o';
+ $iconB = $pagefile->hasFocus ? 'fa-check-circle' : 'fa-dot-circle-o';
+ $buttonText = str_replace('{out}', " $labels[focus]", $this->themeSettings['buttonText']);
+ $out .= "";
+ }
// Variations
$buttonText = " $labels[variations] ($variationCount)";
@@ -969,6 +976,21 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu
$f->addOption('left', '[i.fa.fa-tasks][/i] ' . $this->_('Proportional grid images'));
$f->addOption('list', '[i.fa.fa-th-list][/i] ' . $this->_('Vertical list (verbose)'));
$f->attr('value', $this->gridMode);
+ $f->columnWidth = 50;
+ $inputfields->add($f);
+
+ /** @var InputfieldRadios $f */
+ $f = $this->wire('modules')->get('InputfieldRadios');
+ $f->attr('name', 'focusMode');
+ $f->label = $this->_('Focus point selection');
+ $f->description = $this->_('Enables a draggable focus point to select the subject of an image. This helps to generate non-proportional crops.') . ' ' .
+ $this->_('A preview of the focus point is also shown when images are in the “Square grid images” mode.');
+ $f->addOption('on', $this->_('Focus point'));
+ $f->addOption('zoom', $this->_('Focus point and zoom'));
+ $f->addOption('off', $this->_('Disabled'));
+ $f->attr('value', $this->focusMode);
+ $f->icon = 'crosshairs';
+ $f->columnWidth = 50;
$inputfields->add($f);
/** @var InputfieldFieldset $fieldset */