Fixed issue #133, templates file upload folder selection issue.

administrator/components/com_templates/tmpl/template/default_folders.php

@@ -15,7 +15,7 @@
 	<?php foreach($this->files as $key => $value) : ?>
 		<?php if (is_array($value)) : ?>
 			<li class="folder-select has-subtree">
-				<a class="folder-url" data-id="<?php echo base64_encode($key); ?>" href="">
+				<a class="folder-url" data-id="<?php echo base64_encode($key); ?>" href="javascript:void(0);">
 					<span class="icon-folder-2" aria-hidden="true"></span>
 					<?php $explodeArray = explode('/', $key); echo $this->escape(end($explodeArray)); ?>
 				</a>

administrator/components/com_templates/tmpl/template/default_tree.php

@@ -50,7 +50,7 @@
 
 			?>
 			<li class="<?php echo $class; ?> has-subtree">
-				<a class="folder-url" href="">
+				<a class="folder-url" href="javascript:void(0);">
 					<span class="icon-folder-2" aria-hidden="true"></span>
 					<span class="folder-name">&nbsp;<?php $explodeArray = explode('/', $key); echo $this->escape(end($explodeArray)); ?></span>
 				</a>

administrator/templates/khonsu/scss/blocks/_treeselect.scss

@@ -87,6 +87,13 @@
     position: relative;
     display: block;
     list-style: none;
+    line-height: 25px;
+
+    a {
+      &.folder-url {
+        padding-left: 5px;
+      }
+    }
 
    &::before {
       position: absolute;
@@ -118,7 +125,7 @@
   }
   .has-subtree {
     .directory-tree {
-      margin-left: ($treeselect-indent - 15px);
+      margin-left: ($treeselect-indent - 10px);
       margin-top: -5px;
       li {
         &:first-child {

build/media_source/com_templates/js/admin-templates-default.es6.js

@@ -9,8 +9,7 @@
     const folders = [].slice.call(document.querySelectorAll('.folder-url, .component-folder-url, .plugin-folder-url, .layout-folder-url'));
     const innerLists = [].slice.call(document.querySelectorAll('.folder ul, .component-folder ul, .plugin-folder ul, .layout-folder ul'));
     const openLists = [].slice.call(document.querySelectorAll('.show > ul'));
-    const fileModalFolders = [].slice.call(document.querySelectorAll('#fileModal .folder-url'));
-    const folderModalFolders = [].slice.call(document.querySelectorAll('#folderModal .folder-url'));
+
     // Hide all the folders when the page loads
     innerLists.forEach((innerList) => {
       innerList.style.display = 'none';
@@ -37,38 +36,65 @@
     });
 
     // File modal tree selector
-    fileModalFolders.forEach((fileModalFolder) => {
-      fileModalFolder.addEventListener('click', (event) => {
-        event.preventDefault();
+    document.getElementById('fileModal').addEventListener('joomla.modal.show', () => {
+      const fileModalFolders = [].slice.call(document.querySelectorAll('#fileModal .folder-url'));
 
-        fileModalFolders.forEach((fileModalFold) => {
-          fileModalFold.classList.remove('selected');
-        });
+      fileModalFolders.forEach((fileModalFolder) => {
+        fileModalFolder.addEventListener('click', (event) => {
+          event.preventDefault();
 
-        event.target.classList.add('selected');
+          fileModalFolders.forEach((fileModalFold) => {
+            fileModalFold.classList.remove('selected');
+          });
 
-        const listElsAddressToAdd = [].slice.call(document.querySelectorAll('#fileModal input.address'));
+          event.target.classList.add('selected');
 
-        listElsAddressToAdd.forEach((element) => {
-          element.value = event.target.getAttribute('data-id');
+          const listElsAddressToAdd = [].slice.call(document.querySelectorAll('#fileModal input.address'));
+
+          listElsAddressToAdd.forEach((element) => {
+            element.value = event.target.getAttribute('data-id');
+          });
+
+          // Expand/collapse folder
+          const children = fileModalFolder.nextElementSibling;
+          if (typeof children.style.display !== 'undefined') {
+            if (children.style.display === '' || children.style.display === 'block') {
+              children.style.display = 'none';
+            } else {
+              children.style.display = 'block';
+            }
+          }
         });
       });
     });
 
     // Folder modal tree selector
-    folderModalFolders.forEach((folderModalFolder) => {
-      folderModalFolder.addEventListener('click', (event) => {
-        event.preventDefault();
-
-        folderModalFolders.forEach((folderModalFldr) => {
-          folderModalFldr.classList.remove('selected');
-        });
-
-        event.target.classList.add('selected');
-        const listElsAddressToAdd = [].slice.call(document.querySelectorAll('#folderModal input.address'));
-
-        listElsAddressToAdd.forEach((element) => {
-          element.value = event.target.getAttribute('data-id');
+    document.getElementById('folderModal').addEventListener('joomla.modal.show', () => {
+      const folderModalFolders = [].slice.call(document.querySelectorAll('#folderModal .folder-url'));
+      folderModalFolders.forEach((folderModalFolder) => {
+        folderModalFolder.addEventListener('click', (event) => {
+          event.preventDefault();
+
+          folderModalFolders.forEach((folderModalFldr) => {
+            folderModalFldr.classList.remove('selected');
+          });
+
+          event.target.classList.add('selected');
+          const listElsAddressToAdd = [].slice.call(document.querySelectorAll('#folderModal input.address'));
+
+          listElsAddressToAdd.forEach((element) => {
+            element.value = event.target.getAttribute('data-id');
+          });
+
+          // Expand/collapse folder
+          const children = folderModalFolder.nextElementSibling;
+          if (typeof children.style.display !== 'undefined') {
+            if (children.style.display === '' || children.style.display === 'block') {
+              children.style.display = 'none';
+            } else {
+              children.style.display = 'block';
+            }
+          }
         });
       });
     });