Merge remote-tracking branch 'mike/master' into dev

1 files changed, 298 insertions, 0 deletions

diff --git a/library/cropperjs/docs/js/main.js b/library/cropperjs/docs/js/main.js
new file mode 100644
index 000000000..d74afbd60
--- /dev/null
+++ b/library/cropperjs/docs/js/main.js
@@ -0,0 +1,298 @@
+window.onload = function () {
+
+  'use strict';
+
+  var Cropper = window.Cropper;
+  var URL = window.URL || window.webkitURL;
+  var container = document.querySelector('.img-container');
+  var image = container.getElementsByTagName('img').item(0);
+  var download = document.getElementById('download');
+  var actions = document.getElementById('actions');
+  var dataX = document.getElementById('dataX');
+  var dataY = document.getElementById('dataY');
+  var dataHeight = document.getElementById('dataHeight');
+  var dataWidth = document.getElementById('dataWidth');
+  var dataRotate = document.getElementById('dataRotate');
+  var dataScaleX = document.getElementById('dataScaleX');
+  var dataScaleY = document.getElementById('dataScaleY');
+  var options = {
+    aspectRatio: 16 / 9,
+    preview: '.img-preview',
+    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) {
+      var data = e.detail;
+
+      console.log(e.type);
+      dataX.value = Math.round(data.x);
+      dataY.value = Math.round(data.y);
+      dataHeight.value = Math.round(data.height);
+      dataWidth.value = Math.round(data.width);
+      dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
+      dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
+      dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
+    },
+    zoom: function (e) {
+      console.log(e.type, e.detail.ratio);
+    }
+  };
+  var cropper = new Cropper(image, options);
+  var originalImageURL = image.src;
+  var uploadedImageType = 'image/jpeg';
+  var uploadedImageURL;
+
+  // Tooltip
+  $('[data-toggle="tooltip"]').tooltip();
+
+  // Buttons
+  if (!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.download === 'undefined') {
+    download.className += ' disabled';
+  }
+
+  // Options
+  actions.querySelector('.docs-toggles').onchange = function (event) {
+    var e = event || window.event;
+    var target = e.target || e.srcElement;
+    var cropBoxData;
+    var canvasData;
+    var isCheckbox;
+    var isRadio;
+
+    if (!cropper) {
+      return;
+    }
+
+    if (target.tagName.toLowerCase() === 'label') {
+      target = target.querySelector('input');
+    }
+
+    isCheckbox = target.type === 'checkbox';
+    isRadio = target.type === 'radio';
+
+    if (isCheckbox || isRadio) {
+      if (isCheckbox) {
+        options[target.name] = target.checked;
+        cropBoxData = cropper.getCropBoxData();
+        canvasData = cropper.getCanvasData();
+
+        options.ready = function () {
+          console.log('ready');
+          cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
+        };
+      } else {
+        options[target.name] = target.value;
+        options.ready = function () {
+          console.log('ready');
+        };
+      }
+
+      // Restart
+      cropper.destroy();
+      cropper = new Cropper(image, options);
+    }
+  };
+
+  // Methods
+  actions.querySelector('.docs-buttons').onclick = function (event) {
+    var e = event || window.event;
+    var target = e.target || e.srcElement;
+    var cropped;
+    var result;
+    var input;
+    var data;
+
+    if (!cropper) {
+      return;
+    }
+
+    while (target !== this) {
+      if (target.getAttribute('data-method')) {
+        break;
+      }
+
+      target = target.parentNode;
+    }
+
+    if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
+      return;
+    }
+
+    data = {
+      method: target.getAttribute('data-method'),
+      target: target.getAttribute('data-target'),
+      option: target.getAttribute('data-option') || undefined,
+      secondOption: target.getAttribute('data-second-option') || undefined
+    };
+
+    cropped = cropper.cropped;
+
+    if (data.method) {
+      if (typeof data.target !== 'undefined') {
+        input = document.querySelector(data.target);
+
+        if (!target.hasAttribute('data-option') && data.target && input) {
+          try {
+            data.option = JSON.parse(input.value);
+          } catch (e) {
+            console.log(e.message);
+          }
+        }
+      }
+
+      switch (data.method) {
+        case 'rotate':
+          if (cropped && options.viewMode > 0) {
+            cropper.clear();
+          }
+
+          break;
+
+        case 'getCroppedCanvas':
+          try {
+            data.option = JSON.parse(data.option);
+          } catch (e) {
+            console.log(e.message);
+          }
+
+          if (uploadedImageType === 'image/jpeg') {
+            if (!data.option) {
+              data.option = {};
+            }
+
+            data.option.fillColor = '#fff';
+          }
+
+          break;
+      }
+
+      result = cropper[data.method](data.option, data.secondOption);
+
+      switch (data.method) {
+        case 'rotate':
+          if (cropped && options.viewMode > 0) {
+            cropper.crop();
+          }
+
+          break;
+
+        case 'scaleX':
+        case 'scaleY':
+          target.setAttribute('data-option', -data.option);
+          break;
+
+        case 'getCroppedCanvas':
+          if (result) {
+            // Bootstrap's Modal
+            $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
+
+            if (!download.disabled) {
+              download.href = result.toDataURL(uploadedImageType);
+            }
+          }
+
+          break;
+
+        case 'destroy':
+          cropper = null;
+
+          if (uploadedImageURL) {
+            URL.revokeObjectURL(uploadedImageURL);
+            uploadedImageURL = '';
+            image.src = originalImageURL;
+          }
+
+          break;
+      }
+
+      if (typeof result === 'object' && result !== cropper && input) {
+        try {
+          input.value = JSON.stringify(result);
+        } catch (e) {
+          console.log(e.message);
+        }
+      }
+    }
+  };
+
+  document.body.onkeydown = function (event) {
+    var e = event || window.event;
+
+    if (!cropper || this.scrollTop > 300) {
+      return;
+    }
+
+    switch (e.keyCode) {
+      case 37:
+        e.preventDefault();
+        cropper.move(-1, 0);
+        break;
+
+      case 38:
+        e.preventDefault();
+        cropper.move(0, -1);
+        break;
+
+      case 39:
+        e.preventDefault();
+        cropper.move(1, 0);
+        break;
+
+      case 40:
+        e.preventDefault();
+        cropper.move(0, 1);
+        break;
+    }
+  };
+
+  // Import image
+  var inputImage = document.getElementById('inputImage');
+
+  if (URL) {
+    inputImage.onchange = function () {
+      var files = this.files;
+      var file;
+
+      if (cropper && files && files.length) {
+        file = files[0];
+
+        if (/^image\/\w+/.test(file.type)) {
+          uploadedImageType = file.type;
+
+          if (uploadedImageURL) {
+            URL.revokeObjectURL(uploadedImageURL);
+          }
+
+          image.src = uploadedImageURL = URL.createObjectURL(file);
+          cropper.destroy();
+          cropper = new Cropper(image, options);
+          inputImage.value = null;
+        } else {
+          window.alert('Please choose an image file.');
+        }
+      }
+    };
+  } else {
+    inputImage.disabled = true;
+    inputImage.parentNode.className += ' disabled';
+  }
+};