[Summary view] [Print] [Text view]

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