[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  let activated = false; // Update image
   6  
   7  const rotate = (angle, image) => {
   8    // The canvas where we will rotate the image
   9    let canvas = document.createElement('canvas'); // Pseudo rectangle calculation
  10  
  11    if (angle >= 0 && angle < 45 || angle >= 135 && angle < 225 || angle >= 315 && angle <= 360) {
  12      canvas.width = image.naturalWidth;
  13      canvas.height = image.naturalHeight;
  14    } else {
  15      // swap
  16      canvas.width = image.naturalHeight;
  17      canvas.height = image.naturalWidth;
  18    }
  19  
  20    const ctx = canvas.getContext('2d');
  21    ctx.clearRect(0, 0, canvas.width, canvas.height);
  22    ctx.translate(canvas.width / 2, canvas.height / 2);
  23    ctx.rotate(angle * Math.PI / 180);
  24    ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2); // The format
  25  
  26    const format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : 'jpg'; // The quality
  27  
  28    const quality = document.getElementById('jform_rotate_quality').value; // Creating the data from the canvas
  29  
  30    Joomla.MediaManager.Edit.current.contents = canvas.toDataURL(`image/$format}`, quality); // Updating the preview element
  31  
  32    image.width = canvas.width;
  33    image.height = canvas.height;
  34    image.src = '';
  35    requestAnimationFrame(() => requestAnimationFrame(() => {
  36      image.src = Joomla.MediaManager.Edit.current.contents;
  37    })); // Update the angle input box
  38  
  39    document.getElementById('jform_rotate_a').value = angle; // Notify the app that a change has been made
  40  
  41    window.dispatchEvent(new Event('mediaManager.history.point'));
  42    canvas = null;
  43  };
  44  
  45  const initRotate = image => {
  46    if (!activated) {
  47      // The number input listener
  48      document.getElementById('jform_rotate_a').addEventListener('change', ({
  49        target
  50      }) => {
  51        rotate(parseInt(target.value, 10), image);
  52        target.value = 0; // Deselect all buttons
  53  
  54        [].slice.call(document.querySelectorAll('#jform_rotate_distinct label')).forEach(element => {
  55          element.classList.remove('active');
  56          element.classList.remove('focus');
  57        });
  58      }); // The 90 degree rotate buttons listeners
  59  
  60      [].slice.call(document.querySelectorAll('#jform_rotate_distinct [type=radio]')).forEach(element => {
  61        element.addEventListener('click', ({
  62          target
  63        }) => {
  64          rotate(parseInt(target.value, 10), image); // Deselect all buttons
  65  
  66          [].slice.call(document.querySelectorAll('#jform_rotate_distinct label')).forEach(el => {
  67            el.classList.remove('active');
  68            el.classList.remove('focus');
  69          });
  70        });
  71      });
  72      activated = true;
  73    }
  74  };
  75  
  76  window.addEventListener('media-manager-edit-init', () => {
  77    // Register the Events
  78    Joomla.MediaManager.Edit.plugins.rotate = {
  79      Activate(image) {
  80        return new Promise(resolve => {
  81          // Initialize
  82          initRotate(image);
  83          resolve();
  84        });
  85      },
  86  
  87      Deactivate() {
  88        return new Promise(resolve => {
  89          resolve();
  90        });
  91      }
  92  
  93    };
  94  }, {
  95    once: true
  96  });