dokumentor/static/js/profile/asset.js

(function($) {
    $.fn.invisible = function() {
        return this.each(function() {
            $(this).css("visibility", "hidden");
            $(this).hide();
        });
    };
    $.fn.visible = function() {
        return this.each(function() {
            $(this).css("visibility", "visible");
            $(this).show();
        });
    };
}(jQuery));


$(document).ready(function () {

  var $uploadCrop,
    rawImg,
    imagePreview,
    imageInputField;

  function readFile(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#imageCropper').addClass('ready');
        rawImg = e.target.result;
        $('#containerUpload').trigger("ShowModal");
      };
      reader.readAsDataURL(input.files[0]);
    } else {
      alert("Sorry - you're browser doesn't support the FileReader API");
    }
  }

  function getCropForm(field) {
    var result;
    if (field === 'stamp') {
      result = 'circle'
    } else {
      result = 'square'
    }
    return result
  }

  function getCropHeight(field) {
    var result;
    if (field === 'stamp' || field === 'logo') {
      result = 200
    } else {
      result = 76
    }
    return result
  }

  function initCropper(width, height, type) {
    $uploadCrop = $('#imageCropper').croppie({
      enableExif: true,
      enforceBoundary: false,
      enableOrientation: true,
      viewport: {
          width: width,
          height: height,
          type: type
      },
      boundary: {
          width: 300,
          height: 300
      }
    });
  }

  function uploadImageOnServer(data) {
    // $('#' + imagePreview + ' img').attr('src', imgBase);
    $('#' + imagePreview + ' img').attr('src', data['url']);
    $('#id_tmb_' + imagePreview).val(data['short_url']);
    $('#' + imagePreview + ' .del_image').show();
    // console.log('id_tmb_' + imagePreview);
    console.log(data)
  }

  // select file
  $('.img_load img').on('click', function() {
    var thisId = $(this).closest('.img_load').attr('id');
    var tmbId = 'id_tmb_' + thisId.substring(3);
    $('#' + tmbId).val('');
    $('#id_' + thisId).click();
    imagePreview = thisId;
    imageInputField = 'id_' + thisId;
    // console.log('#id_' + thisId)
  });

  // set file in input hidden filed
  $('.img_load input[type=file]').on('change', function () {
    initCropper(200,getCropHeight(imagePreview), getCropForm(imagePreview));
    console.log($uploadCrop);
    readFile(this)});

  $('#containerUpload').on("ShowModal", function( ) {
    $('#containerUpload').visible();
    $uploadCrop.croppie('bind', {
      url: rawImg
    }).then(function(){
      console.log('jQuery bind complete');
    });
  });

  $("#cropImageBtnLeft").on("click", function() {
    $uploadCrop.croppie('rotate', -90);
  });

  $("#cropImageBtnRight").on("click", function() {
    $uploadCrop.croppie('rotate', 90);
  });

  $('#cropImageBtnSave').on('click', function (ev) {
			$uploadCrop.croppie('result', {
				type: 'base64',
				format: 'png',
				size: 'viewport'
			}).then(function (resp) {
        // console.log(resp);

        var formData = new FormData();
        formData.append('image', resp);
        formData.append('name', imagePreview);
        $('#' + imagePreview + ' img').attr('src', '/static/img/spinner.gif');
        $.ajax({
          type: 'POST',
          url: '/my/upload-image/ajax/',
          success: uploadImageOnServer,
          data: formData,
          cache: false,
          contentType: false,
          processData: false
        }).done(function(json) {
          console.log(json);
        });

        $('#containerUpload').trigger("CloseModal");

			})
  });

  $('#containerUpload').on("CloseModal", function( ) {
    $('#containerUpload').invisible();
    $('#' + imageInputField).val('');
    $('#imageCropper').croppie('destroy');
  });

  var closeButtons=document.getElementsByClassName("modal-upload__cleaner-btn");

  for (var i = 0; i < closeButtons.length; i++) {

    var closeBtn = closeButtons[i];
    closeBtn.addEventListener('click',function () {
      $('#containerUpload').trigger("CloseModal");
    })

  }

  $('.img_load .del_image').on('click', function(e) {
    e.preventDefault();
    var this_id = $(this).closest('.img_load').attr('id');
    var tmb_id = 'id_tmb_' + this_id.substring(3);
    var dlg_msg = $('#dialog-message');
    dlg_msg.dialog({
      title: 'Удалить изображение?',
      buttons:{
        'Да': function(){
        $('#' + tmb_id).val('');
        $('#' + this_id + ' img').attr('src', '/static/img/upload-' + this_id + '.png');
        $('#' + this_id + '-clear_id').attr('checked', true);
        $('#' + this_id + ' .del_image').hide();
        dlg_msg.dialog('close');
        },
        'Нет': function(){
          dlg_msg.dialog('close');
        }
      }
    }).html('Нажмите "Да", чтобы удалить изображение');
    dlg_msg.dialog('open');
  });

});