primo commit

media/com_templates/css/admin-templates-default.css

@@ -0,0 +1,241 @@
+@charset "UTF-8";
+.selected {
+  color: #fff;
+  background: #08c;
+}
+
+.selected:hover, .selected:focus {
+  color: #fff;
+  background: #08c !important;
+}
+
+#deleteFolder {
+  margin: 0;
+}
+
+#image-crop {
+  width: auto;
+  height: auto;
+  max-width: 100% !important;
+}
+
+.tree-holder {
+  overflow-x: auto;
+}
+
+.modal-body .tree-holder {
+  max-height: 60vh;
+}
+
+@media (width <= 768px) {
+  .modal-title {
+    font-size: 1rem;
+  }
+
+  .modal-body .tree-holder {
+    max-height: 12vh;
+    margin-bottom: 20px;
+  }
+
+  .modal-body .card-body {
+    padding: .75rem;
+  }
+
+  .modal-body .col-md-4, .modal-body .col-md-8 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .card-body .mt-2 {
+    font-size: 12px;
+  }
+}
+
+.treeselect a, #core-pane.active {
+  display: block;
+}
+
+#core-pane {
+  display: none;
+}
+
+#core-pane .CodeMirror-code {
+  background-color: #f0f0ee;
+}
+
+.switcher-label-0, .switcher-label-1 {
+  white-space: nowrap;
+}
+
+[dir="rtl"] #core-pane textarea, #override-pane textarea, [dir="rtl"] #core-pane joomla-editor-codemirror, #override-pane joomla-editor-codemirror {
+  direction: ltr;
+}
+
+[dir="rtl"] #toggle-buttons {
+  text-align: right !important;
+}
+
+.diff-pane {
+  border: 1px solid #dfdfdf;
+  min-height: 100px;
+  max-height: 350px;
+  overflow: auto;
+}
+
+#diff-main.active {
+  display: block;
+}
+
+#diff-main {
+  display: none;
+}
+
+.diff-wrapper.diff {
+  --tab-size: 4;
+  color: #000;
+  empty-cells: show;
+  border-spacing: 0;
+  border-collapse: collapse;
+  background: repeating-linear-gradient(-45deg, #f5f5f5, #f5f5f5 .5em, #e8e8e8 .5em 1em);
+  width: 100%;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.diff-wrapper.diff th {
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
+  font-weight: 700;
+}
+
+.diff-wrapper.diff td {
+  vertical-align: baseline;
+}
+
+.diff-wrapper.diff td, .diff-wrapper.diff th {
+  border-collapse: separate;
+  background: #fff;
+  border: none;
+  padding: 1px 2px;
+}
+
+.diff-wrapper.diff td:empty:after, .diff-wrapper.diff th:empty:after {
+  visibility: hidden;
+  content: " ";
+}
+
+.diff-wrapper.diff td a, .diff-wrapper.diff th a {
+  color: #000;
+  pointer-events: none;
+  cursor: inherit;
+}
+
+.diff-wrapper.diff thead th {
+  text-align: left;
+  background: #f7f7f7;
+  border-bottom: 1px solid #ddd;
+  padding: 4px;
+  position: sticky;
+  top: 0;
+}
+
+.diff-wrapper.diff tbody.skipped {
+  border-top: 1px solid #ddd;
+}
+
+.diff-wrapper.diff tbody.skipped td, .diff-wrapper.diff tbody.skipped th {
+  display: none;
+}
+
+.diff-wrapper.diff tbody th {
+  color: #999;
+  text-align: right;
+  vertical-align: top;
+  background: #f7f7f7;
+  border-right: 1px solid #ddd;
+  width: 4em;
+  padding-right: 2em;
+  font-weight: 400;
+}
+
+.diff-wrapper.diff th.n-new {
+  border-left: 1px solid #ddd;
+}
+
+.diff-wrapper.diff tbody th.sign {
+  text-align: center;
+  background: #fff;
+  border-left: 1px solid #ddd;
+  width: 1em;
+  padding: 1px 0;
+}
+
+.diff-wrapper.diff tbody th.sign.del {
+  background: #fbe1e1;
+}
+
+.diff-wrapper.diff tbody th.sign.ins {
+  background: #e1fbe1;
+}
+
+.diff-wrapper.diff.diff-html {
+  tab-size: var(--tab-size);
+  white-space: pre-wrap;
+}
+
+.diff-wrapper.diff.diff-html .ch {
+  background-position: 0;
+  background-repeat: repeat-x;
+  background-clip: border-box;
+  line-height: 1em;
+}
+
+.diff-wrapper.diff.diff-html .ch.sp {
+  background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=\"xMinYMid meet\" viewBox=\"0 0 12 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z\" fill=\"rgba%2860, 60, 60, 50%25%29\"/%3E%3C/svg%3E");
+  background-size: 1ch 1.25em;
+}
+
+.diff-wrapper.diff.diff-html .ch.tab {
+  background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=\"xMinYMid meet\" viewBox=\"0 0 12 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z\" fill=\"rgba%2860, 60, 60, 50%25%29\"/%3E%3C/svg%3E");
+  background-position: 2px;
+  background-size: calc(var(--tab-size) * 1ch) 1.25em;
+}
+
+.diff-wrapper.diff.diff-html.diff-combined .change.change-rep .rep {
+  white-space: normal;
+}
+
+.diff-wrapper.diff.diff-html .change.change-eq .old, .diff-wrapper.diff.diff-html .change.change-eq .new {
+  background: #fff;
+}
+
+.diff-wrapper.diff.diff-html .change .old {
+  background: #fbe1e1;
+}
+
+.diff-wrapper.diff.diff-html .change .new {
+  background: #e1fbe1;
+}
+
+.diff-wrapper.diff.diff-html .change .rep {
+  background: #fef6d9;
+}
+
+.diff-wrapper.diff.diff-html .change .old.none, .diff-wrapper.diff.diff-html .change .new.none, .diff-wrapper.diff.diff-html .change .rep.none {
+  cursor: not-allowed;
+  background: none;
+}
+
+.diff-wrapper.diff.diff-html .change ins, .diff-wrapper.diff.diff-html .change del {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.diff-wrapper.diff.diff-html .change ins {
+  background: #94f094;
+}
+
+.diff-wrapper.diff.diff-html .change del {
+  background: #f09494;
+}

media/com_templates/css/admin-templates-default.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";.selected{color:#fff;background:#08c}.selected:hover,.selected:focus{color:#fff;background:#08c!important}#deleteFolder{margin:0}#image-crop{width:auto;height:auto;max-width:100%!important}.tree-holder{overflow-x:auto}.modal-body .tree-holder{max-height:60vh}@media (width<=768px){.modal-title{font-size:1rem}.modal-body .tree-holder{max-height:12vh;margin-bottom:20px}.modal-body .card-body{padding:.75rem}.modal-body .col-md-4,.modal-body .col-md-8{padding-left:0;padding-right:0}.card-body .mt-2{font-size:12px}}.treeselect a,#core-pane.active{display:block}#core-pane{display:none}#core-pane .CodeMirror-code{background-color:#f0f0ee}.switcher-label-0,.switcher-label-1{white-space:nowrap}[dir=rtl] #core-pane textarea,#override-pane textarea,[dir=rtl] #core-pane joomla-editor-codemirror,#override-pane joomla-editor-codemirror{direction:ltr}[dir=rtl] #toggle-buttons{text-align:right!important}.diff-pane{border:1px solid #dfdfdf;min-height:100px;max-height:350px;overflow:auto}#diff-main.active{display:block}#diff-main{display:none}.diff-wrapper.diff{--tab-size:4;color:#000;empty-cells:show;border-spacing:0;border-collapse:collapse;background:repeating-linear-gradient(-45deg,#f5f5f5,#f5f5f5 .5em,#e8e8e8 .5em 1em);width:100%;font-family:monospace;font-size:13px}.diff-wrapper.diff th{cursor:default;-webkit-user-select:none;user-select:none;font-weight:700}.diff-wrapper.diff td{vertical-align:baseline}.diff-wrapper.diff td,.diff-wrapper.diff th{border-collapse:separate;background:#fff;border:none;padding:1px 2px}.diff-wrapper.diff td:empty:after,.diff-wrapper.diff th:empty:after{visibility:hidden;content:" "}.diff-wrapper.diff td a,.diff-wrapper.diff th a{color:#000;pointer-events:none;cursor:inherit}.diff-wrapper.diff thead th{text-align:left;background:#f7f7f7;border-bottom:1px solid #ddd;padding:4px;position:sticky;top:0}.diff-wrapper.diff tbody.skipped{border-top:1px solid #ddd}.diff-wrapper.diff tbody.skipped td,.diff-wrapper.diff tbody.skipped th{display:none}.diff-wrapper.diff tbody th{color:#999;text-align:right;vertical-align:top;background:#f7f7f7;border-right:1px solid #ddd;width:4em;padding-right:2em;font-weight:400}.diff-wrapper.diff th.n-new{border-left:1px solid #ddd}.diff-wrapper.diff tbody th.sign{text-align:center;background:#fff;border-left:1px solid #ddd;width:1em;padding:1px 0}.diff-wrapper.diff tbody th.sign.del{background:#fbe1e1}.diff-wrapper.diff tbody th.sign.ins{background:#e1fbe1}.diff-wrapper.diff.diff-html{tab-size:var(--tab-size);white-space:pre-wrap}.diff-wrapper.diff.diff-html .ch{background-position:0;background-repeat:repeat-x;background-clip:border-box;line-height:1em}.diff-wrapper.diff.diff-html .ch.sp{background-image:url("data:image/svg+xml,%3Csvg preserveAspectRatio=\"xMinYMid meet\" viewBox=\"0 0 12 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z\" fill=\"rgba%2860, 60, 60, 50%25%29\"/%3E%3C/svg%3E");background-size:1ch 1.25em}.diff-wrapper.diff.diff-html .ch.tab{background-image:url("data:image/svg+xml,%3Csvg preserveAspectRatio=\"xMinYMid meet\" viewBox=\"0 0 12 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z\" fill=\"rgba%2860, 60, 60, 50%25%29\"/%3E%3C/svg%3E");background-position:2px;background-size:calc(var(--tab-size)*1ch)1.25em}.diff-wrapper.diff.diff-html.diff-combined .change.change-rep .rep{white-space:normal}.diff-wrapper.diff.diff-html .change.change-eq .old,.diff-wrapper.diff.diff-html .change.change-eq .new{background:#fff}.diff-wrapper.diff.diff-html .change .old{background:#fbe1e1}.diff-wrapper.diff.diff-html .change .new{background:#e1fbe1}.diff-wrapper.diff.diff-html .change .rep{background:#fef6d9}.diff-wrapper.diff.diff-html .change .old.none,.diff-wrapper.diff.diff-html .change .new.none,.diff-wrapper.diff.diff-html .change .rep.none{cursor:not-allowed;background:0 0}.diff-wrapper.diff.diff-html .change ins,.diff-wrapper.diff.diff-html .change del{font-weight:700;text-decoration:none}.diff-wrapper.diff.diff-html .change ins{background:#94f094}.diff-wrapper.diff.diff-html .change del{background:#f09494}

media/com_templates/joomla.asset.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
+  "name": "com_templates",
+  "version": "4.0.0",
+  "description": "Joomla CMS",
+  "license": "GPL-2.0-or-later",
+  "assets": [
+    {
+      "name": "com_templates.admin-template-toggle-assignment",
+      "type": "script",
+      "uri": "com_templates/admin-template-toggle-assignment.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "type": "module"
+      },
+      "version": "0480c2"
+    },
+    {
+      "name": "com_templates.admin-template-toggle-switch",
+      "type": "script",
+      "uri": "com_templates/admin-template-toggle-switch.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "type": "module"
+      },
+      "version": "8e5d80"
+    },
+    {
+      "name": "com_templates.admin-templates",
+      "type": "style",
+      "uri": "com_templates/admin-templates-default.min.css",
+      "version": "09765e"
+    },
+    {
+      "name": "com_templates.admin-templates",
+      "type": "script",
+      "uri": "com_templates/admin-templates-default.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "type": "module"
+      },
+      "version": "f515a4"
+    }
+  ]
+}

media/com_templates/js/admin-template-toggle-assignment.js

@@ -0,0 +1,19 @@
+/**
+ * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+Joomla = window.Joomla || {};
+(Joomla => {
+  Joomla.toggleAll = () => {
+    document.querySelectorAll('.chk-menulink').forEach(checkBox => {
+      checkBox.checked = !checkBox.checked;
+    });
+  };
+  Joomla.toggleMenutype = a => {
+    const checkBox = [].slice.call(document.getElementsByClassName(`menutype-${a}`));
+    checkBox.forEach(element => {
+      element.checked = !element.checked;
+    });
+  };
+})(Joomla);

media/com_templates/js/admin-template-toggle-assignment.min.js

@@ -0,0 +1,4 @@
+/**
+ * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */Joomla=window.Joomla||{},(c=>{c.toggleAll=()=>{document.querySelectorAll(".chk-menulink").forEach(e=>{e.checked=!e.checked})},c.toggleMenutype=e=>{[].slice.call(document.getElementsByClassName(`menutype-${e}`)).forEach(l=>{l.checked=!l.checked})}})(Joomla);

media/com_templates/js/admin-template-toggle-switch.js

@@ -0,0 +1,79 @@
+/**
+ * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+(() => {
+
+  const showDiffChangedOff = () => {
+    const diffMain = document.getElementById('diff-main');
+    if (diffMain) {
+      diffMain.classList.remove('active');
+      if (typeof Storage !== 'undefined') {
+        localStorage.removeItem('diffSwitchState');
+      }
+    }
+  };
+  const showDiffChangedOn = () => {
+    const diffMain = document.getElementById('diff-main');
+    if (diffMain) {
+      diffMain.classList.add('active');
+      if (typeof Storage !== 'undefined') {
+        localStorage.setItem('diffSwitchState', 'checked');
+      }
+    }
+  };
+  const showCoreChangedOff = () => {
+    const override = document.getElementById('override-pane');
+    const corePane = document.getElementById('core-pane');
+    const fieldset = override.parentElement.parentElement;
+    if (corePane && override) {
+      corePane.classList.remove('active');
+      if (fieldset.classList.contains('options-grid-form-half')) {
+        fieldset.classList.remove('options-grid-form-half');
+        fieldset.classList.add('options-grid-form-full');
+      }
+      if (typeof Storage !== 'undefined') {
+        localStorage.removeItem('coreSwitchState');
+      }
+    }
+  };
+  const showCoreChangedOn = () => {
+    const override = document.getElementById('override-pane');
+    const corePane = document.getElementById('core-pane');
+    const fieldset = override.parentElement.parentElement;
+    if (corePane && override) {
+      corePane.classList.add('active');
+      if (fieldset.classList.contains('options-grid-form-full')) {
+        fieldset.classList.remove('options-grid-form-full');
+        fieldset.classList.add('options-grid-form-half');
+      }
+      if (typeof Storage !== 'undefined') {
+        localStorage.setItem('coreSwitchState', 'checked');
+      }
+    }
+  };
+  document.addEventListener('DOMContentLoaded', () => {
+    const JformShowDiffOn = document.getElementById('jform_show_diff1');
+    const JformShowDiffOff = document.getElementById('jform_show_diff0');
+    const JformShowCoreOn = document.getElementById('jform_show_core1');
+    const JformShowCoreOff = document.getElementById('jform_show_core0');
+    if (JformShowDiffOn && JformShowDiffOff) {
+      JformShowDiffOn.addEventListener('click', showDiffChangedOn);
+      JformShowDiffOff.addEventListener('click', showDiffChangedOff);
+    }
+    if (JformShowCoreOn && JformShowCoreOff) {
+      JformShowCoreOn.addEventListener('click', showCoreChangedOn);
+      JformShowCoreOff.addEventListener('click', showCoreChangedOff);
+    }
+    if (typeof Storage !== 'undefined' && localStorage.getItem('coreSwitchState') && JformShowCoreOn) {
+      JformShowCoreOn.checked = true;
+      JformShowCoreOff.checked = false;
+      showCoreChangedOn();
+    }
+    if (typeof Storage !== 'undefined' && localStorage.getItem('diffSwitchState') && JformShowDiffOn) {
+      JformShowDiffOn.checked = true;
+      JformShowDiffOff.checked = false;
+      showDiffChangedOn();
+    }
+  });
+})();

media/com_templates/js/admin-template-toggle-switch.min.js

@@ -0,0 +1,4 @@
+/**
+ * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */(()=>{const d=()=>{const e=document.getElementById("diff-main");e&&(e.classList.remove("active"),typeof Storage<"u"&&localStorage.removeItem("diffSwitchState"))},i=()=>{const e=document.getElementById("diff-main");e&&(e.classList.add("active"),typeof Storage<"u"&&localStorage.setItem("diffSwitchState","checked"))},f=()=>{const e=document.getElementById("override-pane"),o=document.getElementById("core-pane"),t=e.parentElement.parentElement;o&&e&&(o.classList.remove("active"),t.classList.contains("options-grid-form-half")&&(t.classList.remove("options-grid-form-half"),t.classList.add("options-grid-form-full")),typeof Storage<"u"&&localStorage.removeItem("coreSwitchState"))},c=()=>{const e=document.getElementById("override-pane"),o=document.getElementById("core-pane"),t=e.parentElement.parentElement;o&&e&&(o.classList.add("active"),t.classList.contains("options-grid-form-full")&&(t.classList.remove("options-grid-form-full"),t.classList.add("options-grid-form-half")),typeof Storage<"u"&&localStorage.setItem("coreSwitchState","checked"))};document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("jform_show_diff1"),o=document.getElementById("jform_show_diff0"),t=document.getElementById("jform_show_core1"),n=document.getElementById("jform_show_core0");e&&o&&(e.addEventListener("click",i),o.addEventListener("click",d)),t&&n&&(t.addEventListener("click",c),n.addEventListener("click",f)),typeof Storage<"u"&&localStorage.getItem("coreSwitchState")&&t&&(t.checked=!0,n.checked=!1,c()),typeof Storage<"u"&&localStorage.getItem("diffSwitchState")&&e&&(e.checked=!0,o.checked=!1,i())})})();

media/com_templates/js/admin-templates-default.js

@@ -0,0 +1,129 @@
+/**
+ * @copyright   (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+(() => {
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const folders = document.querySelectorAll('.folder-url, .component-folder-url, .plugin-folder-url, .layout-folder-url');
+    const innerLists = document.querySelectorAll('.folder ul, .component-folder ul, .plugin-folder ul, .layout-folder ul');
+    const openLists = document.querySelectorAll('.show > ul');
+    const fileModalFolders = document.querySelectorAll('#fileModal .folder-url');
+    const folderModalFolders = document.querySelectorAll('#folderModal .folder-url');
+    // Hide all the folders when the page loads
+    innerLists.forEach(innerList => {
+      innerList.classList.add('hidden');
+    });
+
+    // Show all the lists in the path of an open file
+    openLists.forEach(openList => {
+      openList.classList.remove('hidden');
+    });
+
+    // Stop the default action of anchor tag on a click event and release the inner list
+    folders.forEach(folder => {
+      folder.addEventListener('click', event => {
+        event.preventDefault();
+        const list = event.currentTarget.parentNode.querySelector('ul');
+        if (!list) {
+          return;
+        }
+        if (!list.classList.contains('hidden')) {
+          list.classList.add('hidden');
+        } else {
+          list.classList.remove('hidden');
+        }
+      });
+    });
+
+    // File modal tree selector
+    fileModalFolders.forEach(fileModalFolder => {
+      fileModalFolder.addEventListener('click', event => {
+        event.preventDefault();
+        fileModalFolders.forEach(fileModalFold => {
+          fileModalFold.classList.remove('selected');
+        });
+        event.currentTarget.classList.add('selected');
+        const ismedia = event.currentTarget.dataset.base === 'media' ? 1 : 0;
+        document.querySelectorAll('#fileModal input.address').forEach(element => {
+          element.value = event.currentTarget.getAttribute('data-id');
+        });
+        document.querySelectorAll('#fileModal input[name="isMedia"]').forEach(el => {
+          el.value = ismedia;
+        });
+      });
+    });
+
+    // Folder modal tree selector
+    folderModalFolders.forEach(folderModalFolder => {
+      folderModalFolder.addEventListener('click', event => {
+        event.preventDefault();
+        folderModalFolders.forEach(folderModalFldr => {
+          folderModalFldr.classList.remove('selected');
+        });
+        event.currentTarget.classList.add('selected');
+        const ismedia = event.currentTarget.dataset.base === 'media' ? 1 : 0;
+        document.querySelectorAll('#folderModal input.address').forEach(element => {
+          element.value = event.currentTarget.getAttribute('data-id');
+        });
+        document.querySelectorAll('#folderModal input[name="isMedia"]').forEach(el => {
+          el.value = ismedia;
+        });
+      });
+    });
+    const treeContainer = document.querySelector('#treeholder .treeselect');
+    const listEls = treeContainer.querySelectorAll('.folder.show');
+    const filePathEl = document.querySelector('p.lead.hidden.path');
+    if (filePathEl) {
+      let filePathTmp = document.querySelector('p.lead.hidden.path').innerText;
+      if (filePathTmp && filePathTmp.charAt(0) === '/') {
+        filePathTmp = filePathTmp.slice(1);
+        filePathTmp = filePathTmp.split('/');
+        filePathTmp = filePathTmp[filePathTmp.length - 1];
+        listEls.forEach((element, index) => {
+          element.querySelector('a').classList.add('active');
+          if (index === listEls.length - 1) {
+            const parentUl = element.querySelector('ul');
+            parentUl.querySelectorAll('li').forEach(liElement => {
+              const aEl = liElement.querySelector('a');
+              const spanEl = aEl.querySelector('span');
+              if (spanEl && spanEl.innerText.trim()) {
+                aEl.classList.add('active');
+              }
+            });
+          }
+        });
+      }
+    }
+
+    // Image cropper
+    const image = document.getElementById('image-crop');
+    if (image) {
+      const width = document.getElementById('imageWidth').value;
+      const height = document.getElementById('imageHeight').value;
+
+      // eslint-disable-next-line no-new
+      new window.Cropper(image, {
+        viewMode: 1,
+        scalable: true,
+        zoomable: false,
+        movable: false,
+        dragMode: 'crop',
+        cropBoxMovable: true,
+        cropBoxResizable: true,
+        autoCrop: true,
+        autoCropArea: 1,
+        background: true,
+        center: true,
+        minCanvasWidth: width,
+        minCanvasHeight: height
+      });
+      image.addEventListener('crop', e => {
+        document.getElementById('x').value = e.detail.x;
+        document.getElementById('y').value = e.detail.y;
+        document.getElementById('w').value = e.detail.width;
+        document.getElementById('h').value = e.detail.height;
+      });
+    }
+  });
+})();

media/com_templates/js/admin-templates-default.min.js

@@ -0,0 +1,4 @@
+/**
+ * @copyright   (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */document.addEventListener("DOMContentLoaded",()=>{const s=document.querySelectorAll(".folder-url, .component-folder-url, .plugin-folder-url, .layout-folder-url"),u=document.querySelectorAll(".folder ul, .component-folder ul, .plugin-folder ul, .layout-folder ul"),f=document.querySelectorAll(".show > ul"),a=document.querySelectorAll("#fileModal .folder-url"),d=document.querySelectorAll("#folderModal .folder-url");u.forEach(e=>{e.classList.add("hidden")}),f.forEach(e=>{e.classList.remove("hidden")}),s.forEach(e=>{e.addEventListener("click",t=>{t.preventDefault();const l=t.currentTarget.parentNode.querySelector("ul");l&&(l.classList.contains("hidden")?l.classList.remove("hidden"):l.classList.add("hidden"))})}),a.forEach(e=>{e.addEventListener("click",t=>{t.preventDefault(),a.forEach(r=>{r.classList.remove("selected")}),t.currentTarget.classList.add("selected");const l=t.currentTarget.dataset.base==="media"?1:0;document.querySelectorAll("#fileModal input.address").forEach(r=>{r.value=t.currentTarget.getAttribute("data-id")}),document.querySelectorAll('#fileModal input[name="isMedia"]').forEach(r=>{r.value=l})})}),d.forEach(e=>{e.addEventListener("click",t=>{t.preventDefault(),d.forEach(r=>{r.classList.remove("selected")}),t.currentTarget.classList.add("selected");const l=t.currentTarget.dataset.base==="media"?1:0;document.querySelectorAll("#folderModal input.address").forEach(r=>{r.value=t.currentTarget.getAttribute("data-id")}),document.querySelectorAll('#folderModal input[name="isMedia"]').forEach(r=>{r.value=l})})});const c=document.querySelector("#treeholder .treeselect").querySelectorAll(".folder.show");if(document.querySelector("p.lead.hidden.path")){let e=document.querySelector("p.lead.hidden.path").innerText;e&&e.charAt(0)==="/"&&(e=e.slice(1),e=e.split("/"),e=e[e.length-1],c.forEach((t,l)=>{t.querySelector("a").classList.add("active"),l===c.length-1&&t.querySelector("ul").querySelectorAll("li").forEach(m=>{const n=m.querySelector("a"),i=n.querySelector("span");i&&i.innerText.trim()&&n.classList.add("active")})}))}const o=document.getElementById("image-crop");if(o){const e=document.getElementById("imageWidth").value,t=document.getElementById("imageHeight").value;new window.Cropper(o,{viewMode:1,scalable:!0,zoomable:!1,movable:!1,dragMode:"crop",cropBoxMovable:!0,cropBoxResizable:!0,autoCrop:!0,autoCropArea:1,background:!0,center:!0,minCanvasWidth:e,minCanvasHeight:t}),o.addEventListener("crop",l=>{document.getElementById("x").value=l.detail.x,document.getElementById("y").value=l.detail.y,document.getElementById("w").value=l.detail.width,document.getElementById("h").value=l.detail.height})}});