Support image cropping in admin panel.

[sergeyglazyrindev]

We should support image cropping in admin panel.
Previous uadmin html/js:

    <script type="text/javascript">
  cropper,
(function(win, doc, $){
"using script";

  (function($){
    "use strict";
    var $modal = $("#myModal"),
      img = null;
    $("#crop_image").click(function(e){
      $modal.find(".modal-footer .crop-btn").removeClass("hide");
      $modal.find("#btnCropImageClose").addClass("hide");

      img = $modal.find("#imgRawImage")[0];
      cropper = new Cropper(img, {
        zoomable: false,
      });
    });
    $modal.find("#myModal [data-crop-cancel]").click(function(e){
      $modal.find(".modal-footer .crop-btn").addClass("hide");
      $modal.find("#btnCropImageClose").removeClass("hide");
    });
    $modal.find("form")[0].onsubmit = function(e){
      e.preventDefault();
      var canvas = cropper.getCroppedCanvas();
      $modal.find("[name=cropped_image]").prop("src", canvas.toDataURL());
    };

  })($);
  $("#export_form")[0].onsubmit = function(e){
    (e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
    var url = this.action,
      filters = win.location.search.substr(1).split("&") || [],
      len = filters.length,
      i = 0;

    for (; i < len; i ++) {
      if (filters[i] === "" || filters[i].indexOf("p=") !== -1 || filters[i].indexOf("o=") !== -1) {
        filters.splice(i, 1);
      }
    }

    if (filters.length > 0) {
      url += "&" + filters.join("&");
    }

    //console.log(url);
    win.open(url, "_self");
  };
})(window, document, $);




function imageCrop(){
  $('.image_trigger').click(function(){
    var a = $(this).attr('src');
    var header = $(this).parent().parent().find('td').find('a.ID');
    console.log(header);
    var content = "";
    var rawFile = a.substr(0,a.lastIndexOf(".")) + "_raw" + a.substr(a.lastIndexOf("."));

    content += '<center><img src="'+rawFile+'" style="max-width:70%;max-height:80%;" id="imgRawImage"/></center>';
    $('#myModal>div>div>.modal-body').html(content);
    $('#myModal>div>div>div>.modal-title').text(header.text());
    $('#myModal [name=img_id]').val($(this).parent().parent().find('td [data-id]').data('id'));
    $('#myModal').modal('show');

  });
}
imageCrop();

//SET TABLE ORDER
//*
  $('a.camelcaseFix').each(function(){
    $(this).text($(this).text().replace("__List",""));
    $(this).text($(this).text().replace("__Form",""));
  });


      function cropImage() {
        var imageSource = $("#imgRawImage").attr("src");
        var top, left, bottom, right;
        var data = cropper.getData();
        // left = cropper.cropBoxData.left - cropper.canvasData.left;
        // left *= cropper.canvasData.aspectRatio;
        // top = cropper.cropBoxData.top - cropper.canvasData.top;
        // top *= cropper.canvasData.aspectRatio;
        left = data.y;
        top = data.x;

        right = left + data.width;
        bottom = top + data.height;

        // bottom = (cropper.cropBoxData.height * cropper.canvasData.aspectRatio) + top;
        // right = (cropper.cropBoxData.width * cropper.canvasData.aspectRatio) + left;


        $.get("{{.RootURL}}cropper/?img=" + imageSource + "&left=" + left + "&right=" + right + "&top=" + top + "&bottom=" + bottom, function() {

        });
        $("#myModal").modal("hide");
      }
    $("#btnCropImage").on("click", cropImage);


    </script>
    <!-- Modal -->
    <div id="myModal" class="modal fade z-index99999" role="dialog" style="width:100%;">
      <div class="modal-dialog" style="width:60%;">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-default btn-xs" id="crop_image">
              <span class="fa fa-crop"></span>
            </button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <!-- <p>Some text in the modal.</p> -->
          </div>
          <div class="modal-footer">
            <form action="" method="post" enctype="multipart/form-data">
              <button type="button" id="btnCropImage" class="btn btn-success crop-btn hide" data-crop name="save_cropped_image" value="save_cropped_image">Crop</button>
              <button type="button" class="btn btn-warning crop-btn hide" data-dismiss="modal" data-crop-cancel>{{Tf "uadmin/system" .Language.Code "Cancel"}}</button>
            </form>
            <button type="button" class="btn btn-default" id="btnCropImageClose" data-dismiss="modal">{{Tf "uadmin/system" .Language.Code "Close"}}</button>
          </div>
        </div>

      </div>
    </div>