Primer Commit

dist/js/pages/forms/img-cropper/cropper.init.js

@@ -0,0 +1,275 @@
+$(function () {
+
+  'use strict';
+
+  var console = window.console || { log: function () {} };
+  var URL = window.URL || window.webkitURL;
+  var $image = $('#image');
+  var $download = $('#download');
+  var $dataX = $('#dataX');
+  var $dataY = $('#dataY');
+  var $dataHeight = $('#dataHeight');
+  var $dataWidth = $('#dataWidth');
+  var $dataRotate = $('#dataRotate');
+  var $dataScaleX = $('#dataScaleX');
+  var $dataScaleY = $('#dataScaleY');
+  var options = {
+        aspectRatio: 16 / 9,
+        preview: '.img-preview',
+        crop: function (e) {
+          $dataX.val(Math.round(e.detail.x));
+          $dataY.val(Math.round(e.detail.y));
+          $dataHeight.val(Math.round(e.detail.height));
+          $dataWidth.val(Math.round(e.detail.width));
+          $dataRotate.val(e.detail.rotate);
+          $dataScaleX.val(e.detail.scaleX);
+          $dataScaleY.val(e.detail.scaleY);
+        }
+      };
+  var originalImageURL = $image.attr('src');
+  var uploadedImageName = 'cropped.jpg';
+  var uploadedImageType = 'image/jpeg';
+  var uploadedImageURL;
+
+
+  // Tooltip
+  $('[data-toggle="tooltip"]').tooltip();
+
+
+  // Cropper
+  $image.on({
+    ready: function (e) {
+      console.log(e.type);
+    },
+    cropstart: function (e) {
+      console.log(e.type, e.detail.action);
+    },
+    cropmove: function (e) {
+      console.log(e.type, e.detail.action);
+    },
+    cropend: function (e) {
+      console.log(e.type, e.detail.action);
+    },
+    crop: function (e) {
+      console.log(e.type);
+    },
+    zoom: function (e) {
+      console.log(e.type, e.detail.ratio);
+    }
+  }).cropper(options);
+
+
+  // Buttons
+  if (!$.isFunction(document.createElement('canvas').getContext)) {
+    $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
+  }
+
+  if (typeof document.createElement('cropper').style.transition === 'undefined') {
+    $('button[data-method="rotate"]').prop('disabled', true);
+    $('button[data-method="scale"]').prop('disabled', true);
+  }
+
+
+  // Download
+  if (typeof $download[0].download === 'undefined') {
+    $download.addClass('disabled');
+  }
+
+
+  // Options
+  $('.docs-toggles').on('change', 'input', function () {
+    var $this = $(this);
+    var name = $this.attr('name');
+    var type = $this.prop('type');
+    var cropBoxData;
+    var canvasData;
+
+    if (!$image.data('cropper')) {
+      return;
+    }
+
+    if (type === 'checkbox') {
+      options[name] = $this.prop('checked');
+      cropBoxData = $image.cropper('getCropBoxData');
+      canvasData = $image.cropper('getCanvasData');
+
+      options.ready = function () {
+        $image.cropper('setCropBoxData', cropBoxData);
+        $image.cropper('setCanvasData', canvasData);
+      };
+    } else if (type === 'radio') {
+      options[name] = $this.val();
+    }
+
+    $image.cropper('destroy').cropper(options);
+  });
+
+
+  // Methods
+  $('.docs-buttons').on('click', '[data-method]', function () {
+    var $this = $(this);
+    var data = $this.data();
+    var cropper = $image.data('cropper');
+    var cropped;
+    var $target;
+    var result;
+
+    if ($this.prop('disabled') || $this.hasClass('disabled')) {
+      return;
+    }
+
+    if (cropper && data.method) {
+      data = $.extend({}, data); // Clone a new one
+
+      if (typeof data.target !== 'undefined') {
+        $target = $(data.target);
+
+        if (typeof data.option === 'undefined') {
+          try {
+            data.option = JSON.parse($target.val());
+          } catch (e) {
+            console.log(e.message);
+          }
+        }
+      }
+
+      cropped = cropper.cropped;
+
+      switch (data.method) {
+        case 'rotate':
+          if (cropped && options.viewMode > 0) {
+            $image.cropper('clear');
+          }
+
+          break;
+
+        case 'getCroppedCanvas':
+          if (uploadedImageType === 'image/jpeg') {
+            if (!data.option) {
+              data.option = {};
+            }
+
+            data.option.fillColor = '#fff';
+          }
+
+          break;
+      }
+
+      result = $image.cropper(data.method, data.option, data.secondOption);
+
+      switch (data.method) {
+        case 'rotate':
+          if (cropped && options.viewMode > 0) {
+            $image.cropper('crop');
+          }
+
+          break;
+
+        case 'scaleX':
+        case 'scaleY':
+          $(this).data('option', -data.option);
+          break;
+
+        case 'getCroppedCanvas':
+          if (result) {
+            // Bootstrap's Modal
+            $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
+
+            if (!$download.hasClass('disabled')) {
+              download.download = uploadedImageName;
+              $download.attr('href', result.toDataURL(uploadedImageType));
+            }
+          }
+
+          break;
+
+        case 'destroy':
+          if (uploadedImageURL) {
+            URL.revokeObjectURL(uploadedImageURL);
+            uploadedImageURL = '';
+            $image.attr('src', originalImageURL);
+          }
+
+          break;
+      }
+
+      if ($.isPlainObject(result) && $target) {
+        try {
+          $target.val(JSON.stringify(result));
+        } catch (e) {
+          console.log(e.message);
+        }
+      }
+
+    }
+  });
+
+
+  // Keyboard
+  $(document.body).on('keydown', function (e) {
+
+    if (!$image.data('cropper') || this.scrollTop > 300) {
+      return;
+    }
+
+    switch (e.which) {
+      case 37:
+        e.preventDefault();
+        $image.cropper('move', -1, 0);
+        break;
+
+      case 38:
+        e.preventDefault();
+        $image.cropper('move', 0, -1);
+        break;
+
+      case 39:
+        e.preventDefault();
+        $image.cropper('move', 1, 0);
+        break;
+
+      case 40:
+        e.preventDefault();
+        $image.cropper('move', 0, 1);
+        break;
+    }
+
+  });
+
+
+  // Import image
+  var $inputImage = $('#inputImage');
+
+  if (URL) {
+    $inputImage.change(function () {
+      var files = this.files;
+      var file;
+
+      if (!$image.data('cropper')) {
+        return;
+      }
+
+      if (files && files.length) {
+        file = files[0];
+
+        if (/^image\/\w+$/.test(file.type)) {
+          uploadedImageName = file.name;
+          uploadedImageType = file.type;
+
+          if (uploadedImageURL) {
+            URL.revokeObjectURL(uploadedImageURL);
+          }
+
+          uploadedImageURL = URL.createObjectURL(file);
+          $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
+          $inputImage.val('');
+        } else {
+          window.alert('Please choose an image file.');
+        }
+      }
+    });
+  } else {
+    $inputImage.prop('disabled', true).parent().addClass('disabled');
+  }
+
+});