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