[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  
   7    document.addEventListener('DOMContentLoaded', () => {
   8      const folders = [...document.querySelectorAll('.folder-url, .component-folder-url, .plugin-folder-url, .layout-folder-url')];
   9      const innerLists = [...document.querySelectorAll('.folder ul, .component-folder ul, .plugin-folder ul, .layout-folder ul')];
  10      const openLists = [...document.querySelectorAll('.show > ul')];
  11      const fileModalFolders = [...document.querySelectorAll('#fileModal .folder-url')];
  12      const folderModalFolders = [...document.querySelectorAll('#folderModal .folder-url')]; // Hide all the folders when the page loads
  13  
  14      innerLists.forEach(innerList => {
  15        innerList.classList.add('hidden');
  16      }); // Show all the lists in the path of an open file
  17  
  18      openLists.forEach(openList => {
  19        openList.classList.remove('hidden');
  20      }); // Stop the default action of anchor tag on a click event and release the inner list
  21  
  22      folders.forEach(folder => {
  23        folder.addEventListener('click', event => {
  24          event.preventDefault();
  25          const list = event.currentTarget.parentNode.querySelector('ul');
  26  
  27          if (!list) {
  28            return;
  29          }
  30  
  31          if (!list.classList.contains('hidden')) {
  32            list.classList.add('hidden');
  33          } else {
  34            list.classList.remove('hidden');
  35          }
  36        });
  37      }); // File modal tree selector
  38  
  39      fileModalFolders.forEach(fileModalFolder => {
  40        fileModalFolder.addEventListener('click', event => {
  41          event.preventDefault();
  42          fileModalFolders.forEach(fileModalFold => {
  43            fileModalFold.classList.remove('selected');
  44          });
  45          event.currentTarget.classList.add('selected');
  46          const ismedia = event.currentTarget.dataset.base === 'media' ? 1 : 0;
  47          [...document.querySelectorAll('#fileModal input.address')].forEach(element => {
  48            element.value = event.currentTarget.getAttribute('data-id');
  49          });
  50          [...document.querySelectorAll('#fileModal input[name="isMedia"]')].forEach(el => {
  51            el.value = ismedia;
  52          });
  53        });
  54      }); // Folder modal tree selector
  55  
  56      folderModalFolders.forEach(folderModalFolder => {
  57        folderModalFolder.addEventListener('click', event => {
  58          event.preventDefault();
  59          folderModalFolders.forEach(folderModalFldr => {
  60            folderModalFldr.classList.remove('selected');
  61          });
  62          event.currentTarget.classList.add('selected');
  63          const ismedia = event.currentTarget.dataset.base === 'media' ? 1 : 0;
  64          [...document.querySelectorAll('#folderModal input.address')].forEach(element => {
  65            element.value = event.currentTarget.getAttribute('data-id');
  66          });
  67          [...document.querySelectorAll('#folderModal input[name="isMedia"]')].forEach(el => {
  68            el.value = ismedia;
  69          });
  70        });
  71      });
  72      const treeContainer = document.querySelector('#treeholder .treeselect');
  73      const listEls = [...treeContainer.querySelectorAll('.folder.show')];
  74      const filePathEl = document.querySelector('p.lead.hidden.path');
  75  
  76      if (filePathEl) {
  77        let filePathTmp = document.querySelector('p.lead.hidden.path').innerText;
  78  
  79        if (filePathTmp && filePathTmp.charAt(0) === '/') {
  80          filePathTmp = filePathTmp.slice(1);
  81          filePathTmp = filePathTmp.split('/');
  82          filePathTmp = filePathTmp[filePathTmp.length - 1];
  83          listEls.forEach((element, index) => {
  84            element.querySelector('a').classList.add('active');
  85  
  86            if (index === listEls.length - 1) {
  87              const parentUl = element.querySelector('ul');
  88              [...parentUl.querySelectorAll('li')].forEach(liElement => {
  89                const aEl = liElement.querySelector('a');
  90                const spanEl = aEl.querySelector('span');
  91  
  92                if (spanEl && spanEl.innerText.trim()) {
  93                  aEl.classList.add('active');
  94                }
  95              });
  96            }
  97          });
  98        }
  99      } // Image cropper
 100  
 101  
 102      const image = document.getElementById('image-crop');
 103  
 104      if (image) {
 105        const width = document.getElementById('imageWidth').value;
 106        const height = document.getElementById('imageHeight').value; // eslint-disable-next-line no-new
 107  
 108        new window.Cropper(image, {
 109          viewMode: 1,
 110          scalable: true,
 111          zoomable: false,
 112          movable: false,
 113          dragMode: 'crop',
 114          cropBoxMovable: true,
 115          cropBoxResizable: true,
 116          autoCrop: true,
 117          autoCropArea: 1,
 118          background: true,
 119          center: true,
 120          minCanvasWidth: width,
 121          minCanvasHeight: height
 122        });
 123        image.addEventListener('crop', e => {
 124          document.getElementById('x').value = e.detail.x;
 125          document.getElementById('y').value = e.detail.y;
 126          document.getElementById('w').value = e.detail.width;
 127          document.getElementById('h').value = e.detail.height;
 128        });
 129      }
 130    });
 131  })();