One more notice (#5429)

[friendica.git] / view / templates / cropbody.tpl

diff --git a/view/templates/cropbody.tpl b/view/templates/cropbody.tpl
index 47bb73b47a8c617e55cd59dcac8b06ed361485c2..144277310e0c1c50dc984d339c8530c70f33b972 100644 (file)
--- 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>