[Summary view] [Print] [Text view]

   1  (function () {
   2    'use strict';
   3  
   4    /**
   5     * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
   6     * @license    GNU General Public License version 2 or later; see LICENSE.txt
   7     */
   8  
   9    /* global Cropper */
  10    var formElements;
  11    var activated = false;
  12    var instance;
  13  
  14    var addListeners = function addListeners() {
  15      formElements.cropX.addEventListener('change', function (_ref) {
  16        var currentTarget = _ref.currentTarget;
  17        instance.setData({
  18          x: parseInt(currentTarget.value, 10)
  19        });
  20      });
  21      formElements.cropY.addEventListener('change', function (_ref2) {
  22        var currentTarget = _ref2.currentTarget;
  23        instance.setData({
  24          y: parseInt(currentTarget.value, 10)
  25        });
  26      });
  27      formElements.cropWidth.addEventListener('change', function (_ref3) {
  28        var currentTarget = _ref3.currentTarget;
  29        instance.setData({
  30          width: parseInt(currentTarget.value, 10)
  31        });
  32      });
  33      formElements.cropHeight.addEventListener('change', function (_ref4) {
  34        var currentTarget = _ref4.currentTarget;
  35        instance.setData({
  36          height: parseInt(currentTarget.value, 10)
  37        });
  38      });
  39      formElements.aspectRatio.addEventListener('change', function (_ref5) {
  40        var currentTarget = _ref5.currentTarget;
  41        instance.setAspectRatio(currentTarget.value);
  42      });
  43      activated = true;
  44    };
  45  
  46    var init = function init(image) {
  47      // Set default aspect ratio after numeric check, option has a dummy value
  48      var defaultCropFactor = image.naturalWidth / image.naturalHeight;
  49  
  50      if (!Number.isNaN(defaultCropFactor) && Number.isFinite(defaultCropFactor)) {
  51        formElements.cropAspectRatioOption.value = defaultCropFactor;
  52      } // Initiate the cropper
  53  
  54  
  55      instance = new Cropper(image, {
  56        viewMode: 1,
  57        responsive: true,
  58        restore: true,
  59        autoCrop: true,
  60        movable: false,
  61        zoomable: false,
  62        rotatable: false,
  63        autoCropArea: 1,
  64        // scalable: false,
  65        crop: function crop(e) {
  66          formElements.cropX.value = Math.round(e.detail.x);
  67          formElements.cropY.value = Math.round(e.detail.y);
  68          formElements.cropWidth.value = Math.round(e.detail.width);
  69          formElements.cropHeight.value = Math.round(e.detail.height);
  70          var format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : Joomla.MediaManager.Edit.original.extension;
  71          var quality = formElements.cropQuality.value; // Update the store
  72  
  73          Joomla.MediaManager.Edit.current.contents = this.cropper.getCroppedCanvas().toDataURL("image/" + format, quality); // Notify the app that a change has been made
  74  
  75          window.dispatchEvent(new Event('mediaManager.history.point'));
  76        }
  77      }); // Add listeners
  78  
  79      if (!activated) {
  80        addListeners();
  81      }
  82  
  83      instance.setAspectRatio(formElements.cropAspectRatioOption.value);
  84    }; // Register the Events
  85  
  86  
  87    window.addEventListener('media-manager-edit-init', function () {
  88      formElements = {
  89        aspectRatio: document.getElementById('jform_aspectRatio'),
  90        cropHeight: document.getElementById('jform_crop_height'),
  91        cropWidth: document.getElementById('jform_crop_width'),
  92        cropY: document.getElementById('jform_crop_y'),
  93        cropX: document.getElementById('jform_crop_x'),
  94        cropQuality: document.getElementById('jform_crop_quality'),
  95        cropAspectRatioOption: document.querySelector('.crop-aspect-ratio-option')
  96      };
  97      Joomla.MediaManager.Edit.plugins.crop = {
  98        Activate: function Activate(image) {
  99          return new Promise(function (resolve
 100          /* , reject */
 101          ) {
 102            init(image);
 103            resolve();
 104          });
 105        },
 106        Deactivate: function Deactivate(image) {
 107          return new Promise(function (resolve
 108          /* , reject */
 109          ) {
 110            if (image.cropper) {
 111              image.cropper.destroy();
 112              instance = null;
 113            }
 114  
 115            resolve();
 116          });
 117        }
 118      };
 119    }, {
 120      once: true
 121    });
 122  
 123  })();