X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftemplates%2Fcropbody.tpl;h=144277310e0c1c50dc984d339c8530c70f33b972;hb=63b5cb4fc688f9da2984c4c10439dba3a432633a;hp=47bb73b47a8c617e55cd59dcac8b06ed361485c2;hpb=efce5ae1b9c142092ae878dded34e83b336d42f8;p=friendica.git

diff --git a/view/templates/cropbody.tpl b/view/templates/cropbody.tpl
index 47bb73b47a..144277310e 100644
--- a/view/templates/cropbody.tpl
+++ b/view/templates/cropbody.tpl
@@ -1,58 +1,54 @@
 <h1>{{$title}}</h1>
 <p id="cropimage-desc">
-{{$desc}}
+	{{$desc}}
 </p>
+
 <div id="cropimage-wrapper">
-<img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
+	<img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
 </div>
+
 <div id="cropimage-preview-wrapper" >
-<div id="previewWrap" ></div>
+	<div id="previewWrap" class="crop-preview"></div>
 </div>
 
 <script type="text/javascript" language="javascript">
 
-	function onEndCrop( coords, dimensions ) {
-		$PR( 'x1' ).value = coords.x1;
-		$PR( 'y1' ).value = coords.y1;
-		$PR( 'x2' ).value = coords.x2;
-		$PR( 'y2' ).value = coords.y2;
-		$PR( 'width' ).value = dimensions.width;
-		$PR( 'height' ).value = dimensions.height;
-	}
-
-	Event.observe( window, 'load', function() {
-		new Cropper.ImgWithPreview(
-		'croppa',
-		{
-			previewWrap: 'previewWrap',
-			minWidth: 175,
-			minHeight: 175,
-			maxWidth: 640,
-			maxHeight: 640,
-			ratioDim: { x: 100, y:100 },
-			displayOnInit: true,
-			onEndCrop: onEndCrop
+	var image = document.getElementById('croppa');
+	var cropper = new Cropper(image, {
+		aspectRatio: 1 / 1,
+		viewMode: 1,
+		preview: '#profile-photo-wrapper, .crop-preview',
+		crop: function(e) {
+			$( '#x1' ).val(e.detail.x);
+			$( '#y1' ).val(e.detail.y);
+			$( '#x2' ).val(e.detail.x + e.detail.width);
+			$( '#y2' ).val(e.detail.y + e.detail.height);
+			$( '#width' ).val(e.detail.scaleX);
+			$( '#height' ).val(e.detail.scaleY);
+		},
+		ready: function() {
+			// Add the "crop-preview" class to the preview element ("profile-photo-wrapper").
+			var cwrapper = document.getElementById("profile-photo-wrapper");
+			cwrapper.classList.add("crop-preview");
 		}
-		);
-	}
-	);
+	});
 
 </script>
 
 <form action="profile_photo/{{$resource}}" id="crop-image-form" method="post" />
-<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
-
-<input type='hidden' name='profile' value='{{$profile}}'>
-<input type="hidden" name="cropfinal" value="1" />
-<input type="hidden" name="xstart" id="x1" />
-<input type="hidden" name="ystart" id="y1" />
-<input type="hidden" name="xfinal" id="x2" />
-<input type="hidden" name="yfinal" id="y2" />
-<input type="hidden" name="height" id="height" />
-<input type="hidden" name="width"  id="width" />
-
-<div id="crop-image-submit-wrapper" >
-<input type="submit" name="submit" value="{{$done}}" />
-</div>
+	<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+
+	<input type='hidden' name='profile' value='{{$profile}}'>
+	<input type="hidden" name="cropfinal" value="1" />
+	<input type="hidden" name="xstart" id="x1" />
+	<input type="hidden" name="ystart" id="y1" />
+	<input type="hidden" name="xfinal" id="x2" />
+	<input type="hidden" name="yfinal" id="y2" />
+	<input type="hidden" name="height" id="height" />
+	<input type="hidden" name="width"  id="width" />
+
+	<div id="crop-image-submit-wrapper" >
+		<input type="submit" name="submit" value="{{$done|escape:'html'}}" />
+	</div>
 
 </form>