Add project files.

assets/js/pages/features/miscellaneous/cropper.js

@@ -0,0 +1,124 @@
+'use strict';
+
+// Class definition
+var KTCropperDemo = function() {
+
+  // Private functions
+  var initCropperDemo = function() {
+    var image = document.getElementById('image');
+
+    var options = {
+      crop: function(event) {
+        document.getElementById('dataX').value = Math.round(event.detail.x);
+        document.getElementById('dataY').value = Math.round(event.detail.y);
+        document.getElementById('dataWidth').value = Math.round(event.detail.width);
+        document.getElementById('dataHeight').value = Math.round(event.detail.height);
+        document.getElementById('dataRotate').value = event.detail.rotate;
+        document.getElementById('dataScaleX').value = event.detail.scaleX;
+        document.getElementById('dataScaleY').value = event.detail.scaleY;
+
+        var lg = document.getElementById('cropper-preview-lg');
+        lg.innerHTML = '';
+        lg.appendChild(cropper.getCroppedCanvas({width: 256, height: 160}));
+
+        var md = document.getElementById('cropper-preview-md');
+        md.innerHTML = '';
+        md.appendChild(cropper.getCroppedCanvas({width: 128, height: 80}));
+
+        var sm = document.getElementById('cropper-preview-sm');
+        sm.innerHTML = '';
+        sm.appendChild(cropper.getCroppedCanvas({width: 64, height: 40}));
+
+        var xs = document.getElementById('cropper-preview-xs');
+        xs.innerHTML = '';
+        xs.appendChild(cropper.getCroppedCanvas({width: 32, height: 20}));
+      },
+    };
+
+    var cropper = new Cropper(image, options);
+
+    var buttons = document.getElementById('cropper-buttons');
+    var methods = buttons.querySelectorAll('[data-method]');
+    methods.forEach(function(button) {
+      button.addEventListener('click', function(e) {
+        var method = button.getAttribute('data-method');
+        var option = button.getAttribute('data-option');
+        var option2 = button.getAttribute('data-second-option');
+
+        try {
+          option = JSON.parse(option);
+        }
+        catch (e) {
+        }
+
+        var result;
+        if (!option2) {
+          result = cropper[method](option, option2);
+        }
+        else if (option) {
+          result = cropper[method](option);
+        }
+        else {
+          result = cropper[method]();
+        }
+
+        if (method === 'getCroppedCanvas') {
+          var modal = document.getElementById('getCroppedCanvasModal');
+          var modalBody = modal.querySelector('.modal-body');
+          modalBody.innerHTML = '';
+          modalBody.appendChild(result);
+        }
+
+        var input = document.querySelector('#putData');
+        try {
+          input.value = JSON.stringify(result);
+        }
+        catch (e) {
+          if (!result) {
+            input.value = result;
+          }
+        }
+      });
+    });
+
+    // set aspect ratio option buttons
+    var radioOptions = document.getElementById('setAspectRatio').querySelectorAll('[name="aspectRatio"]');
+    radioOptions.forEach(function(button) {
+      button.addEventListener('click', function(e) {
+        cropper.setAspectRatio(e.target.value);
+      });
+    });
+
+    // set view mode
+    var viewModeOptions = document.getElementById('viewMode').querySelectorAll('[name="viewMode"]');
+    viewModeOptions.forEach(function(button) {
+      button.addEventListener('click', function(e) {
+        cropper.destroy();
+        cropper = new Cropper(image, Object.assign({}, options, {viewMode: e.target.value}));
+      });
+    });
+
+    var toggleoptions = document.getElementById('toggleOptionButtons').querySelectorAll('[type="checkbox"]');
+    toggleoptions.forEach(function(checkbox) {
+      checkbox.addEventListener('click', function(e) {
+        var appendOption = {};
+        appendOption[e.target.getAttribute('name')] = e.target.checked;
+        options = Object.assign({}, options, appendOption);
+        cropper.destroy();
+        cropper = new Cropper(image, options);
+      })
+    })
+
+  };
+
+  return {
+    // public functions
+    init: function() {
+      initCropperDemo();
+    },
+  };
+}();
+
+jQuery(document).ready(function() {
+  KTCropperDemo.init();
+});