From e20562b5c1840ccf61a58c571bbd625fed7d1df0 Mon Sep 17 00:00:00 2001 From: Ryan Cramer Date: Mon, 5 Mar 2018 08:45:39 -0500 Subject: [PATCH] Add @horst-n improvements to ImageSizerEngine and InputfieldImage focus+zoom features, plus add some other adjustments and improvements in InputfieldImage.js --- wire/core/ImageSizerEngine.php | 33 +- .../InputfieldImage/InputfieldImage.css | 8 +- .../InputfieldImage/InputfieldImage.js | 310 +++++++++++------- .../InputfieldImage/InputfieldImage.min.js | 2 +- .../InputfieldImage/InputfieldImage.scss | 15 +- 5 files changed, 221 insertions(+), 147 deletions(-) diff --git a/wire/core/ImageSizerEngine.php b/wire/core/ImageSizerEngine.php index 9d593e25..e38d8445 100755 --- a/wire/core/ImageSizerEngine.php +++ b/wire/core/ImageSizerEngine.php @@ -1704,27 +1704,29 @@ abstract class ImageSizerEngine extends WireData implements Module, Configurable * @param string $focus (focus point in percent, like: 54.7%) * @param int $sourceDimension (source image width or height) * @param int $cropDimension (target crop-image width or height) + * @param int $zoom * * @return int $position (crop position x or y in pixel) * */ - protected function getFocusZoomPosition($focus, $sourceDimension, $cropDimension) { + protected function getFocusZoomPosition($focus, $sourceDimension, $cropDimension, $zoom) { $focus = intval($focus); // string with float value and percent char, (needs to be converted to integer) - $source = 100; // the source-dimensions percent-value (100) - $target = ($cropDimension / $sourceDimension * 100); // the crop-dimensions percent-value - $rest = $source - $target; // the unused dimension-part-value in percent - $tmp = $focus + ($target / 2); // temp value + $scale = 1 + (($zoom / 100) * 2); + $focusPX = ($sourceDimension / 100 * $focus); + $posMinPX = $cropDimension / 2 / $scale; + $posMaxPX = $sourceDimension - ($cropDimension / 2); // calculate the position in pixel ! - if($tmp >= 100) { - $position = $sourceDimension - $cropDimension; - } else if($tmp <= floor($rest / 2)) { - $position = 0; + if($focusPX >= $posMaxPX) { + $posPX = $sourceDimension - $cropDimension; + } else if($focusPX <= $posMinPX) { + $posPX = 0; } else { - $position = ceil(($sourceDimension - $cropDimension) / 100 * $focus); + $posPX = $focusPX - ($cropDimension / 2); + if(0 > $posPX) $posPX = 0; } - return $position; + return $posPX; } /** @@ -1752,7 +1754,6 @@ abstract class ImageSizerEngine extends WireData implements Module, Configurable if($percentW >= $percentH) { // check wich one is greater $maxW = $fullWidth; // if percentW is greater, maxW becomes the original Width $maxH = $fullWidth / $ratioFinal; // ... and maxH gets calculated via the ratio - } else { $maxH = $fullHeight; // if percentH is greater, maxH becomes the original Height $maxW = $fullHeight * $ratioFinal; // ... and maxW gets calculated via the ratio @@ -1775,12 +1776,12 @@ abstract class ImageSizerEngine extends WireData implements Module, Configurable } // calculate the crop positions - $tmpX = $this->getFocusZoomPosition($this->cropping[0], $fullWidth, $cropW); // calculate the x-position - $tmpY = $this->getFocusZoomPosition($this->cropping[1], $fullHeight, $cropH); // calculate the y-position + $posX = $this->getFocusZoomPosition($this->cropping[0], $fullWidth, $cropW, $zoom); // calculate the x-position + $posY = $this->getFocusZoomPosition($this->cropping[1], $fullHeight, $cropH, $zoom); // calculate the y-position return array( - 0 => (int) $tmpX, - 1 => (int) $tmpY, + 0 => (int) $posX, + 1 => (int) $posY, 2 => (int) $cropW, 3 => (int) $cropH ); diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css index fc1743a8..073e4bd0 100755 --- a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css +++ b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css @@ -378,9 +378,13 @@ cursor: move; width: 40px; height: 40px; - border: 3px solid #fff; + margin: -20px !important; + border: 3px solid #EB1D61; border-radius: 50%; - background-color: rgba(255, 255, 255, 0.3); } + background-color: rgba(255, 255, 255, 0.6); + background-image: url(data:image/gif;base64,R0lGODlhBAAEAIAAAOsdYQAAACH5BAAAAAAALAAAAAAEAAQAAAIEhI8JBQA7); + background-position: 15px 15px; + background-repeat: no-repeat; } .InputfieldImage .ImageData { display: none; } diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js index 97bec46a..f6e7b885 100755 --- a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js +++ b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js @@ -30,6 +30,9 @@ function InputfieldImage($) { // grid items to retry for sizing by setGridSize() methods var retryGridItems = []; + // true when the grid is being resized with the slider + var gridSliding = false; + /** * Whether or not AJAX drag/drop upload is allowed? * @@ -390,19 +393,25 @@ function InputfieldImage($) { // get the focus object, optionally for a specific focusStr function getFocus(focusStr) { + if(typeof focusStr == "undefined") { if(focusData !== null) return focusData; var $input = $edit.find('.InputfieldImageFocus'); var focusStr = $input.val(); } + var a = focusStr.split(' '); - var data = { - 'top': (typeof a[0] == "undefined" ? 50.0 : parseFloat(a[0])), - 'left': (typeof a[1] == "undefined" ? 50.0 : parseFloat(a[1])), - 'zoom': (typeof a[2] == "undefined" ? 0 : parseInt(a[2])) + var top = (typeof a[0] == "undefined" ? 50.0 : parseFloat(a[0])); + var left = (typeof a[1] == "undefined" ? 50.0 : parseFloat(a[1])); + var zoom = (typeof a[2] == "undefined" ? 0 : parseInt(a[2])); + + focusData = { + 'top': top > 100 ? 100 : top, + 'left': left > 100 ? 100 : left, + 'zoom': zoom > 100 ? 0 : zoom }; - focusData = data; - return data; + + return focusData; } // get focus string @@ -441,10 +450,14 @@ function InputfieldImage($) { var $overlay = $focusCircle.parent(); var w = $overlay.width(); var h = $overlay.height(); - 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 + var x = Math.round((focus.left / 100) * w); + var y = Math.round((focus.top / 100) * h); + if(x < 0) x = 0; if(y < 0) y = 0; + if(x > w) x = w; // horst: just to be on the safe side with following or actual code changes + if(y > h) y = h; + $focusCircle.css({ 'top': y + 'px', 'left': x + 'px' @@ -459,7 +472,8 @@ function InputfieldImage($) { } $focusArea.css({ 'height': $img.height() + 'px', - 'width': $img.width() + 'px' + 'width': $img.width() + 'px', + 'background-color': 'rgba(0,0,0,0.7)' }).addClass('focusActive'); // set the draggable circle for focus @@ -477,15 +491,16 @@ function InputfieldImage($) { // 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; - + + //var zoomBoxSize, focusCircleSize, focus, top, left, scale, faWidth, faHeight; + var zoomBoxSize, focus, faWidth, faHeight; + // if no zoomPercent argument provided, use the last one if(typeof zoomPercent == "undefined") zoomPercent = lastZoomPercent; lastZoomPercent = zoomPercent; faWidth = $focusArea.width(); faHeight = $focusArea.height(); - + if(faWidth > faHeight) { $zoomBox.height((100 - zoomPercent) + '%'); // set width in percent zoomBoxSize = $zoomBox.height(); // get width in pixels @@ -498,19 +513,21 @@ function InputfieldImage($) { // 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', + var crop = getFocusZoomCropDimensions(focus.left, focus.top, zoomPercent, faWidth, faHeight, zoomBoxSize); + $zoomBox.css({ + 'top': crop.top + 'px', + 'left': crop.left + 'px', + 'background-position': '-' + crop.left + 'px -' + crop.top + 'px', + 'background-size': faWidth + 'px ' + faHeight + 'px' }); // save zoom percent - focus.zoom = crop.zoom; // crop.zoom may have been adjusted to prevent upscaling - setFocusProperty('zoom', crop.zoom); - + focus.zoom = zoomPercent; + setFocusProperty('zoom', focus.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 @@ -519,11 +536,13 @@ function InputfieldImage($) { var circleSize = $this.outerHeight(); var w = $this.parent().width(); var h = $this.parent().height(); - 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 top = ui.position.top > 0 ? ui.position.top : 0; + var left = ui.position.left > 0 ? ui.position.left : 0; + top = top > 0 ? ((top / h) * 100) : 0; + left = left > 0 ? ((left / w) * 100) : 0; var newFocus = { - 'top': t > 0 ? ((t / h) * 100) : 0, - 'left': l > 0 ? ((l / w) * 100) : 0, + 'top': top, + 'left': left, 'zoom': getFocusProperty('zoom') }; setFocus(newFocus); @@ -547,11 +566,13 @@ function InputfieldImage($) { $zoomSlider = $("
").addClass('focusZoomSlider').css({ 'margin-top': '5px' }); + $zoomBox = $("
").addClass('focusZoomBox').css({ 'position': 'absolute', - 'background': 'rgba(0,0,0,0.5)' - //'box-shadow': '0 0 20px rgba(0,0,0,.9)' + 'background': 'transparent', + 'background-image': 'url(' + $img.attr('src') + ')' }); + $focusArea.prepend($zoomBox); $img.after($zoomSlider); $thumb.attr('src', $img.attr('src')); @@ -590,91 +611,125 @@ function InputfieldImage($) { } /** - * Get focus zoom position for either X or Y (duplicated from Horst’s PHP version in ImageSizerEngine) + * Get focus zoom position for either X or Y * - * @param focus Left or Top percentage + * A variation from Horst's PHP version in ImageSizerEngine, here simplified for square preview areas. + * + * @param focusPercent 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); - } + function getFocusZoomPosition(focusPercent, sourceDimension, cropDimension) { + var focusPX = parseInt(sourceDimension * focusPercent / 100); + var position = parseInt(focusPX - (cropDimension / 2)); + var maxPosition = parseInt(sourceDimension - cropDimension); + + if(0 > position) position = 0; + if(maxPosition < position) position = maxPosition; 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 + * Get focus zoom crop dimensions (a variation from Horst's PHP version in ImageSizerEngine, here simplified for square preview areas) + * + * @param focusLeft Left percent + * @param focusTop Top percent + * @param zoomPercent Zoom percent + * @param faWidth Width of the thumbnail image + * @param faHeight Height of the thumbnail image + * @param zoomBoxSize Width and Height of the ZoomArea * @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 - } + function getFocusZoomCropDimensions(focusLeft, focusTop, zoomPercent, faWidth, faHeight, zoomBoxSize) { + + // calculate the max crop dimensions in percent + var percentW = zoomBoxSize / faWidth * 100; // calculate percentage of the crop width in regard of the original width + var percentH = zoomBoxSize / faHeight * 100; // calculate percentage of the crop height in regard of the original height + + // use the smaller crop dimension + var maxDimension = percentW >= percentH ? faWidth : faHeight; // 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; - } - } + var cropDimension = maxDimension - (maxDimension * zoomPercent / 100); // to get the final crop Width and Height, the amount for zoom-in needs to get stripped out // calculate the crop positions - var tmpX = getFocusZoomPosition(left, fullWidth, cropW); // calculate the x-position - var tmpY = getFocusZoomPosition(top, fullHeight, cropH); // calculate the y-position - + var posLeft = getFocusZoomPosition(focusLeft, faWidth, cropDimension); // calculate the x-position + var posTop = getFocusZoomPosition(focusTop, faHeight, cropDimension); // calculate the y-position + // var percentLeft = posLeft / faWidth * 100; + // var percentTop = posTop / faHeight * 100; + return { - 'left': tmpX, - 'top': tmpY, - 'width': cropW, - 'height': cropH, - 'zoom': zoom // adjusted zoom + 'left': posLeft, + 'top': posTop, + 'width': cropDimension, + 'height': cropDimension }; } - + + /** + * Get focus zoom position for either X or Y, intended for use with getFocusZoomCropDimensions4GridviewSquare() + * + * via Horst + * + * @param focusPercent Left or Top percentage + * @param sourceDimPX Width or Height from the full image + * @param gridViewPX Width and Height from the square GridView-Thumbnail + * @param zoomPercent Zoom percent + * @param scale + * @param smallestSidePX the smallest Dimension from the full image + * @returns {number} + * + */ + function getFocusZoomPosition4GridviewSquare(focusPercent, sourceDimPX, gridViewPX, zoomPercent, scale, smallestSidePX) { + var sourceDimPX = sourceDimPX * scale; // is used to later get the position in pixel + var gridViewPercent = gridViewPX / sourceDimPX * 100; // get percent of the gridViewBox in regard to the current image side size (width|height) + var adjustPercent = gridViewPercent / 2; // is used to calculate position from the circle center point to [left|top] percent + var posPercent = focusPercent - adjustPercent; // get adjusted position in percent + + var posMinVal = 0; + var posMaxVal = 100 - gridViewPercent; + if(posPercent <= posMinVal) posPercent = 0; + if(posPercent >= posMaxVal) posPercent = posMaxVal; + + var posPX = sourceDimPX / 100 * posPercent / scale; + posPX = -1 * parseInt(posPX); + + //console.log(['gridView1:', 'sourceDimPX='+sourceDimPX, 'gridViewPX='+gridViewPX, 'gridViewPercent='+gridViewPercent, 'adjustPercent='+adjustPercent, 'minVal='+posMinVal, 'maxVal='+posMaxVal, 'posPercent='+posPercent, 'posPX='+posPX]); + return posPX; + } + + /** + * Get focus zoom clip rect for the square GridView-Thumbnails + * + * via Horst + * + * @param focusLeft Left percent + * @param focusTop Top percent + * @param zoomPercent Zoom percent + * @param w Width of the thumbnail image + * @param h Height of the thumbnail image + * @param gridViewSize Dimension of the GridView-Thumbnail + * @param scale + * @returns {{transformLeft: number, transformTop: number, scale: number}} + * + */ + function getFocusZoomCropDimensions4GridviewSquare(focusLeft, focusTop, zoomPercent, w, h, gridViewSize, scale) { + var smallestSidePX = w >= h ? h : w; + var posLeft = getFocusZoomPosition4GridviewSquare(focusLeft, w, gridViewSize, zoomPercent, scale, smallestSidePX); + var posTop = getFocusZoomPosition4GridviewSquare(focusTop, h, gridViewSize, zoomPercent, scale, smallestSidePX); + var transformLeft = parseInt(posLeft); + var transformTop = parseInt(posTop); + return { + 'transformLeft': transformLeft, + 'transformTop': transformTop, + 'scale': scale + }; + } + /** * Tear down the InputfieldImageEdit panel * @@ -1113,33 +1168,36 @@ function InputfieldImage($) { 'transform': 'translate3d(-50%, -50%, 0)' }); - } else if(zoom > 0 && $item.closest('.InputfieldImageFocusZoom').length) { - // focus with zoom + } else if(zoom > 0 && $item.closest('.InputfieldImageFocusZoom').length && !gridSliding) { + // focus with zoom if(w >= h) { var maxHeight = '100%'; var maxWidth = 'none'; + if(w == dataW) { + // scale full dimensions proportionally to gridSize + h = gridSize; + w = (h / dataH) * dataW + } } else { var maxHeight = 'none'; var maxWidth = '100%'; + if(h == dataH) { + // scale full dimensions proportionally to gridSize + w = gridSize; + h = (w / dataW) * dataH; + } } + var scale = 1 + ((zoom / 100) * 2); - var top = focus.top; - var left = focus.left; - 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); - + var crop = getFocusZoomCropDimensions4GridviewSquare(focus.left, focus.top, zoom, w, h, gridSize, scale); $img.css({ - 'top': top + '%', - 'left': left + '%', - 'transform-origin': 'top left', - 'transform': 'scale(' + scale + ') translate3d(-' + left + '%, -' + top + '%, 0)', + 'left': '0px', + 'top': '0px', + 'transform-origin': '0px 0px', + 'transform': 'scale(' + crop.scale + ') translate3d(' + crop.transformLeft + 'px, ' + crop.transformTop + 'px, 0)', 'max-width': maxWidth, 'max-height': maxHeight }); - // console.log("top=" + top + "%, left=" + left + "%, zoom=" + zoom + ", scale=" + scale); } else if(w >= h) { // image width greater than height @@ -1310,33 +1368,37 @@ function InputfieldImage($) { $header.append($slider); + var sizeSlide = function(event, ui) { + var value = ui.value; + var minPct = 15; + var divisor = Math.floor(gridSize / minPct); + var v = value - min; + var listSize = Math.floor(minPct + (v / divisor)); + + if($inputfield.hasClass('InputfieldImageEditAll')) { + setCookieData($inputfield, 'size', value); + setListSize($inputfield, listSize); + } else { + setCookieData($inputfield, 'listSize', listSize); + setGridSize($inputfield, value); + } + }; + $slider.slider({ 'min': min, 'max': max, 'value': getCookieData($inputfield, 'size'), 'range': 'min', - 'slide': function(event, ui) { - - var value = ui.value; - var minPct = 15; - var divisor = Math.floor(gridSize / minPct); - var v = value - min; - var listSize = Math.floor(minPct + (v / divisor)); - - if($inputfield.hasClass('InputfieldImageEditAll')) { - setCookieData($inputfield, 'size', value); - setListSize($inputfield, listSize); - } else { - setCookieData($inputfield, 'listSize', listSize); - setGridSize($inputfield, value); - } - }, + 'slide': sizeSlide, 'start': function(event, ui) { + gridSliding = true; if($inputfield.find(".InputfieldImageEdit:visible").length) { $inputfield.find(".InputfieldImageEdit__close").click(); } }, 'stop': function(event, ui) { + gridSliding = false; + sizeSlide(event, ui); updateGrid($inputfield); } }); diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.min.js b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.min.js index 8751c04e..e731ac5a 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 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='
    '+aR.dimensions+''+aR.na+"
    "+aR.filesize+""+aB+"
    "+aR.variations+"0
    ";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('

    '+aU.name+'

    '+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 +function InputfieldImage(A){var m=null;var c={file:"",item:null,edit:null};var M={type:"image",closeOnContentClick:true,closeBtnInside:true};var d=null;var v=[];var k=false;function x(){var T=window.File&&window.FileList&&window.FileReader;var S=A(".InputfieldAllowAjaxUpload").length>0;var U=A("#PageIDIndicator").length>0;return(T&&(U||S))}function E(U,S,T){S||(S=250);var V,W;return function(){var Z=T||this;var Y=+new Date(),X=arguments;if(V&&Y .gridImage",start:function(X,W){var V=L(T.closest(".Inputfield"),"size");W.placeholder.append(A("
    ").css({display:"block",height:V+"px",width:V+"px"}));U=window.setTimeout(function(){N(T,null)},100);T.addClass("InputfieldImageSorting")},stop:function(X,V){var W=A(this);if(U!==null){V.item.find(".InputfieldImageEdit__edit").click();clearTimeout(U)}W.children("li").each(function(Z){var Y=A(this).find(".InputfieldFileSort");if(Y.val()!=Z){Y.val(Z).change()}});T.removeClass("InputfieldImageSorting")},cancel:".InputfieldImageEdit,.focusArea,input,textarea,button,select,option"};T.sortable(S)}function t(T){var S=A.extend(true,{},M);S.callbacks={elementParse:function(U){var V=A(U.el).attr("data-original");if(typeof V=="undefined"||!V){V=A(U.el).attr("src")}U.src=V}};S.gallery={enabled:true};T.find("img").magnificPopup(S)}function y(T){var S=A.extend(true,{},M);S.callbacks={elementParse:function(U){U.src=A(U.el).attr("src")}};S.gallery={enabled:false};T.find("img").magnificPopup(S)}function J(S){return S.find(".InputfieldImageEdit--active")}function z(S){return A("#"+S.find(".InputfieldImageEdit__edit").attr("data-current"))}function K(U){var S=U.is(":checked");var T=U.parents(".gridImages").find(".gridImage__deletebox");if(S){T.prop("checked","checked").change()}else{T.removeAttr("checked").change()}}function Q(T){if(typeof T=="undefined"){var S=A(".gridImages")}else{var S=T.find(".gridImages")}S.each(function(){var U=A(this),V=J(U);if(V.length){j(z(V),V)}})}function B(S){var V=[];var aa=[];var X=[];var U=0,Z=0,T=0;var Y;if(typeof S=="undefined"){Y=A(".InputfieldImage.Inputfield")}else{Y=S}Y.removeClass("InputfieldImageNarrow InputfieldImageMedium InputfieldImageWide");Y.each(function(){var ac=A(this);var ad=ac.width();if(ad<1){return}if(ad<=500){V[U]=ac;U++}else{if(ad<=900){aa[Z]=ac;Z++}else{X[T]=ac;T++}}});for(var W=0;W100?100:av,left:au>100?100:au,zoom:at>100?0:at};return aj}function X(aq){if(typeof aq=="undefined"){aq=V()}return aq.top+" "+aq.left+" "+aq.zoom}function Y(ar){var aq=V();return aq[ar]}function T(aq){aj=aq;var ar=aq.top+" "+aq.left+" "+aq.zoom;ae.attr("data-focus",ar);W=an.find(".InputfieldImageFocus");if(ar!=W.val()){W.val(ar).trigger("change")}}function ad(at,ar){var aq=V();aq[at]=ar;T(aq)}function ah(){var au=V();var ar=ac.parent();var at=ar.width();var av=ar.height();var aq=Math.round((au.left/100)*at);var aw=Math.round((au.top/100)*av);if(aq<0){aq=0}if(aw<0){aw=0}if(aq>at){aq=at}if(aw>av){aw=av}ac.css({top:aw+"px",left:aq+"px"})}am=aa.siblings(".focusArea");if(!am.length){am=A("
    ").addClass("focusArea");aa.after(am)}am.css({height:aa.height()+"px",width:aa.width()+"px","background-color":"rgba(0,0,0,0.7)"}).addClass("focusActive");ac=am.find(".focusCircle");if(!ac.length){ac=A("
    ").addClass("focusCircle");am.append(ac)}aa.parent().addClass("focusWrap");ah();var ai=function(aw){var ar,aq,av,at;if(typeof aw=="undefined"){aw=U}U=aw;av=am.width();at=am.height();if(av>at){Z.height((100-aw)+"%");ar=Z.height();Z.width(ar)}else{Z.width((100-aw)+"%");ar=Z.width();Z.height(ar)}aq=V();var au=b(aq.left,aq.top,aw,av,at,ar);Z.css({top:au.top+"px",left:au.left+"px","background-position":"-"+au.left+"px -"+au.top+"px","background-size":av+"px "+at+"px"});aq.zoom=aw;ad("zoom",aq.zoom);if(ag=="grid"){i(ae.parent(),af,false,aq)}};var ab=function(ar,ay){var aw=A(this);var aq=aw.outerHeight();var az=aw.parent().width();var av=aw.parent().height();var ax=ay.position.top>0?ay.position.top:0;var at=ay.position.left>0?ay.position.left:0;ax=ax>0?((ax/av)*100):0;at=at>0?((at/az)*100):0;var au={top:ax,left:at,zoom:Y("zoom")};T(au);if(ak){ai(au.zoom)}else{if(ag=="grid"){i(ae.parent(),af,false,au)}}};ac.draggable({containment:"parent",drag:ab,stop:ab});if(ak){var S=Y("zoom");ao=A("
    ").addClass("focusZoomSlider").css({"margin-top":"5px"});Z=A("
    ").addClass("focusZoomBox").css({position:"absolute",background:"transparent","background-image":"url("+aa.attr("src")+")"});am.prepend(Z);aa.after(ao);ae.attr("src",aa.attr("src"));ao.slider({min:0,max:50,value:S,range:"max",slide:function(aq,ar){ai(ar.value)}});ai(S)}else{am.css("background-color","rgba(0,0,0,0.5)")}}function G(S){$focusCircle=S.find(".focusCircle");if($focusCircle.length){var T=$focusCircle.closest(".focusWrap");T.find(".focusZoomSlider").slider("destroy").remove();T.find(".focusZoomBox").remove();T.removeClass("focusWrap");$focusCircle.draggable("destroy");$focusCircle.parent().removeClass("focusActive");$focusCircle.remove();var U=S.find(".InputfieldImageButtonFocus");if(U.length){$icon=U.find("i");$icon.removeClass("focusIconActive").toggleClass($icon.attr("data-toggle"))}}}function C(V,U,X){var T=parseInt(U*V/100);var S=parseInt(T-(X/2));var W=parseInt(U-X);if(0>S){S=0}if(W=T?ac:U;var S=aa-(aa*Y/100);var V=C(W,ac,S);var X=C(ad,U,S);return{left:V,top:X,width:S,height:S}}function n(V,ad,U,Y,X,ab){var ad=ad*X;var W=U/ad*100;var T=W/2;var aa=V-T;var ac=0;var S=100-W;if(aa<=ac){aa=0}if(aa>=S){aa=S}var Z=ad/100*aa/X;Z=-1*parseInt(Z);return Z}function p(V,ad,X,ab,Y,S,T){var aa=ab>=Y?Y:ab;var U=n(V,ab,S,X,T,aa);var W=n(ad,Y,S,X,T,aa);var ac=parseInt(U);var Z=parseInt(W);return{transformLeft:ac,transformTop:Z,scale:T}}function q(S){G(S);S.off("click",".InputfieldImageButtonFocus");$inputArea=S.find(".InputfieldImageEdit__edit");if($inputArea.children().not(".InputfieldFileSort").length){var T=$inputArea.children();A("#"+$inputArea.attr("data-current")).find(".ImageData").append(T)}}function N(U,T){var S;if(U){S=U.find(".InputfieldImageEdit--active")}else{if(T){S=A(".InputfieldImageEdit--active").not(T.find(".InputfieldImageEdit--active"))}else{S=A(".InputfieldImageEdit--active")}}if(S.length){q(S);S.removeClass("InputfieldImageEdit--active").removeAttr("id");A("#"+S.attr("data-for")).removeClass("gridImageEditing")}A(".InputfieldImageEdit__replace").removeClass("InputfieldImageEdit__replace")}function j(V,T){if(!V||!V.length){return}var S=V.parent().children().not(".InputfieldImageEdit");var W=0;var X=false;var Y=null;S.each(function(){if(Y){return}var Z=A(this);var aa=Z.offset().top;if(X&&aa!=W){Y=Z}else{if(Z.attr("id")==V.attr("id")){X=true}}W=aa});if(Y){T.insertBefore(Y)}else{T.insertAfter(S.eq(S.length-1))}var U=T.find(".InputfieldImageEdit__arrow");if(U.length){U.css("left",V.position().left+(V.outerWidth()/2)+"px")}}function D(){A(window).resize(E(h,200));A(document).on("click dblclick",".gridImage__trash",function(S){var T=A(this).find("input");T.prop("checked",g).change();if(S.type=="dblclick"){K(T);S.preventDefault();S.stopPropagation()}});A(document).on("change",".gridImage__deletebox",function(){s(A(this))});A(document).on("click",".gridImage__edit",function(V){var T=A(this).closest(".gridImage");if(!T.length){return}if(T.closest(".InputfieldImageEditAll").length){return false}var U=T.closest(".gridImages");var S=U.find(".InputfieldImageEdit");if(T.hasClass("gridImageEditing")){S.find(".InputfieldImageEdit__close").click()}else{j(T,S);q(S);e(T,S);S.addClass("InputfieldImageEdit--active").attr("data-for",T.attr("id"));U.find(".gridImageEditing").removeClass("gridImageEditing");T.addClass("gridImageEditing")}}).on("click",".InputfieldImageEditAll img",function(U){U.stopPropagation();U.preventDefault();A.magnificPopup.close();var S=A.extend(true,{},M);var T=A(this);S.items={src:T.attr("data-original"),title:T.attr("alt")};A.magnificPopup.open(S);return true}).on("click",".InputfieldImageButtonFocus",function(){var V=A(this);var S=V.find("i");var T=V.closest(".InputfieldImageEdit, .gridImage");var U=T.find(".focusCircle");if(U.length){G(T)}else{w(T);S.addClass("focusIconActive");S.toggleClass(S.attr("data-toggle"))}});A(document).on("click",function(T){var S=A(T.target);if(S.closest(".InputfieldImageEdit").length){N(null,S.parents(".gridImages"))}else{if(S.is("input, textarea")&&S.closest(".InputfieldImageEditAll").length){S.focus().one("blur",function(){S.closest(".gridImages").sortable("enable")});S.closest(".gridImages").sortable("disable")}else{if(S.closest(".gridImage__inner").length){N(null,S.parents(".gridImages"))}else{if(S.closest(".mfp-container").length){return}else{if(S.closest(".ui-dialog").length){return}else{if(S.is(".mfp-close")){return}else{if(S.is("a.remove")){return}else{N(null,null)}}}}}}}});A(document).on("click",".InputfieldImageEdit__close",function(S){N(A(this).parents(".gridImages"),null)});A(document).on("change",".InputfieldImage",function(){A(this).find(".InputfieldImageButtonCrop:not(.pw-modal-dblclick)").addClass("pw-modal-dblclick ui-state-disabled")}).on("click",".InputfieldImageButtonCrop.ui-state-disabled",function(U){var T=A(this);var S=T.closest(".gridImages");if(!S.hasClass("gridImagesAlerted")){ProcessWire.alert(ProcessWire.config.InputfieldImage.labels.changes);S.addClass("gridImagesAlerted")}setTimeout(function(){T.removeClass("ui-state-active")},500);return false});A(".ImagesGrid").on("click","button.pw-modal",function(S){S.preventDefault()});u();B()}function u(){A(document).on("click",".InputfieldImageEdit__name",function(U){var S=A(this).children("span");var V=S.closest(".gridImage, .InputfieldImageEdit").find(".InputfieldFileRename");var T=S.closest(".gridImages");T.sortable("disable");V.val(S.text());S.on("keypress",function(W){if(W.which==13){S.blur();return false}return true});S.attr("autocomplete","off").attr("autocorrect","off").attr("autocapitalize","off").attr("spellcheck","false");S.focus().on("blur",function(){var W=A(this).text();if(A.trim(W).length<1){S.text(V.val())}else{if(W!=V.val()){V.val(W).change();T.closest(".Inputfield").trigger("change")}}S.off("keypress");T.sortable("enable")})})}function o(S,T){T=Math.floor(T);S.find(".gridImage__overflow").each(function(){var U=100-T;var V=A(this);V.css("width",T+"%");V.siblings(".ImageData").css("width",U+"%");V.find("img").css({top:0,left:0,transform:"none"})});f(S,"listSize",T)}function l(W,S,U){if(!S){return}var T=S+"px";var V=W.find(".gridImages");if(typeof U=="undefined"||U==null){U=V.attr("data-ragged")?true:false}if(U){V.attr("data-ragged",1)}else{V.removeAttr("data-ragged")}V.find(".gridImage__overflow").each(function(){i(A(this),S,U)});V.find(".gridImage__edit, .gridImage__resize").css("line-height",T);V.attr("data-size",S);f(W,"size",S);if(v.length){setTimeout(function(){while(v.length){var X=v.pop();i(X,S,U)}},150)}}function i(ab,V,Z,ai){if(ab.hasClass("gridImage__overflow")){var S=ab.children("img")}else{if(ab.is("img")){var S=ab;ab=S.closest(".gridImage__overflow")}else{return}}if(!V){S.removeAttr("width").removeAttr("height");ab.width("auto").height("auto");return}var ah=0;var ac=S.width();var Y=S.height();var aa=parseInt(S.attr("data-w"));var W=parseInt(S.attr("data-h"));if(!ac){ac=aa}if(!Y){Y=W}if(!Z&&typeof ai=="undefined"){var ag=S.attr("data-focus");if(typeof ag=="undefined"){ag="50.0 50.0 0"}var U=ag.split(" ");ai={top:parseFloat(U[0]),left:parseFloat(U[1]),zoom:parseInt(U[2])}}if(!Z){ah=ai.zoom}if(Z){S.attr("height",V).removeAttr("width");S.css({"max-height":"100%","max-width":"none",top:"50%",left:"50%",transform:"translate3d(-50%, -50%, 0)"})}else{if(ah>0&&ab.closest(".InputfieldImageFocusZoom").length&&!k){if(ac>=Y){var af="100%";var ae="none";if(ac==aa){Y=V;ac=(Y/W)*aa}}else{var af="none";var ae="100%";if(Y==W){ac=V;Y=(ac/aa)*W}}var T=1+((ah/100)*2);var X=p(ai.left,ai.top,ah,ac,Y,V,T);S.css({left:"0px",top:"0px","transform-origin":"0px 0px",transform:"scale("+X.scale+") translate3d("+X.transformLeft+"px, "+X.transformTop+"px, 0)","max-width":ae,"max-height":af})}else{if(ac>=Y){S.attr("height",V).removeAttr("width");if(ai.left<1){ai.left=0.001}S.css({"max-height":"100%","max-width":"none",top:"50%",left:ai.left+"%",transform:"translate3d(-"+ai.left+"%, -50%, 0)"})}else{if(Y>ac){S.attr("width",V).removeAttr("height");if(ai.top<1){ai.top=0.001}S.css({"max-height":"none","max-width":"100%",top:ai.top+"%",left:"50%",transform:"translate3d(-50%, -"+ai.top+"%, 0)"})}else{S.css({"max-height":"100%","max-width":"none",top:"50%",left:"50%",transform:"translate3d(-50%, -50%, 0)"});S.removeAttr("width").attr("height",V)}}}}var ac=S.width();if(ac){ab.css({width:(Z?ac+"px":V+"px"),height:V+"px"})}else{var ad=ab.attr("data-tries");if(!ad){ad=0}if(typeof ad=="undefined"){ad=0}ad=parseInt(ad);if(ad>3){ab.css({width:V+"px",height:V+"px"})}else{v.push(ab);ab.attr("data-tries",ad+1)}}}function H(T){if(T.find(".InputfieldImageListToggle").length){return}var W=A("").append("");var Y=A("").append("");var S=A("").append("");var X="InputfieldImageListToggle--active";var V="";var U=function(ae){var ad=A(this);var ab=ad.closest(".Inputfield");var Z=ad.attr("href");var aa;var af=ad.parent().children("."+X);var ac=af.attr("href");af.removeClass(X);ad.addClass(X);G(ab);if(Z=="list"){if(!ab.hasClass("InputfieldImageEditAll")){ab.find(".InputfieldImageEdit--active .InputfieldImageEdit__close").click();ab.addClass("InputfieldImageEditAll")}aa=L(ab,"listSize");o(ab,aa);f(ab,"mode","list")}else{if(Z=="left"){ab.removeClass("InputfieldImageEditAll");aa=L(ab,"size");l(ab,aa,true);f(ab,"mode","left");Q()}else{if(Z=="grid"){ab.removeClass("InputfieldImageEditAll");aa=L(ab,"size");l(ab,aa,false);f(ab,"mode","grid");if(ac=="left"){setTimeout(function(){l(ab,aa,false)},100)}}}}I(ab.find(".gridImages"));ad.blur();return false};W.click(U);Y.click(U);S.click(U);if(T.hasClass("InputfieldImage")){T.find(".InputfieldHeader").append(W).append(Y).append(S);V=L(T,"mode")}else{A(".InputfieldImage .InputfieldHeader",T).append(W).append(Y).append(S)}if(V=="list"){W.click()}else{if(V=="left"){Y.click()}else{}}}function F(Y){var V=Y.children(".InputfieldHeader");if(V.children(".InputfieldImageSizeSlider").length){return}var X=Y.find(".gridImages");var T=X.attr("data-gridsize");var W=T/2;var S=T*2;var Z=A('');V.append(Z);var U=function(ac,ae){var ad=ae.value;var af=15;var ag=Math.floor(T/af);var aa=ad-W;var ab=Math.floor(af+(aa/ag));if(Y.hasClass("InputfieldImageEditAll")){f(Y,"size",ad);o(Y,ab)}else{f(Y,"listSize",ab);l(Y,ad)}};Z.slider({min:W,max:S,value:L(Y,"size"),range:"min",slide:U,start:function(aa,ab){k=true;if(Y.find(".InputfieldImageEdit:visible").length){Y.find(".InputfieldImageEdit__close").click()}},stop:function(aa,ab){k=false;U(aa,ab);Q(Y)}})}function f(T,W,V){var U=L(T);var X=T.attr("id");var S=X?X.replace("wrap_Inputfield_",""):"";if(!S.length||typeof V=="undefined"){return}if(U[S][W]==V){return}U[S][W]=V;A.cookie("InputfieldImage",U);d=U}function L(T,W){if(d&&typeof W=="undefined"){return d}var X=T.attr("id");var S=X?X.replace("wrap_Inputfield_",""):"na";var V=d?d:A.cookie("InputfieldImage");var U=null;if(!V){var V={}}if(typeof V[S]=="undefined"){V[S]={}}if(typeof V[S].size=="undefined"){V[S].size=parseInt(T.find(".gridImages").attr("data-size"))}if(typeof V[S].listSize=="undefined"){V[S].listSize=23}if(typeof V[S].mode=="undefined"){V[S].mode=T.find(".gridImages").attr("data-gridMode")}if(d==null){d=V}if(typeof W=="undefined"){U=V}else{if(W===true){U=V[S]}else{if(typeof V[S][W]!="undefined"){U=V[S][W]}}}return U}function a(W){if(W.hasClass("InputfieldStateCollapsed")){return}var X=parseInt(W.find(".InputfieldImageMaxFiles").val());var V=W.find(".gridImages");var U=L(W,"size");var Y=L(W,"mode");var T=Y=="left"?true:false;if(!U){U=V.attr("data-gridsize")}U=parseInt(U);if(W.hasClass("InputfieldImageEditAll")||Y=="list"){var S=L(W,"listSize");o(W,S)}else{l(W,U,T)}if(!W.hasClass("InputfieldImageInit")){W.addClass("InputfieldImageInit");if(W.hasClass("InputfieldRenderValueMode")){return t(W)}else{if(X==1){W.addClass("InputfieldImageMax1");y(W)}else{I(V)}}H(W);F(W)}B(W);W.on("change",".InputfieldFileActionSelect",function(){var Z=A(this).next(".InputfieldFileActionNote");if(A(this).val().length){Z.fadeIn()}else{Z.hide()}})}function P(){A("body").addClass("ie-no-drop");A(".InputfieldImage.InputfieldFileMultiple").each(function(){var T=A(this),V=parseInt(T.find(".InputfieldFileMaxFiles").val()),S=T.find(".gridImages"),U=T.find(".InputfieldImageUpload");U.on("change","input[type=file]",function(){var Z=A(this),X=Z.parent(".InputMask");if(Z.val().length>1){X.addClass("ui-state-disabled")}else{X.removeClass("ui-state-disabled")}if(Z.next("input.InputfieldFile").length>0){return}var W=S.children("li").length+U.find("input[type=file]").length+1;if(V>0&&W>=V){return}U.find(".InputMask").not(":last").each(function(){var aa=A(this);if(aa.find("input[type=file]").val()<1){aa.remove()}});var Y=X.clone().removeClass("ui-state-disabled");Y.children("input[type=file]").val("");Y.insertAfter(X)})})}function R(U){var T;if(U.length>0){T=U.find(".InputfieldImageUpload")}else{T=A(".InputfieldImageUpload")}T.each(function(X){var Y=A(this);var W=Y.closest(".InputfieldContent");if(Y.hasClass("InputfieldImageInitUpload")){return}V(W,X);Y.addClass("InputfieldImageInitUpload")});function V(af,ar){var ae=af.parents("form");var W=af.closest(".InputfieldRepeaterItem");var aa=W.length?W.attr("data-editUrl"):ae.attr("action");aa+=(aa.indexOf("?")>-1?"&":"?")+"InputfieldFileAjax=1";var ax=ae.find("input._post_token");var ad=ax.attr("name");var ai=ax.val();var ah=af.find(".InputfieldImageErrors").first();var Z=af.find(".InputfieldImageUpload").data("fieldname");Z=Z.slice(0,-2);var ap=af.closest(".Inputfield.InputfieldImage");var aw=af.find(".InputfieldImageUpload").data("extensions").toLowerCase();var ao=af.find(".InputfieldImageUpload").data("maxfilesize");var ag=af.find("input[type=file]").get(0);var Y=af.find(".gridImages");var at=Y.get(0);var ak=Y.data("gridsize");var al=null;var aj=parseInt(af.find(".InputfieldImageMaxFiles").val());var av=r(ap);var aq=av.maxWidth>0||av.maxHeight>0||av.maxSize>0;au(af);if(aj!=1){an(Y)}Y.children().addClass("InputfieldFileItemExisting");ap.on("pwimageupload",function(ay,az){am([az.file],az.xhr)});function ac(az,ay){if(typeof ay!=="undefined"){az=""+ay+": "+az}return"
  • "+az+"
    • "}function X(az){var ay=new String(az).substring(az.lastIndexOf("/")+1);if(ay.lastIndexOf(".")!=-1){ay=ay.substring(0,ay.lastIndexOf("."))}return ay}function au(az){if(az.hasClass("InputfieldImageDropzoneInit")){return}var aC=az.get(0);var aB=az.closest(".Inputfield");function ay(){if(aB.hasClass("pw-drag-in-file")){return}az.addClass("ui-state-hover");aB.addClass("pw-drag-in-file")}function aA(){if(!aB.hasClass("pw-drag-in-file")){return}az.removeClass("ui-state-hover");aB.removeClass("pw-drag-in-file")}aC.addEventListener("dragleave",function(){aA()},false);aC.addEventListener("dragenter",function(aD){aD.preventDefault();ay()},false);aC.addEventListener("dragover",function(aD){if(!az.is("ui-state-hover")){ay()}aD.preventDefault();aD.stopPropagation();return false},false);aC.addEventListener("drop",function(aD){am(aD.dataTransfer.files);aA();aD.preventDefault();aD.stopPropagation();return false},false);az.addClass("InputfieldImageDropzoneInit")}function an(aG){var aK=null;var aI=false;var az=null;var ay=aG.closest(".Inputfield");function aD(){ay.addClass("pw-drag-in-file")}function aJ(){ay.removeClass("pw-drag-in-file")}function aC(aM){var aQ=aM.offset();var aN=aM.width();var aL=aM.height();var aP=aQ.left+aN/2;var aO=aQ.top+aL/2;return{clientX:aP,clientY:aO}}function aF(){return aG.find(".InputfieldImageEdit--active").length>0}function aE(aM){if(aF()){return}aM.preventDefault();aM.stopPropagation();aD();aI=false;if(aK==null){var aL=aG.attr("data-size")+"px";var aN=A("
    ").addClass("gridImage__overflow");if(aG.closest(".InputfieldImageEditAll").length){aN.css({width:"100%",height:aL})}else{aN.css({width:aL,height:aL})}aK=A("
  • ").addClass("ImageOuter gridImage gridImagePlaceholder").append(aN);aG.append(aK)}var aO=aC(aK);aK.simulate("mousedown",aO)}function aH(aL){if(aF()){return}aL.preventDefault();aL.stopPropagation();aD();aI=false;if(aK==null){return}var aM={clientX:aL.originalEvent.clientX,clientY:aL.originalEvent.clientY};aK.simulate("mousemove",aM)}function aB(aL){if(aF()){return}aL.preventDefault();aL.stopPropagation();if(aK==null){return false}aI=true;if(az){clearTimeout(az)}az=setTimeout(function(){if(!aI||aK==null){return}aK.remove();aK=null;aJ()},1000)}function aA(aL){if(aF()){return}aJ();aI=false;var aM={clientX:aL.clientX,clientY:aL.clientY};aK.simulate("mouseup",aM);m=aK.next(".gridImage");aK.remove();aK=null}if(aG.length&&!aG.hasClass("gridImagesInitDropInPlace")){aG.on("dragenter",aE);aG.on("dragover",aH);aG.on("dragleave",aB);aG.on("drop",aA);aG.addClass("gridImagesInitDropInPlace")}}function ab(aX,aL,aH){var aU=ProcessWire.config.InputfieldImage.labels;var aE=parseInt(aX.size/1024,10)+" kB";var aW='
    '+aU.dimensions+''+aU.na+"
    "+aU.filesize+""+aE+"
    "+aU.variations+"0
    ";var aZ=A('
  • '),aR=A(aW),aF=A('
    '),ay=A('
    '),aO=A("
    "),aQ=A(""),aT=A(' '),aS=A('
    '),az,aJ,aY,aM=URL.createObjectURL(aX),aA=ap.find(".gridImages"),aC=aj==1,aP=L(ap,"size"),aD=L(ap,"listSize"),aB=ap.hasClass("InputfieldImageEditAll"),aI=A('');aF.append(aI);aO.find(".gridImage__inner").append(aT);aO.find(".gridImage__inner").append(aS.css("display","none"));aO.find(".gridImage__inner").append(aQ);ay.append(A('

    '+aX.name+'

    '+aE+""));if(aB){aF.css("width",aD+"%");ay.css("width",(100-aD)+"%")}else{aF.css({width:aP+"px",height:aP+"px"})}aZ.append(aR).append(aF).append(aO).append(ay);aI.attr({src:aM,"data-original":aM});img=new Image();img.addEventListener("load",function(){aR.find(".dimensions").html(this.width+" × "+this.height);var a0=Math.min(this.width,this.height)/aP;aI.attr({width:this.width/a0,height:this.height/a0})},false);img.src=aM;if(typeof aH!="undefined"){aJ=aH}else{aJ=new XMLHttpRequest()}function aK(a0){if(typeof a0!="undefined"){if(!a0.lengthComputable){return}aQ.attr("value",parseInt((a0.loaded/a0.total)*100))}A("body").addClass("pw-uploading");aS.css("display","block")}aJ.upload.addEventListener("progress",aK,false);aJ.addEventListener("load",function(){aJ.getAllResponseHeaders();var a3=A.parseJSON(aJ.responseText);if(typeof a3.ajaxResponse!="undefined"){a3=a3.ajaxResponse}var a1=a3.length>1;if(a3.error!==undefined){a3=[a3]}for(var a2=0;a2-1){a6=a6.substring(0,a6.indexOf("?"))}var a4=a6.substring(a6.lastIndexOf(".")+1).toLowerCase();a6=a6.substring(0,a6.lastIndexOf("."));if(a4==ba){bb.children("span").text(a6).removeAttr("contenteditable")}a5.find(".gridImage__edit").click()}c.file="";c.item=null;c.edit=null}if(al){clearTimeout(al)}m=null;al=setTimeout(function(){if(aj!=1){I(aA)}else{y(ap)}A("body").removeClass("pw-uploading");aA.trigger("AjaxUploadDone")},500);ap.trigger("change").removeClass("InputfieldFileEmpty")},false);if(c.edit){c.edit.find(".InputfieldImageEdit__close").click()}else{if(ap.find(".InputfieldImageEdit:visible").length){ap.find(".InputfieldImageEdit__close").click()}}if(c.item){c.item.replaceWith(aZ);c.item=aZ}else{if(m&&m.length){m.before(aZ)}else{aA.append(aZ)}}function aV(a0,a2){if(typeof aH=="undefined"){aJ.open("POST",aa,true)}aJ.setRequestHeader("X-FILENAME",encodeURIComponent(a0.name));aJ.setRequestHeader("X-FIELDNAME",Z);if(c.item){aJ.setRequestHeader("X-REPLACENAME",c.file)}aJ.setRequestHeader("Content-Type","application/octet-stream");aJ.setRequestHeader("X-"+ad,ai);aJ.setRequestHeader("X-REQUESTED-WITH","XMLHttpRequest");if(typeof a2!="undefined"&&a2!=false){aJ.send(a2)}else{aJ.send(a0)}Q();ap.trigger("change");var a1=ap.find(".InputfieldFileItem").length;if(a1==1){ap.removeClass("InputfieldFileEmpty").removeClass("InputfieldFileMultiple").addClass("InputfieldFileSingle")}else{if(a1>1){ap.removeClass("InputfieldFileEmpty").removeClass("InputfieldFileSingle").addClass("InputfieldFileMultiple")}}}aK();var aG=aX.name.substring(aX.name.lastIndexOf(".")+1).toLowerCase();if(aq&&(aG=="jpg"||aG=="jpeg"||aG=="png"||aG=="gif")){var aN=new PWImageResizer(av);aS.addClass("pw-resizing");aN.resize(aX,function(a0){aS.removeClass("pw-resizing");aV(aX,a0)})}else{aV(aX)}}function am(ay,aF){var aD=function(aH){return parseInt(aH/1024,10)};if(typeof ay==="undefined"){at.innerHTML="No support for the File API in this web browser";return}for(var aB=0,aA=ay.length;aBao&&ao>2000000){var az=aD(ay[aB].size),aC=aD(ao);aG="Filesize "+az+" kb is too big. Maximum allowed is "+aC+" kb";ah.append(ac(aG,ay[aB].name))}else{if(typeof aF!="undefined"){ab(ay[aB],aE,aF)}else{ab(ay[aB],aE)}}}if(aj==1){break}}}ag.addEventListener("change",function(ay){am(this.files);ay.preventDefault();ay.stopPropagation();this.value=""},false)}function S(){var W=".InputfieldImageEdit__imagewrapper img";A(document).on("dragenter",W,function(){var Z=A(this);if(Z.closest(".InputfieldImageMax1").length){return}var aa=Z.attr("src");var X=Z.closest(".InputfieldImageEdit");var Y=Z.closest(".InputfieldImageEdit__imagewrapper");Y.addClass("InputfieldImageEdit__replace");c.file=new String(aa).substring(aa.lastIndexOf("/")+1);c.item=A("#"+X.attr("data-for"));c.edit=X}).on("dragleave",W,function(){var Y=A(this);if(Y.closest(".InputfieldImageMax1").length){return}var X=Y.closest(".InputfieldImageEdit__imagewrapper");X.removeClass("InputfieldImageEdit__replace");c.file="";c.item=null;c.edit=null})}S()}function r(T){var S={maxWidth:0,maxHeight:0,maxSize:0,quality:1,autoRotate:true,debug:ProcessWire.config.debug};var U=T.attr("data-resize");if(typeof U!="undefined"&&U.length){U=U.split(";");S.maxWidth=parseInt(U[0]);S.maxHeight=parseInt(U[1]);S.maxSize=parseFloat(U[2]);S.quality=parseFloat(U[3])}return S}function O(){A(".InputfieldImage.Inputfield").each(function(){a(A(this))});D();if(x()){R("")}else{P()}A(document).on("reloaded",".InputfieldImage",function(){var S=A(this);a(S);R(S)}).on("wiretabclick",function(U,T,S){T.find(".InputfieldImage").each(function(){a(A(this))})}).on("opened",".InputfieldImage",function(){a(A(this))})}O()}jQuery(document).ready(function(a){InputfieldImage(a)}); \ No newline at end of file diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.scss b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.scss index e7ac2de8..f8822164 100755 --- a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.scss +++ b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.scss @@ -3,6 +3,7 @@ $deleteColor: #e83561; $errorColor: #FC3A3F; $gridMargin: 0 0.6em 0.6em 0; $itemPadding: 0.4em; +$focusPointCircleSize: 40px; .InputfieldImage { @@ -577,11 +578,17 @@ $itemPadding: 0.4em; .focusCircle { cursor: move; - width: 40px; - height: 40px; - border: 3px solid #fff; + width: $focusPointCircleSize; + height: $focusPointCircleSize; + margin: ($focusPointCircleSize * -1 / 2 + 0px) !important; + // border: 3px solid #fff; + // background-color: rgba(255,255,255,0.3); + border: 3px solid #EB1D61; border-radius: 50%; - background-color: rgba(255,255,255,0.3); + background-color: rgba(255, 255, 255, 0.6); + background-image: url(data:image/gif;base64,R0lGODlhBAAEAIAAAOsdYQAAACH5BAAAAAAALAAAAAAEAAQAAAIEhI8JBQA7); // 4x4 px magenta + background-position: 15px 15px; + background-repeat: no-repeat; } }