view/templates/settings/profile/photo/crop.tpl

   1 <div class="generic-page-wrapper">
   2         <h1>{{$title}}</h1>
   3         <p id="cropimage-desc">
   4                 {{$desc nofilter}}
   5         </p>
   6
   7         <div id="cropimage-wrapper">
   8                 <p><img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}"></p>
   9         </div>
  10
  11         <div id="cropimage-preview-wrapper" >
  12                 <div id="previewWrap" class="crop-preview"></div>
  13         </div>
  14
  15         <form action="settings/profile/photo/crop/{{$resource}}" id="crop-image-form" method="post">
  16                 <input type="hidden" name="form_security_token" value="{{$form_security_token}}">
  17
  18                 <input type="hidden" name="xstart" id="x1" />
  19                 <input type="hidden" name="ystart" id="y1" />
  20                 <input type="hidden" name="height" id="height" />
  21                 <input type="hidden" name="width"  id="width" />
  22
  23                 <div id="settings-profile-photo-crop-submit-wrapper" class="pull-right settings-submit-wrapper">
  24                 {{if $skip}}
  25                         <button type="submit" name="action" id="settings-profile-photo-crop-skip" class="btn" value="skip">{{$skip}}</button>
  26         {{/if}}
  27                         <button type="submit" name="action" id="settings-profile-photo-crop-submit" class="btn btn-primary" value="crop">{{$crop}}</button>
  28                 </div>
  29
  30                 <div class="clear"></div>
  31         </form>
  32
  33         <script type="text/javascript" language="javascript">
  34
  35                 var image = document.getElementById('croppa');
  36                 var cropper = new Cropper(image, {
  37                         aspectRatio: 1,
  38                         viewMode: 1,
  39                         preview: '#profile-photo-wrapper, .crop-preview',
  40                         crop: function(e) {
  41                                 $('#x1').val(e.detail.x);
  42                                 $('#y1').val(e.detail.y);
  43                                 $('#width').val(e.detail.width);
  44                                 $('#height').val(e.detail.height);
  45                         },
  46                 });
  47
  48                 var skip_button = document.getElementById('settings-profile-photo-crop-skip');
  49
  50                 skip_button.addEventListener('click', function() {
  51                         let image_data = cropper.getImageData();
  52                         cropper.setData({x: 0, y: 0, width: image_data.width, height: image_data.height});
  53                 })
  54         </script>
  55 </div>