Remove the item vue and merge it into the tree vue for ease

joomla · Jun 21, 2022 · ee21ff6 · ee21ff6
1 parent 768f555
commit ee21ff6
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 106 deletions.
diff --git a/administrator/components/com_media/resources/scripts/components/tree/item.vue b/administrator/components/com_media/resources/scripts/components/tree/item.vue
diff --git a/administrator/components/com_media/resources/scripts/components/tree/tree.vue b/administrator/components/com_media/resources/scripts/components/tree/tree.vue
@@ -3,20 +3,40 @@
     class="media-tree"
     role="group"
   >
-    <media-tree-item
-      v-for="(item, index) in directories"
-      :key="item.path"
-      :counter="index"
-      :item="item"
-      :size="directories.length"
-      :level="level"
-    />
+    <li
+        v-for="(item, index) in directories"
+        :key="item.path"
+        class="media-tree-item"
+        :class="{active: isActive(item)}"
+        role="treeitem"
+        :aria-level="level"
+        :aria-setsize="directories.length"
+        :aria-posinset="index"
+        :tabindex="getTabindex(item)"
+    >
+      <a @click.stop.prevent="onItemClick(item)">
+        <span class="item-icon"><span :class="iconClass(item)" /></span>
+        <span class="item-name">{{ item.name }}</span>
+      </a>
+      <transition name="slide-fade">
+        <media-tree
+            v-if="hasChildren(item)"
+            v-show="isOpen(item)"
+            :aria-expanded="isOpen(item) ? 'true' : 'false'"
+            :root="item.path"
+            :level="(level+1)"
+        />
+      </transition>
+    </li>
   </ul>
 </template>
 
 <script>
+import navigable from '../../mixins/navigable.es6';
+
 export default {
   name: 'MediaTree',
+  mixins: [navigable],
   props: {
     root: {
       type: String,
@@ -36,5 +56,39 @@ export default {
         .sort((a, b) => ((a.name.toUpperCase() < b.name.toUpperCase()) ? -1 : 1));
     },
   },
+  methods: {
+    isActive(item) {
+      return (item.path === this.$store.state.selectedDirectory);
+    },
+    getTabindex(item) {
+      return item.isActive ? 0 : -1;
+    },
+    onItemClick(item) {
+      this.navigateTo(item.path);
+      window.parent.document.dispatchEvent(
+          new CustomEvent(
+              'onMediaFileSelected',
+              {
+                bubbles: true,
+                cancelable: false,
+                detail: {},
+              },
+          ),
+      );
+    },
+    hasChildren(item) {
+      return item.directories.length > 0;
+    },
+    isOpen(item) {
+      return this.$store.state.selectedDirectory.includes(item.path);
+    },
+    iconClass(item) {
+      return {
+        fas: false,
+        'icon-folder': !this.isOpen(item),
+        'icon-folder-open': this.isOpen(item),
+      };
+    },
+  }
 };
 </script>
diff --git a/administrator/components/com_media/resources/scripts/mediamanager.es6.js b/administrator/components/com_media/resources/scripts/mediamanager.es6.js
@@ -4,7 +4,6 @@ import App from './components/app.vue';
 import Disk from './components/tree/disk.vue';
 import Drive from './components/tree/drive.vue';
 import Tree from './components/tree/tree.vue';
-import TreeItem from './components/tree/item.vue';
 import Toolbar from './components/toolbar/toolbar.vue';
 import Breadcrumb from './components/breadcrumb/breadcrumb.vue';
 import Browser from './components/browser/browser.vue';
@@ -38,7 +37,6 @@ app.use(translate);
 app.component('MediaDrive', Drive);
 app.component('MediaDisk', Disk);
 app.component('MediaTree', Tree);
-app.component('MediaTreeItem', TreeItem);
 app.component('MediaToolbar', Toolbar);
 app.component('MediaBreadcrumb', Breadcrumb);
 app.component('MediaBrowser', Browser);