Fix multi select behavior in Media Manager followup of 39824

administrator/components/com_media/resources/scripts/components/browser/browser.vue

@@ -64,6 +64,7 @@
           v-for="item in localItems"
           :key="item.path"
           :item="item"
+          :localItems="localItems"
         />
       </div>
     </div>

administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js

@@ -5,15 +5,19 @@ import Image from './image.vue';
 import Video from './video.vue';
 import Audio from './audio.vue';
 import Doc from './document.vue';
-import * as types from '../../../store/mutation-types.es6';
 import api from '../../../app/Api.es6';
+import onItemClick from '../utils/utils.es6';
 
 export default {
   props: {
     item: {
       type: Object,
       default: () => {},
     },
+    localItems: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -120,64 +124,7 @@ export default {
      * @param event
      */
     handleClick(event) {
-      if (this.item.path && this.item.type === 'file') {
-        window.parent.document.dispatchEvent(
-          new CustomEvent('onMediaFileSelected', {
-            bubbles: true,
-            cancelable: false,
-            detail: {
-              type: this.item.type,
-              name: this.item.name,
-              path: this.item.path,
-              thumb: this.item.thumb,
-              fileType: this.item.mime_type ? this.item.mime_type : false,
-              extension: this.item.extension ? this.item.extension : false,
-              width: this.item.width ? this.item.width : 0,
-              height: this.item.height ? this.item.height : 0,
-            },
-          }),
-        );
-      }
-
-      if (this.item.type === 'dir') {
-        window.parent.document.dispatchEvent(
-          new CustomEvent('onMediaFileSelected', {
-            bubbles: true,
-            cancelable: false,
-            detail: {
-              type: this.item.type,
-              name: this.item.name,
-              path: this.item.path,
-            },
-          }),
-        );
-      }
-
-      // Handle clicks when the item was not selected
-      if (!this.isSelected()) {
-        // Unselect all other selected items,
-        // if the shift key was not pressed during the click event
-        if (!(event.shiftKey || event.keyCode === 13)) {
-          this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-        }
-        this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-        return;
-      }
-      this.$store.dispatch('toggleBrowserItemSelect', this.item);
-      window.parent.document.dispatchEvent(
-        new CustomEvent('onMediaFileSelected', {
-          bubbles: true,
-          cancelable: false,
-          detail: {},
-        }),
-      );
-
-      // If more than one item was selected and the user clicks again on the selected item,
-      // he most probably wants to unselect all other items.
-      if (this.$store.state.selectedItems.length > 1) {
-        this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-        this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      }
+      return onItemClick(event, this);
     },
 
     /**

administrator/components/com_media/resources/scripts/components/browser/table/row.vue

@@ -47,6 +47,7 @@
 import api from '../../../app/Api.es6';
 import * as types from '../../../store/mutation-types.es6';
 import navigable from '../../../mixins/navigable.es6';
+import onItemClick from '../utils/utils.es6';
 
 export default {
   name: 'MediaBrowserItemRow',
@@ -56,6 +57,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    localItems: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     /* The dimension of a file */
@@ -136,49 +141,7 @@ export default {
      * @param event
      */
     onClick(event) {
-      const data = {
-        type: this.item.type,
-        name: this.item.name,
-        path: this.item.path,
-        thumb: false,
-        fileType: this.item.mime_type ? this.item.mime_type : false,
-        extension: this.item.extension ? this.item.extension : false,
-      };
-
-      if (this.item.type === 'file') {
-        data.thumb = this.item.thumb ? this.item.thumb : false;
-        data.width = this.item.width ? this.item.width : 0;
-        data.height = this.item.height ? this.item.height : 0;
-      }
-
-      window.parent.document.dispatchEvent(
-        new CustomEvent(
-          'onMediaFileSelected',
-          {
-            bubbles: true,
-            cancelable: false,
-            detail: data,
-          },
-        ),
-      );
-
-      // Handle clicks when the item was not selected
-      if (!this.isSelected()) {
-        // Unselect all other selected items,
-        // if the shift key was not pressed during the click event
-        if (!(event.shiftKey || event.keyCode === 13)) {
-          this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-        }
-        this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-        return;
-      }
-
-      // If more than one item was selected and the user clicks again on the selected item,
-      // he most probably wants to unselect all other items.
-      if (this.$store.state.selectedItems.length > 1) {
-        this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-        this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      }
+      return onItemClick(event, this);
     },
 
   },

administrator/components/com_media/resources/scripts/components/browser/table/table.vue

@@ -116,6 +116,7 @@
         v-for="item in localItems"
         :key="item.path"
         :item="item"
+        :local-items="localItems"
       />
     </tbody>
   </table>

administrator/components/com_media/resources/scripts/components/browser/utils/utils.es6.js

@@ -0,0 +1,89 @@
+import * as types from '../../../store/mutation-types.es6';
+
+/**
+ * Handle the click event
+ * @param event
+ * @param ctx  the context
+ */
+export default function onItemClick(event, ctx) {
+  if (ctx.item.path && ctx.item.type === 'file') {
+    window.parent.document.dispatchEvent(
+      new CustomEvent('onMediaFileSelected', {
+        bubbles: true,
+        cancelable: false,
+        detail: {
+          type: ctx.item.type,
+          name: ctx.item.name,
+          path: ctx.item.path,
+          thumb: ctx.item.thumb,
+          fileType: ctx.item.mime_type ? ctx.item.mime_type : false,
+          extension: ctx.item.extension ? ctx.item.extension : false,
+          width: ctx.item.width ? ctx.item.width : 0,
+          height: ctx.item.height ? ctx.item.height : 0,
+        },
+      }),
+    );
+  }
+
+  if (ctx.item.type === 'dir') {
+    window.parent.document.dispatchEvent(
+      new CustomEvent('onMediaFileSelected', {
+        bubbles: true,
+        cancelable: false,
+        detail: {
+          type: this.item.type,
+          name: this.item.name,
+          path: this.item.path,
+        },
+      }),
+    );
+  }
+
+  // Handle clicks when the item was not selected
+  if (!ctx.isSelected()) {
+    // Handle clicks when ctrl key was pressed
+    if (event[/Mac|Mac OS|MacIntel/gi.test(window.navigator.userAgent) ? 'metaKey' : 'ctrlKey'] || event.keyCode === 17) {
+      ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
+
+      return;
+    }
+
+    // Unselect when shift key is not pressed
+    if (!event.shiftKey && event.keyCode !== 13) {
+      ctx.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+      ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
+
+      return;
+    }
+
+    const currentIndex = ctx.localItems.indexOf(ctx.$store.state.selectedItems[0]);
+    const endIndex = ctx.localItems.indexOf(ctx.item);
+    // Handle selections from up to down
+    if (currentIndex < endIndex) {
+      ctx.localItems.slice(currentIndex, endIndex + 1).forEach((element) => ctx.$store.commit(types.SELECT_BROWSER_ITEM, element));
+
+      return;
+    }
+
+    // Handle selections from down to up
+    ctx.localItems.slice(endIndex, currentIndex).forEach((element) => ctx.$store.commit(types.SELECT_BROWSER_ITEM, element));
+
+    return;
+  }
+
+  ctx.$store.dispatch('toggleBrowserItemSelect', ctx.item);
+  window.parent.document.dispatchEvent(
+    new CustomEvent('onMediaFileSelected', {
+      bubbles: true,
+      cancelable: false,
+      detail: {},
+    }),
+  );
+
+  // If more than one item was selected and the user clicks again on the selected item,
+  // he most probably wants to unselect all other items.
+  if (ctx.$store.state.selectedItems.length > 1) {
+    ctx.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+    ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
+  }
+}